Playwright 自动化测试入门

软件测试 Oct 22, 2021

目前市场上自动化测试工具有很多,有客户端,浏览器端,移动端等。比较现代的自动化测试工具有Puppeteer, Selenium, Playwright, Cypress,你可以在这里查看它们之间的差异对比。Puppeteer, Selenium, Playwright, Cypress 如何选择?

Playwright 既可以作为 Playwright Test 测试运行器的一部分(本指南),也可以作为Playwright 库使用。

Playwright Test 是专门为适应端到端测试的需要而创建的。它能做你所期望的常规测试运行器的一切,Playwright Test可以做到以下:

  • 在所有浏览器上运行测试。
  • 并行执行测试。
  • 享受开箱即用的上下文隔离。
  • 在失败时捕获视频、屏幕截图和其他人工制品。
  • 将你的POMs整合为可扩展的固定装置。

安装

在需要进行测试的目录下进行安装 Playwright Test,

# 安装palywright test
npm i -D @playwright/test
# 安装支持的浏览器(默认安装全部)
npx playwright install

npx playwright install默认会安装三大内核浏览器,可指定安装以下类型浏览器:
chromium, chrome, chrome-beta, msedge, msedge-beta, msedge-dev, firefox, webkit
Playwright 支持 Chromium 84+, Firefox 76+, Safari/WebKit 13+

指定浏览器:
不推荐,Playwright每个版本都有对应的浏览器匹配,修改其他浏览器版本可能会存在兼容问题

const playwright = require('playwright');

(async () => {
  const browser = await playwright.chromium.launch({
    executablePath: '/your/custom/chromium'
  });
  const page = await browser.newPage();
  await page.goto('http://whatsmyuseragent.org/');
  await page.screenshot({ path: `example.png` });
  await browser.close();
})();

Playwright 下载 Chromium, WebKit 和 Firefox 浏览器默认保存到操作系统特定的缓存目录下:

Windows: %USERPROFILE%\AppData\Local\ms-playwright 
MacOS: ~/Library/Caches/ms-playwright
Linux: ~/.cache/ms-playwright

第一个demo

在测试目录下创建js文件 tests/foo.spec.js (或ts文件 tests/foo.spec.ts) 来定义你的测试。

注意:文件必须以spec.js结尾,否则直接测试时会忽略。

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

test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  const title = page.locator('.navbar__inner .navbar__title');
  await expect(title).toHaveText('Playwright');
});
import { test, expect } from '@playwright/test';

test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  const title = page.locator('.navbar__inner .navbar__title');
  await expect(title).toHaveText('Playwright');
});

现在你可以运行你的测试集,确保你的测试文件在tests目录中。

npx playwright test

Playwright Test刚刚使用Chromium浏览器,以无头(无图形)方式进行了一次测试。可以通过参数来指定用使用有头(图形)浏览器来运行。

npx playwright test --headed

也可以通过配置参数来制定使用其他浏览器进行测试:

npx playwright test --browser=firefox

或者,使用全部浏览器(chromium,firefox, webkit)进行测试

npx playwright test --browser=all

常用命令

# 运行所有测试
npx playwright test

# 运行单个测试文件
npx playwright test tests/todo-page.spec.ts

# 运行测试集
npx playwright test tests/todo-page/ tests/landing-page/

# 运行包含my-spec 或 my-spec-2 文件名的测试
npx playwright test my-spec my-spec-2

# 运行附带标题的测试
npx playwright test -g "add a todo item"

# 使用带头浏览器运行测试
npx playwright test --headed

# 使用特定浏览器运行测试
npx playwright test --browser=webkit

# 使用所有浏览器运行测试
npx playwright test --browser=all

# 串行化运行测试
npx playwright test --workers=1

# 指定报告类型
npx playwright test --reporter=dot

# 使用Playwright检查器在调试模式下运行
npx playwright test --debug

# 使用帮助
npx playwright test --help

生成测试脚本

Playwright具有生成测试的能力,开箱即用。

npx playwright codegen jd.com

运行codegen并在浏览器中执行动作。Playwright将生成用户交互的代码。codegen将生成可编辑的基于文本的选择器。

保存认证信息

使用-save-storage运行codegen,在会话结束时保存cookies和localStorage。保存认证信息可以将测试用例进行接耦,比如需要登入验证的信息,保存认证后后续的测试用例可以直接加载认证信息使用,无需每次重复登入。

npx playwright codegen --save-storage=auth.json

用--load-storage运行,以消耗以前加载的存储。这样,所有的cookies和localStorage将被恢复,使大多数网络应用进入认证状态。

# 加载认证信息并打开网站
npx playwright open --load-storage=auth.json jd.com
# 加载认证信息并进行测试用例录制
npx playwright codegen --load-storage=auth.json jd.com

模拟设备

你可以在模拟设备的同时记录脚本和测试。

# 模拟 IPhone 11 进行录制测试脚本
npx playwright codegen --device="iPhone 11" wikipedia.org

调试工具

Playwright脚本可与现有的调试工具一起使用,如Node.js调试器和浏览器开发工具。Playwright还为浏览器自动化引入了新的调试功能。

Playwright Inspector

Playwright Inspector是一个GUI工具,帮助编写和调试Playwright脚本。这是默认推荐的脚本故障排除工具。

Playwright Inspector

Playwright Trace Viewer

Playwright Trace Viewer是一个GUI工具,有助于以事后分析的方式对测试运行进行故障排除。

Playwright Trace Viewer

生成报告

