开源自动化测试工具Playwright
Playwright 是一个开源的自动化测试和网页抓取工具，由微软开发。它支持 Chromium、Firefox 和 WebKit 三种浏览器，可以用于编写端到端的测试、网页抓取和自动化任务。具有跨平台，支持多种浏览器，并行执行，截图和视频录制等功能。
安装 playwright
$ npm init playwright> npx
> create-playwrightGetting 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 53sfound 0 vulnerabilities
Installing Types (npm install --save-dev @types/node)…added 3 packages, and audited 7 packages in 18sfound 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-testInside that directory, you can run several commands:npx playwright testRuns the end-to-end tests.npx playwright test --uiStarts the interactive UI mode.npx playwright test --project=chromiumRuns the tests only on Desktop Chrome.npx playwright test exampleRuns the tests in a specific file.npx playwright test --debugRuns the tests in debug mode.npx playwright codegenAuto generate tests with Codegen.We suggest that you begin by typing:npx playwright testAnd 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 configurationVisit 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