Playwright 新手入门：从零搭建自动化测试框架的实战指南

9次阅读

没有评论

共计 3065 个字符，预计需要花费 8 分钟才能阅读完成。

在日常的软件开发中，测试是不可或缺的一环。尤其是对于复杂的业务流程，比如电商平台的下单流程，手工测试会面临很多挑战。

重复性高 ：每次版本更新都需要重复测试相同的流程，耗时耗力。
容易出错 ：手工操作容易遗漏步骤或输入错误数据。
难以覆盖所有场景 ：比如不同浏览器、不同设备上的兼容性测试，手工测试几乎无法全面覆盖。

在自动化测试领域，Selenium、Cypress 和 Playwright 是三个主流的工具，它们在架构设计、执行效率和调试体验上各有优劣。

架构：基于 WebDriver 协议，需要额外的浏览器驱动。
执行效率 ：较慢，因为需要通过 WebDriver 与浏览器通信。
调试体验 ：调试工具相对简单，依赖浏览器的开发者工具。

架构：直接在浏览器中运行，不需要额外的驱动。
执行效率 ：较快，因为直接在浏览器中执行。
调试体验 ：内置强大的调试工具，支持实时重载和时间旅行调试。

架构：基于 Chromium、WebKit 和 Firefox 的自动化 API，无需额外的驱动。
执行效率 ：最快，支持多浏览器并行测试。
调试体验 ：提供丰富的调试工具，包括录制、截图和视频录制功能。

首先，确保你已经安装了 Node.js（建议版本 12+）。然后通过 npm 安装 Playwright：

npm init playwright@latest

安装完成后，可以通过以下代码初始化浏览器：

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

(async () => {const browser = await chromium.launch({ headless: false}); // 启动非无头模式
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await browser.close();})();

如果需要配置代理或认证，可以在 launch 方法中设置：

const browser = await chromium.launch({proxy: { server: 'http://proxy.example.com:8080'},
  headless: false
});

Playwright 提供了多种元素定位方式，以下是几种常用的方法：

CSS 选择器 ：适用于大多数静态元素。

await page.click('button.submit');

XPath：适用于复杂或动态生成的元素。

await page.click('//button[contains(text(),"Submit")]');

文本定位 ：直接通过文本内容定位。

await page.click('text=Submit');

现代 Web 应用大量使用异步加载和动态内容，Playwright 提供了多种等待策略：

自动等待 ：Playwright 在执行操作前会自动等待元素可交互。

await page.click('button.submit'); // 自动等待按钮可点击

显式等待 ：可以手动设置超时和条件。

await page.waitForSelector('div.success', { timeout: 5000}); // 等待 5 秒

网络请求等待 ：等待特定请求完成。

await page.waitForResponse('https://api.example.com/data');

以下是一个完整的测试用例，使用页面对象模型（Page Object）和 fixtures 管理测试生命周期：

const {test, expect} = require('@playwright/test');

// 页面对象模型
class LoginPage {constructor(page) {this.page = page;}

  async navigate() {await this.page.goto('https://example.com/login');
  }

  async login(username, password) {await this.page.fill('input[name="username"]', username);
    await this.page.fill('input[name="password"]', password);
    await this.page.click('button.submit');
  }
}

// 测试用例
test('用户登录测试', async ({ page}) => {const loginPage = new LoginPage(page);
  await loginPage.navigate();
  await loginPage.login('testuser', 'password123');

  // 断言登录成功
  await expect(page).toHaveURL('https://example.com/dashboard');
});

Playwright 支持并行执行测试，可以通过配置 workers 实现：

// playwright.config.js
module.exports = {workers: 4, // 使用 4 个 worker 并行执行};

Playwright 可以录制测试过程的视频，方便调试：

// playwright.config.js
module.exports = {
  use: {video: 'on', // 开启视频录制},
};

可以将 Playwright 测试集成到 CI/CD 流水线中，比如 GitHub Actions：

name: Playwright Tests

on: [push]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '14'
      - run: npm install
      - run: npx playwright test

使用 Playwright 的 page.context().addCookies() 方法添加 Cookie。
验证登录状态是否生效。

示例代码：

const {test, expect} = require('@playwright/test');

test('Cookie 登录测试', async ({ page}) => {await page.context().addCookies([
    {
      name: 'session',
      value: 'abc123',
      url: 'https://example.com',
    },
  ]);

  await page.goto('https://example.com/dashboard');
  await expect(page).toHaveURL('https://example.com/dashboard');
});

希望这篇指南能帮助你快速入门 Playwright，轻松搭建自动化测试框架！如果有任何问题，欢迎在评论区留言讨论。

正文完