Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

chore: introduce defineConfig for easier JS typing (#20061)

Browse source 
Fixes https://github.com/microsoft/playwright/issues/19694
This commit is contained in:
Pavel Feldman 2023-01-12 13:12:02 -08:00 committed by GitHub
parent 730a197c80
commit e065d608b6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
68 changed files with 1017 additions and 1399 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
docs/src/api/params.md
View file

@ -1581,27 +1581,24 @@ This option configures a template controlling location of snapshots generated by
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
testDir: './tests', testDir: './tests',
snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}', snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}',
}; });
export default config;
``` ```
```js tab=js-js ```js tab=js-js
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
testDir: './tests', testDir: './tests',
snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}', snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}',
}; });
module.exports = config;
``` ```
**Details** **Details**
@ -1669,34 +1666,32 @@ Consider the following config:
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
snapshotPathTemplate: '__screenshots__{/projectName}/{testFilePath}/{arg}{ext}', snapshotPathTemplate: '__screenshots__{/projectName}/{testFilePath}/{arg}{ext}',
testMatch: 'example.spec.ts', testMatch: 'example.spec.ts',
projects: [ projects: [
{ use: { browserName: 'firefox' } }, { use: { browserName: 'firefox' } },
{ name: 'chromium', use: { browserName: 'chromium' } }, { name: 'chromium', use: { browserName: 'chromium' } },
], ],
}; });
export default config;
``` ```
```js tab=js-js ```js tab=js-js
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
snapshotPathTemplate: '__screenshots__{/projectName}/{testFilePath}/{arg}{ext}', snapshotPathTemplate: '__screenshots__{/projectName}/{testFilePath}/{arg}{ext}',
testMatch: 'example.spec.ts', testMatch: 'example.spec.ts',
projects: [ projects: [
{ use: { browserName: 'firefox' } }, { use: { browserName: 'firefox' } },
{ name: 'chromium', use: { browserName: 'chromium' } }, { name: 'chromium', use: { browserName: 'chromium' } },
], ],
}; });
module.exports = config;
``` ```
In this config: In this config:

17
docs/src/auth.md
View file

@ -221,30 +221,27 @@ Register global setup script in the Playwright configuration file:
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
globalSetup: require.resolve('./global-setup'), globalSetup: require.resolve('./global-setup'),
use: { use: {
// Tell all tests to load signed-in state from 'storageState.json'. // Tell all tests to load signed-in state from 'storageState.json'.
storageState: 'storageState.json' storageState: 'storageState.json'
} }
}; });
export default config;
``` ```
```js tab=js-js ```js tab=js-js
// playwright.config.js const { defineConfig } = require('@playwright/test');
// @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ module.exports = defineConfig({
const config = {
globalSetup: require.resolve('./global-setup'), globalSetup: require.resolve('./global-setup'),
use: { use: {
// Tell all tests to load signed-in state from 'storageState.json'. // Tell all tests to load signed-in state from 'storageState.json'.
storageState: 'storageState.json' storageState: 'storageState.json'
} }
}; });
module.exports = config;
``` ```
Tests start already authenticated because we specify `storageState` that was populated by global setup. Tests start already authenticated because we specify `storageState` that was populated by global setup.

16
docs/src/browsers.md
View file

@ -36,24 +36,22 @@ Here is how you can opt into using the stock browser:
```js tab=js-js ```js tab=js-js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
use: { use: {
channel: 'chrome', channel: 'chrome',
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
channel: 'chrome', channel: 'chrome',
}, },
}; });
export default config;
``` ```
```js tab=js-library ```js tab=js-library

44
docs/src/emulation.md
View file

@ -12,9 +12,9 @@ Playwright comes with a [registry of device parameters](https://github.com/micro
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import { type PlaywrightTestConfig, devices } from '@playwright/test'; // import devices import { defineConfig, devices } from '@playwright/test'; // import devices
const config: PlaywrightTestConfig = { export default defineConfig({
projects: [ projects: [
{ {
name: 'chromium', name: 'chromium',
@ -29,17 +29,15 @@ const config: PlaywrightTestConfig = {
}, },
}, },
], ],
}; });
export default config;
``` ```
```js tab=js-js ```js tab=js-js
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
const { devices } = require('@playwright/test'); // require devices const { devices, defineConfig } = require('@playwright/test'); // require devices
/** @type {import('@playwright/test').PlaywrightTestConfig} */ module.exports = defineConfig({
const config = {
projects: [ projects: [
{ {
name: 'chromium', name: 'chromium',
@ -54,9 +52,7 @@ const config = {
}, },
}, },
], ],
}; });
module.exports = config;
``` ```
```js tab=js-library ```js tab=js-library
@ -329,24 +325,21 @@ Allow app to show system notifications.
```js tab=js-js ```js tab=js-js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = { module.exports = defineConfig({
use: { use: {
permissions: ['notifications'], permissions: ['notifications'],
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
import type { PlaywrightTestConfig } from '@playwright/test'; import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
permissions: ['notifications'], permissions: ['notifications'],
}, },
}; });
export default config;
``` ```
```js tab=js-library ```js tab=js-library
@ -377,24 +370,21 @@ Allow test to request current location.
```js tab=js-js ```js tab=js-js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = { module.exports = defineConfig({
use: { use: {
permissions: ['geolocation'], permissions: ['geolocation'],
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
import type { PlaywrightTestConfig } from '@playwright/test'; import type { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
permissions: ['geolocation'], permissions: ['geolocation'],
}, },
}; });
export default config;
``` ```
```js tab=js-library ```js tab=js-library

14
docs/src/locators.md
View file

@ -557,25 +557,23 @@ Set the test id to use a custom data attribute for your tests.
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = { module.exports = defineConfig({
use: { use: {
testIdAttribute: 'data-pw' testIdAttribute: 'data-pw'
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
testIdAttribute: 'data-pw' testIdAttribute: 'data-pw'
} }
}; });
export default config;
``` ```
```java ```java

21
docs/src/network.md
View file

@ -11,16 +11,15 @@ Playwright provides APIs to **monitor** and **modify** network traffic, both HTT
Perform HTTP Authentication. Perform HTTP Authentication.
```js tab=js-ts ```js tab=js-ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
httpCredentials: { httpCredentials: {
username: 'bill', username: 'bill',
password: 'pa55w0rd', password: 'pa55w0rd',
} }
} }
}; });
export default config;
``` ```
```js tab=js-library ```js tab=js-library
@ -80,8 +79,8 @@ bypass proxy for.
Here is an example of a global proxy: Here is an example of a global proxy:
```js tab=js-ts ```js tab=js-ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
proxy: { proxy: {
server: 'http://myproxy.com:3128', server: 'http://myproxy.com:3128',
@ -89,8 +88,7 @@ const config: PlaywrightTestConfig = {
password: 'pwd' password: 'pwd'
} }
} }
}; });
export default config;
``` ```
```js tab=js-library ```js tab=js-library
@ -142,8 +140,8 @@ await using var browser = await BrowserType.LaunchAsync(new()
When specifying proxy for each context individually, **Chromium on Windows** needs a hint that proxy will be set. This is done via passing a non-empty proxy server to the browser itself. Here is an example of a context-specific proxy: When specifying proxy for each context individually, **Chromium on Windows** needs a hint that proxy will be set. This is done via passing a non-empty proxy server to the browser itself. Here is an example of a context-specific proxy:
```js tab=js-ts ```js tab=js-ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
launchOptions: { launchOptions: {
// Browser proxy option is required for Chromium on Windows. // Browser proxy option is required for Chromium on Windows.
@ -153,8 +151,7 @@ const config: PlaywrightTestConfig = {
server: 'http://myproxy.com:3128', server: 'http://myproxy.com:3128',
} }
} }
}; });
export default config;
``` ```
```js tab=js-library ```js tab=js-library

32
docs/src/release-notes-js.md
View file

@ -61,18 +61,15 @@ toc_max_heading_level: 2
- Automatically capture **full page screenshot** on test failure: - Automatically capture **full page screenshot** on test failure:
```js ```js
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
export default defineConfig({
const config: PlaywrightTestConfig = {
use: { use: {
screenshot: { screenshot: {
mode: 'only-on-failure', mode: 'only-on-failure',
fullPage: true, fullPage: true,
} }
} }
}; });
export default config;
``` ```
### Miscellaneous ### Miscellaneous
@ -129,14 +126,11 @@ This version was also tested against the following stable channels:
```js ```js
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
export default defineConfig({
const config: PlaywrightTestConfig = {
testDir: './tests', testDir: './tests',
snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}', snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}',
}; });
export default config;
``` ```
### New APIs ### New APIs
@ -335,8 +329,8 @@ Launch multiple web servers, databases, or other processes by passing an array o
```ts ```ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
webServer: [ webServer: [
{ {
command: 'npm run start', command: 'npm run start',
@ -354,8 +348,7 @@ const config: PlaywrightTestConfig = {
use: { use: {
baseURL: 'http://localhost:3000/', baseURL: 'http://localhost:3000/',
}, },
}; });
export default config;
``` ```
### 🐂 Debian 11 Bullseye Support ### 🐂 Debian 11 Bullseye Support
@ -1350,16 +1343,15 @@ To launch a server during the tests, use the [`webServer`](./test-advanced#launc
```ts ```ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
webServer: { webServer: {
command: 'npm run start', // command to launch command: 'npm run start', // command to launch
port: 3000, // port to await for port: 3000, // port to await for
timeout: 120 * 1000, timeout: 120 * 1000,
reuseExistingServer: !process.env.CI, reuseExistingServer: !process.env.CI,
}, },
}; });
export default config;
``` ```
Learn more in the [documentation](./test-advanced#launching-a-development-web-server-during-the-tests). Learn more in the [documentation](./test-advanced#launching-a-development-web-server-during-the-tests).

82
docs/src/test-advanced-js.md
View file

@ -13,8 +13,8 @@ Here is an example that defines a common timeout and two projects. The "Smoke" p
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
timeout: 60000, // Timeout is shared between all tests. timeout: 60000, // Timeout is shared between all tests.
projects: [ projects: [
{ {
@ -28,15 +28,15 @@ const config: PlaywrightTestConfig = {
retries: 2, retries: 2,
}, },
], ],
}; });
export default config;
``` ```
```js tab=js-js ```js tab=js-js
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
timeout: 60000, // Timeout is shared between all tests. timeout: 60000, // Timeout is shared between all tests.
projects: [ projects: [
{ {
@ -50,8 +50,7 @@ const config = {
retries: 2, retries: 2,
}, },
], ],
}; });
module.exports = config;
``` ```
## TestInfo object ## TestInfo object
@ -150,8 +149,8 @@ It is also recommended to specify [`property: TestOptions.baseURL`] in the confi
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
webServer: { webServer: {
command: 'npm run start', command: 'npm run start',
url: 'http://localhost:3000/app/', url: 'http://localhost:3000/app/',
@ -161,15 +160,15 @@ const config: PlaywrightTestConfig = {
use: { use: {
baseURL: 'http://localhost:3000/app/', baseURL: 'http://localhost:3000/app/',
}, },
}; });
export default config;
``` ```
```js tab=js-js ```js tab=js-js
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
webServer: { webServer: {
command: 'npm run start', command: 'npm run start',
url: 'http://localhost:3000/app/', url: 'http://localhost:3000/app/',
@ -179,8 +178,7 @@ const config = {
use: { use: {
baseURL: 'http://localhost:3000/app/', baseURL: 'http://localhost:3000/app/',
}, },
}; });
module.exports = config;
``` ```
Now you can use a relative path when navigating the page: Now you can use a relative path when navigating the page:
@ -256,29 +254,27 @@ Specify `globalSetup`, `baseURL` and `storageState` in the configuration file.
```js tab=js-js ```js tab=js-js
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
globalSetup: require.resolve('./global-setup'), globalSetup: require.resolve('./global-setup'),
use: { use: {
baseURL: 'http://localhost:3000/', baseURL: 'http://localhost:3000/',
storageState: 'state.json', storageState: 'state.json',
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
export default defineConfig({
const config: PlaywrightTestConfig = {
globalSetup: require.resolve('./global-setup'), globalSetup: require.resolve('./global-setup'),
use: { use: {
baseURL: 'http://localhost:3000/', baseURL: 'http://localhost:3000/',
storageState: 'state.json', storageState: 'state.json',
}, },
}; });
export default config;
``` ```
Tests start already authenticated because we specify `storageState` that was populated by global setup. Tests start already authenticated because we specify `storageState` that was populated by global setup.
@ -435,8 +431,9 @@ Here is an example that runs the same tests in different browsers:
// @ts-check // @ts-check
const { devices } = require('@playwright/test'); const { devices } = require('@playwright/test');
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
projects: [ projects: [
{ {
name: 'chromium', name: 'chromium',
@ -451,16 +448,13 @@ const config = {
use: { ...devices['Desktop Safari'] }, use: { ...devices['Desktop Safari'] },
}, },
], ],
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import { type PlaywrightTestConfig, devices } from '@playwright/test'; import { defineConfig } from '@playwright/test';
export default defineConfig({
const config: PlaywrightTestConfig = {
projects: [ projects: [
{ {
name: 'chromium', name: 'chromium',
@ -475,8 +469,7 @@ const config: PlaywrightTestConfig = {
use: { ...devices['Desktop Safari'] }, use: { ...devices['Desktop Safari'] },
}, },
], ],
}; });
export default config;
``` ```
You can run all projects or just a single one: You can run all projects or just a single one:
@ -496,8 +489,8 @@ Here is an example that runs projects with different tests and configurations. T
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
timeout: 60000, // Timeout is shared between all tests. timeout: 60000, // Timeout is shared between all tests.
projects: [ projects: [
{ {
@ -511,15 +504,15 @@ const config: PlaywrightTestConfig = {
retries: 2, retries: 2,
}, },
], ],
}; });
export default config;
``` ```
```js tab=js-js ```js tab=js-js
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
timeout: 60000, // Timeout is shared between all tests. timeout: 60000, // Timeout is shared between all tests.
projects: [ projects: [
{ {
@ -533,8 +526,7 @@ const config = {
retries: 2, retries: 2,
}, },
], ],
}; });
module.exports = config;
``` ```
You can run all projects or just a single one: You can run all projects or just a single one:
@ -654,8 +646,8 @@ expect.extend({
}, },
}); });
const config: PlaywrightTestConfig = {}; import { defineConfig } from '@playwright/test';
export default config; export default defineConfig({});
``` ```
Now we can use `toBeWithinRange` in the test. Now we can use `toBeWithinRange` in the test.

