Playwright 面试必备：测试工程师的实战指南

const browser = await chromium.launch({ headless: false });

await page.goto('/product');
await page.waitForLoadState('networkidle'); // 等待网络空闲

// 或者更精准的等待
await page.waitForSelector('.product-list', { state: 'visible' });

page.on('dialog', async dialog => {
  console.log('弹窗内容：', dialog.message());
  await dialog.accept(); // 点确定
});

await page.screenshot({ path: 'result.png' })

const context = await browser.newContext({
  recordVideo: { dir: 'videos/' }
});

// playwright.config.ts
export default defineConfig({
  use: {
    // 所有测试都录屏（CI上会很耗资源）
    video: 'on-first-retry', // 推荐：只在第一次重试时录屏
    // 或 'retain-on-failure' // 只在失败时保留
  },
});

# 常见安装问题及解决方案
# 1. 网络问题导致下载失败
# 解决方案：设置国内镜像
npm config set registry https://registry.npmmirror.com
PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright npx playwright install

# 2. 权限问题
# 在Linux/Mac上可能需要sudo
# 或使用--user当前用户安装

# 3. 版本兼容性
# 确保package.json中的版本一致

// 给新人的最小可运行示例
import { test, expect } from '@playwright/test';

test('我的第一个测试', async ({ page }) => {
  // 1. 导航到页面
  await page.goto('https://demo.playwright.dev/todomvc');
  
  // 2. 执行操作
  await page.fill('.new-todo', '学习Playwright');
  await page.press('.new-todo', 'Enter');
  
  // 3. 验证结果
  await expect(page.locator('.todo-list li')).toHaveText('学习Playwright');
  
  // 4. 添加等待（如果需要）
  await page.waitForTimeout(1000); // 仅用于调试，生产环境避免使用
});

// "尽量避免复杂的XPath，因为：
// 1. 可读性差，维护困难
// 2. 前端改动一点就可能失效
// 3. 容易写出低效的选择器
// 但如果不得不使用CSS/XPath，也要学会正确使用：
// ✅ 相对稳定的CSS选择器
await page.locator('[data-testid="submit-btn"]').click();
await page.locator('form.login-form > button[type="submit"]').click();

// ❌ 避免使用的XPath
// await page.locator('//div[3]/span[2]').click(); // 脆弱！
// await page.locator('//*[@id="app"]/div[2]/button').click(); // 更脆弱！

await page.getByText('立即下单').locator('..').click();

await page.getByText('提交订单').scrollIntoViewIfNeeded();
await page.getByText('提交订单').click();

const fileInput = page.locator('input[type="file"]');
await fileInput.setInputFiles('./test.pdf');
✅ 支持传数组：setInputFiles(['a.pdf', 'b.jpg'])

// Windows/Linux
await page.keyboard.press('Control+C');

// macOS
await page.keyboard.press('Meta+A');

await page.route('**/api/user/info', route => {
  route.fulfill({ json: { name: '测试用户', role: 'admin' } });
});

const [response] = await Promise.all([
  page.waitForResponse(resp => resp.url().includes('/order')),
  page.click('text=提交订单')
]);

expect(response.status()).toBe(200);

await page.route('**/api/*', route => {
  // 模拟断网
  route.abort();

  // 或模拟慢速（5秒后返回）
  // setTimeout(() => route.continue(), 5000);
});

page.on('requestfinished', req => {
  const timing = req.timing();
  console.log('TTFB:', timing.responseStart - timing.requestStart);
});

// 更适合新人的目录结构
src/
├── pages/                    // 页面对象
│   ├── BasePage.ts          // 基础页面类
│   ├── LoginPage.ts
│   ├── HomePage.ts
│   └── components/          // 可复用的组件
│       └── Header.ts
├── tests/
│   ├── specs/               // 测试用例
│   │   ├── login.spec.ts
│   │   └── checkout.spec.ts
│   ├── fixtures/            // 测试夹具
│   │   └── test-data.ts
│   └── utils/               // 工具函数
│       ├── helpers.ts
│       └── assertions.ts
└── playwright.config.ts

// 示例：BasePage.ts - 新人可以从这里开始
export class BasePage {
  constructor(protected page: Page) {}
  
  // 常用方法的封装
  async waitAndClick(selector: string) {
    await this.page.waitForSelector(selector);
    await this.page.click(selector);
  }
  
  async typeAndEnter(selector: string, text: string) {
    await this.page.fill(selector, text);
    await this.page.press(selector, 'Enter');
  }
}

// LoginPage.ts
export class LoginPage {
  constructor(private page: Page) {}

  async login(username: string, password: string) {
    await this.page.fill('#user', username);
    await this.page.fill('#pwd', password);
    await this.page.click('#submit');
  }
}

projects: [
  { name: 'Chrome', use: { ...devices['Desktop Chrome'] } },
  { name: 'Firefox', use: { ...devices['Desktop Firefox'] } }
]

//yaml
container: mcr.microsoft.com/playwright:v1.40.0-focal

function createUser(role: 'admin' | 'user') {
  return { email: `test_${role}@xx.com`, role };
}

  maxDiffPixelRatio: 0.01,
  mask: [page.getByText(new Date().toLocaleDateString())] // 忽略日期
});

const { devices } = require('@playwright/test');
const context = await browser.newContext(devices['iPhone 14 Pro']);