Playwright Test有一些内置的报告器,可以满足不同的需求,也可以提供自定义报告器。尝试内置报告器的最简单方法是通过 --reporter 命令行选项。

内置报告器

所有内置的报告器都显示关于失败的详细信息,对于成功运行的报告器来说,大多有不同的粗体字。

列表报告器


List reporter是默认的(除了在CI上,那里的dot reporter是默认的)。它为每个正在运行的测试打印一行。

npx playwright test --reporter=list

下面是一个测试运行中的输出示例。失败的情况将在最后列出。

npx playwright test --reporter=list
Running 124 tests using 6 workers

  ✓ should access error in env (438ms)
  ✓ handle long test names (515ms)
  x 1) render expected (691ms)
  ✓ should timeout (932ms)
    should repeat each:
  ✓ should respect enclosing .gitignore (569ms)
    should teardown env after timeout:
    should respect excluded tests:
  ✓ should handle env beforeEach error (638ms)
    should respect enclosing .gitignore:

行报告器

行报告比列表报告更简明。它使用单行报告最后完成的测试,并在失败发生时打印出来。行报告对大型测试套件很有用,它可以显示进度,但不会因为列出所有的测试而造成输出的混乱。

npx playwright test --reporter=line

下面是一个测试运行中的输出示例。失败的情况会在行报告中输出。

npx playwright test --reporter=line
Running 124 tests using 6 workers
  1) dot-reporter.spec.ts:20:1 › render expected ===================================================

    Error: expect(received).toBe(expected) // Object.is equality

    Expected: 1
    Received: 0

[23/124] gitignore.spec.ts - should respect nested .gitignore

点报告器

Dot reporter非常简洁--它在每次成功的测试运行中只产生一个字符。它是CI的默认值,在你不需要大量输出的情况下很有用。

npx playwright test --reporter=dot

下面是一个测试运行中的输出示例。失败的情况将在最后列出。下面是一个测试运行中的输出示例。失败的情况将在最后列出。

npx playwright test --reporter=dot
Running 124 tests using 6 workers
······F·············································

HTML 报告器

HTML报告产生一个独立的文件夹,其中包含可以作为网页提供的测试运行报告。

npx playwright test --reporter=html

JSON 报告器

JSON 报告器产生一个包含所有测试运行信息的对象。它通常与一些终端报告器一起使用,如点报告器或行报告器。

如果你想把 JSON 写到一个文件里。当用 --reporter=json 运行时,使用 PLAYWRIGHT_JSON_OUTPUT_NAME 环境变量。

set PLAYWRIGHT_JSON_OUTPUT_NAME=results.json
npx playwright test --reporter=json,dot

Junit 报告器

JUnit 报告器产生一个 JUnit 风格的 xml 报告。它通常与一些终端报告器一起使用,如点报告器或行报告器。

如果你想把报告写到一个 xml 文件。当用 --reporter=junit 运行时,使用 PLAYWRIGHT_JUNIT_OUTPUT_NAME 环境变量。

set PLAYWRIGHT_JUNIT_OUTPUT_NAME=results.xml
npx playwright test --reporter=junit,line

自定义报告器

你可以通过实现一个具有某些报告器方法的类来创建一个自定义报告器。

// my-awesome-reporter.js
// @ts-check

/** @implements {import('@playwright/test/reporter').Reporter} */
class MyReporter {
  onBegin(config, suite) {
    console.log(`Starting the run with ${suite.allTests().length} tests`);
  }

  onTestBegin(test) {
    console.log(`Starting test ${test.title}`);
  }

  onTestEnd(test, result) {
    console.log(`Finished test ${test.title}: ${result.status}`);
  }

  onEnd(result) {
    console.log(`Finished the run: ${result.status}`);
  }
}

module.exports = MyReporter;

三方插件报告器

使用三方插件Allure作为报告器。

# 安装
npm i -D allure-playwright

# 运行测试
npx playwright test --reporter=line,allure-playwright

# 生成报告并查看
allure generate ./allure-results --clean && allure open ./allure-report
注意:allure需要去官网下载并配置到环境变量中

配置文件

Playwright Test 提供了配置默认浏览器、环境和页面固定的选项。例如有无头、视口和忽略 HTTPS 错误的选项。你还可以为测试录制视频或跟踪,或在结束时捕获屏幕截图。

最后,有大量的测试选项,如超时或testDir,配置你的测试如何被收集和执行。你可以在配置文件中全局地指定任何选项,也可以在测试文件中本地指定大部分选项。

全局配置

创建 playwright.config.js (或 playwright.config.ts) 并设置配置。

// @ts-check

/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
  use: {
    headless: false,
    viewport: { width: 1280, height: 720 },
    ignoreHTTPSErrors: true,
    video: 'on-first-retry',
  },
};

module.exports = config;

现在像往常一样运行测试,Playwright Test 会自动使用配置文件。

npx playwright test --browser=firefox

如果你把你的配置文件放在一个不同的地方,用 --config 选项来指定它。

npx playwright test --config=tests/my.config.js

(完)

参考

Getting started | Playwright
Playwright can either be used as a part of the Playwright Test test runner (this guide), or as a Playwright Library.
Puppeteer, Selenium, Playwright, Cypress - how to choose? - AI-driven E2E automation with code-like flexibility for your most resilient tests
We evaluated test automation frameworks including: Puppeteer, Selenium, Playwright, and Cypress. Adjust the weights to fit your organization.

标签

猫君

记录想法、故事和灵感。

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.