16
docs/src/test-api-testing-js.md
View file

@ -31,9 +31,8 @@ GitHub API requires authorization, so we'll configure the token once for all tes
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
export default defineConfig({
const config: PlaywrightTestConfig = {
use: { use: {
// All requests we send go to this API endpoint. // All requests we send go to this API endpoint.
baseURL: 'https://api.github.com', baseURL: 'https://api.github.com',
@ -45,15 +44,15 @@ const config: PlaywrightTestConfig = {
'Authorization': `token ${process.env.API_TOKEN}`, 'Authorization': `token ${process.env.API_TOKEN}`,
}, },
} }
}; });
export default config;
``` ```
```js tab=js-js ```js tab=js-js
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
use: { use: {
// All requests we send go to this API endpoint. // All requests we send go to this API endpoint.
baseURL: 'https://api.github.com', baseURL: 'https://api.github.com',
@ -65,8 +64,7 @@ const config = {
'Authorization': `token ${process.env.API_TOKEN}`, 'Authorization': `token ${process.env.API_TOKEN}`,
}, },
} }
}; });
module.exports = config;
``` ```
### Writing tests ### Writing tests

14
docs/src/test-api/class-test.md
View file

@ -782,8 +782,7 @@ Configure the option in config file.
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig<{ defaultItem: string }>} */ module.exports = defineConfig({
const config = {
projects: [ projects: [
{ {
name: 'shopping', name: 'shopping',
@ -794,17 +793,15 @@ const config = {
use: { defaultItem: 'Exercise!' }, use: { defaultItem: 'Exercise!' },
}, },
] ]
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
import { Options } from './my-test'; import { Options } from './my-test';
const config: PlaywrightTestConfig<Options> = { export default defineConfig<Options>({
projects: [ projects: [
{ {
name: 'shopping', name: 'shopping',
@ -815,8 +812,7 @@ const config: PlaywrightTestConfig<Options> = {
use: { defaultItem: 'Exercise!' }, use: { defaultItem: 'Exercise!' },
}, },
] ]
}; });
export default config;
``` ```
Learn more about [fixtures](../test-fixtures.md) and [parametrizing tests](../test-parameterize.md). Learn more about [fixtures](../test-fixtures.md) and [parametrizing tests](../test-parameterize.md).

510
docs/src/test-api/class-testconfig.md
View file

@ -10,28 +10,26 @@ Playwright Test supports running multiple test projects at the same time. Projec
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
timeout: 30000, timeout: 30000,
globalTimeout: 600000, globalTimeout: 600000,
reporter: 'list', reporter: 'list',
testDir: './tests', testDir: './tests',
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
timeout: 30000, timeout: 30000,
globalTimeout: 600000, globalTimeout: 600000,
reporter: 'list', reporter: 'list',
testDir: './tests', testDir: './tests',
}; });
export default config;
``` ```
## property: TestConfig.expect ## property: TestConfig.expect
@ -58,32 +56,30 @@ Configuration for the `expect` assertion library. Learn more about [various time
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
expect: { expect: {
timeout: 10000, timeout: 10000,
toMatchSnapshot: { toMatchSnapshot: {
maxDiffPixels: 10, maxDiffPixels: 10,
}, },
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
expect: { expect: {
timeout: 10000, timeout: 10000,
toMatchSnapshot: { toMatchSnapshot: {
maxDiffPixels: 10, maxDiffPixels: 10,
}, },
}, },
}; });
export default config;
``` ```
## property: TestConfig.forbidOnly ## property: TestConfig.forbidOnly
@ -98,22 +94,20 @@ Whether to exit with an error if any tests or groups are marked as [`method: Tes
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
forbidOnly: !!process.env.CI,
};
module.exports = config; module.exports = defineConfig({
forbidOnly: !!process.env.CI,
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
forbidOnly: !!process.env.CI, forbidOnly: !!process.env.CI,
}; });
export default config;
``` ```
## property: TestConfig.fullyParallel ## property: TestConfig.fullyParallel
@ -131,22 +125,20 @@ You can configure entire test run to concurrently execute all tests in all files
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
fullyParallel: true,
};
module.exports = config; module.exports = defineConfig({
fullyParallel: true,
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
fullyParallel: true, fullyParallel: true,
}; });
export default config;
``` ```
## property: TestConfig.globalScripts ## property: TestConfig.globalScripts
@ -175,22 +167,20 @@ Learn more about [global setup and teardown](../test-advanced.md#global-setup-an
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
globalSetup: './global-setup',
};
module.exports = config; module.exports = defineConfig({
globalSetup: './global-setup',
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import { type PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
globalSetup: './global-setup', globalSetup: './global-setup',
}; });
export default config;
``` ```
## property: TestConfig.globalTeardown ## property: TestConfig.globalTeardown
@ -207,22 +197,20 @@ Learn more about [global setup and teardown](../test-advanced.md#global-setup-an
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
globalTeardown: './global-teardown',
};
module.exports = config; module.exports = defineConfig({
globalTeardown: './global-teardown',
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import { type PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
globalTeardown: './global-teardown', globalTeardown: './global-teardown',
}; });
export default config;
``` ```
## property: TestConfig.globalTimeout ## property: TestConfig.globalTimeout
@ -237,22 +225,20 @@ Maximum time in milliseconds the whole test suite can run. Zero timeout (default
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
globalTimeout: process.env.CI ? 60 * 60 * 1000 : undefined,
};
module.exports = config; module.exports = defineConfig({
globalTimeout: process.env.CI ? 60 * 60 * 1000 : undefined,
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
globalTimeout: process.env.CI ? 60 * 60 * 1000 : undefined, globalTimeout: process.env.CI ? 60 * 60 * 1000 : undefined,
}; });
export default config;
``` ```
## property: TestConfig.grep ## property: TestConfig.grep
@ -269,22 +255,20 @@ Filter to only run tests with a title matching one of the patterns. For example,
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
grep: /smoke/,
};
module.exports = config; module.exports = defineConfig({
grep: /smoke/,
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
grep: /smoke/, grep: /smoke/,
}; });
export default config;
``` ```
## property: TestConfig.grepInvert ## property: TestConfig.grepInvert
@ -301,22 +285,20 @@ Filter to only run tests with a title **not** matching one of the patterns. This
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
grepInvert: /manual/,
};
module.exports = config; module.exports = defineConfig({
grepInvert: /manual/,
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
grepInvert: /manual/, grepInvert: /manual/,
}; });
export default config;
``` ```
## property: TestConfig.ignoreSnapshots ## property: TestConfig.ignoreSnapshots
@ -331,22 +313,20 @@ Whether to skip snapshot expectations, such as `expect(value).toMatchSnapshot()`
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
ignoreSnapshots: !process.env.CI,
};
module.exports = config; module.exports = defineConfig({
ignoreSnapshots: !process.env.CI,
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
ignoreSnapshots: !process.env.CI, ignoreSnapshots: !process.env.CI,
}; });
export default config;
``` ```
## property: TestConfig.maxFailures ## property: TestConfig.maxFailures
@ -363,22 +343,20 @@ Also available in the [command line](../test-cli.md) with the `--max-failures` a
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
maxFailures: process.env.CI ? 1 : 0,
};
module.exports = config; module.exports = defineConfig({
maxFailures: process.env.CI ? 1 : 0,
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
maxFailures: process.env.CI ? 1 : 0, maxFailures: process.env.CI ? 1 : 0,
}; });
export default config;
``` ```
## property: TestConfig.metadata ## property: TestConfig.metadata
@ -393,22 +371,20 @@ Metadata that will be put directly to the test report serialized as JSON.
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
metadata: 'acceptance tests',
};
module.exports = config; module.exports = defineConfig({
metadata: 'acceptance tests',
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
metadata: 'acceptance tests', metadata: 'acceptance tests',
}; });
export default config;
``` ```
## property: TestConfig.name ## property: TestConfig.name
@ -423,22 +399,20 @@ Config name is visible in the report and during test execution, unless overridde
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
name: 'acceptance tests',
};
module.exports = config; module.exports = defineConfig({
name: 'acceptance tests',
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
name: 'acceptance tests', name: 'acceptance tests',
}; });
export default config;
``` ```
## property: TestConfig.outputDir ## property: TestConfig.outputDir
@ -453,22 +427,20 @@ The output directory for files created during test execution. Defaults to `<pack
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
outputDir: './test-results',
};
module.exports = config; module.exports = defineConfig({
outputDir: './test-results',
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import { type PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
outputDir: './test-results', outputDir: './test-results',
}; });
export default config;
``` ```
**Details** **Details**
@ -511,22 +483,20 @@ The base directory, relative to the config file, for snapshot files created with
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
snapshotDir: './snapshots',
};
module.exports = config; module.exports = defineConfig({
snapshotDir: './snapshots',
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import { type PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
snapshotDir: './snapshots', snapshotDir: './snapshots',
}; });
export default config;
``` ```
**Details** **Details**
@ -554,22 +524,20 @@ Whether to preserve test output in the [`property: TestConfig.outputDir`]. Defau
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
preserveOutput: 'always',
};
module.exports = config; module.exports = defineConfig({
preserveOutput: 'always',
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import { type PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
preserveOutput: 'always', preserveOutput: 'always',
}; });
export default config;
``` ```
## property: TestConfig.projects ## property: TestConfig.projects
@ -586,26 +554,24 @@ Playwright Test supports running multiple test projects at the same time. See [T
// @ts-check // @ts-check
const { devices } = require('@playwright/test'); const { devices } = require('@playwright/test');
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
projects: [ projects: [
{ name: 'chromium', use: devices['Desktop Chrome'] } { name: 'chromium', use: devices['Desktop Chrome'] }
] ]
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import { type PlaywrightTestConfig, devices } from '@playwright/test'; import { defineConfig, devices } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
projects: [ projects: [
{ name: 'chromium', use: devices['Desktop Chrome'] } { name: 'chromium', use: devices['Desktop Chrome'] }
] ]
}; });
export default config;
``` ```
## property: TestConfig.quiet ## property: TestConfig.quiet
@ -620,22 +586,20 @@ Whether to suppress stdio and stderr output from the tests.
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
quiet: !!process.env.CI,
};
module.exports = config; module.exports = defineConfig({
quiet: !!process.env.CI,
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import { type PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
quiet: !!process.env.CI, quiet: !!process.env.CI,
}; });
export default config;
``` ```
## property: TestConfig.repeatEach ## property: TestConfig.repeatEach
@ -650,22 +614,20 @@ The number of times to repeat each test, useful for debugging flaky tests.
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
repeatEach: 3,
};
module.exports = config; module.exports = defineConfig({
repeatEach: 3,
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import { type PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
repeatEach: 3, repeatEach: 3,
}; });
export default config;
``` ```
## property: TestConfig.reporter ## property: TestConfig.reporter
@ -689,22 +651,20 @@ Learn more in the [reporters guide](../test-reporters.md).
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
reporter: 'line',
};
module.exports = config; module.exports = defineConfig({
reporter: 'line',
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
reporter: 'line', reporter: 'line',
}; });
export default config;
``` ```
## property: TestConfig.reportSlowTests ## property: TestConfig.reportSlowTests
@ -721,22 +681,20 @@ Whether to report slow test files. Pass `null` to disable this feature.
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
reportSlowTests: null,
};
module.exports = config; module.exports = defineConfig({
reportSlowTests: null,
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import { type PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
reportSlowTests: null, reportSlowTests: null,
}; });
export default config;
``` ```
**Details** **Details**
@ -755,22 +713,20 @@ The maximum number of retry attempts given to failed tests. By default failing t
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
retries: 2,
};
module.exports = config; module.exports = defineConfig({
retries: 2,
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
retries: 2, retries: 2,
}; });
export default config;
``` ```
## property: TestConfig.shard ## property: TestConfig.shard
@ -789,22 +745,20 @@ Learn more about [parallelism and sharding](../test-parallel.md) with Playwright
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
shard: { total: 10, current: 3 },
};
module.exports = config; module.exports = defineConfig({
shard: { total: 10, current: 3 },
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import { type PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
shard: { total: 10, current: 3 }, shard: { total: 10, current: 3 },
}; });
export default config;
``` ```
## property: TestConfig.testDir ## property: TestConfig.testDir
@ -819,22 +773,20 @@ Directory that will be recursively scanned for test files. Defaults to the direc
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
testDir: './tests/playwright',
};
module.exports = config; module.exports = defineConfig({
testDir: './tests/playwright',
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
testDir: './tests/playwright', testDir: './tests/playwright',
}; });
export default config;
``` ```
## property: TestConfig.testIgnore ## property: TestConfig.testIgnore
@ -851,22 +803,20 @@ For example, `'**/test-assets/**'` will ignore any files in the `test-assets` di
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
testIgnore: '**/test-assets/**',
};
module.exports = config; module.exports = defineConfig({
testIgnore: '**/test-assets/**',
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import { type PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
testIgnore: '**/test-assets/**', testIgnore: '**/test-assets/**',
}; });
export default config;
``` ```
## property: TestConfig.testMatch ## property: TestConfig.testMatch
@ -883,22 +833,20 @@ By default, Playwright Test looks for files matching `.*(test|spec)\.(js|ts|mjs)
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
testMatch: /.*\.e2e\.js/,
};
module.exports = config; module.exports = defineConfig({
testMatch: /.*\.e2e\.js/,
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import { type PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
testMatch: /.*\.e2e\.js/, testMatch: /.*\.e2e\.js/,
}; });
export default config;
``` ```
## property: TestConfig.timeout ## property: TestConfig.timeout
@ -915,22 +863,20 @@ This is a base timeout for all tests. In addition, each test can configure its o
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
timeout: 5 * 60 * 1000,
};
module.exports = config; module.exports = defineConfig({
timeout: 5 * 60 * 1000,
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
timeout: 5 * 60 * 1000, timeout: 5 * 60 * 1000,
}; });
export default config;
``` ```
## property: TestConfig.updateSnapshots ## property: TestConfig.updateSnapshots
@ -950,22 +896,20 @@ Learn more about [snapshots](../test-snapshots.md).
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
updateSnapshots: 'missing',
};
module.exports = config; module.exports = defineConfig({
updateSnapshots: 'missing',
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import { type PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
updateSnapshots: 'missing', updateSnapshots: 'missing',
}; });
export default config;
``` ```
## property: TestConfig.use ## property: TestConfig.use
@ -980,26 +924,24 @@ Global options for all tests, for example [`property: TestOptions.browserName`].
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
use: { use: {
browserName: 'chromium', browserName: 'chromium',
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
browserName: 'chromium', browserName: 'chromium',
}, },
}; });
export default config;
``` ```
## property: TestConfig.webServer ## property: TestConfig.webServer
@ -1032,8 +974,8 @@ It is also recommended to specify [`property: TestOptions.baseURL`] in the confi
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
webServer: { webServer: {
command: 'npm run start', command: 'npm run start',
port: 3000, port: 3000,
@ -1043,15 +985,15 @@ const config: PlaywrightTestConfig = {
use: { use: {
baseURL: 'http://localhost:3000/', baseURL: 'http://localhost:3000/',
}, },
}; });
export default config;
``` ```
```js tab=js-js ```js tab=js-js
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
webServer: { webServer: {
command: 'npm run start', command: 'npm run start',
port: 3000, port: 3000,
@ -1061,8 +1003,7 @@ const config = {
use: { use: {
baseURL: 'http://localhost:3000/', baseURL: 'http://localhost:3000/',
}, },
}; });
module.exports = config;
``` ```
Now you can use a relative path when navigating the page: Now you can use a relative path when navigating the page:
@ -1091,8 +1032,8 @@ Multiple web servers (or background processes) can be launched:
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
webServer: [ webServer: [
{ {
command: 'npm run start', command: 'npm run start',
@ -1110,15 +1051,15 @@ const config: PlaywrightTestConfig = {
use: { use: {
baseURL: 'http://localhost:3000/', baseURL: 'http://localhost:3000/',
}, },
}; });
export default config;
``` ```
```js tab=js-js ```js tab=js-js
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
webServer: [ webServer: [
{ {
command: 'npm run start', command: 'npm run start',
@ -1136,8 +1077,7 @@ const config = {
use: { use: {
baseURL: 'http://localhost:3000/', baseURL: 'http://localhost:3000/',
}, },
}; });
module.exports = config;
``` ```
## property: TestConfig.workers ## property: TestConfig.workers
@ -1156,20 +1096,18 @@ Defaults to half of the number of logical CPU cores. Learn more about [paralleli
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
workers: 3,
};
module.exports = config; module.exports = defineConfig({
workers: 3,
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
workers: 3, workers: 3,
}; });
export default config;
``` ```

30
docs/src/test-api/class-testoptions.md
View file

@ -9,30 +9,28 @@ These options are usually provided in the [configuration file](../test-configura
```js tab=js-js ```js tab=js-js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
use: { use: {
headless: false, headless: false,
viewport: { width: 1280, height: 720 }, viewport: { width: 1280, height: 720 },
ignoreHTTPSErrors: true, ignoreHTTPSErrors: true,
video: 'on-first-retry', video: 'on-first-retry',
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
import type { PlaywrightTestConfig } from '@playwright/test'; import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
headless: false, headless: false,
viewport: { width: 1280, height: 720 }, viewport: { width: 1280, height: 720 },
ignoreHTTPSErrors: true, ignoreHTTPSErrors: true,
video: 'on-first-retry', video: 'on-first-retry',
}, },
}; });
export default config;
``` ```
Alternatively, with [`method: Test.use`] you can override some options for a file. Alternatively, with [`method: Test.use`] you can override some options for a file.
@ -77,26 +75,24 @@ Name of the browser that runs tests. Defaults to `'chromium'`. Most of the time
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
use: { use: {
browserName: 'firefox', browserName: 'firefox',
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import { type PlaywrightTestConfig, devices } from '@playwright/test'; import { defineConfig, devices } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
browserName: 'firefox', browserName: 'firefox',
}, },
}; });
export default config;
``` ```
## property: TestOptions.actionTimeout ## property: TestOptions.actionTimeout

48
docs/src/test-api/class-testproject.md
View file

@ -13,8 +13,9 @@ Here is an example configuration that runs every test in Chromium, Firefox and W
// @ts-check // @ts-check
const { devices } = require('@playwright/test'); const { devices } = require('@playwright/test');
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
// Options shared for all projects. // Options shared for all projects.
timeout: 30000, timeout: 30000,
use: { use: {
@ -53,16 +54,14 @@ const config = {
use: devices['iPhone 12'], use: devices['iPhone 12'],
}, },
], ],
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import { type PlaywrightTestConfig, devices } from '@playwright/test'; import { defineConfig, devices } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
// Options shared for all projects. // Options shared for all projects.
timeout: 30000, timeout: 30000,
use: { use: {
@ -101,8 +100,7 @@ const config: PlaywrightTestConfig = {
use: devices['iPhone 12'], use: devices['iPhone 12'],
}, },
], ],
}; });
export default config;
``` ```
## property: TestProject.expect ## property: TestProject.expect
@ -249,8 +247,9 @@ Each project can use a different directory. Here is an example that runs smoke t
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
projects: [ projects: [
{ {
name: 'Smoke Chromium', name: 'Smoke Chromium',
@ -282,16 +281,14 @@ const config = {
} }
}, },
], ],
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
projects: [ projects: [
{ {
name: 'Smoke Chromium', name: 'Smoke Chromium',
@ -323,8 +320,7 @@ const config: PlaywrightTestConfig = {
} }
}, },
], ],
}; });
export default config;
``` ```
Use [`property: TestConfig.testDir`] to change this option for all projects. Use [`property: TestConfig.testDir`] to change this option for all projects.
@ -369,8 +365,9 @@ Options for all tests in this project, for example [`property: TestOptions.brows
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
projects: [ projects: [
{ {
name: 'Chromium', name: 'Chromium',
@ -379,16 +376,14 @@ const config = {
}, },
}, },
], ],
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
projects: [ projects: [
{ {
name: 'Chromium', name: 'Chromium',
@ -397,8 +392,7 @@ const config: PlaywrightTestConfig = {
}, },
}, },
], ],
}; });
export default config;
``` ```
Use [`property: TestConfig.use`] to change this option for all projects. Use [`property: TestConfig.use`] to change this option for all projects.

