常用Playwright代码片段-Part3

1.高效处理身份验证

无需在每次测试中都登录，而是重复使用身份验证状态

test.beforeAll(async ({ browser }) => {
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto('https://example.com/login');
    await page.fill('[data-testid="username"]', 'testuser');
    await page.fill('[data-testid="password"]', 'password123');
    await page.click('[data-testid="login-button"]');
    await context.storageState({ path: 'auth.json' }); // Save session
    await context.close();
});
//Reuse Saved Authentication
test.use({ storageState: 'auth.json' });
test('should navigate to dashboard', async ({ page }) => {
    await page.goto('https://example.com/dashboard');
    await expect(page.locator('[data-testid="welcome-message"]')).toBeVisible();
});

通过避免重复登录，这大大加快了测试速度

2.视觉回归测试

test('homepage should look correct', async ({ page }) => {
    await page.goto('https://example.com');
    expect(await page.screenshot()).toMatchSnapshot('homepage.png');
});

运行测试，Playwright 会将新屏幕截图与基线进行比较

3.测试文件上传

Playwright 可以直接处理文件上传

test('should upload a file', async ({ page }) => {
    await page.goto('https://example.com/upload');
    await page.setInputFiles('[data-testid="file-upload"]', 'test-file.png');
    await expect(page.locator('[data-testid="upload-success"]')).toBeVisible();
});

4.测试剪贴板和复制粘贴

模拟用户与剪贴板的交互

test('copy-paste text', async ({ page }) => {
    await page.goto('https://example.com');
    await page.locator('[data-testid="input"]').fill('Hello Playwright');
    await page.locator('[data-testid="input"]').press('Control+A');
    await page.locator('[data-testid="input"]').press('Control+C');
    await page.locator('[data-testid="input"]').press('Control+V');
    await expect(page.locator('[data-testid="input"]')).toHaveValue('Hello PlaywrightHello Playwright');
});

5.模拟地理定位

使用 Playwright 的地理定位功能测试基于位置的功能

test.use({ geolocation: { latitude: 37.7749, longitude: -122.4194 } });
test('should detect user location', async ({ page }) => {
    await page.goto('https://example.com/location');
    await expect(page.locator('[data-testid="user-location"]')).toContainText('San Francisco');
});

6.模拟网络速度

测试您的应用在慢速网络条件下的表现

test('test in slow network', async ({ page, context }) => {
    await context.route('**/*', route =>
        route.continue({ latency: 2000 }) // Simulate 2s delay
    );
    await page.goto('https://example.com');
});

7.模拟黑暗模式

在黑暗模式下测试 UI 行为

test.use({ colorScheme: 'dark' });
test('should display dark mode correctly', async ({ page }) => {
    await page.goto('https://example.com');
    await expect(page.locator('body')).toHaveCSS('background-color', 'rgb(0, 0, 0)');
});

8.与 Shadow DOM 元素交互

一些框架(例如，Web Components、Salesforce)使用Shadow DOM，需要shadowRoot访问权限

test('should handle shadow DOM elements', async ({ page }) => {
    await page.goto('https://example.com');
    const shadowHost = page.locator('custom-element');
    const shadowElement = shadowHost.locator('>>> #shadow-child');
    await expect(shadowElement).toBeVisible();
});

9.测试渐进式 Web 应用程序(PWAs)

验证服务工作者和离线行为

test('should work offline', async ({ page, context }) => {
    await page.goto('https://example.com');
    await context.serviceWorkers();
    await context.setOffline(true);
    await page.reload();
    await expect(page.locator('[data-testid="offline-message"]')).toBeVisible();
});

10.处理动态验证码

对于自动化测试，通过模拟请求来绕过验证码

test('bypass CAPTCHA', async ({ page }) => {
    await page.route('**/captcha-verification', async (route) => {
        await route.fulfill({ status: 200, body: JSON.stringify({ success: true }) });
    });
    await page.goto('https://example.com/login');
});