10.1 Playwright 基础：定位、点击、输入、截图

// Playwright：一行代码，自动等待元素就绪后点击
await page.click('#submit-btn');

// Selenium：需要手动编写显式等待
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
wait.until(ExpectedConditions.elementToBeClickable(By.id("submit-btn"))).click();

// 语义化 API，一看就懂
await page.goto('https://example.com');
await page.getByRole('button', { name: '登录' }).click();
await page.getByLabel('用户名').fill('admin');

// Mock API 返回 500 错误，测试前端容错
await page.route('**/api/users', route => 
  route.fulfill({ status: 500, body: 'Server Error' })
);

# 安装 Playwright
npm init playwright@latest

# 或 Python 版本
pip install playwright
playwright install

// ✅ 推荐：Role + name 组合（最接近用户视角）
await page.getByRole('button', { name: 'Sign in' }).click();

// ✅ 推荐：Placeholder 定位输入框
await page.getByPlaceholder('请输入用户名').fill('admin');

// ✅ 推荐：自定义 data-testid（最稳定）
await page.getByTestId('submit-button').click();

// ❌ 避免：依赖动态 class 或 id
await page.click('.btn-primary-abc123');  // 不稳定

// 同时满足两个条件
const submitBtn = page.getByRole('button').and(page.getByTitle('提交'));

// 多选一：匹配任意一个
const newEmail = page.getByRole('button', { name: 'New email' });
const dialog = page.getByText('Security settings');
await expect(newEmail.or_(dialog)).toBeVisible();

// 基础点击
await page.getByRole('button', { name: '登录' }).click();

// 双击
await page.getByText('提交').dblclick();

// 右键点击
await page.getByRole('button').click({ button: 'right' });

// 强制点击（跳过可操作性检查）
await page.getByRole('button').click({ force: true });

// 悬停（触发下拉菜单等）
await page.getByText('设置').hover();

// 拖拽
await page.dragAndDrop('#item1', '#dropzone');

// ✅ 推荐：fill 快速填入（自动清空原有内容）
await page.getByLabel('用户名').fill('testuser');
await page.getByPlaceholder('密码').fill('secret123');

// 逐字输入（模拟真实打字，可配合 delay）
await page.getByRole('textbox').pressSequentially('Hello World', { delay: 100 });

// 键盘按键
await page.getByRole('textbox').press('Enter');
await page.keyboard.press('Control+a');  // 组合键

// 清空输入框
await page.getByRole('textbox').clear();

// 下拉选择
await page.getByLabel('城市').selectOption('Beijing');

// 文件上传
await page.locator('input[type="file"]').setInputFiles('./photo.jpg');

// 1. 页面截图（视口区域）
await page.screenshot({ path: 'screenshot.png' });

// 2. 全页截图（完整滚动页面）
await page.screenshot({ path: 'fullpage.png', fullPage: true });

// 3. 元素截图
await page.getByRole('img', { name: 'Logo' }).screenshot({ path: 'logo.png' });

// 4. 二进制数据（用于比对或上传）
const buffer = await page.screenshot();

await page.screenshot({
  path: 'result.png',
  type: 'jpeg',           // png(默认) | jpeg
  quality: 80,            // jpeg 质量 0-100
  fullPage: true,         // 滚动截取完整页面
  clip: { x: 0, y: 0, width: 800, height: 600 },  // 裁剪区域
  omitBackground: true,   // 透明背景
  animations: 'disabled'  // 禁用CSS动画
});

export default defineConfig({
  use: {
    screenshot: 'only-on-failure',  // 失败时自动截图
    video: 'on-first-retry'         // 重试时录制视频
  }
});

const { chromium } = require('playwright');

(async () => {
  // 1. 启动浏览器
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  // 2. 导航到登录页
  await page.goto('https://github.com/login');

  // 3. 定位并输入（使用语义化定位器）
  await page.getByLabel('Username or email address').fill('your_username');
  await page.getByLabel('Password').fill('your_password');

  // 4. 点击登录
  await page.getByRole('button', { name: 'Sign in' }).click();

  // 5. 等待导航完成
  await page.waitForURL('https://github.com/');

  // 6. 截图保存
  await page.screenshot({ path: 'github_homepage.png', fullPage: true });
  console.log('登录成功，已截图');

  // 7. 关闭浏览器
  await browser.close();
})();

是否需要支持 Safari/跨浏览器？
├── 是 → 排除 Cypress，考虑 Playwright 或 Selenium
│       是否需要 IE11 支持？
│       ├── 是 → 选 Selenium
│       └── 否 → 选 Playwright
└── 否 → 团队技术栈是否为纯 JS/TS？
        ├── 是 → Cypress 或 Playwright（推荐 Playwright 获得更好稳定性）
        └── 否（Java/Python 等）→ 选 Playwright