Playwright技能从入门到精通：自动化测试实战指南

2次阅读

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

在当前的软件开发中，自动化测试已经成为保证产品质量的重要手段。传统的自动化测试工具如 Selenium 虽然功能强大，但存在一些局限性，比如跨浏览器兼容性问题、执行速度慢等。Playwright 作为微软开源的现代化自动化测试工具，具有以下优势：

支持 Chromium、WebKit 和 Firefox 三大浏览器引擎
提供自动等待机制，减少测试代码中的显式等待
跨平台支持，可以在 Windows、macOS 和 Linux 上运行
内置网络拦截和模拟功能
执行速度快，性能优异

确保已安装 Node.js（建议使用 LTS 版本）
创建一个新的项目目录并初始化 npm

mkdir playwright-demo && cd playwright-demo
npm init -y

安装 Playwright 及相关依赖

npm install playwright @playwright/test

安装浏览器（这可能会花费一些时间）

npx playwright install

Playwright 的核心概念围绕三个主要对象：

Browser：代表一个浏览器实例
BrowserContext：相当于独立的浏览器会话（可以理解为无痕模式）
Page：代表一个标签页

下面是这些对象的基本使用方法：

import {chromium} from 'playwright';

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

// 创建上下文
const context = await browser.newContext();

// 创建页面
const page = await context.newPage();

// 导航到网址
await page.goto('https://example.com');

// 执行操作...

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

下面是一个完整的用户登录测试案例，包含了页面操作、断言和清理：

import {test, expect} from '@playwright/test';

// 使用 Playwright 的测试运行器编写测试用例
test('用户登录测试', async ({ page}) => {
  // 导航到登录页面
  await page.goto('https://example.com/login');

  // 填写用户名和密码
  await page.fill('#username', 'testuser');
  await page.fill('#password', 'password123');

  // 点击登录按钮
  await page.click('button[type="submit"]');

  // 等待导航完成
  await page.waitForNavigation();

  // 验证登录成功
  await expect(page).toHaveURL('https://example.com/dashboard');
  await expect(page.locator('.welcome-message')).toContainText('Welcome, testuser!');
});

Playwright 可以轻松实现跨浏览器测试。只需在配置文件中指定不同的浏览器即可：

// playwright.config.ts
import {PlaywrightTestConfig, devices} from '@playwright/test';

const config: PlaywrightTestConfig = {
  projects: [
    {
      name: 'chromium',
      use: {...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: {...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: {...devices['Desktop Safari'] },
    },
  ],
};

export default config;

使用 context 复用浏览器会话，减少启动开销
并行执行测试用例
使用 page.waitForSelector() 而不是sleep
禁用不必要的资源加载

const context = await browser.newContext({
  // 禁用图片加载以加速测试
  bypassCSP: true,
  ignoreHTTPSErrors: true,
  viewport: {width: 1280, height: 720},
  javaScriptEnabled: true,
});