14
docs/src/test-components-js.md
View file

@ -261,14 +261,13 @@ As per above, you can only import your components from your test file. If you ha
At this point, Playwright is bundler-agnostic, so it is not reusing your existing Vite config. Your config might have a lot of things we won't be able to reuse. So for now, you would copy your path mappings and other high level settings into the `ctViteConfig` property of Playwright config. At this point, Playwright is bundler-agnostic, so it is not reusing your existing Vite config. Your config might have a lot of things we won't be able to reuse. So for now, you would copy your path mappings and other high level settings into the `ctViteConfig` property of Playwright config.
```js ```js
import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react'; import { defineConfig } from '@playwright/experimental-ct-react';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
ctViteConfig: { ... }, ctViteConfig: { ... },
}, },
}; });
export default config
``` ```
### Q) What's the difference between `@playwright/test` and `@playwright/experimental-ct-{react,svelte,vue,solid}`? ### Q) What's the difference between `@playwright/test` and `@playwright/experimental-ct-{react,svelte,vue,solid}`?
@ -399,14 +398,14 @@ await mount(<App />);
You can specify plugins via Vite config for testing settings. Note that once you start specifying plugins, you are responsible for specifying the framework plugin as well, `vue()` in this case: You can specify plugins via Vite config for testing settings. Note that once you start specifying plugins, you are responsible for specifying the framework plugin as well, `vue()` in this case:
```js ```js
import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-vue' import { defineConfig, devices } from '@playwright/experimental-ct-vue'
import { resolve } from 'path' import { resolve } from 'path'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite' import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite' import Components from 'unplugin-vue-components/vite'
const config: PlaywrightTestConfig = { export default defineConfig({
testDir: './tests/component', testDir: './tests/component',
use: { use: {
trace: 'on-first-retry', trace: 'on-first-retry',
@ -439,7 +438,8 @@ const config: PlaywrightTestConfig = {
}, },
}, },
}, },
}, }
});
``` ```
don't forget to initialize your plugins, for example if you are using Pinia, add init code into your `playwright/index.js`: don't forget to initialize your plugins, for example if you are using Pinia, add init code into your `playwright/index.js`:

