Playwright 是一个开源的自动化测试和网页抓取工具，由微软开发。它支持 Chromium、Firefox 和 WebKit 三种浏览器，可以用于编写端到端的测试、网页抓取和自动化任务。具有跨平台，支持多种浏览器，并行执行，截图和视频录制等功能。
安装 playwright
$ npm init playwright
> npx
> create-playwright
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · false
Initializing NPM project (npm init -y)…
Wrote to /Volumes/mydisk/test/pnpm-test/package.json:
{
"name": "pnpm-test",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
Installing Playwright Test (npm install --save-dev @playwright/test)…
added 3 packages, and audited 4 packages in 53s
found 0 vulnerabilities
Installing Types (npm install --save-dev @types/node)…
added 3 packages, and audited 7 packages in 18s
found 0 vulnerabilities
Writing playwright.config.ts.
Writing tests/example.spec.ts.
Writing tests-examples/demo-todo-app.spec.ts.
Writing package.json.
✔ Success! Created a Playwright Test project at /Volumes/mydisk/test/pnpm-test
Inside that directory, you can run several commands:
npx playwright test
Runs the end-to-end tests.
npx playwright test --ui
Starts the interactive UI mode.
npx playwright test --project=chromium
Runs the tests only on Desktop Chrome.
npx playwright test example
Runs the tests in a specific file.
npx playwright test --debug
Runs the tests in debug mode.
npx playwright codegen
Auto generate tests with Codegen.
We suggest that you begin by typing:
npx playwright test
And check out the following files:
- ./tests/example.spec.ts - Example end-to-end test
- ./tests-examples/demo-todo-app.spec.ts - Demo Todo App end-to-end tests
- ./playwright.config.ts - Playwright Test configuration
Visit https://playwright.dev/docs/intro for more information. ✨
Happy hacking! 🎭
其中在安装browsers和库依赖的时候时，选择n，这两步运行时间较长，项目创建完成后，可以手动安装。
手动安装浏览器和依赖库
这一步运行时间会比较长，要耐心等待。
npx playwright install
npx playwright install-deps
编辑测试用例
编辑 tests/example.spec.ts 文件，内容改为如下内容：
import { test, expect } from '@playwright/test';
test('has heading', async ({ page }) => {
await page.goto('https://nodejs.org/en');
// 检测页面上有“Run JavaScript Everywhere”标题
await expect(page.getByRole('heading')).toContainText('Run JavaScript Everywhere');
});
test('usage and example link', async ({ page }) => {
await page.goto('https://nodejs.org/en');
// 点击页面的Docs链接
await page.getByRole('link', { name: 'Docs' }).click();
// 检测页面上是否有“Usage and example”链接
await expect(page.locator('#column2').getByRole('link', { name: 'Usage and example' })).toBeVisible();
});
这个文件中定了两个测试用例，第一个测试用例检测页面上是否有“Run JavaScript Everywhere”标题，第二个测试用例点击页面的Docs链接，检测页面上是否有“Usage and example”链接。
运行测试
- 运行全部测试
npx playwright test
- 只使用 chromium 浏览器测试
npx playwright test --project chromium
- 在 Head 模式下运行测试
此时将使你能够直观地看到 Playwright 如何与网站交互。
npx playwright test --headed --project chromium
- 使用 UI 模式运行测试
此时会启动一个playwright工具，可以在其中选择要运行的测试用例，运行结果也会显示在工具中。
npx playwright test --ui
- 运行指定文件的测试
npx playwright test example.spec.ts
- 运行制定测试用例的测试
npx playwright test -g "has heading"
- 查看测试报告
npx playwright show-report
