创建tests/example.spec.js
(或tests/example.spec.ts
用于 TypeScript)来定义您的测试。
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');
});
现在运行您的测试,假设测试文件在tests
目录中。
npx playwright test
Playwright Test 刚刚使用 Chromium 浏览器以无头方式进行了测试。让我们告诉它使用带头浏览器:
npx playwright test --headed
要享受 Playwright Test 提供的所有功能,您需要创建一个配置文件playwright.config.ts
(或playwright.config.js
)。它允许您在您想要的多个浏览器中运行测试。
这是一个示例配置,它通过为每个浏览器配置创建一个“项目”来运行 Chromium、Firefox 和 WebKit 中的每个测试。它还指定了两个重试和跟踪选项。
// playwright.config.js
// @ts-check
const { devices } = require('@playwright/test');
/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
use: {
trace: 'on-first-retry',
},
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
],
};
module.exports = config;
在配置部分寻找更多选项。
现在您可以默认在多个浏览器中运行测试。
npx playwright test
Running 5 tests using 5 workers
✓ [chromium] › example.spec.ts:3:1 › basic test (2s)
✓ [firefox] › example.spec.ts:3:1 › basic test (2s)
✓ [webkit] › example.spec.ts:3:1 › basic test (2s)
使用--project
命令行选项运行单个项目。
npx playwright test --project=firefox
Running 1 test using 1 worker
✓ [firefox] › example.spec.ts:3:1 › basic test (2s)
Playwright Test 使用expect库进行测试断言。它使用特定于 Playwright 的匹配器对其进行了扩展,以实现更好的测试人体工程学。
在此处了解有关测试断言的更多信息。
下面是一个使用它们的简单示例:
// example.spec.js
const { test, expect } = require('@playwright/test');
test('my test', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Expect a title "to contain" a substring.
await expect(page).toHaveTitle(/Playwright/);
// Expect an attribute "to be strictly equal" to the value.
await expect(page.locator('text=Get Started').first()).toHaveAttribute('href', '/docs/intro');
// Expect an element "to be visible".
await expect(page.locator('text=Learn more').first()).toBeVisible();
await page.click('text=Get Started');
// Expect some text to be visible on the page.
await expect(page.locator('text=Introduction').first()).toBeVisible();
});
您注意到{ page }
上面的测试可以访问的参数:
test('basic test', async ({ page }) => {
...
我们称这些论点fixtures
。夹具是为每次测试运行创建的对象。Playwright Test 带有这些装置,您也可以添加自己的装置。运行测试时,Playwright Test 会查看每个测试声明,分析测试所需的固定装置集,并专门为测试准备这些固定装置。
以下是您可能大部分时间使用的预定义固定装置的列表:
夹具 | 类型 | 描述 |
---|
页 | 页 | 此测试运行的独立页面。 |
语境 | 浏览器上下文 | 此测试运行的隔离上下文。page 夹具也属于这种情况。了解如何配置上下文。 |
浏览器 | 浏览器 | 浏览器在测试之间共享以优化资源。了解如何配置浏览器。 |
浏览器名称 | 细绳 | 当前运行测试的浏览器的名称。要么chromium ,firefox 要么webkit 。 |
您可以使用test.beforeAll
和test.afterAll
挂钩来设置和拆除测试之间共享的资源。您可以使用test.beforeEach
和test.afterEach
hooks 为每个测试单独设置和拆除资源。
// example.spec.js
const { test, expect } = require('@playwright/test');
test.describe('feature foo', () => {
test.beforeEach(async ({ page }) => {
// Go to the starting url before each test.
await page.goto('https://playwright.dev/');
});
test('my test', async ({ page }) => {
// Assertions use the expect API.
await expect(page).toHaveURL('https://playwright.dev/');
});
});
以下是常用的命令行模式。了解有关命令行的更多信息。
运行所有测试
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 --project=firefox
禁用并行化
npx playwright test --workers=1
选择报表
npx playwright test --reporter=dot
使用Playwright Inspector在调试模式下运行
npx playwright test --debug
请求帮忙
npx playwright test --help
配置 NPM脚本
Playwright Test 将自动拾取playwright.config.js
或playwright.config.ts
。
{
"scripts": {
"test": "playwright test"
}
}
如果您将配置文件放在不同的位置,请使用--config
选项传递它。
{
"scripts": {
"test": "playwright test --config=tests/example.config.js"
}
}
说明
要通过 npm 脚本传递选项,请使用双破折号:npm run test -- --headed
.