146
docs/src/test-configuration-js.md
View file

@ -18,30 +18,28 @@ Create a `playwright.config.js` (or `playwright.config.ts`) and specify options
```js tab=js-js ```js tab=js-js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
use: { use: {
headless: false, headless: false,
viewport: { width: 1280, height: 720 }, viewport: { width: 1280, height: 720 },
ignoreHTTPSErrors: true, ignoreHTTPSErrors: true,
video: 'on-first-retry', video: 'on-first-retry',
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
headless: false, headless: false,
viewport: { width: 1280, height: 720 }, viewport: { width: 1280, height: 720 },
ignoreHTTPSErrors: true, ignoreHTTPSErrors: true,
video: 'on-first-retry', video: 'on-first-retry',
}, },
}; });
export default config;
``` ```
Now run tests as usual, Playwright Test will pick up the configuration file automatically. Now run tests as usual, Playwright Test will pick up the configuration file automatically.
@ -129,28 +127,26 @@ Here are some of the commonly used options for various scenarios. You usually se
```js tab=js-js ```js tab=js-js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
use: { use: {
baseURL: 'http://localhost:3000', baseURL: 'http://localhost:3000',
browserName: 'firefox', browserName: 'firefox',
headless: true, headless: true,
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
baseURL: 'http://localhost:3000', baseURL: 'http://localhost:3000',
browserName: 'firefox', browserName: 'firefox',
headless: true, headless: true,
}, },
}; });
export default config;
``` ```
## Multiple browsers ## Multiple browsers
@ -162,8 +158,9 @@ Playwright Test supports multiple "projects" that can run your tests in multiple
// @ts-check // @ts-check
const { devices } = require('@playwright/test'); const { devices } = require('@playwright/test');
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
projects: [ projects: [
{ {
name: 'chromium', name: 'chromium',
@ -178,16 +175,14 @@ const config = {
use: { ...devices['Desktop Safari'] }, use: { ...devices['Desktop Safari'] },
}, },
], ],
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import { type PlaywrightTestConfig, devices } from '@playwright/test'; import { defineConfig, devices } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
projects: [ projects: [
{ {
name: 'chromium', name: 'chromium',
@ -202,8 +197,7 @@ const config: PlaywrightTestConfig = {
use: { ...devices['Desktop Safari'] }, use: { ...devices['Desktop Safari'] },
}, },
], ],
}; });
export default config;
``` ```
You can specify [different options][TestProject] for each project, for example set specific command-line arguments for Chromium. You can specify [different options][TestProject] for each project, for example set specific command-line arguments for Chromium.
@ -316,24 +310,22 @@ Screenshots will appear in the test output directory, typically `test-results`.
```js tab=js-js ```js tab=js-js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
use: { use: {
screenshot: 'only-on-failure', screenshot: 'only-on-failure',
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
screenshot: 'only-on-failure', screenshot: 'only-on-failure',
}, },
}; });
export default config;
``` ```
## Record video ## Record video
@ -350,24 +342,22 @@ Video files will appear in the test output directory, typically `test-results`.
```js tab=js-js ```js tab=js-js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
use: { use: {
video: 'on-first-retry', video: 'on-first-retry',
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
video: 'on-first-retry', video: 'on-first-retry',
}, },
}; });
export default config;
``` ```
## Record test trace ## Record test trace
@ -384,24 +374,22 @@ Trace files will appear in the test output directory, typically `test-results`.
```js tab=js-js ```js tab=js-js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
use: { use: {
trace: 'retain-on-failure', trace: 'retain-on-failure',
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
trace: 'retain-on-failure', trace: 'retain-on-failure',
}, },
}; });
export default config;
``` ```
## More browser and context options ## More browser and context options
@ -411,28 +399,26 @@ Any options accepted by [`method: BrowserType.launch`] or [`method: Browser.newC
```js tab=js-js ```js tab=js-js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
use: { use: {
launchOptions: { launchOptions: {
slowMo: 50, slowMo: 50,
}, },
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
launchOptions: { launchOptions: {
slowMo: 50, slowMo: 50,
}, },
}, },
}; });
export default config;
``` ```
However, most common ones like `headless` or `viewport` are available directly in the `use` section - see [basic options](#basic-options), [emulation](./emulation.md) or [network](#network). However, most common ones like `headless` or `viewport` are available directly in the `use` section - see [basic options](#basic-options), [emulation](./emulation.md) or [network](#network).
@ -443,31 +429,27 @@ If using the built-in `browser` fixture, calling [`method: Browser.newContext`]
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from "@playwright/test"; import { defineConfig } from '@playwright/test';
export default defineConfig({
const config: PlaywrightTestConfig = {
use: { use: {
userAgent: 'some custom ua', userAgent: 'some custom ua',
viewport: { width: 100, height: 100 }, viewport: { width: 100, height: 100 },
}, },
}; });
export default config;
``` ```
```js tab=js-js ```js tab=js-js
// @ts-check // @ts-check
// example.spec.js // example.spec.js
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
use: { use: {
userAgent: 'some custom ua', userAgent: 'some custom ua',
viewport: { width: 100, height: 100 }, viewport: { width: 100, height: 100 },
}, },
}; });
module.exports = config;
``` ```
An example test illustrating the initial context options are set: An example test illustrating the initial context options are set:
@ -525,8 +507,9 @@ You can specify these options in the configuration file. Note that testing optio
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
// Look for test files in the "tests" directory, relative to this configuration file // Look for test files in the "tests" directory, relative to this configuration file
testDir: 'tests', testDir: 'tests',
@ -548,16 +531,14 @@ const config = {
use: { use: {
// Configure browser and context here // Configure browser and context here
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
// Look for test files in the "tests" directory, relative to this configuration file // Look for test files in the "tests" directory, relative to this configuration file
testDir: 'tests', testDir: 'tests',
@ -576,6 +557,5 @@ const config: PlaywrightTestConfig = {
use: { use: {
// Configure browser and context here // Configure browser and context here
}, },
}; });
export default config;
``` ```

15
docs/src/test-fixtures-js.md
View file

@ -574,8 +574,8 @@ We can now use `todoPage` fixture as usual, and set the `defaultItem` option in
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig<{ defaultItem: string }>} */ const { defineConfig } = require('@playwright/test');
const config = { module.exports = defineConfig({
projects: [ projects: [
{ {
name: 'shopping', name: 'shopping',
@ -586,17 +586,15 @@ const config = {
use: { defaultItem: 'Exercise!' }, use: { defaultItem: 'Exercise!' },
}, },
] ]
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
import { MyOptions } from './my-test'; import { MyOptions } from './my-test';
const config: PlaywrightTestConfig<MyOptions> = { export default defineConfig({
projects: [ projects: [
{ {
name: 'shopping', name: 'shopping',
@ -607,8 +605,7 @@ const config: PlaywrightTestConfig<MyOptions> = {
use: { defaultItem: 'Exercise!' }, use: { defaultItem: 'Exercise!' },
}, },
] ]
}; });
export default config;
``` ```
## Execution order ## Execution order

64
docs/src/test-parallel-js.md
View file

@ -34,24 +34,22 @@ In the configuration file:
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
// Limit the number of workers on CI, use default locally // Limit the number of workers on CI, use default locally
workers: process.env.CI ? 2 : undefined, workers: process.env.CI ? 2 : undefined,
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
// Limit the number of workers on CI, use default locally // Limit the number of workers on CI, use default locally
workers: process.env.CI ? 2 : undefined, workers: process.env.CI ? 2 : undefined,
}; });
export default config;
``` ```
## Disable parallelism ## Disable parallelism
@ -92,22 +90,20 @@ Alternatively, you can opt-in all tests (or just a few projects) into this fully
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
fullyParallel: true,
};
module.exports = config; module.exports = defineConfig({
fullyParallel: true,
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
fullyParallel: true, fullyParallel: true,
}; });
export default config;
``` ```
## Serial mode ## Serial mode
@ -201,24 +197,22 @@ Setting in the configuration file:
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
// Limit the number of failures on CI to save resources // Limit the number of failures on CI to save resources
maxFailures: process.env.CI ? 10 : undefined, maxFailures: process.env.CI ? 10 : undefined,
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
// Limit the number of failures on CI to save resources // Limit the number of failures on CI to save resources
maxFailures: process.env.CI ? 10 : undefined, maxFailures: process.env.CI ? 10 : undefined,
}; });
export default config;
``` ```
## Worker index and parallel index ## Worker index and parallel index
@ -313,24 +307,22 @@ Now **disable parallel execution** by setting workers to one, and specify your t
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
workers: 1, workers: 1,
testMatch: 'test.list.js', testMatch: 'test.list.js',
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
workers: 1, workers: 1,
testMatch: 'test.list.ts', testMatch: 'test.list.ts',
}; });
export default config;
``` ```
:::note :::note

46
docs/src/test-parameterize-js.md
View file

@ -91,8 +91,7 @@ Now, we can run tests in multiple configurations by using projects.
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig<{ person: string }>} */ module.exports = defineConfig({
const config = {
projects: [ projects: [
{ {
name: 'alice', name: 'alice',
@ -103,17 +102,15 @@ const config = {
use: { person: 'Bob' }, use: { person: 'Bob' },
}, },
] ]
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import type { defineConfig } from '@playwright/test';
import { TestOptions } from './my-test'; import { TestOptions } from './my-test';
const config: PlaywrightTestConfig<TestOptions> = { export default defineConfig({
projects: [ projects: [
{ {
name: 'alice', name: 'alice',
@ -124,8 +121,7 @@ const config: PlaywrightTestConfig<TestOptions> = {
use: { person: 'Bob' }, use: { person: 'Bob' },
}, },
] ]
}; });
export default config;
``` ```
We can also use the option in a fixture. Learn more about [fixtures](./test-fixtures.md). We can also use the option in a fixture. Learn more about [fixtures](./test-fixtures.md).
@ -229,26 +225,24 @@ Similarly, configuration file can also read environment variables passed through
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
use: { use: {
baseURL: process.env.STAGING === '1' ? 'http://staging.example.test/' : 'http://example.test/', baseURL: process.env.STAGING === '1' ? 'http://staging.example.test/' : 'http://example.test/',
} }
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
baseURL: process.env.STAGING === '1' ? 'http://staging.example.test/' : 'http://example.test/', baseURL: process.env.STAGING === '1' ? 'http://staging.example.test/' : 'http://example.test/',
} }
}; });
export default config;
``` ```
Now, you can run tests against a staging or a production environment: Now, you can run tests against a staging or a production environment:
@ -281,19 +275,18 @@ require('dotenv').config();
// Alternatively, read from "../my.env" file. // Alternatively, read from "../my.env" file.
require('dotenv').config({ path: path.resolve(__dirname, '..', 'my.env') }); require('dotenv').config({ path: path.resolve(__dirname, '..', 'my.env') });
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
use: { use: {
baseURL: process.env.STAGING === '1' ? 'http://staging.example.test/' : 'http://example.test/', baseURL: process.env.STAGING === '1' ? 'http://staging.example.test/' : 'http://example.test/',
} }
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
import dotenv from 'dotenv'; import dotenv from 'dotenv';
import path from 'path'; import path from 'path';
@ -303,12 +296,11 @@ dotenv.config();
// Alternatively, read from "../my.env" file. // Alternatively, read from "../my.env" file.
dotenv.config({ path: path.resolve(__dirname, '..', 'my.env') }); dotenv.config({ path: path.resolve(__dirname, '..', 'my.env') });
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
baseURL: process.env.STAGING === '1' ? 'http://staging.example.test/' : 'http://example.test/', baseURL: process.env.STAGING === '1' ? 'http://staging.example.test/' : 'http://example.test/',
} }
}; });
export default config;
``` ```
Now, you can just edit `.env` file to set any variables you'd like. Now, you can just edit `.env` file to set any variables you'd like.

16
docs/src/test-reporter-api/class-reporter.md
View file

@ -62,22 +62,20 @@ Now use this reporter with [`property: TestConfig.reporter`]. Learn more about [
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
reporter: './my-awesome-reporter.js',
};
module.exports = config; module.exports = defineConfig({
reporter: './my-awesome-reporter.js',
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
reporter: './my-awesome-reporter.ts', reporter: './my-awesome-reporter.ts',
}; });
export default config;
``` ```
Here is a typical order of reporter calls: Here is a typical order of reporter calls:

241
docs/src/test-reporters-js.md
View file

@ -16,22 +16,20 @@ For more control, you can specify reporters programmatically in the [configurati
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
reporter: 'line',
};
module.exports = config; module.exports = defineConfig({
reporter: 'line',
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
reporter: 'line', reporter: 'line',
}; });
export default config;
``` ```
### Multiple reporters ### Multiple reporters
@ -42,28 +40,26 @@ You can use multiple reporters at the same time. For example you can use `'list
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
reporter: [ reporter: [
['list'], ['list'],
['json', { outputFile: 'test-results.json' }] ['json', { outputFile: 'test-results.json' }]
], ],
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
reporter: [ reporter: [
['list'], ['list'],
['json', { outputFile: 'test-results.json' }] ['json', { outputFile: 'test-results.json' }]
], ],
}; });
export default config;
``` ```
### Reporters on CI ### Reporters on CI
@ -74,24 +70,22 @@ You can use different reporters locally and on CI. For example, using concise `'
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
// Concise 'dot' for CI, default 'list' when running locally // Concise 'dot' for CI, default 'list' when running locally
reporter: process.env.CI ? 'dot' : 'list', reporter: process.env.CI ? 'dot' : 'list',
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
// Concise 'dot' for CI, default 'list' when running locally // Concise 'dot' for CI, default 'list' when running locally
reporter: process.env.CI ? 'dot' : 'list', reporter: process.env.CI ? 'dot' : 'list',
}; });
export default config;
``` ```
## Built-in reporters ## Built-in reporters
@ -110,22 +104,20 @@ npx playwright test --reporter=list
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
reporter: 'list',
};
module.exports = config; module.exports = defineConfig({
reporter: 'list',
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
reporter: 'list', reporter: 'list',
}; });
export default config;
``` ```
Here is an example output in the middle of a test run. Failures will be listed at the end. Here is an example output in the middle of a test run. Failures will be listed at the end.
@ -151,22 +143,20 @@ You can opt into the step rendering via passing the following config option:
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
reporter: [['list', { printSteps: true }]],
};
module.exports = config; module.exports = defineConfig({
reporter: [['list', { printSteps: true }]],
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
reporter: [['list', { printSteps: true }]], reporter: [['list', { printSteps: true }]],
}; });
export default config;
``` ```
### Line reporter ### Line reporter
@ -181,22 +171,20 @@ npx playwright test --reporter=line
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
reporter: 'line',
};
module.exports = config; module.exports = defineConfig({
reporter: 'line',
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
reporter: 'line', reporter: 'line',
}; });
export default config;
``` ```
Here is an example output in the middle of a test run. Failures are reported inline. Here is an example output in the middle of a test run. Failures are reported inline.
@ -225,22 +213,20 @@ npx playwright test --reporter=dot
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
reporter: 'dot',
};
module.exports = config; module.exports = defineConfig({
reporter: 'dot',
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
reporter: 'dot', reporter: 'dot',
}; });
export default config;
``` ```
Here is an example output in the middle of a test run. Failures will be listed at the end. Here is an example output in the middle of a test run. Failures will be listed at the end.
@ -268,26 +254,24 @@ You can also configure `host` and `port` that are used to serve the HTML report.
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
reporter: [['html', { reporter: [['html', {
open: 'never', open: 'never',
host: '0.0.0.0', host: '0.0.0.0',
port: 9223, port: 9223,
}]], }]],
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
reporter: [['html', { open: 'never' }]], reporter: [['html', { open: 'never' }]],
}; });
export default config;
``` ```
By default, report is written into the `playwright-report` folder in the current working directory. One can override By default, report is written into the `playwright-report` folder in the current working directory. One can override
@ -298,22 +282,20 @@ In configuration file, pass options directly:
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
reporter: [['html', { outputFolder: 'my-report' }]],
};
module.exports = config; module.exports = defineConfig({
reporter: [['html', { outputFolder: 'my-report' }]],
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
reporter: [['html', { outputFolder: 'my-report' }]], reporter: [['html', { outputFolder: 'my-report' }]],
}; });
export default config;
``` ```
A quick way of opening the last test run report is: A quick way of opening the last test run report is:
@ -356,22 +338,20 @@ In configuration file, pass options directly:
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
reporter: [['json', { outputFile: 'results.json' }]],
};
module.exports = config; module.exports = defineConfig({
reporter: [['json', { outputFile: 'results.json' }]],
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
reporter: [['json', { outputFile: 'results.json' }]], reporter: [['json', { outputFile: 'results.json' }]],
}; });
export default config;
``` ```
### JUnit reporter ### JUnit reporter
@ -399,22 +379,20 @@ In configuration file, pass options directly:
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
reporter: [['junit', { outputFile: 'results.xml' }]],
};
module.exports = config; module.exports = defineConfig({
reporter: [['junit', { outputFile: 'results.xml' }]],
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
reporter: [['junit', { outputFile: 'results.xml' }]], reporter: [['junit', { outputFile: 'results.xml' }]],
}; });
export default config;
``` ```
The JUnit reporter provides support for embedding additional information on the `testcase` elements using inner `properties`. This is based on an [evolved JUnit XML format](https://docs.getxray.app/display/XRAYCLOUD/Taking+advantage+of+JUnit+XML+reports) from Xray Test Management, but can also be used by other tools if they support this way of embedding additional information for test results; please check it first. The JUnit reporter provides support for embedding additional information on the `testcase` elements using inner `properties`. This is based on an [evolved JUnit XML format](https://docs.getxray.app/display/XRAYCLOUD/Taking+advantage+of+JUnit+XML+reports) from Xray Test Management, but can also be used by other tools if they support this way of embedding additional information for test results; please check it first.
@ -425,8 +403,6 @@ In configuration file, a set of options can be used to configure this behavior.
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */
// JUnit reporter config for Xray // JUnit reporter config for Xray
const xrayOptions = { const xrayOptions = {
// Whether to add <properties> with all annotations; default is false // Whether to add <properties> with all annotations; default is false
@ -444,16 +420,14 @@ const xrayOptions = {
outputFile: './xray-report.xml' outputFile: './xray-report.xml'
}; };
const config = { module.exports = defineConfig({
reporter: [['junit', xrayOptions]] reporter: [['junit', xrayOptions]]
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
// JUnit reporter config for Xray // JUnit reporter config for Xray
const xrayOptions = { const xrayOptions = {
@ -472,11 +446,9 @@ const xrayOptions = {
outputFile: './xray-report.xml' outputFile: './xray-report.xml'
}; };
const config: PlaywrightTestConfig = { export default defineConfig({
reporter: [['junit', xrayOptions]] reporter: [['junit', xrayOptions]]
}; });
export default config;
``` ```
In the previous configuration sample, all annotations will be added as `<property>` elements on the JUnit XML report. The annotation type is mapped to the `name` attribute of the `<property>`, and the annotation description will be added as a `value` attribute. In this case, the exception will be the annotation type `testrun_evidence` whose description will be added as inner content on the respective `<property>`. In the previous configuration sample, all annotations will be added as `<property>` elements on the JUnit XML report. The annotation type is mapped to the `name` attribute of the `<property>`, and the annotation description will be added as a `value` attribute. In this case, the exception will be the annotation type `testrun_evidence` whose description will be added as inner content on the respective `<property>`.
@ -518,23 +490,20 @@ The following configuration sample enables embedding attachments by using the `t
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
reporter: [['junit', { embedAttachmentsAsProperty: 'testrun_evidence', outputFile: 'results.xml' }]],
};
module.exports = config; module.exports = defineConfig({
reporter: [['junit', { embedAttachmentsAsProperty: 'testrun_evidence', outputFile: 'results.xml' }]],
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.js // playwright.config.js
import { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
reporter: [['junit', { embedAttachmentsAsProperty: 'testrun_evidence', outputFile: 'results.xml' }]], reporter: [['junit', { embedAttachmentsAsProperty: 'testrun_evidence', outputFile: 'results.xml' }]],
}; });
export default config;
``` ```
The following test adds attachments: The following test adds attachments:
@ -572,26 +541,24 @@ Note that all other reporters work on GitHub Actions as well, but do not provide
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
// 'github' for GitHub Actions CI to generate annotations, plus a concise 'dot' // 'github' for GitHub Actions CI to generate annotations, plus a concise 'dot'
// default 'list' when running locally // default 'list' when running locally
reporter: process.env.CI ? 'github' : 'list', reporter: process.env.CI ? 'github' : 'list',
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
// 'github' for GitHub Actions CI to generate annotations, plus a concise 'dot' // 'github' for GitHub Actions CI to generate annotations, plus a concise 'dot'
// default 'list' when running locally // default 'list' when running locally
reporter: process.env.CI ? 'github' : 'list', reporter: process.env.CI ? 'github' : 'list',
}; });
export default config;
``` ```
## Custom reporters ## Custom reporters
@ -655,22 +622,20 @@ Now use this reporter with [`property: TestConfig.reporter`].
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
reporter: './my-awesome-reporter.js',
};
module.exports = config; module.exports = defineConfig({
reporter: './my-awesome-reporter.js',
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
reporter: './my-awesome-reporter.ts', reporter: './my-awesome-reporter.ts',
}; });
export default config;
``` ```

