Playwright自动化测试

作者：瞿丹丹  浏览 2307 发布时间： 更新时间：

一、安装 Playwright

首先，你需要安装 Playwright 及其依赖的浏览器：

  1. bash 运行
  2. npm init playwright@latest

安装过程中，Playwright 会自动下载并安装所需的浏览器驱动。

二、常见的元素定位方法和示例

1. 使用选择器定位元素

Playwright 支持多种选择器语法，包括 CSS、XPath、文本内容等：

CSS 选择器（最常用）

  1. javascript 运行
  2. // 通过ID定位
  3. await page.locator('#username').fill('testuser');
  5. // 通过类名定位
  6. await page.locator('.btn-primary').click();
  8. // 通过属性定位
  9. await page.locator('input\[type="password"\]').fill('password');
  11. // 组合选择器
  12. await page.locator('div.card > button.submit').click();

XPath 选择器

  1. javascript 运行
  2. // 使用XPath定位
  3. await page.locator('//div\[@\]//a\[text()="Sign Up"\]').click();

文本选择器

  1. javascript 运作
  2. // 通过文本内容定位按钮
  3. await page.locator('text=Submit Form').click();
  5. // 部分文本匹配（包含"Save"的元素）
  6. await page.locator('text=Save').click();
  8. // 区分大小写的文本匹配
  9. await page.locator('text="Login"').click();

2. 基于角色定位（推荐）

Playwright 提供了基于语义角色的定位方式，更符合用户交互习惯：

  1. javascript 运行
  2. // 定位按钮（role="button"）
  3. await page.getByRole('button', { name: 'Submit' }).click();
  5. // 定位链接
  6. await page.getByRole('link', { name: 'Learn More' }).click();
  8. // 定位输入框
  9. await page.getByRole('textbox', { name: 'Email' }).fill('test@example.com');
  11. // 定位复选框
  12. await page.getByRole('checkbox', { name: 'Remember me' }).check();

3. 基于标签和文本组合定位

  1. javascript 运行
  2. // 定位包含特定文本的div
  3. await page.locator('div:has-text("Welcome")').click();
  5. // 定位包含子元素的父元素
  6. await page.locator('article:has(img.thumbnail)').click();

4. 链式定位

通过链式调用定位更精确的元素：

  1. javascript 运行
  2. // 先定位表单，再定位其中的按钮
  3. const form = page.locator('form.login-form');
  4. await form.locator('button\[type="submit"\]').click();
  6. // 定位下一个兄弟元素
  7. await page.locator('input#username').locator('xpath=following-sibling::button').click();

5. 使用页面元素引用

先获取元素引用，再执行操作：

  1. javascript 运行
  2. const element = await page.locator('button.submit');
  3. await element.click();
  4. await expect(element).toHaveText('Submitted');

6. 处理动态元素

使用nth()选择多个匹配元素中的第 N 个（索引从 0 开始）：

  1. javascript 运行
  2. // 选择第三个列表项
  3. await page.locator('ul.items > li').nth(2).click();
  5. // 选择最后一个元素
  6. const items = await page.locator('ul.items > li');
  7. await items.nth(await items.count() - 1).click();

7. 等待元素状态

Playwright 会自动等待元素可交互，但也可以显式等待特定状态：

  1. javascript 运行
  2. // 等待元素可见后点击
  3. await page.locator('div.loading').waitFor({ state: 'hidden' });
  4. await page.locator('button.submit').click();
  6. // 等待元素启用
  7. await page.locator('button').waitFor({ state: 'enabled' });

8. 调试定位问题

使用page.pause()暂停测试，或使用console.log()输出元素信息：

  1. javascript 运行
  2. // 打印匹配的元素数量S
  3. const count = await page.locator('div.item').count();
  4. console.log(\`找到 ${count} 个元素\`);
  6. // 调试模式（需安装playwright CLI）
  7. await page.pause(); // 会打开浏览器调试工具

三、编写第一个测试用例

下面是一个使用 Playwright 测试 GitHub 登录页面的示例：

  1. javascript 运行
  2. // tests/github-login.spec.jsconst { test, expect } = require('@playwright/test');
  3. test('GitHub登录测试', async ({ page }) => {
  5. // 访问GitHub登录页面
  6. await page.goto('https://github.com/login');
  8. // 填写用户名和密码
  9. await page.fill('input\[name="login"\]', 'your\_username');
  10. await page.fill('input\[name="password"\]', 'your\_password');
  12. // 点击登录按钮
  13. await page.click('input\[type="submit"\]');
  15. // 断言登录成功后页面会跳转到仪表盘
  16. await expect(page).toHaveURL('https://github.com/');
  18. // 断言页面包含用户头像元素
  19. await expect(page.locator('.avatar-user')).toBeVisible();});

四、运行测试

使用以下命令运行测试：

  1. bash 运行
  2. npx playwright test

五、测试报告

运行测试后，可以生成 HTML 报告查看详细结果：

  1. bash 运行
  2. npx playwright show-report

六、更多高级功能

1. 浏览器上下文和多页面测试

  1. javascript 运行
  2. test('多页面交互测试', async ({ browser }) => {
  3. const context = await browser.newContext();
  4. const page1 = await context.newPage();
  5. const page2 = await context.newPage();
  7. // 在不同页面执行操作
  8. await page1.goto('https://example.com');
  9. await page2.goto('https://another-example.com');
  10. // 断言两个页面的交互结果
  11. });

2. 自动等待和断言

Playwright 会自动等待元素可点击、可见等状态，减少了手动添加等待的代码：

  1. javascript 运行
  2. // 无需手动添加等待，Playwright会自动等待按钮可点击
  3. await page.click('button:has-text("Submit")');

3. 调试工具

使用—debug参数可以进入调试模式：

  1. bash 运行
  2. npx playwright test --debug

4. 截屏和视频录制

  1. javascript 运行
  2. test('截屏测试', async ({ page }) => {
  3. await page.goto('https://example.com');
  4. await page.screenshot({ path: 'screenshot.png' });
  5. });