16
docs/src/test-retries-js.md
View file

@ -74,24 +74,22 @@ npx playwright test --retries=3
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
// Give failing tests 3 retry attempts // Give failing tests 3 retry attempts
retries: 3, retries: 3,
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
// Give failing tests 3 retry attempts // Give failing tests 3 retry attempts
retries: 3, retries: 3,
}; });
export default config;
``` ```
Playwright Test will categorize tests as follows: Playwright Test will categorize tests as follows:

7
docs/src/test-snapshots-js.md
View file

@ -103,13 +103,12 @@ module.exports = {
``` ```
```js tab=js-ts ```js tab=js-ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
expect: { expect: {
toHaveScreenshot: { maxDiffPixels: 100 }, toHaveScreenshot: { maxDiffPixels: 100 },
}, },
}; });
export default config;
``` ```
Apart from screenshots, you can use `expect(value).toMatchSnapshot(snapshotName)` to compare text or arbitrary binary data. Playwright Test auto-detects the content type and uses the appropriate comparison algorithm. Apart from screenshots, you can use `expect(value).toMatchSnapshot(snapshotName)` to compare text or arbitrary binary data. Playwright Test auto-detects the content type and uses the appropriate comparison algorithm.

64
docs/src/test-timeouts-js.md
View file

@ -35,22 +35,20 @@ The same timeout value also applies to `beforeAll` and `afterAll` hooks, but the
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
timeout: 5 * 60 * 1000,
};
module.exports = config; module.exports = defineConfig({
timeout: 5 * 60 * 1000,
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
timeout: 5 * 60 * 1000, timeout: 5 * 60 * 1000,
}; });
export default config;
``` ```
API reference: [`property: TestConfig.timeout`]. API reference: [`property: TestConfig.timeout`].
@ -155,26 +153,24 @@ Call log:
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
expect: { expect: {
timeout: 10 * 1000, timeout: 10 * 1000,
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
expect: { expect: {
timeout: 10 * 1000, timeout: 10 * 1000,
}, },
}; });
export default config;
``` ```
API reference: [`property: TestConfig.expect`]. API reference: [`property: TestConfig.expect`].
@ -218,28 +214,26 @@ Playwright also allows to set a separate timeout for navigation actions like `pa
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
use: { use: {
actionTimeout: 10 * 1000, actionTimeout: 10 * 1000,
navigationTimeout: 30 * 1000, navigationTimeout: 30 * 1000,
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
actionTimeout: 10 * 1000, actionTimeout: 10 * 1000,
navigationTimeout: 30 * 1000, navigationTimeout: 30 * 1000,
}, },
}; });
export default config;
``` ```
API reference: [`property: TestOptions.actionTimeout`] and [`property: TestOptions.navigationTimeout`]. API reference: [`property: TestOptions.actionTimeout`] and [`property: TestOptions.navigationTimeout`].
@ -282,22 +276,20 @@ You can set global timeout in the config.
// playwright.config.js // playwright.config.js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
globalTimeout: 60 * 60 * 1000,
};
module.exports = config; module.exports = defineConfig({
globalTimeout: 60 * 60 * 1000,
});
``` ```
```js tab=js-ts ```js tab=js-ts
// playwright.config.ts // playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
globalTimeout: 60 * 60 * 1000, globalTimeout: 60 * 60 * 1000,
}; });
export default config;
``` ```
API reference: [`property: TestConfig.globalTimeout`]. API reference: [`property: TestConfig.globalTimeout`].

16
docs/src/trace-viewer-intro-js.md
View file

@ -19,28 +19,26 @@ By default the [playwright.config](/test-configuration.md#record-test-trace) fil
```js tab=js-js ```js tab=js-js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
retries: process.env.CI ? 2 : 0, // set to 2 when running on CI retries: process.env.CI ? 2 : 0, // set to 2 when running on CI
... ...
use: { use: {
trace: 'on-first-retry', // record traces on first retry of each test trace: 'on-first-retry', // record traces on first retry of each test
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
retries: process.env.CI ? 2 : 0, // set to 2 when running on CI retries: process.env.CI ? 2 : 0, // set to 2 when running on CI
... ...
use: { use: {
trace: 'on-first-retry', // record traces on first retry of each test trace: 'on-first-retry', // record traces on first retry of each test
}, },
}; });
export default config;
``` ```
To learn more about available options to record a trace check out our detailed guide on [Trace Viewer](/trace-viewer.md). To learn more about available options to record a trace check out our detailed guide on [Trace Viewer](/trace-viewer.md).

16
docs/src/trace-viewer.md
View file

@ -134,26 +134,24 @@ by setting the `trace: 'on-first-retry'` option in the test configuration file.
```js tab=js-js ```js tab=js-js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
retries: 1, retries: 1,
use: { use: {
trace: 'on-first-retry', trace: 'on-first-retry',
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
retries: 1, retries: 1,
use: { use: {
trace: 'on-first-retry', trace: 'on-first-retry',
}, },
}; });
export default config;
``` ```
```js tab=js-library ```js tab=js-library

32
docs/src/videos.md
View file

@ -22,24 +22,22 @@ Videos are saved upon [browser context](./browser-contexts.md) closure at the en
```js tab=js-js ```js tab=js-js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
use: { use: {
video: 'on-first-retry', video: 'on-first-retry',
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
video: 'on-first-retry', video: 'on-first-retry',
}, },
}; });
export default config;
``` ```
```js tab=js-library ```js tab=js-library
@ -53,30 +51,28 @@ You can also specify video size. The video size defaults to the viewport size sc
```js tab=js-js ```js tab=js-js
// @ts-check // @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */ const { defineConfig } = require('@playwright/test');
const config = {
module.exports = defineConfig({
use: { use: {
video: { video: {
mode: 'on-first-retry', mode: 'on-first-retry',
size: { width: 640, height: 480 } size: { width: 640, height: 480 }
} }
}, },
}; });
module.exports = config;
``` ```
```js tab=js-ts ```js tab=js-ts
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
use: { use: {
video: { video: {
mode: 'on-first-retry', mode: 'on-first-retry',
size: { width: 640, height: 480 } size: { width: 640, height: 480 }
} }
}, },
}; });
export default config;
``` ```
```js tab=js-library ```js tab=js-library

7
examples/github-api/playwright.config.ts
View file

@ -1,11 +1,11 @@
/* eslint-disable notice/notice */ /* eslint-disable notice/notice */
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
/** /**
* See https://playwright.dev/docs/test-configuration. * See https://playwright.dev/docs/test-configuration.
*/ */
const config: PlaywrightTestConfig = { export default defineConfig({
testDir: './tests', testDir: './tests',
@ -32,5 +32,4 @@ const config: PlaywrightTestConfig = {
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry', trace: 'on-first-retry',
}, },
}; });
export default config;

11
examples/mock-battery/playwright.config.js
View file

@ -1,16 +1,13 @@
// @ts-check // @ts-check
const path = require('path') const path = require('path')
/** const { defineConfig } = require('@playwright/test');
* @see https://playwright.dev/docs/test-configuration
* @type{import('@playwright/test').PlaywrightTestConfig} module.exports = defineConfig({
*/
const config = {
webServer: { webServer: {
port: 9900, port: 9900,
command: 'npm run start', command: 'npm run start',
}, },
// Test directory // Test directory
testDir: path.join(__dirname, 'tests'), testDir: path.join(__dirname, 'tests'),
}; });
module.exports = config;

11
examples/mock-filesystem/playwright.config.js
View file

@ -1,16 +1,13 @@
// @ts-check // @ts-check
const path = require('path') const path = require('path')
/** const { defineConfig } = require('@playwright/test');
* @see https://playwright.dev/docs/test-configuration
* @type{import('@playwright/test').PlaywrightTestConfig} module.exports = defineConfig({
*/
const config = {
webServer: { webServer: {
port: 9900, port: 9900,
command: 'npm run start', command: 'npm run start',
}, },
// Test directory // Test directory
testDir: path.join(__dirname, 'tests'), testDir: path.join(__dirname, 'tests'),
}; });
module.exports = config;

2
examples/outlook-login/.env
View file

@ -1,2 +0,0 @@
OUTLOOK_USER='<your test user>@outlook.com'
OUTLOOK_PASSWORD='<your test user password>'

4
examples/outlook-login/.gitignore vendored
View file

@ -1,4 +0,0 @@
node_modules/
/test-results/
/playwright-report/
/playwright/.cache/

14
examples/outlook-login/package.json
View file

@ -1,14 +0,0 @@
{
"name": "outlook-login-example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@playwright/test": "next",
"dotenv": "latest"
}
}

44
examples/outlook-login/playwright.config.ts
View file

@ -1,44 +0,0 @@
import type { PlaywrightTestConfig } from '@playwright/test';
import { devices } from '@playwright/test';
/**
* Read environment variables OUTLOOK_USER and OUTLOOK_PASSWORD from file.
* https://github.com/motdotla/dotenv
*/
require('dotenv').config();
const config: PlaywrightTestConfig = {
testDir: './tests',
reporter: 'html',
use: {
baseURL: 'https://outlook.com'
},
projects: [
{
name: 'chromium',
setup: /.*setup.ts$/,
use: {
...devices['Desktop Chrome'],
},
},
{
name: 'firefox',
setup: /.*setup.ts$/,
use: {
...devices['Desktop Firefox'],
},
},
{
name: 'webkit',
setup: /.*setup.ts$/,
use: {
...devices['Desktop Safari'],
},
},
],
};
export default config;

11
examples/outlook-login/tests/calendar.spec.ts
View file

@ -1,11 +0,0 @@
import { test, expect } from '@playwright/test';
test.use({
storageStateName: 'outlook-test-user'
});
test('calendar has new event button', async ({ page }) => {
await page.goto('/');
await page.getByRole('button', { name: 'Calendar' }).click();
await expect(page.getByRole('button', { name: 'New event' }).getByRole('button', { name: 'New event' })).toBeVisible();
});

24
examples/outlook-login/tests/login.setup.ts
View file

@ -1,24 +0,0 @@
import { test, expect } from '@playwright/test';
test('test', async ({ page, context, browserName }) => {
await page.goto('/');
await page.getByRole('navigation', { name: 'Quick links' }).getByRole('link', { name: 'Sign in' }).click();
await page.getByRole('textbox', { name: 'Enter your email, phone, or Skype.' }).fill(process.env.OUTLOOK_USER!);
await page.getByRole('button', { name: 'Next' }).click();
// Outlook serves different login page for the browsers that use WebKit
// (based on the User-Agent string).
if (browserName === 'webkit') {
await page.getByRole('textbox', { name: `Enter the password for ${process.env.OUTLOOK_USER!}` }).fill(process.env.OUTLOOK_PASSWORD!);
} else {
await page.getByPlaceholder('Password').fill(process.env.OUTLOOK_PASSWORD!);
}
await page.getByRole('button', { name: 'Sign in' }).click();
await page.getByLabel('Don\'t show this again').check();
await page.getByRole('button', { name: 'Yes' }).click();
expect((await context.cookies()).length).toBeTruthy();
const contextState = await context.storageState();
const storage = test.info().storage();
await storage.set('outlook-test-user', contextState);
});

10
examples/outlook-login/tests/mail.spec.ts
View file

@ -1,10 +0,0 @@
import { test, expect } from '@playwright/test';
test.use({
storageStateName: 'outlook-test-user'
});
test('inbox has new mail button', async ({ page }) => {
await page.goto('/');
await expect(page.getByRole('button', { name: 'New mail' }).getByRole('button', { name: 'New mail' })).toBeVisible();
});

7
examples/svgomg/playwright.config.ts
View file

@ -1,11 +1,11 @@
/* eslint-disable notice/notice */ /* eslint-disable notice/notice */
import { type PlaywrightTestConfig, devices } from '@playwright/test'; import { defineConfig, devices } from '@playwright/test';
/** /**
* See https://playwright.dev/docs/test-configuration. * See https://playwright.dev/docs/test-configuration.
*/ */
const config: PlaywrightTestConfig = { export default defineConfig({
testDir: './tests', testDir: './tests',
@ -110,5 +110,4 @@ const config: PlaywrightTestConfig = {
// command: 'npm run start', // command: 'npm run start',
// port: 3000, // port: 3000,
// }, // },
}; });
export default config;

7
examples/todomvc/playwright.config.ts
View file

@ -1,11 +1,11 @@
/* eslint-disable notice/notice */ /* eslint-disable notice/notice */
import { type PlaywrightTestConfig, devices } from '@playwright/test'; import { defineConfig, devices } from '@playwright/test';
/** /**
* See https://playwright.dev/docs/test-configuration. * See https://playwright.dev/docs/test-configuration.
*/ */
const config: PlaywrightTestConfig = { export default defineConfig({
testDir: './tests', testDir: './tests',
@ -108,5 +108,4 @@ const config: PlaywrightTestConfig = {
// command: 'npm run start', // command: 'npm run start',
// port: 3000, // port: 3000,
// }, // },
}; });
export default config;

9
packages/html-reporter/playwright.config.ts
View file

@ -14,10 +14,9 @@
* limitations under the License. * limitations under the License.
*/ */
import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react'; import { devices, defineConfig } from '@playwright/experimental-ct-react';
import { devices } from '@playwright/experimental-ct-react';
const config: PlaywrightTestConfig = { export default defineConfig({
testDir: 'src', testDir: 'src',
forbidOnly: !!process.env.CI, forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0, retries: process.env.CI ? 2 : 0,
@ -32,6 +31,4 @@ const config: PlaywrightTestConfig = {
name: 'chromium', name: 'chromium',
use: { ...devices['Desktop Chrome'] }, use: { ...devices['Desktop Chrome'] },
}], }],
}; });
export default config;

11
packages/playwright-ct-react/index.d.ts vendored
View file

@ -25,8 +25,8 @@ import type {
} from '@playwright/test'; } from '@playwright/test';
import type { InlineConfig } from 'vite'; import type { InlineConfig } from 'vite';
export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & { export type PlaywrightTestConfig<T = {}, W = {}> = Omit<BasePlaywrightTestConfig<T, W>, 'use'> & {
use?: BasePlaywrightTestConfig['use'] & { use?: BasePlaywrightTestConfig<T, W>['use'] & {
ctPort?: number; ctPort?: number;
ctTemplateDir?: string; ctTemplateDir?: string;
ctCacheDir?: string; ctCacheDir?: string;
@ -60,4 +60,11 @@ export const test: TestType<
PlaywrightWorkerArgs & PlaywrightWorkerOptions PlaywrightWorkerArgs & PlaywrightWorkerOptions
>; >;
/**
* Defines Playwright config
*/
export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig;
export function defineConfig<T>(config: PlaywrightTestConfig<T>): PlaywrightTestConfig<T>;
export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>): PlaywrightTestConfig<T, W>;
export { expect, devices } from '@playwright/test'; export { expect, devices } from '@playwright/test';

4
packages/playwright-ct-react/index.js
View file

@ -14,7 +14,7 @@
* limitations under the License. * limitations under the License.
*/ */
const { test: baseTest, expect, devices, _addRunnerPlugin } = require('@playwright/test'); const { test: baseTest, expect, devices, _addRunnerPlugin, defineConfig } = require('@playwright/test');
const { fixtures } = require('@playwright/test/lib/mount'); const { fixtures } = require('@playwright/test/lib/mount');
const path = require('path'); const path = require('path');
@ -28,4 +28,4 @@ _addRunnerPlugin(() => {
const test = baseTest.extend(fixtures); const test = baseTest.extend(fixtures);
module.exports = { test, expect, devices }; module.exports = { test, expect, devices, defineConfig };

11
packages/playwright-ct-solid/index.d.ts vendored
View file

@ -25,8 +25,8 @@ import type {
} from '@playwright/test'; } from '@playwright/test';
import type { InlineConfig } from 'vite'; import type { InlineConfig } from 'vite';
export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & { export type PlaywrightTestConfig<T = {}, W = {}> = Omit<BasePlaywrightTestConfig<T, W>, 'use'> & {
use?: BasePlaywrightTestConfig['use'] & { use?: BasePlaywrightTestConfig<T, W>['use'] & {
ctPort?: number; ctPort?: number;
ctTemplateDir?: string; ctTemplateDir?: string;
ctCacheDir?: string; ctCacheDir?: string;
@ -60,4 +60,11 @@ export const test: TestType<
PlaywrightWorkerArgs & PlaywrightWorkerOptions PlaywrightWorkerArgs & PlaywrightWorkerOptions
>; >;
/**
* Defines Playwright config
*/
export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig;
export function defineConfig<T>(config: PlaywrightTestConfig<T>): PlaywrightTestConfig<T>;
export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>): PlaywrightTestConfig<T, W>;
export { expect, devices } from '@playwright/test'; export { expect, devices } from '@playwright/test';

4
packages/playwright-ct-solid/index.js
View file

@ -14,7 +14,7 @@
* limitations under the License. * limitations under the License.
*/ */
const { test: baseTest, expect, devices, _addRunnerPlugin } = require('@playwright/test'); const { test: baseTest, expect, devices, _addRunnerPlugin, defineConfig } = require('@playwright/test');
const { fixtures } = require('@playwright/test/lib/mount'); const { fixtures } = require('@playwright/test/lib/mount');
const path = require('path'); const path = require('path');
@ -28,4 +28,4 @@ _addRunnerPlugin(() => {
const test = baseTest.extend(fixtures); const test = baseTest.extend(fixtures);
module.exports = { test, expect, devices }; module.exports = { test, expect, devices, defineConfig };

11
packages/playwright-ct-svelte/index.d.ts vendored
View file

@ -26,8 +26,8 @@ import type {
import type { InlineConfig } from 'vite'; import type { InlineConfig } from 'vite';
import type { SvelteComponent, ComponentProps } from 'svelte/types/runtime'; import type { SvelteComponent, ComponentProps } from 'svelte/types/runtime';
export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & { export type PlaywrightTestConfig<T = {}, W = {}> = Omit<BasePlaywrightTestConfig<T, W>, 'use'> & {
use?: BasePlaywrightTestConfig['use'] & { use?: BasePlaywrightTestConfig<T, W>['use'] & {
ctPort?: number; ctPort?: number;
ctTemplateDir?: string; ctTemplateDir?: string;
ctCacheDir?: string; ctCacheDir?: string;
@ -74,4 +74,11 @@ export const test: TestType<
PlaywrightWorkerArgs & PlaywrightWorkerOptions PlaywrightWorkerArgs & PlaywrightWorkerOptions
>; >;
/**
* Defines Playwright config
*/
export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig;
export function defineConfig<T>(config: PlaywrightTestConfig<T>): PlaywrightTestConfig<T>;
export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>): PlaywrightTestConfig<T, W>;
export { expect, devices } from '@playwright/test'; export { expect, devices } from '@playwright/test';

4
packages/playwright-ct-svelte/index.js
View file

@ -14,7 +14,7 @@
* limitations under the License. * limitations under the License.
*/ */
const { test: baseTest, expect, devices, _addRunnerPlugin } = require('@playwright/test'); const { test: baseTest, expect, devices, _addRunnerPlugin, defineConfig } = require('@playwright/test');
const { fixtures } = require('@playwright/test/lib/mount'); const { fixtures } = require('@playwright/test/lib/mount');
const path = require('path'); const path = require('path');
@ -28,4 +28,4 @@ _addRunnerPlugin(() => {
const test = baseTest.extend(fixtures); const test = baseTest.extend(fixtures);
module.exports = { test, expect, devices }; module.exports = { test, expect, devices, defineConfig };

11
packages/playwright-ct-vue/index.d.ts vendored
View file

@ -25,8 +25,8 @@ import type {
} from '@playwright/test'; } from '@playwright/test';
import type { InlineConfig } from 'vite'; import type { InlineConfig } from 'vite';
export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & { export type PlaywrightTestConfig<T = {}, W = {}> = Omit<BasePlaywrightTestConfig<T, W>, 'use'> & {
use?: BasePlaywrightTestConfig['use'] & { use?: BasePlaywrightTestConfig<T, W>['use'] & {
ctPort?: number; ctPort?: number;
ctTemplateDir?: string; ctTemplateDir?: string;
ctCacheDir?: string; ctCacheDir?: string;
@ -83,4 +83,11 @@ export const test: TestType<
PlaywrightWorkerArgs & PlaywrightWorkerOptions PlaywrightWorkerArgs & PlaywrightWorkerOptions
>; >;
/**
* Defines Playwright config
*/
export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig;
export function defineConfig<T>(config: PlaywrightTestConfig<T>): PlaywrightTestConfig<T>;
export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>): PlaywrightTestConfig<T, W>;
export { expect, devices } from '@playwright/test'; export { expect, devices } from '@playwright/test';

4
packages/playwright-ct-vue/index.js
View file

@ -14,7 +14,7 @@
* limitations under the License. * limitations under the License.
*/ */
const { test: baseTest, expect, devices, _addRunnerPlugin } = require('@playwright/test'); const { test: baseTest, expect, devices, _addRunnerPlugin, defineConfig } = require('@playwright/test');
const { fixtures } = require('@playwright/test/lib/mount'); const { fixtures } = require('@playwright/test/lib/mount');
const path = require('path'); const path = require('path');
@ -28,4 +28,4 @@ _addRunnerPlugin(() => {
const test = baseTest.extend(fixtures); const test = baseTest.extend(fixtures);
module.exports = { test, expect, devices }; module.exports = { test, expect, devices, defineConfig };

11
packages/playwright-ct-vue2/index.d.ts vendored
View file

@ -25,8 +25,8 @@ import type {
} from '@playwright/test'; } from '@playwright/test';
import type { InlineConfig } from 'vite'; import type { InlineConfig } from 'vite';
export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & { export type PlaywrightTestConfig<T = {}, W = {}> = Omit<BasePlaywrightTestConfig<T, W>, 'use'> & {
use?: BasePlaywrightTestConfig['use'] & { use?: BasePlaywrightTestConfig<T, W>['use'] & {
ctPort?: number; ctPort?: number;
ctTemplateDir?: string; ctTemplateDir?: string;
ctCacheDir?: string; ctCacheDir?: string;
@ -83,4 +83,11 @@ export const test: TestType<
PlaywrightWorkerArgs & PlaywrightWorkerOptions PlaywrightWorkerArgs & PlaywrightWorkerOptions
>; >;
/**
* Defines Playwright config
*/
export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig;
export function defineConfig<T>(config: PlaywrightTestConfig<T>): PlaywrightTestConfig<T>;
export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>): PlaywrightTestConfig<T, W>;
export { expect, devices } from '@playwright/test'; export { expect, devices } from '@playwright/test';

4
packages/playwright-ct-vue2/index.js
View file

@ -14,7 +14,7 @@
* limitations under the License. * limitations under the License.
*/ */
const { test: baseTest, expect, devices, _addRunnerPlugin } = require('@playwright/test'); const { test: baseTest, expect, devices, _addRunnerPlugin, defineConfig } = require('@playwright/test');
const { fixtures } = require('@playwright/test/lib/mount'); const { fixtures } = require('@playwright/test/lib/mount');
const path = require('path'); const path = require('path');
@ -28,4 +28,4 @@ _addRunnerPlugin(() => {
const test = baseTest.extend(fixtures); const test = baseTest.extend(fixtures);
module.exports = { test, expect, devices }; module.exports = { test, expect, devices, defineConfig };

2
packages/playwright-test/index.js
View file

@ -16,9 +16,11 @@
const pwt = require('./lib/index'); const pwt = require('./lib/index');
const playwright = require('playwright-core'); const playwright = require('playwright-core');
const defineConfig = config => config;
const combinedExports = { const combinedExports = {
...playwright, ...playwright,
...pwt, ...pwt,
defineConfig,
}; };
Object.defineProperty(combinedExports, '__esModule', { value: true }); Object.defineProperty(combinedExports, '__esModule', { value: true });

1
packages/playwright-test/index.mjs
View file

@ -26,4 +26,5 @@ export const _electron = playwright._electron;
export const _android = playwright._android; export const _android = playwright._android;
export const test = playwright.test; export const test = playwright.test;
export const expect = playwright.expect; export const expect = playwright.expect;
export const defineConfig = playwright.defineConfig;
export default playwright.test; export default playwright.test;

488
packages/playwright-test/types/test.d.ts vendored
View file

File diff suppressed because it is too large Load diff

7
packages/playwright-test/types/testReporter.d.ts vendored
View file

@ -341,12 +341,11 @@ export interface FullResult {
* *
* ```js * ```js
* // playwright.config.ts * // playwright.config.ts
* import type { PlaywrightTestConfig } from '@playwright/test'; * import { defineConfig } from '@playwright/test';
* *
* const config: PlaywrightTestConfig = { * export default defineConfig({
* reporter: './my-awesome-reporter.ts', * reporter: './my-awesome-reporter.ts',
* }; * });
* export default config;
* ``` * ```
* *
* Here is a typical order of reporter calls: * Here is a typical order of reporter calls:

9
packages/web/playwright.config.ts
View file

@ -14,10 +14,9 @@
* limitations under the License. * limitations under the License.
*/ */
import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react'; import { devices, defineConfig } from '@playwright/experimental-ct-react';
import { devices } from '@playwright/experimental-ct-react';
const config: PlaywrightTestConfig = { export default defineConfig({
testDir: 'src', testDir: 'src',
forbidOnly: !!process.env.CI, forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0, retries: process.env.CI ? 2 : 0,
@ -32,6 +31,4 @@ const config: PlaywrightTestConfig = {
use: { ...devices['Desktop Chrome'] }, use: { ...devices['Desktop Chrome'] },
}, },
], ],
}; });
export default config;

8
tests/components/ct-react-vite/playwright.config.ts
View file

@ -14,9 +14,9 @@
* limitations under the License. * limitations under the License.
*/ */
import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-react'; import { defineConfig, devices } from '@playwright/experimental-ct-react';
const config: PlaywrightTestConfig = { export default defineConfig({
testDir: 'src', testDir: 'src',
forbidOnly: !!process.env.CI, forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0, retries: process.env.CI ? 2 : 0,
@ -38,6 +38,4 @@ const config: PlaywrightTestConfig = {
use: { ...devices['Desktop Safari'] }, use: { ...devices['Desktop Safari'] },
}, },
], ],
}; });
export default config;

8
tests/components/ct-react/playwright.config.ts
View file

@ -14,9 +14,9 @@
* limitations under the License. * limitations under the License.
*/ */
import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-react'; import { defineConfig, devices } from '@playwright/experimental-ct-react';
const config: PlaywrightTestConfig = { export default defineConfig({
testDir: 'src', testDir: 'src',
forbidOnly: !!process.env.CI, forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0, retries: process.env.CI ? 2 : 0,
@ -38,6 +38,4 @@ const config: PlaywrightTestConfig = {
use: { ...devices['Desktop Safari'] }, use: { ...devices['Desktop Safari'] },
}, },
], ],
}; });
export default config;

8
tests/components/ct-solid/playwright.config.ts
View file

@ -14,10 +14,10 @@
* limitations under the License. * limitations under the License.
*/ */
import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-solid'; import { defineConfig, devices } from '@playwright/experimental-ct-solid';
import { resolve } from 'path'; import { resolve } from 'path';
const config: PlaywrightTestConfig = { export default defineConfig({
testDir: 'tests', testDir: 'tests',
forbidOnly: !!process.env.CI, forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0, retries: process.env.CI ? 2 : 0,
@ -46,6 +46,4 @@ const config: PlaywrightTestConfig = {
use: { ...devices['Desktop Safari'] }, use: { ...devices['Desktop Safari'] },
}, },
], ],
}; });
export default config;

8
tests/components/ct-svelte-vite/playwright.config.ts
View file

@ -14,11 +14,11 @@
* limitations under the License. * limitations under the License.
*/ */
import type { PlaywrightTestConfig } from '@playwright/experimental-ct-svelte'; import { defineConfig } from '@playwright/experimental-ct-svelte';
import { devices } from '@playwright/test'; import { devices } from '@playwright/test';
import { resolve } from 'path'; import { resolve } from 'path';
const config: PlaywrightTestConfig = { export default defineConfig({
testDir: 'tests', testDir: 'tests',
forbidOnly: !!process.env.CI, forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0, retries: process.env.CI ? 2 : 0,
@ -47,6 +47,4 @@ const config: PlaywrightTestConfig = {
use: { ...devices['Desktop Safari'] }, use: { ...devices['Desktop Safari'] },
}, },
], ],
}; });
export default config;

8
tests/components/ct-svelte/playwright.config.ts
View file

@ -14,10 +14,10 @@
* limitations under the License. * limitations under the License.
*/ */
import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-svelte'; import { defineConfig, devices } from '@playwright/experimental-ct-svelte';
import { resolve } from 'path'; import { resolve } from 'path';
const config: PlaywrightTestConfig = { export default defineConfig({
testDir: 'tests', testDir: 'tests',
forbidOnly: !!process.env.CI, forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0, retries: process.env.CI ? 2 : 0,
@ -46,6 +46,4 @@ const config: PlaywrightTestConfig = {
use: { ...devices['Desktop Safari'] }, use: { ...devices['Desktop Safari'] },
}, },
], ],
}; });
export default config;

8
tests/components/ct-vue-cli/playwright.config.ts
View file

@ -14,10 +14,10 @@
* limitations under the License. * limitations under the License.
*/ */
import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-vue'; import { defineConfig, devices } from '@playwright/experimental-ct-vue';
import { resolve } from 'path'; import { resolve } from 'path';
const config: PlaywrightTestConfig = { export default defineConfig({
testDir: 'tests', testDir: 'tests',
forbidOnly: !!process.env.CI, forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0, retries: process.env.CI ? 2 : 0,
@ -46,6 +46,4 @@ const config: PlaywrightTestConfig = {
use: { ...devices['Desktop Safari'] }, use: { ...devices['Desktop Safari'] },
}, },
], ],
}; });
export default config;

8
tests/components/ct-vue-vite/playwright.config.ts
View file

@ -14,10 +14,10 @@
* limitations under the License. * limitations under the License.
*/ */
import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-vue'; import { defineConfig, devices } from '@playwright/experimental-ct-vue';
import { resolve } from 'path'; import { resolve } from 'path';
const config: PlaywrightTestConfig = { export default defineConfig({
testDir: 'tests', testDir: 'tests',
forbidOnly: !!process.env.CI, forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0, retries: process.env.CI ? 2 : 0,
@ -46,6 +46,4 @@ const config: PlaywrightTestConfig = {
use: { ...devices['Desktop Safari'] }, use: { ...devices['Desktop Safari'] },
}, },
], ],
}; });
export default config;

8
tests/components/ct-vue2-cli/playwright.config.ts
View file

@ -14,10 +14,10 @@
* limitations under the License. * limitations under the License.
*/ */
import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-vue2'; import { defineConfig, devices } from '@playwright/experimental-ct-vue2';
import { resolve } from 'path'; import { resolve } from 'path';
const config: PlaywrightTestConfig = { export default defineConfig({
testDir: 'tests', testDir: 'tests',
forbidOnly: !!process.env.CI, forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0, retries: process.env.CI ? 2 : 0,
@ -46,6 +46,4 @@ const config: PlaywrightTestConfig = {
use: { ...devices['Desktop Safari'] }, use: { ...devices['Desktop Safari'] },
}, },
], ],
}; });
export default config;

8
tests/installation/playwright.config.ts
View file

@ -15,12 +15,12 @@
*/ */
import path from 'path'; import path from 'path';
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
import { config as loadEnv } from 'dotenv'; import { config as loadEnv } from 'dotenv';
loadEnv({ path: path.join(__dirname, '..', '..', '.env') }); loadEnv({ path: path.join(__dirname, '..', '..', '.env') });
const outputDir = path.join(__dirname, '..', '..', 'test-results'); const outputDir = path.join(__dirname, '..', '..', 'test-results');
const config: PlaywrightTestConfig = { export default defineConfig({
globalSetup: path.join(__dirname, 'globalSetup'), globalSetup: path.join(__dirname, 'globalSetup'),
outputDir, outputDir,
testIgnore: '**\/fixture-scripts/**', testIgnore: '**\/fixture-scripts/**',
@ -40,6 +40,4 @@ const config: PlaywrightTestConfig = {
}, },
}, },
], ],
}; });
export default config;

1
tests/library/browsercontext-fetch.spec.ts
View file

@ -762,7 +762,6 @@ it('should throw on a redirect with an invalid URL', async ({ context, server })
conn.uncork(); conn.uncork();
conn.end(); conn.end();
}); });
console.log(server.PREFIX + '/test');
const error = await context.request.get(server.PREFIX + '/redirect').catch(e => e); const error = await context.request.get(server.PREFIX + '/redirect').catch(e => e);
expect(error.message).toContain('apiRequestContext.get: uri requested responds with an invalid redirect URL'); expect(error.message).toContain('apiRequestContext.get: uri requested responds with an invalid redirect URL');
}); });

8
tests/playwright-test/config.spec.ts
View file

@ -450,9 +450,9 @@ test('should work with undefined values and base', async ({ runInlineTest }) =>
test('should have correct types for the config', async ({ runTSC }) => { test('should have correct types for the config', async ({ runTSC }) => {
const result = await runTSC({ const result = await runTSC({
'playwright.config.ts': ` 'playwright.config.ts': `
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
webServer: [ webServer: [
{ {
command: 'echo 123', command: 'echo 123',
@ -473,9 +473,7 @@ test('should have correct types for the config', async ({ runTSC }) => {
name: 'project name', name: 'project name',
} }
], ],
}; });
export default config;
` `
}); });
expect(result.exitCode).toBe(0); expect(result.exitCode).toBe(0);

7
tests/playwright-test/to-have-screenshot.spec.ts
View file

@ -375,8 +375,8 @@ test('should compile with different option combinations', async ({ runTSC }) =>
const result = await runTSC({ const result = await runTSC({
'playwright.config.ts': ` 'playwright.config.ts': `
//@no-header //@no-header
import type { PlaywrightTestConfig } from '@playwright/test'; import { defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { export default defineConfig({
expect: { expect: {
timeout: 10000, timeout: 10000,
toHaveScreenshot: { toHaveScreenshot: {
@ -388,8 +388,7 @@ test('should compile with different option combinations', async ({ runTSC }) =>
scale: "css", scale: "css",
}, },
}, },
}; });
export default config;
`, `,
'a.spec.ts': ` 'a.spec.ts': `
const { test } = pwt; const { test } = pwt;

8
tests/stress/playwright.config.ts
View file

@ -14,9 +14,9 @@
* limitations under the License. * limitations under the License.
*/ */
import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react'; import { defineConfig } from '@playwright/experimental-ct-react';
const config: PlaywrightTestConfig = { export default defineConfig({
forbidOnly: !!process.env.CI, forbidOnly: !!process.env.CI,
reporter: 'html', reporter: 'html',
projects: [ projects: [
@ -41,6 +41,4 @@ const config: PlaywrightTestConfig = {
}, },
}, },
] ]
}; });
export default config;

7
utils/generate_types/overrides-test.d.ts vendored
View file

@ -359,5 +359,12 @@ export const _baseTest: TestType<{}, {}>;
export const expect: Expect; export const expect: Expect;
export const store: TestStore; export const store: TestStore;
/**
* Defines Playwright config
*/
export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig;
export function defineConfig<T>(config: PlaywrightTestConfig<T>): PlaywrightTestConfig<T>;
export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>): PlaywrightTestConfig<T, W>;
// This is required to not export everything by default. See https://github.com/Microsoft/TypeScript/issues/19545#issuecomment-340490459 // This is required to not export everything by default. See https://github.com/Microsoft/TypeScript/issues/19545#issuecomment-340490459
export {}; export {};