From e065d608b6f79f11620068a746c83b6a753ee2a5 Mon Sep 17 00:00:00 2001 From: Pavel Feldman Date: Thu, 12 Jan 2023 13:12:02 -0800 Subject: [PATCH] chore: introduce defineConfig for easier JS typing (#20061) Fixes https://github.com/microsoft/playwright/issues/19694 --- docs/src/api/params.md | 33 +- docs/src/auth.md | 17 +- docs/src/browsers.md | 16 +- docs/src/emulation.md | 44 +- docs/src/locators.md | 14 +- docs/src/network.md | 21 +- docs/src/release-notes-js.md | 32 +- docs/src/test-advanced-js.md | 82 ++- docs/src/test-api-testing-js.md | 16 +- docs/src/test-api/class-test.md | 14 +- docs/src/test-api/class-testconfig.md | 510 ++++++++---------- docs/src/test-api/class-testoptions.md | 30 +- docs/src/test-api/class-testproject.md | 48 +- docs/src/test-components-js.md | 14 +- docs/src/test-configuration-js.md | 146 +++-- docs/src/test-fixtures-js.md | 15 +- docs/src/test-parallel-js.md | 64 +-- docs/src/test-parameterize-js.md | 46 +- docs/src/test-reporter-api/class-reporter.md | 16 +- docs/src/test-reporters-js.md | 241 ++++----- docs/src/test-retries-js.md | 16 +- docs/src/test-snapshots-js.md | 7 +- docs/src/test-timeouts-js.md | 64 +-- docs/src/trace-viewer-intro-js.md | 16 +- docs/src/trace-viewer.md | 16 +- docs/src/videos.md | 32 +- examples/github-api/playwright.config.ts | 7 +- examples/mock-battery/playwright.config.js | 11 +- examples/mock-filesystem/playwright.config.js | 11 +- examples/outlook-login/.env | 2 - examples/outlook-login/.gitignore | 4 - examples/outlook-login/package.json | 14 - examples/outlook-login/playwright.config.ts | 44 -- examples/outlook-login/tests/calendar.spec.ts | 11 - examples/outlook-login/tests/login.setup.ts | 24 - examples/outlook-login/tests/mail.spec.ts | 10 - examples/svgomg/playwright.config.ts | 7 +- examples/todomvc/playwright.config.ts | 7 +- packages/html-reporter/playwright.config.ts | 9 +- packages/playwright-ct-react/index.d.ts | 11 +- packages/playwright-ct-react/index.js | 4 +- packages/playwright-ct-solid/index.d.ts | 11 +- packages/playwright-ct-solid/index.js | 4 +- packages/playwright-ct-svelte/index.d.ts | 11 +- packages/playwright-ct-svelte/index.js | 4 +- packages/playwright-ct-vue/index.d.ts | 11 +- packages/playwright-ct-vue/index.js | 4 +- packages/playwright-ct-vue2/index.d.ts | 11 +- packages/playwright-ct-vue2/index.js | 4 +- packages/playwright-test/index.js | 2 + packages/playwright-test/index.mjs | 1 + packages/playwright-test/types/test.d.ts | 488 ++++++++--------- .../playwright-test/types/testReporter.d.ts | 7 +- packages/web/playwright.config.ts | 9 +- .../ct-react-vite/playwright.config.ts | 8 +- .../components/ct-react/playwright.config.ts | 8 +- .../components/ct-solid/playwright.config.ts | 8 +- .../ct-svelte-vite/playwright.config.ts | 8 +- .../components/ct-svelte/playwright.config.ts | 8 +- .../ct-vue-cli/playwright.config.ts | 8 +- .../ct-vue-vite/playwright.config.ts | 8 +- .../ct-vue2-cli/playwright.config.ts | 8 +- tests/installation/playwright.config.ts | 8 +- tests/library/browsercontext-fetch.spec.ts | 1 - tests/playwright-test/config.spec.ts | 8 +- .../to-have-screenshot.spec.ts | 7 +- tests/stress/playwright.config.ts | 8 +- utils/generate_types/overrides-test.d.ts | 7 + 68 files changed, 1017 insertions(+), 1399 deletions(-) delete mode 100644 examples/outlook-login/.env delete mode 100644 examples/outlook-login/.gitignore delete mode 100644 examples/outlook-login/package.json delete mode 100644 examples/outlook-login/playwright.config.ts delete mode 100644 examples/outlook-login/tests/calendar.spec.ts delete mode 100644 examples/outlook-login/tests/login.setup.ts delete mode 100644 examples/outlook-login/tests/mail.spec.ts diff --git a/docs/src/api/params.md b/docs/src/api/params.md index 79d6bf956a..a58da7d775 100644 --- a/docs/src/api/params.md +++ b/docs/src/api/params.md @@ -1581,27 +1581,24 @@ This option configures a template controlling location of snapshots generated by ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ testDir: './tests', snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}', -}; - -export default config; +}); ``` ```js tab=js-js // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ testDir: './tests', snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}', -}; - -module.exports = config; +}); ``` **Details** @@ -1669,34 +1666,32 @@ Consider the following config: ```js tab=js-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}', testMatch: 'example.spec.ts', projects: [ { use: { browserName: 'firefox' } }, { name: 'chromium', use: { browserName: 'chromium' } }, ], -}; -export default config; +}); ``` ```js tab=js-js // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ snapshotPathTemplate: '__screenshots__{/projectName}/{testFilePath}/{arg}{ext}', testMatch: 'example.spec.ts', projects: [ { use: { browserName: 'firefox' } }, { name: 'chromium', use: { browserName: 'chromium' } }, ], -}; - -module.exports = config; +}); ``` In this config: diff --git a/docs/src/auth.md b/docs/src/auth.md index 8ee81d32d6..2fc6163f71 100644 --- a/docs/src/auth.md +++ b/docs/src/auth.md @@ -221,30 +221,27 @@ Register global setup script in the Playwright configuration file: ```js tab=js-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'), use: { // Tell all tests to load signed-in state from 'storageState.json'. storageState: 'storageState.json' } -}; -export default config; +}); ``` ```js tab=js-js -// playwright.config.js -// @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ globalSetup: require.resolve('./global-setup'), use: { // Tell all tests to load signed-in state from 'storageState.json'. storageState: 'storageState.json' } -}; -module.exports = config; +}); ``` Tests start already authenticated because we specify `storageState` that was populated by global setup. diff --git a/docs/src/browsers.md b/docs/src/browsers.md index e438f25769..15d51a3568 100644 --- a/docs/src/browsers.md +++ b/docs/src/browsers.md @@ -36,24 +36,22 @@ Here is how you can opt into using the stock browser: ```js tab=js-js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ use: { channel: 'chrome', }, -}; - -module.exports = config; +}); ``` ```js tab=js-ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ use: { channel: 'chrome', }, -}; -export default config; +}); ``` ```js tab=js-library diff --git a/docs/src/emulation.md b/docs/src/emulation.md index f208beac31..faa308f63f 100644 --- a/docs/src/emulation.md +++ b/docs/src/emulation.md @@ -12,9 +12,9 @@ Playwright comes with a [registry of device parameters](https://github.com/micro ```js tab=js-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: [ { name: 'chromium', @@ -29,17 +29,15 @@ const config: PlaywrightTestConfig = { }, }, ], -}; -export default config; +}); ``` ```js tab=js-js // playwright.config.js // @ts-check -const { devices } = require('@playwright/test'); // require devices +const { devices, defineConfig } = require('@playwright/test'); // require devices -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +module.exports = defineConfig({ projects: [ { name: 'chromium', @@ -54,9 +52,7 @@ const config = { }, }, ], -}; - -module.exports = config; +}); ``` ```js tab=js-library @@ -329,24 +325,21 @@ Allow app to show system notifications. ```js tab=js-js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); +module.exports = defineConfig({ use: { permissions: ['notifications'], }, -}; - -module.exports = config; +}); ``` ```js tab=js-ts import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ use: { permissions: ['notifications'], }, -}; -export default config; +}); ``` ```js tab=js-library @@ -377,24 +370,21 @@ Allow test to request current location. ```js tab=js-js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); +module.exports = defineConfig({ use: { permissions: ['geolocation'], }, -}; - -module.exports = config; +}); ``` ```js tab=js-ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import type { defineConfig } from '@playwright/test'; +export default defineConfig({ use: { permissions: ['geolocation'], }, -}; -export default config; +}); ``` ```js tab=js-library diff --git a/docs/src/locators.md b/docs/src/locators.md index 82728dad88..40a36d2ae9 100644 --- a/docs/src/locators.md +++ b/docs/src/locators.md @@ -557,25 +557,23 @@ Set the test id to use a custom data attribute for your tests. // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); +module.exports = defineConfig({ use: { testIdAttribute: 'data-pw' }, -}; -module.exports = config; +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ use: { testIdAttribute: 'data-pw' } -}; -export default config; +}); ``` ```java diff --git a/docs/src/network.md b/docs/src/network.md index 57bf0856f8..4b0e17bcec 100644 --- a/docs/src/network.md +++ b/docs/src/network.md @@ -11,16 +11,15 @@ Playwright provides APIs to **monitor** and **modify** network traffic, both HTT Perform HTTP Authentication. ```js tab=js-ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ use: { httpCredentials: { username: 'bill', password: 'pa55w0rd', } } -}; -export default config; +}); ``` ```js tab=js-library @@ -80,8 +79,8 @@ bypass proxy for. Here is an example of a global proxy: ```js tab=js-ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ use: { proxy: { server: 'http://myproxy.com:3128', @@ -89,8 +88,7 @@ const config: PlaywrightTestConfig = { password: 'pwd' } } -}; -export default config; +}); ``` ```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: ```js tab=js-ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ use: { launchOptions: { // Browser proxy option is required for Chromium on Windows. @@ -153,8 +151,7 @@ const config: PlaywrightTestConfig = { server: 'http://myproxy.com:3128', } } -}; -export default config; +}); ``` ```js tab=js-library diff --git a/docs/src/release-notes-js.md b/docs/src/release-notes-js.md index 6d944460b3..173e60a157 100644 --- a/docs/src/release-notes-js.md +++ b/docs/src/release-notes-js.md @@ -61,18 +61,15 @@ toc_max_heading_level: 2 - Automatically capture **full page screenshot** on test failure: ```js // playwright.config.ts - import type { PlaywrightTestConfig } from '@playwright/test'; - - const config: PlaywrightTestConfig = { + import { defineConfig } from '@playwright/test'; + export default defineConfig({ use: { screenshot: { mode: 'only-on-failure', fullPage: true, } } - }; - - export default config; + }); ``` ### Miscellaneous @@ -129,14 +126,11 @@ This version was also tested against the following stable channels: ```js // playwright.config.ts - import type { PlaywrightTestConfig } from '@playwright/test'; - - const config: PlaywrightTestConfig = { + import { defineConfig } from '@playwright/test'; + export default defineConfig({ testDir: './tests', snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}', - }; - - export default config; + }); ``` ### New APIs @@ -335,8 +329,8 @@ Launch multiple web servers, databases, or other processes by passing an array o ```ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ webServer: [ { command: 'npm run start', @@ -354,8 +348,7 @@ const config: PlaywrightTestConfig = { use: { baseURL: 'http://localhost:3000/', }, -}; -export default config; +}); ``` ### 🐂 Debian 11 Bullseye Support @@ -1350,16 +1343,15 @@ To launch a server during the tests, use the [`webServer`](./test-advanced#launc ```ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ webServer: { command: 'npm run start', // command to launch port: 3000, // port to await for timeout: 120 * 1000, reuseExistingServer: !process.env.CI, }, -}; -export default config; +}); ``` Learn more in the [documentation](./test-advanced#launching-a-development-web-server-during-the-tests). diff --git a/docs/src/test-advanced-js.md b/docs/src/test-advanced-js.md index 262163d2aa..6e4da0d229 100644 --- a/docs/src/test-advanced-js.md +++ b/docs/src/test-advanced-js.md @@ -13,8 +13,8 @@ Here is an example that defines a common timeout and two projects. The "Smoke" p ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ timeout: 60000, // Timeout is shared between all tests. projects: [ { @@ -28,15 +28,15 @@ const config: PlaywrightTestConfig = { retries: 2, }, ], -}; -export default config; +}); ``` ```js tab=js-js // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ timeout: 60000, // Timeout is shared between all tests. projects: [ { @@ -50,8 +50,7 @@ const config = { retries: 2, }, ], -}; -module.exports = config; +}); ``` ## TestInfo object @@ -150,8 +149,8 @@ It is also recommended to specify [`property: TestOptions.baseURL`] in the confi ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ webServer: { command: 'npm run start', url: 'http://localhost:3000/app/', @@ -161,15 +160,15 @@ const config: PlaywrightTestConfig = { use: { baseURL: 'http://localhost:3000/app/', }, -}; -export default config; +}); ``` ```js tab=js-js // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ webServer: { command: 'npm run start', url: 'http://localhost:3000/app/', @@ -179,8 +178,7 @@ const config = { use: { baseURL: 'http://localhost:3000/app/', }, -}; -module.exports = config; +}); ``` 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 // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ globalSetup: require.resolve('./global-setup'), use: { baseURL: 'http://localhost:3000/', storageState: 'state.json', }, -}; -module.exports = config; +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; - -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ globalSetup: require.resolve('./global-setup'), use: { baseURL: 'http://localhost:3000/', storageState: 'state.json', }, -}; -export default config; +}); ``` 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 const { devices } = require('@playwright/test'); -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ projects: [ { name: 'chromium', @@ -451,16 +448,13 @@ const config = { use: { ...devices['Desktop Safari'] }, }, ], -}; - -module.exports = config; +}); ``` ```js tab=js-ts // playwright.config.ts -import { type PlaywrightTestConfig, devices } from '@playwright/test'; - -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ projects: [ { name: 'chromium', @@ -475,8 +469,7 @@ const config: PlaywrightTestConfig = { use: { ...devices['Desktop Safari'] }, }, ], -}; -export default config; +}); ``` 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 // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ timeout: 60000, // Timeout is shared between all tests. projects: [ { @@ -511,15 +504,15 @@ const config: PlaywrightTestConfig = { retries: 2, }, ], -}; -export default config; +}); ``` ```js tab=js-js // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ timeout: 60000, // Timeout is shared between all tests. projects: [ { @@ -533,8 +526,7 @@ const config = { retries: 2, }, ], -}; -module.exports = config; +}); ``` You can run all projects or just a single one: @@ -654,8 +646,8 @@ expect.extend({ }, }); -const config: PlaywrightTestConfig = {}; -export default config; +import { defineConfig } from '@playwright/test'; +export default defineConfig({}); ``` Now we can use `toBeWithinRange` in the test. diff --git a/docs/src/test-api-testing-js.md b/docs/src/test-api-testing-js.md index 7f9181f201..24c12ca120 100644 --- a/docs/src/test-api-testing-js.md +++ b/docs/src/test-api-testing-js.md @@ -31,9 +31,8 @@ GitHub API requires authorization, so we'll configure the token once for all tes ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; - -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ use: { // All requests we send go to this API endpoint. baseURL: 'https://api.github.com', @@ -45,15 +44,15 @@ const config: PlaywrightTestConfig = { 'Authorization': `token ${process.env.API_TOKEN}`, }, } -}; -export default config; +}); ``` ```js tab=js-js // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ use: { // All requests we send go to this API endpoint. baseURL: 'https://api.github.com', @@ -65,8 +64,7 @@ const config = { 'Authorization': `token ${process.env.API_TOKEN}`, }, } -}; -module.exports = config; +}); ``` ### Writing tests diff --git a/docs/src/test-api/class-test.md b/docs/src/test-api/class-test.md index 3a50fe97bd..dfbc80f2f4 100644 --- a/docs/src/test-api/class-test.md +++ b/docs/src/test-api/class-test.md @@ -782,8 +782,7 @@ Configure the option in config file. // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig<{ defaultItem: string }>} */ -const config = { +module.exports = defineConfig({ projects: [ { name: 'shopping', @@ -794,17 +793,15 @@ const config = { use: { defaultItem: 'Exercise!' }, }, ] -}; - -module.exports = config; +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; import { Options } from './my-test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ projects: [ { name: 'shopping', @@ -815,8 +812,7 @@ const config: PlaywrightTestConfig = { use: { defaultItem: 'Exercise!' }, }, ] -}; -export default config; +}); ``` Learn more about [fixtures](../test-fixtures.md) and [parametrizing tests](../test-parameterize.md). diff --git a/docs/src/test-api/class-testconfig.md b/docs/src/test-api/class-testconfig.md index 7b2aa39955..068ddb898e 100644 --- a/docs/src/test-api/class-testconfig.md +++ b/docs/src/test-api/class-testconfig.md @@ -10,28 +10,26 @@ Playwright Test supports running multiple test projects at the same time. Projec // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ timeout: 30000, globalTimeout: 600000, reporter: 'list', testDir: './tests', -}; - -module.exports = config; +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ timeout: 30000, globalTimeout: 600000, reporter: 'list', testDir: './tests', -}; -export default config; +}); ``` ## property: TestConfig.expect @@ -58,32 +56,30 @@ Configuration for the `expect` assertion library. Learn more about [various time // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ expect: { timeout: 10000, toMatchSnapshot: { maxDiffPixels: 10, }, }, -}; - -module.exports = config; +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ expect: { timeout: 10000, toMatchSnapshot: { maxDiffPixels: 10, }, }, -}; -export default config; +}); ``` ## 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 // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - forbidOnly: !!process.env.CI, -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + forbidOnly: !!process.env.CI, +}); ``` ```js tab=js-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, -}; -export default config; +}); ``` ## property: TestConfig.fullyParallel @@ -131,22 +125,20 @@ You can configure entire test run to concurrently execute all tests in all files // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - fullyParallel: true, -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + fullyParallel: true, +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ fullyParallel: true, -}; -export default config; +}); ``` ## property: TestConfig.globalScripts @@ -175,22 +167,20 @@ Learn more about [global setup and teardown](../test-advanced.md#global-setup-an // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - globalSetup: './global-setup', -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + globalSetup: './global-setup', +}); ``` ```js tab=js-ts // playwright.config.ts -import { type PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ globalSetup: './global-setup', -}; -export default config; +}); ``` ## property: TestConfig.globalTeardown @@ -207,22 +197,20 @@ Learn more about [global setup and teardown](../test-advanced.md#global-setup-an // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - globalTeardown: './global-teardown', -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + globalTeardown: './global-teardown', +}); ``` ```js tab=js-ts // playwright.config.ts -import { type PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ globalTeardown: './global-teardown', -}; -export default config; +}); ``` ## property: TestConfig.globalTimeout @@ -237,22 +225,20 @@ Maximum time in milliseconds the whole test suite can run. Zero timeout (default // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - globalTimeout: process.env.CI ? 60 * 60 * 1000 : undefined, -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + globalTimeout: process.env.CI ? 60 * 60 * 1000 : undefined, +}); ``` ```js tab=js-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, -}; -export default config; +}); ``` ## 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 // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - grep: /smoke/, -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + grep: /smoke/, +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ grep: /smoke/, -}; -export default config; +}); ``` ## 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 // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - grepInvert: /manual/, -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + grepInvert: /manual/, +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ grepInvert: /manual/, -}; -export default config; +}); ``` ## property: TestConfig.ignoreSnapshots @@ -331,22 +313,20 @@ Whether to skip snapshot expectations, such as `expect(value).toMatchSnapshot()` // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - ignoreSnapshots: !process.env.CI, -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + ignoreSnapshots: !process.env.CI, +}); ``` ```js tab=js-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, -}; -export default config; +}); ``` ## property: TestConfig.maxFailures @@ -363,22 +343,20 @@ Also available in the [command line](../test-cli.md) with the `--max-failures` a // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - maxFailures: process.env.CI ? 1 : 0, -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + maxFailures: process.env.CI ? 1 : 0, +}); ``` ```js tab=js-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, -}; -export default config; +}); ``` ## property: TestConfig.metadata @@ -393,22 +371,20 @@ Metadata that will be put directly to the test report serialized as JSON. // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - metadata: 'acceptance tests', -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + metadata: 'acceptance tests', +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ metadata: 'acceptance tests', -}; -export default config; +}); ``` ## property: TestConfig.name @@ -423,22 +399,20 @@ Config name is visible in the report and during test execution, unless overridde // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - name: 'acceptance tests', -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + name: 'acceptance tests', +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ name: 'acceptance tests', -}; -export default config; +}); ``` ## property: TestConfig.outputDir @@ -453,22 +427,20 @@ The output directory for files created during test execution. Defaults to `); 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 -import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-vue' +import { defineConfig, devices } from '@playwright/experimental-ct-vue' import { resolve } from 'path' import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' -const config: PlaywrightTestConfig = { +export default defineConfig({ testDir: './tests/component', use: { 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`: diff --git a/docs/src/test-configuration-js.md b/docs/src/test-configuration-js.md index bed3b18168..3cf4a6a0ae 100644 --- a/docs/src/test-configuration-js.md +++ b/docs/src/test-configuration-js.md @@ -18,30 +18,28 @@ Create a `playwright.config.js` (or `playwright.config.ts`) and specify options ```js tab=js-js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ use: { headless: false, viewport: { width: 1280, height: 720 }, ignoreHTTPSErrors: true, video: 'on-first-retry', }, -}; - -module.exports = config; +}); ``` ```js tab=js-ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ use: { headless: false, viewport: { width: 1280, height: 720 }, ignoreHTTPSErrors: true, video: 'on-first-retry', }, -}; -export default config; +}); ``` 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 // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ use: { baseURL: 'http://localhost:3000', browserName: 'firefox', headless: true, }, -}; - -module.exports = config; +}); ``` ```js tab=js-ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ use: { baseURL: 'http://localhost:3000', browserName: 'firefox', headless: true, }, -}; -export default config; +}); ``` ## Multiple browsers @@ -162,8 +158,9 @@ Playwright Test supports multiple "projects" that can run your tests in multiple // @ts-check const { devices } = require('@playwright/test'); -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ projects: [ { name: 'chromium', @@ -178,16 +175,14 @@ const config = { use: { ...devices['Desktop Safari'] }, }, ], -}; - -module.exports = config; +}); ``` ```js tab=js-ts // playwright.config.ts -import { type PlaywrightTestConfig, devices } from '@playwright/test'; +import { defineConfig, devices } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ projects: [ { name: 'chromium', @@ -202,8 +197,7 @@ const config: PlaywrightTestConfig = { 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. @@ -316,24 +310,22 @@ Screenshots will appear in the test output directory, typically `test-results`. ```js tab=js-js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ use: { screenshot: 'only-on-failure', }, -}; - -module.exports = config; +}); ``` ```js tab=js-ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ use: { screenshot: 'only-on-failure', }, -}; -export default config; +}); ``` ## Record video @@ -350,24 +342,22 @@ Video files will appear in the test output directory, typically `test-results`. ```js tab=js-js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ use: { video: 'on-first-retry', }, -}; - -module.exports = config; +}); ``` ```js tab=js-ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ use: { video: 'on-first-retry', }, -}; -export default config; +}); ``` ## Record test trace @@ -384,24 +374,22 @@ Trace files will appear in the test output directory, typically `test-results`. ```js tab=js-js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ use: { trace: 'retain-on-failure', }, -}; - -module.exports = config; +}); ``` ```js tab=js-ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ use: { trace: 'retain-on-failure', }, -}; -export default config; +}); ``` ## More browser and context options @@ -411,28 +399,26 @@ Any options accepted by [`method: BrowserType.launch`] or [`method: Browser.newC ```js tab=js-js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ use: { launchOptions: { slowMo: 50, }, }, -}; - -module.exports = config; +}); ``` ```js tab=js-ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ use: { launchOptions: { 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). @@ -443,31 +429,27 @@ If using the built-in `browser` fixture, calling [`method: Browser.newContext`] ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from "@playwright/test"; - -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ use: { userAgent: 'some custom ua', viewport: { width: 100, height: 100 }, }, -}; - -export default config; +}); ``` ```js tab=js-js // @ts-check // example.spec.js -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ use: { userAgent: 'some custom ua', viewport: { width: 100, height: 100 }, }, -}; - -module.exports = config; +}); ``` 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 // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ // Look for test files in the "tests" directory, relative to this configuration file testDir: 'tests', @@ -548,16 +531,14 @@ const config = { use: { // Configure browser and context here }, -}; - -module.exports = config; +}); ``` ```js tab=js-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 testDir: 'tests', @@ -576,6 +557,5 @@ const config: PlaywrightTestConfig = { use: { // Configure browser and context here }, -}; -export default config; +}); ``` diff --git a/docs/src/test-fixtures-js.md b/docs/src/test-fixtures-js.md index 5bf137d1cf..b7ca7e4584 100644 --- a/docs/src/test-fixtures-js.md +++ b/docs/src/test-fixtures-js.md @@ -574,8 +574,8 @@ We can now use `todoPage` fixture as usual, and set the `defaultItem` option in // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig<{ defaultItem: string }>} */ -const config = { +const { defineConfig } = require('@playwright/test'); +module.exports = defineConfig({ projects: [ { name: 'shopping', @@ -586,17 +586,15 @@ const config = { use: { defaultItem: 'Exercise!' }, }, ] -}; - -module.exports = config; +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; import { MyOptions } from './my-test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ projects: [ { name: 'shopping', @@ -607,8 +605,7 @@ const config: PlaywrightTestConfig = { use: { defaultItem: 'Exercise!' }, }, ] -}; -export default config; +}); ``` ## Execution order diff --git a/docs/src/test-parallel-js.md b/docs/src/test-parallel-js.md index a28c9e8f11..6a7b5085e2 100644 --- a/docs/src/test-parallel-js.md +++ b/docs/src/test-parallel-js.md @@ -34,24 +34,22 @@ In the configuration file: // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ // Limit the number of workers on CI, use default locally workers: process.env.CI ? 2 : undefined, -}; - -module.exports = config; +}); ``` ```js tab=js-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 workers: process.env.CI ? 2 : undefined, -}; -export default config; +}); ``` ## Disable parallelism @@ -92,22 +90,20 @@ Alternatively, you can opt-in all tests (or just a few projects) into this fully // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - fullyParallel: true, -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + fullyParallel: true, +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ fullyParallel: true, -}; -export default config; +}); ``` ## Serial mode @@ -201,24 +197,22 @@ Setting in the configuration file: // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ // Limit the number of failures on CI to save resources maxFailures: process.env.CI ? 10 : undefined, -}; - -module.exports = config; +}); ``` ```js tab=js-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 maxFailures: process.env.CI ? 10 : undefined, -}; -export default config; +}); ``` ## 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 // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ workers: 1, testMatch: 'test.list.js', -}; - -module.exports = config; +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ workers: 1, testMatch: 'test.list.ts', -}; -export default config; +}); ``` :::note diff --git a/docs/src/test-parameterize-js.md b/docs/src/test-parameterize-js.md index 9caeb5d69b..e328ed0534 100644 --- a/docs/src/test-parameterize-js.md +++ b/docs/src/test-parameterize-js.md @@ -91,8 +91,7 @@ Now, we can run tests in multiple configurations by using projects. // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig<{ person: string }>} */ -const config = { +module.exports = defineConfig({ projects: [ { name: 'alice', @@ -103,17 +102,15 @@ const config = { use: { person: 'Bob' }, }, ] -}; - -module.exports = config; +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import type { defineConfig } from '@playwright/test'; import { TestOptions } from './my-test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ projects: [ { name: 'alice', @@ -124,8 +121,7 @@ const config: PlaywrightTestConfig = { use: { person: 'Bob' }, }, ] -}; -export default config; +}); ``` 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 // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ use: { baseURL: process.env.STAGING === '1' ? 'http://staging.example.test/' : 'http://example.test/', } -}; - -module.exports = config; +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ use: { 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: @@ -281,19 +275,18 @@ require('dotenv').config(); // Alternatively, read from "../my.env" file. require('dotenv').config({ path: path.resolve(__dirname, '..', 'my.env') }); -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ use: { baseURL: process.env.STAGING === '1' ? 'http://staging.example.test/' : 'http://example.test/', } -}; - -module.exports = config; +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; import dotenv from 'dotenv'; import path from 'path'; @@ -303,12 +296,11 @@ dotenv.config(); // Alternatively, read from "../my.env" file. dotenv.config({ path: path.resolve(__dirname, '..', 'my.env') }); -const config: PlaywrightTestConfig = { +export default defineConfig({ use: { 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. diff --git a/docs/src/test-reporter-api/class-reporter.md b/docs/src/test-reporter-api/class-reporter.md index 38b28f9e49..c657a5fe03 100644 --- a/docs/src/test-reporter-api/class-reporter.md +++ b/docs/src/test-reporter-api/class-reporter.md @@ -62,22 +62,20 @@ Now use this reporter with [`property: TestConfig.reporter`]. Learn more about [ // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - reporter: './my-awesome-reporter.js', -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + reporter: './my-awesome-reporter.js', +}); ``` ```js tab=js-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', -}; -export default config; +}); ``` Here is a typical order of reporter calls: diff --git a/docs/src/test-reporters-js.md b/docs/src/test-reporters-js.md index 2a73f58b11..43a1ddc699 100644 --- a/docs/src/test-reporters-js.md +++ b/docs/src/test-reporters-js.md @@ -16,22 +16,20 @@ For more control, you can specify reporters programmatically in the [configurati // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - reporter: 'line', -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + reporter: 'line', +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ reporter: 'line', -}; -export default config; +}); ``` ### Multiple reporters @@ -42,28 +40,26 @@ You can use multiple reporters at the same time. For example you can use `'list // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ reporter: [ ['list'], ['json', { outputFile: 'test-results.json' }] ], -}; - -module.exports = config; +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ reporter: [ ['list'], ['json', { outputFile: 'test-results.json' }] ], -}; -export default config; +}); ``` ### Reporters on CI @@ -74,24 +70,22 @@ You can use different reporters locally and on CI. For example, using concise `' // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ // Concise 'dot' for CI, default 'list' when running locally reporter: process.env.CI ? 'dot' : 'list', -}; - -module.exports = config; +}); ``` ```js tab=js-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 reporter: process.env.CI ? 'dot' : 'list', -}; -export default config; +}); ``` ## Built-in reporters @@ -110,22 +104,20 @@ npx playwright test --reporter=list // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - reporter: 'list', -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + reporter: 'list', +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ reporter: 'list', -}; -export default config; +}); ``` 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 // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - reporter: [['list', { printSteps: true }]], -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + reporter: [['list', { printSteps: true }]], +}); ``` ```js tab=js-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 }]], -}; -export default config; +}); ``` ### Line reporter @@ -181,22 +171,20 @@ npx playwright test --reporter=line // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - reporter: 'line', -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + reporter: 'line', +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ reporter: 'line', -}; -export default config; +}); ``` 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 // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - reporter: 'dot', -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + reporter: 'dot', +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ reporter: 'dot', -}; -export default config; +}); ``` 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 // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ reporter: [['html', { open: 'never', host: '0.0.0.0', port: 9223, }]], -}; - -module.exports = config; +}); ``` ```js tab=js-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' }]], -}; -export default config; +}); ``` 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 // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - reporter: [['html', { outputFolder: 'my-report' }]], -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + reporter: [['html', { outputFolder: 'my-report' }]], +}); ``` ```js tab=js-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' }]], -}; -export default config; +}); ``` A quick way of opening the last test run report is: @@ -356,22 +338,20 @@ In configuration file, pass options directly: // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - reporter: [['json', { outputFile: 'results.json' }]], -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + reporter: [['json', { outputFile: 'results.json' }]], +}); ``` ```js tab=js-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' }]], -}; -export default config; +}); ``` ### JUnit reporter @@ -399,22 +379,20 @@ In configuration file, pass options directly: // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - reporter: [['junit', { outputFile: 'results.xml' }]], -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + reporter: [['junit', { outputFile: 'results.xml' }]], +}); ``` ```js tab=js-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' }]], -}; -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. @@ -425,8 +403,6 @@ In configuration file, a set of options can be used to configure this behavior. // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ - // JUnit reporter config for Xray const xrayOptions = { // Whether to add with all annotations; default is false @@ -444,16 +420,14 @@ const xrayOptions = { outputFile: './xray-report.xml' }; -const config = { +module.exports = defineConfig({ reporter: [['junit', xrayOptions]] -}; - -module.exports = config; +}); ``` ```js tab=js-ts // playwright.config.ts -import { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; // JUnit reporter config for Xray const xrayOptions = { @@ -472,11 +446,9 @@ const xrayOptions = { outputFile: './xray-report.xml' }; -const config: PlaywrightTestConfig = { +export default defineConfig({ reporter: [['junit', xrayOptions]] -}; - -export default config; +}); ``` In the previous configuration sample, all annotations will be added as `` elements on the JUnit XML report. The annotation type is mapped to the `name` attribute of the ``, 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 ``. @@ -518,23 +490,20 @@ The following configuration sample enables embedding attachments by using the `t // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - reporter: [['junit', { embedAttachmentsAsProperty: 'testrun_evidence', outputFile: 'results.xml' }]], -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + reporter: [['junit', { embedAttachmentsAsProperty: 'testrun_evidence', outputFile: 'results.xml' }]], +}); ``` ```js tab=js-ts // playwright.config.js -import { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ reporter: [['junit', { embedAttachmentsAsProperty: 'testrun_evidence', outputFile: 'results.xml' }]], -}; - -export default config; +}); ``` 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 // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ // 'github' for GitHub Actions CI to generate annotations, plus a concise 'dot' // default 'list' when running locally reporter: process.env.CI ? 'github' : 'list', -}; - -module.exports = config; +}); ``` ```js tab=js-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' // default 'list' when running locally reporter: process.env.CI ? 'github' : 'list', -}; -export default config; +}); ``` ## Custom reporters @@ -655,22 +622,20 @@ Now use this reporter with [`property: TestConfig.reporter`]. // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - reporter: './my-awesome-reporter.js', -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + reporter: './my-awesome-reporter.js', +}); ``` ```js tab=js-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', -}; -export default config; +}); ``` diff --git a/docs/src/test-retries-js.md b/docs/src/test-retries-js.md index d42e35ba26..9be321c456 100644 --- a/docs/src/test-retries-js.md +++ b/docs/src/test-retries-js.md @@ -74,24 +74,22 @@ npx playwright test --retries=3 // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ // Give failing tests 3 retry attempts retries: 3, -}; - -module.exports = config; +}); ``` ```js tab=js-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 retries: 3, -}; -export default config; +}); ``` Playwright Test will categorize tests as follows: diff --git a/docs/src/test-snapshots-js.md b/docs/src/test-snapshots-js.md index d501e51f77..820d9568ca 100644 --- a/docs/src/test-snapshots-js.md +++ b/docs/src/test-snapshots-js.md @@ -103,13 +103,12 @@ module.exports = { ``` ```js tab=js-ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ expect: { 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. diff --git a/docs/src/test-timeouts-js.md b/docs/src/test-timeouts-js.md index 7ab9ebc4bf..5a92303e83 100644 --- a/docs/src/test-timeouts-js.md +++ b/docs/src/test-timeouts-js.md @@ -35,22 +35,20 @@ The same timeout value also applies to `beforeAll` and `afterAll` hooks, but the // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - timeout: 5 * 60 * 1000, -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + timeout: 5 * 60 * 1000, +}); ``` ```js tab=js-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, -}; -export default config; +}); ``` API reference: [`property: TestConfig.timeout`]. @@ -155,26 +153,24 @@ Call log: // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ expect: { timeout: 10 * 1000, }, -}; - -module.exports = config; +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ expect: { timeout: 10 * 1000, }, -}; -export default config; +}); ``` 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 // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ use: { actionTimeout: 10 * 1000, navigationTimeout: 30 * 1000, }, -}; - -module.exports = config; +}); ``` ```js tab=js-ts // playwright.config.ts -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +export default defineConfig({ use: { actionTimeout: 10 * 1000, navigationTimeout: 30 * 1000, }, -}; -export default config; +}); ``` API reference: [`property: TestOptions.actionTimeout`] and [`property: TestOptions.navigationTimeout`]. @@ -282,22 +276,20 @@ You can set global timeout in the config. // playwright.config.js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { - globalTimeout: 60 * 60 * 1000, -}; +const { defineConfig } = require('@playwright/test'); -module.exports = config; +module.exports = defineConfig({ + globalTimeout: 60 * 60 * 1000, +}); ``` ```js tab=js-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, -}; -export default config; +}); ``` API reference: [`property: TestConfig.globalTimeout`]. diff --git a/docs/src/trace-viewer-intro-js.md b/docs/src/trace-viewer-intro-js.md index 4a9c546026..4b7d587de6 100644 --- a/docs/src/trace-viewer-intro-js.md +++ b/docs/src/trace-viewer-intro-js.md @@ -19,28 +19,26 @@ By default the [playwright.config](/test-configuration.md#record-test-trace) fil ```js tab=js-js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ retries: process.env.CI ? 2 : 0, // set to 2 when running on CI ... use: { trace: 'on-first-retry', // record traces on first retry of each test }, -}; - -module.exports = config; +}); ``` ```js tab=js-ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ retries: process.env.CI ? 2 : 0, // set to 2 when running on CI ... use: { 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). diff --git a/docs/src/trace-viewer.md b/docs/src/trace-viewer.md index aa81dbd0d6..7d7946debb 100644 --- a/docs/src/trace-viewer.md +++ b/docs/src/trace-viewer.md @@ -134,26 +134,24 @@ by setting the `trace: 'on-first-retry'` option in the test configuration file. ```js tab=js-js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ retries: 1, use: { trace: 'on-first-retry', }, -}; - -module.exports = config; +}); ``` ```js tab=js-ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ retries: 1, use: { trace: 'on-first-retry', }, -}; -export default config; +}); ``` ```js tab=js-library diff --git a/docs/src/videos.md b/docs/src/videos.md index b31c1a2ff3..a53ab32cdf 100644 --- a/docs/src/videos.md +++ b/docs/src/videos.md @@ -22,24 +22,22 @@ Videos are saved upon [browser context](./browser-contexts.md) closure at the en ```js tab=js-js // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ use: { video: 'on-first-retry', }, -}; - -module.exports = config; +}); ``` ```js tab=js-ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ use: { video: 'on-first-retry', }, -}; -export default config; +}); ``` ```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 // @ts-check -/** @type {import('@playwright/test').PlaywrightTestConfig} */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ use: { video: { mode: 'on-first-retry', size: { width: 640, height: 480 } } }, -}; - -module.exports = config; +}); ``` ```js tab=js-ts -import type { PlaywrightTestConfig } from '@playwright/test'; -const config: PlaywrightTestConfig = { +import { defineConfig } from '@playwright/test'; +export default defineConfig({ use: { video: { mode: 'on-first-retry', size: { width: 640, height: 480 } } }, -}; -export default config; +}); ``` ```js tab=js-library diff --git a/examples/github-api/playwright.config.ts b/examples/github-api/playwright.config.ts index 30dba8fbee..55845b778f 100644 --- a/examples/github-api/playwright.config.ts +++ b/examples/github-api/playwright.config.ts @@ -1,11 +1,11 @@ /* eslint-disable notice/notice */ -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; /** * See https://playwright.dev/docs/test-configuration. */ -const config: PlaywrightTestConfig = { +export default defineConfig({ testDir: './tests', @@ -32,5 +32,4 @@ const config: PlaywrightTestConfig = { /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: 'on-first-retry', }, -}; -export default config; +}); diff --git a/examples/mock-battery/playwright.config.js b/examples/mock-battery/playwright.config.js index 9372a46c53..05047dcb86 100644 --- a/examples/mock-battery/playwright.config.js +++ b/examples/mock-battery/playwright.config.js @@ -1,16 +1,13 @@ // @ts-check const path = require('path') -/** - * @see https://playwright.dev/docs/test-configuration - * @type{import('@playwright/test').PlaywrightTestConfig} - */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ webServer: { port: 9900, command: 'npm run start', }, // Test directory testDir: path.join(__dirname, 'tests'), -}; -module.exports = config; +}); diff --git a/examples/mock-filesystem/playwright.config.js b/examples/mock-filesystem/playwright.config.js index 9372a46c53..05047dcb86 100644 --- a/examples/mock-filesystem/playwright.config.js +++ b/examples/mock-filesystem/playwright.config.js @@ -1,16 +1,13 @@ // @ts-check const path = require('path') -/** - * @see https://playwright.dev/docs/test-configuration - * @type{import('@playwright/test').PlaywrightTestConfig} - */ -const config = { +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ webServer: { port: 9900, command: 'npm run start', }, // Test directory testDir: path.join(__dirname, 'tests'), -}; -module.exports = config; +}); diff --git a/examples/outlook-login/.env b/examples/outlook-login/.env deleted file mode 100644 index b1723e5dfb..0000000000 --- a/examples/outlook-login/.env +++ /dev/null @@ -1,2 +0,0 @@ -OUTLOOK_USER='@outlook.com' -OUTLOOK_PASSWORD='' \ No newline at end of file diff --git a/examples/outlook-login/.gitignore b/examples/outlook-login/.gitignore deleted file mode 100644 index 75e854d8dc..0000000000 --- a/examples/outlook-login/.gitignore +++ /dev/null @@ -1,4 +0,0 @@ -node_modules/ -/test-results/ -/playwright-report/ -/playwright/.cache/ diff --git a/examples/outlook-login/package.json b/examples/outlook-login/package.json deleted file mode 100644 index b7881033ca..0000000000 --- a/examples/outlook-login/package.json +++ /dev/null @@ -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" - } -} diff --git a/examples/outlook-login/playwright.config.ts b/examples/outlook-login/playwright.config.ts deleted file mode 100644 index d4b9b027b3..0000000000 --- a/examples/outlook-login/playwright.config.ts +++ /dev/null @@ -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; diff --git a/examples/outlook-login/tests/calendar.spec.ts b/examples/outlook-login/tests/calendar.spec.ts deleted file mode 100644 index 0da47f095c..0000000000 --- a/examples/outlook-login/tests/calendar.spec.ts +++ /dev/null @@ -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(); -}); diff --git a/examples/outlook-login/tests/login.setup.ts b/examples/outlook-login/tests/login.setup.ts deleted file mode 100644 index 90e2ded45f..0000000000 --- a/examples/outlook-login/tests/login.setup.ts +++ /dev/null @@ -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); -}); diff --git a/examples/outlook-login/tests/mail.spec.ts b/examples/outlook-login/tests/mail.spec.ts deleted file mode 100644 index dffa482190..0000000000 --- a/examples/outlook-login/tests/mail.spec.ts +++ /dev/null @@ -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(); -}); diff --git a/examples/svgomg/playwright.config.ts b/examples/svgomg/playwright.config.ts index 49636b52d8..cb40327e3d 100644 --- a/examples/svgomg/playwright.config.ts +++ b/examples/svgomg/playwright.config.ts @@ -1,11 +1,11 @@ /* eslint-disable notice/notice */ -import { type PlaywrightTestConfig, devices } from '@playwright/test'; +import { defineConfig, devices } from '@playwright/test'; /** * See https://playwright.dev/docs/test-configuration. */ -const config: PlaywrightTestConfig = { +export default defineConfig({ testDir: './tests', @@ -110,5 +110,4 @@ const config: PlaywrightTestConfig = { // command: 'npm run start', // port: 3000, // }, -}; -export default config; +}); diff --git a/examples/todomvc/playwright.config.ts b/examples/todomvc/playwright.config.ts index a7ed6e48b2..06e262f2f0 100644 --- a/examples/todomvc/playwright.config.ts +++ b/examples/todomvc/playwright.config.ts @@ -1,11 +1,11 @@ /* eslint-disable notice/notice */ -import { type PlaywrightTestConfig, devices } from '@playwright/test'; +import { defineConfig, devices } from '@playwright/test'; /** * See https://playwright.dev/docs/test-configuration. */ -const config: PlaywrightTestConfig = { +export default defineConfig({ testDir: './tests', @@ -108,5 +108,4 @@ const config: PlaywrightTestConfig = { // command: 'npm run start', // port: 3000, // }, -}; -export default config; +}); diff --git a/packages/html-reporter/playwright.config.ts b/packages/html-reporter/playwright.config.ts index ff7fe98778..fe52192bee 100644 --- a/packages/html-reporter/playwright.config.ts +++ b/packages/html-reporter/playwright.config.ts @@ -14,10 +14,9 @@ * limitations under the License. */ -import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react'; -import { devices } from '@playwright/experimental-ct-react'; +import { devices, defineConfig } from '@playwright/experimental-ct-react'; -const config: PlaywrightTestConfig = { +export default defineConfig({ testDir: 'src', forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, @@ -32,6 +31,4 @@ const config: PlaywrightTestConfig = { name: 'chromium', use: { ...devices['Desktop Chrome'] }, }], -}; - -export default config; +}); diff --git a/packages/playwright-ct-react/index.d.ts b/packages/playwright-ct-react/index.d.ts index 8f06efc53e..ef060e7498 100644 --- a/packages/playwright-ct-react/index.d.ts +++ b/packages/playwright-ct-react/index.d.ts @@ -25,8 +25,8 @@ import type { } from '@playwright/test'; import type { InlineConfig } from 'vite'; -export type PlaywrightTestConfig = Omit & { - use?: BasePlaywrightTestConfig['use'] & { +export type PlaywrightTestConfig = Omit, 'use'> & { + use?: BasePlaywrightTestConfig['use'] & { ctPort?: number; ctTemplateDir?: string; ctCacheDir?: string; @@ -60,4 +60,11 @@ export const test: TestType< PlaywrightWorkerArgs & PlaywrightWorkerOptions >; +/** + * Defines Playwright config + */ +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; + export { expect, devices } from '@playwright/test'; diff --git a/packages/playwright-ct-react/index.js b/packages/playwright-ct-react/index.js index 7136b38196..8a74f9855b 100644 --- a/packages/playwright-ct-react/index.js +++ b/packages/playwright-ct-react/index.js @@ -14,7 +14,7 @@ * 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 path = require('path'); @@ -28,4 +28,4 @@ _addRunnerPlugin(() => { const test = baseTest.extend(fixtures); -module.exports = { test, expect, devices }; +module.exports = { test, expect, devices, defineConfig }; diff --git a/packages/playwright-ct-solid/index.d.ts b/packages/playwright-ct-solid/index.d.ts index 8f06efc53e..ef060e7498 100644 --- a/packages/playwright-ct-solid/index.d.ts +++ b/packages/playwright-ct-solid/index.d.ts @@ -25,8 +25,8 @@ import type { } from '@playwright/test'; import type { InlineConfig } from 'vite'; -export type PlaywrightTestConfig = Omit & { - use?: BasePlaywrightTestConfig['use'] & { +export type PlaywrightTestConfig = Omit, 'use'> & { + use?: BasePlaywrightTestConfig['use'] & { ctPort?: number; ctTemplateDir?: string; ctCacheDir?: string; @@ -60,4 +60,11 @@ export const test: TestType< PlaywrightWorkerArgs & PlaywrightWorkerOptions >; +/** + * Defines Playwright config + */ +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; + export { expect, devices } from '@playwright/test'; diff --git a/packages/playwright-ct-solid/index.js b/packages/playwright-ct-solid/index.js index 25f9a23d62..9fe4c233cf 100644 --- a/packages/playwright-ct-solid/index.js +++ b/packages/playwright-ct-solid/index.js @@ -14,7 +14,7 @@ * 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 path = require('path'); @@ -28,4 +28,4 @@ _addRunnerPlugin(() => { const test = baseTest.extend(fixtures); -module.exports = { test, expect, devices }; +module.exports = { test, expect, devices, defineConfig }; diff --git a/packages/playwright-ct-svelte/index.d.ts b/packages/playwright-ct-svelte/index.d.ts index 99610f379b..f8fe19f0a4 100644 --- a/packages/playwright-ct-svelte/index.d.ts +++ b/packages/playwright-ct-svelte/index.d.ts @@ -26,8 +26,8 @@ import type { import type { InlineConfig } from 'vite'; import type { SvelteComponent, ComponentProps } from 'svelte/types/runtime'; -export type PlaywrightTestConfig = Omit & { - use?: BasePlaywrightTestConfig['use'] & { +export type PlaywrightTestConfig = Omit, 'use'> & { + use?: BasePlaywrightTestConfig['use'] & { ctPort?: number; ctTemplateDir?: string; ctCacheDir?: string; @@ -74,4 +74,11 @@ export const test: TestType< PlaywrightWorkerArgs & PlaywrightWorkerOptions >; +/** + * Defines Playwright config + */ +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; + export { expect, devices } from '@playwright/test'; diff --git a/packages/playwright-ct-svelte/index.js b/packages/playwright-ct-svelte/index.js index 5e3e1716cf..7b03217a3c 100644 --- a/packages/playwright-ct-svelte/index.js +++ b/packages/playwright-ct-svelte/index.js @@ -14,7 +14,7 @@ * 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 path = require('path'); @@ -28,4 +28,4 @@ _addRunnerPlugin(() => { const test = baseTest.extend(fixtures); -module.exports = { test, expect, devices }; +module.exports = { test, expect, devices, defineConfig }; diff --git a/packages/playwright-ct-vue/index.d.ts b/packages/playwright-ct-vue/index.d.ts index af90311c09..53957dfb73 100644 --- a/packages/playwright-ct-vue/index.d.ts +++ b/packages/playwright-ct-vue/index.d.ts @@ -25,8 +25,8 @@ import type { } from '@playwright/test'; import type { InlineConfig } from 'vite'; -export type PlaywrightTestConfig = Omit & { - use?: BasePlaywrightTestConfig['use'] & { +export type PlaywrightTestConfig = Omit, 'use'> & { + use?: BasePlaywrightTestConfig['use'] & { ctPort?: number; ctTemplateDir?: string; ctCacheDir?: string; @@ -83,4 +83,11 @@ export const test: TestType< PlaywrightWorkerArgs & PlaywrightWorkerOptions >; +/** + * Defines Playwright config + */ +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; + export { expect, devices } from '@playwright/test'; diff --git a/packages/playwright-ct-vue/index.js b/packages/playwright-ct-vue/index.js index 1774f3e1e2..3ae6b1a13d 100644 --- a/packages/playwright-ct-vue/index.js +++ b/packages/playwright-ct-vue/index.js @@ -14,7 +14,7 @@ * 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 path = require('path'); @@ -28,4 +28,4 @@ _addRunnerPlugin(() => { const test = baseTest.extend(fixtures); -module.exports = { test, expect, devices }; +module.exports = { test, expect, devices, defineConfig }; diff --git a/packages/playwright-ct-vue2/index.d.ts b/packages/playwright-ct-vue2/index.d.ts index 170a9d84e8..d3b4a3559f 100644 --- a/packages/playwright-ct-vue2/index.d.ts +++ b/packages/playwright-ct-vue2/index.d.ts @@ -25,8 +25,8 @@ import type { } from '@playwright/test'; import type { InlineConfig } from 'vite'; -export type PlaywrightTestConfig = Omit & { - use?: BasePlaywrightTestConfig['use'] & { +export type PlaywrightTestConfig = Omit, 'use'> & { + use?: BasePlaywrightTestConfig['use'] & { ctPort?: number; ctTemplateDir?: string; ctCacheDir?: string; @@ -83,4 +83,11 @@ export const test: TestType< PlaywrightWorkerArgs & PlaywrightWorkerOptions >; +/** + * Defines Playwright config + */ +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; + export { expect, devices } from '@playwright/test'; diff --git a/packages/playwright-ct-vue2/index.js b/packages/playwright-ct-vue2/index.js index f5d136e28f..5e71a9f7e7 100644 --- a/packages/playwright-ct-vue2/index.js +++ b/packages/playwright-ct-vue2/index.js @@ -14,7 +14,7 @@ * 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 path = require('path'); @@ -28,4 +28,4 @@ _addRunnerPlugin(() => { const test = baseTest.extend(fixtures); -module.exports = { test, expect, devices }; +module.exports = { test, expect, devices, defineConfig }; diff --git a/packages/playwright-test/index.js b/packages/playwright-test/index.js index 38acb3257e..035959561c 100644 --- a/packages/playwright-test/index.js +++ b/packages/playwright-test/index.js @@ -16,9 +16,11 @@ const pwt = require('./lib/index'); const playwright = require('playwright-core'); +const defineConfig = config => config; const combinedExports = { ...playwright, ...pwt, + defineConfig, }; Object.defineProperty(combinedExports, '__esModule', { value: true }); diff --git a/packages/playwright-test/index.mjs b/packages/playwright-test/index.mjs index de39941fe5..59299a0cb3 100644 --- a/packages/playwright-test/index.mjs +++ b/packages/playwright-test/index.mjs @@ -26,4 +26,5 @@ export const _electron = playwright._electron; export const _android = playwright._android; export const test = playwright.test; export const expect = playwright.expect; +export const defineConfig = playwright.defineConfig; export default playwright.test; diff --git a/packages/playwright-test/types/test.d.ts b/packages/playwright-test/types/test.d.ts index 0223aee199..2c65b60ea4 100644 --- a/packages/playwright-test/types/test.d.ts +++ b/packages/playwright-test/types/test.d.ts @@ -45,9 +45,9 @@ type UseOptions = { [K in keyof WorkerArgs]?: WorkerArgs[K * * ```js * // 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. * timeout: 30000, * use: { @@ -86,8 +86,7 @@ type UseOptions = { [K in keyof WorkerArgs]?: WorkerArgs[K * use: devices['iPhone 12'], * }, * ], - * }; - * export default config; + * }); * ``` * */ @@ -99,9 +98,9 @@ export interface Project extends TestProject { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * projects: [ * { * name: 'Chromium', @@ -110,8 +109,7 @@ export interface Project extends TestProject { * }, * }, * ], - * }; - * export default config; + * }); * ``` * * Use [testConfig.use](https://playwright.dev/docs/api/class-testconfig#test-config-use) to change this option for @@ -134,9 +132,9 @@ export interface Project extends TestProject { * * ```js * // 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. * timeout: 30000, * use: { @@ -175,8 +173,7 @@ export interface Project extends TestProject { * use: devices['iPhone 12'], * }, * ], - * }; - * export default config; + * }); * ``` * */ @@ -275,9 +272,9 @@ export interface FullProject { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * projects: [ * { * name: 'Smoke Chromium', @@ -309,8 +306,7 @@ export interface FullProject { * } * }, * ], - * }; - * export default config; + * }); * ``` * * Use [testConfig.testDir](https://playwright.dev/docs/api/class-testconfig#test-config-test-dir) to change this @@ -356,9 +352,9 @@ export interface FullProject { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * projects: [ * { * name: 'Chromium', @@ -367,8 +363,7 @@ export interface FullProject { * }, * }, * ], - * }; - * export default config; + * }); * ``` * * Use [testConfig.use](https://playwright.dev/docs/api/class-testconfig#test-config-use) to change this option for @@ -390,15 +385,14 @@ type LiteralUnion = T | (U & { zz_IGNORE_ME?: never }); * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * timeout: 30000, * globalTimeout: 600000, * reporter: 'list', * testDir: './tests', - * }; - * export default config; + * }); * ``` * */ @@ -417,12 +411,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * reporter: 'line', - * }; - * export default config; + * }); * ``` * */ @@ -452,8 +445,8 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; - * const config: PlaywrightTestConfig = { + * import { defineConfig } from '@playwright/test'; + * export default defineConfig({ * webServer: { * command: 'npm run start', * port: 3000, @@ -463,8 +456,7 @@ interface TestConfig { * use: { * baseURL: 'http://localhost:3000/', * }, - * }; - * export default config; + * }); * ``` * * Now you can use a relative path when navigating the page: @@ -483,8 +475,8 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; - * const config: PlaywrightTestConfig = { + * import { defineConfig } from '@playwright/test'; + * export default defineConfig({ * webServer: [ * { * command: 'npm run start', @@ -502,8 +494,7 @@ interface TestConfig { * use: { * baseURL: 'http://localhost:3000/', * }, - * }; - * export default config; + * }); * ``` * */ @@ -515,17 +506,16 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * expect: { * timeout: 10000, * toMatchSnapshot: { * maxDiffPixels: 10, * }, * }, - * }; - * export default config; + * }); * ``` * */ @@ -613,12 +603,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * forbidOnly: !!process.env.CI, - * }; - * export default config; + * }); * ``` * */ @@ -635,12 +624,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * fullyParallel: true, - * }; - * export default config; + * }); * ``` * */ @@ -672,12 +660,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import { type PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * globalSetup: './global-setup', - * }; - * export default config; + * }); * ``` * */ @@ -694,12 +681,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import { type PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * globalTeardown: './global-teardown', - * }; - * export default config; + * }); * ``` * */ @@ -714,12 +700,11 @@ interface TestConfig { * * ```js * // 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, - * }; - * export default config; + * }); * ``` * */ @@ -735,12 +720,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * grep: /smoke/, - * }; - * export default config; + * }); * ``` * */ @@ -757,12 +741,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * grepInvert: /manual/, - * }; - * export default config; + * }); * ``` * */ @@ -776,12 +759,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * ignoreSnapshots: !process.env.CI, - * }; - * export default config; + * }); * ``` * */ @@ -797,12 +779,11 @@ interface TestConfig { * * ```js * // 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, - * }; - * export default config; + * }); * ``` * */ @@ -815,12 +796,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * metadata: 'acceptance tests', - * }; - * export default config; + * }); * ``` * */ @@ -834,12 +814,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * name: 'acceptance tests', - * }; - * export default config; + * }); * ``` * */ @@ -852,12 +831,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import { type PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * outputDir: './test-results', - * }; - * export default config; + * }); * ``` * * **Details** @@ -897,12 +875,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import { type PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * snapshotDir: './snapshots', - * }; - * export default config; + * }); * ``` * * **Details** @@ -927,14 +904,12 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * testDir: './tests', * snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}', - * }; - * - * export default config; + * }); * ``` * * **Details** @@ -995,17 +970,16 @@ interface TestConfig { * * ```js * // 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}', * testMatch: 'example.spec.ts', * projects: [ * { use: { browserName: 'firefox' } }, * { name: 'chromium', use: { browserName: 'chromium' } }, * ], - * }; - * export default config; + * }); * ``` * * In this config: @@ -1030,12 +1004,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import { type PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * preserveOutput: 'always', - * }; - * export default config; + * }); * ``` * */ @@ -1048,14 +1021,13 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import { type PlaywrightTestConfig, devices } from '@playwright/test'; + * import { defineConfig, devices } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * projects: [ * { name: 'chromium', use: devices['Desktop Chrome'] } * ] - * }; - * export default config; + * }); * ``` * */ @@ -1068,12 +1040,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import { type PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * quiet: !!process.env.CI, - * }; - * export default config; + * }); * ``` * */ @@ -1086,12 +1057,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import { type PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * repeatEach: 3, - * }; - * export default config; + * }); * ``` * */ @@ -1104,12 +1074,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import { type PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * reportSlowTests: null, - * }; - * export default config; + * }); * ``` * * **Details** @@ -1137,12 +1106,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * retries: 2, - * }; - * export default config; + * }); * ``` * */ @@ -1157,12 +1125,11 @@ interface TestConfig { * * ```js * // 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 }, - * }; - * export default config; + * }); * ``` * */ @@ -1185,12 +1152,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * testDir: './tests/playwright', - * }; - * export default config; + * }); * ``` * */ @@ -1206,12 +1172,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import { type PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * testIgnore: '**\/test-assets/**', - * }; - * export default config; + * }); * ``` * */ @@ -1227,12 +1192,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import { type PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * testMatch: /.*\.e2e\.js/, - * }; - * export default config; + * }); * ``` * */ @@ -1249,12 +1213,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * timeout: 5 * 60 * 1000, - * }; - * export default config; + * }); * ``` * */ @@ -1274,12 +1237,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import { type PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * updateSnapshots: 'missing', - * }; - * export default config; + * }); * ``` * */ @@ -1299,12 +1261,11 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * workers: 3, - * }; - * export default config; + * }); * ``` * */ @@ -1321,15 +1282,14 @@ interface TestConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * timeout: 30000, * globalTimeout: 600000, * reporter: 'list', * testDir: './tests', - * }; - * export default config; + * }); * ``` * */ @@ -1341,14 +1301,13 @@ export interface Config extends TestConfig { * * ```js * // playwright.config.ts - * import { type PlaywrightTestConfig, devices } from '@playwright/test'; + * import { defineConfig, devices } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * projects: [ * { name: 'chromium', use: devices['Desktop Chrome'] } * ] - * }; - * export default config; + * }); * ``` * */ @@ -1362,14 +1321,13 @@ export interface Config extends TestConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * use: { * browserName: 'chromium', * }, - * }; - * export default config; + * }); * ``` * */ @@ -1389,15 +1347,14 @@ export type Metadata = { [key: string]: any }; * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * timeout: 30000, * globalTimeout: 600000, * reporter: 'list', * testDir: './tests', - * }; - * export default config; + * }); * ``` * */ @@ -1411,12 +1368,11 @@ export interface FullConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * forbidOnly: !!process.env.CI, - * }; - * export default config; + * }); * ``` * */ @@ -1432,12 +1388,11 @@ export interface FullConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * fullyParallel: true, - * }; - * export default config; + * }); * ``` * */ @@ -1452,12 +1407,11 @@ export interface FullConfig { * * ```js * // playwright.config.ts - * import { type PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * globalSetup: './global-setup', - * }; - * export default config; + * }); * ``` * */ @@ -1473,12 +1427,11 @@ export interface FullConfig { * * ```js * // playwright.config.ts - * import { type PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * globalTeardown: './global-teardown', - * }; - * export default config; + * }); * ``` * */ @@ -1492,12 +1445,11 @@ export interface FullConfig { * * ```js * // 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, - * }; - * export default config; + * }); * ``` * */ @@ -1512,12 +1464,11 @@ export interface FullConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * grep: /smoke/, - * }; - * export default config; + * }); * ``` * */ @@ -1533,12 +1484,11 @@ export interface FullConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * grepInvert: /manual/, - * }; - * export default config; + * }); * ``` * */ @@ -1553,12 +1503,11 @@ export interface FullConfig { * * ```js * // 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, - * }; - * export default config; + * }); * ``` * */ @@ -1570,12 +1519,11 @@ export interface FullConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * metadata: 'acceptance tests', - * }; - * export default config; + * }); * ``` * */ @@ -1593,12 +1541,11 @@ export interface FullConfig { * * ```js * // playwright.config.ts - * import { type PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * preserveOutput: 'always', - * }; - * export default config; + * }); * ``` * */ @@ -1610,14 +1557,13 @@ export interface FullConfig { * * ```js * // playwright.config.ts - * import { type PlaywrightTestConfig, devices } from '@playwright/test'; + * import { defineConfig, devices } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * projects: [ * { name: 'chromium', use: devices['Desktop Chrome'] } * ] - * }; - * export default config; + * }); * ``` * */ @@ -1636,12 +1582,11 @@ export interface FullConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * reporter: 'line', - * }; - * export default config; + * }); * ``` * */ @@ -1653,12 +1598,11 @@ export interface FullConfig { * * ```js * // playwright.config.ts - * import { type PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * reportSlowTests: null, - * }; - * export default config; + * }); * ``` * * **Details** @@ -1675,12 +1619,11 @@ export interface FullConfig { * * ```js * // playwright.config.ts - * import { type PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * quiet: !!process.env.CI, - * }; - * export default config; + * }); * ``` * */ @@ -1694,12 +1637,11 @@ export interface FullConfig { * * ```js * // 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 }, - * }; - * export default config; + * }); * ``` * */ @@ -1718,12 +1660,11 @@ export interface FullConfig { * * ```js * // playwright.config.ts - * import { type PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * updateSnapshots: 'missing', - * }; - * export default config; + * }); * ``` * */ @@ -1742,12 +1683,11 @@ export interface FullConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * workers: 3, - * }; - * export default config; + * }); * ``` * */ @@ -1777,8 +1717,8 @@ export interface FullConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; - * const config: PlaywrightTestConfig = { + * import { defineConfig } from '@playwright/test'; + * export default defineConfig({ * webServer: { * command: 'npm run start', * port: 3000, @@ -1788,8 +1728,7 @@ export interface FullConfig { * use: { * baseURL: 'http://localhost:3000/', * }, - * }; - * export default config; + * }); * ``` * * Now you can use a relative path when navigating the page: @@ -1808,8 +1747,8 @@ export interface FullConfig { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; - * const config: PlaywrightTestConfig = { + * import { defineConfig } from '@playwright/test'; + * export default defineConfig({ * webServer: [ * { * command: 'npm run start', @@ -1827,8 +1766,7 @@ export interface FullConfig { * use: { * baseURL: 'http://localhost:3000/', * }, - * }; - * export default config; + * }); * ``` * */ @@ -3283,10 +3221,10 @@ export interface TestType = { + * export default defineConfig({ * projects: [ * { * name: 'shopping', @@ -3297,8 +3235,7 @@ export interface TestType; export const expect: Expect; export const store: TestStore; +/** + * Defines Playwright config + */ +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; + // This is required to not export everything by default. See https://github.com/Microsoft/TypeScript/issues/19545#issuecomment-340490459 export {}; @@ -5108,9 +5049,9 @@ export interface TestInfoError { * * ```js * // 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. * timeout: 30000, * use: { @@ -5149,8 +5090,7 @@ export interface TestInfoError { * use: devices['iPhone 12'], * }, * ], - * }; - * export default config; + * }); * ``` * */ @@ -5319,14 +5259,12 @@ interface TestProject { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * testDir: './tests', * snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}', - * }; - * - * export default config; + * }); * ``` * * **Details** @@ -5387,17 +5325,16 @@ interface TestProject { * * ```js * // 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}', * testMatch: 'example.spec.ts', * projects: [ * { use: { browserName: 'firefox' } }, * { name: 'chromium', use: { browserName: 'chromium' } }, * ], - * }; - * export default config; + * }); * ``` * * In this config: @@ -5466,9 +5403,9 @@ interface TestProject { * * ```js * // playwright.config.ts - * import type { PlaywrightTestConfig } from '@playwright/test'; + * import { defineConfig } from '@playwright/test'; * - * const config: PlaywrightTestConfig = { + * export default defineConfig({ * projects: [ * { * name: 'Smoke Chromium', @@ -5500,8 +5437,7 @@ interface TestProject { * } * }, * ], - * }; - * export default config; + * }); * ``` * * Use [testConfig.testDir](https://playwright.dev/docs/api/class-testconfig#test-config-test-dir) to change this diff --git a/packages/playwright-test/types/testReporter.d.ts b/packages/playwright-test/types/testReporter.d.ts index a68033cca2..5697b94f3e 100644 --- a/packages/playwright-test/types/testReporter.d.ts +++ b/packages/playwright-test/types/testReporter.d.ts @@ -341,12 +341,11 @@ export interface FullResult { * * ```js * // 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', - * }; - * export default config; + * }); * ``` * * Here is a typical order of reporter calls: diff --git a/packages/web/playwright.config.ts b/packages/web/playwright.config.ts index 3c0df893c7..18ad0df47a 100644 --- a/packages/web/playwright.config.ts +++ b/packages/web/playwright.config.ts @@ -14,10 +14,9 @@ * limitations under the License. */ -import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react'; -import { devices } from '@playwright/experimental-ct-react'; +import { devices, defineConfig } from '@playwright/experimental-ct-react'; -const config: PlaywrightTestConfig = { +export default defineConfig({ testDir: 'src', forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, @@ -32,6 +31,4 @@ const config: PlaywrightTestConfig = { use: { ...devices['Desktop Chrome'] }, }, ], -}; - -export default config; +}); diff --git a/tests/components/ct-react-vite/playwright.config.ts b/tests/components/ct-react-vite/playwright.config.ts index 44fa94f4fa..e9d7c8469f 100644 --- a/tests/components/ct-react-vite/playwright.config.ts +++ b/tests/components/ct-react-vite/playwright.config.ts @@ -14,9 +14,9 @@ * 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', forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, @@ -38,6 +38,4 @@ const config: PlaywrightTestConfig = { use: { ...devices['Desktop Safari'] }, }, ], -}; - -export default config; +}); diff --git a/tests/components/ct-react/playwright.config.ts b/tests/components/ct-react/playwright.config.ts index 44fa94f4fa..e9d7c8469f 100644 --- a/tests/components/ct-react/playwright.config.ts +++ b/tests/components/ct-react/playwright.config.ts @@ -14,9 +14,9 @@ * 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', forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, @@ -38,6 +38,4 @@ const config: PlaywrightTestConfig = { use: { ...devices['Desktop Safari'] }, }, ], -}; - -export default config; +}); diff --git a/tests/components/ct-solid/playwright.config.ts b/tests/components/ct-solid/playwright.config.ts index 09035ac5cb..dea12bd19e 100644 --- a/tests/components/ct-solid/playwright.config.ts +++ b/tests/components/ct-solid/playwright.config.ts @@ -14,10 +14,10 @@ * 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'; -const config: PlaywrightTestConfig = { +export default defineConfig({ testDir: 'tests', forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, @@ -46,6 +46,4 @@ const config: PlaywrightTestConfig = { use: { ...devices['Desktop Safari'] }, }, ], -}; - -export default config; +}); diff --git a/tests/components/ct-svelte-vite/playwright.config.ts b/tests/components/ct-svelte-vite/playwright.config.ts index c52c6e876f..eb3662f5bf 100644 --- a/tests/components/ct-svelte-vite/playwright.config.ts +++ b/tests/components/ct-svelte-vite/playwright.config.ts @@ -14,11 +14,11 @@ * 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 { resolve } from 'path'; -const config: PlaywrightTestConfig = { +export default defineConfig({ testDir: 'tests', forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, @@ -47,6 +47,4 @@ const config: PlaywrightTestConfig = { use: { ...devices['Desktop Safari'] }, }, ], -}; - -export default config; +}); diff --git a/tests/components/ct-svelte/playwright.config.ts b/tests/components/ct-svelte/playwright.config.ts index 7a731b0fbd..9f023fbeca 100644 --- a/tests/components/ct-svelte/playwright.config.ts +++ b/tests/components/ct-svelte/playwright.config.ts @@ -14,10 +14,10 @@ * 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'; -const config: PlaywrightTestConfig = { +export default defineConfig({ testDir: 'tests', forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, @@ -46,6 +46,4 @@ const config: PlaywrightTestConfig = { use: { ...devices['Desktop Safari'] }, }, ], -}; - -export default config; +}); diff --git a/tests/components/ct-vue-cli/playwright.config.ts b/tests/components/ct-vue-cli/playwright.config.ts index a60d9697c5..ea3aa696aa 100644 --- a/tests/components/ct-vue-cli/playwright.config.ts +++ b/tests/components/ct-vue-cli/playwright.config.ts @@ -14,10 +14,10 @@ * 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'; -const config: PlaywrightTestConfig = { +export default defineConfig({ testDir: 'tests', forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, @@ -46,6 +46,4 @@ const config: PlaywrightTestConfig = { use: { ...devices['Desktop Safari'] }, }, ], -}; - -export default config; +}); diff --git a/tests/components/ct-vue-vite/playwright.config.ts b/tests/components/ct-vue-vite/playwright.config.ts index a60d9697c5..ea3aa696aa 100644 --- a/tests/components/ct-vue-vite/playwright.config.ts +++ b/tests/components/ct-vue-vite/playwright.config.ts @@ -14,10 +14,10 @@ * 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'; -const config: PlaywrightTestConfig = { +export default defineConfig({ testDir: 'tests', forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, @@ -46,6 +46,4 @@ const config: PlaywrightTestConfig = { use: { ...devices['Desktop Safari'] }, }, ], -}; - -export default config; +}); diff --git a/tests/components/ct-vue2-cli/playwright.config.ts b/tests/components/ct-vue2-cli/playwright.config.ts index 3ddd17c7ea..7d18da0143 100644 --- a/tests/components/ct-vue2-cli/playwright.config.ts +++ b/tests/components/ct-vue2-cli/playwright.config.ts @@ -14,10 +14,10 @@ * 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'; -const config: PlaywrightTestConfig = { +export default defineConfig({ testDir: 'tests', forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, @@ -46,6 +46,4 @@ const config: PlaywrightTestConfig = { use: { ...devices['Desktop Safari'] }, }, ], -}; - -export default config; +}); diff --git a/tests/installation/playwright.config.ts b/tests/installation/playwright.config.ts index 712fa633dc..882f5bfaad 100644 --- a/tests/installation/playwright.config.ts +++ b/tests/installation/playwright.config.ts @@ -15,12 +15,12 @@ */ import path from 'path'; -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig } from '@playwright/test'; import { config as loadEnv } from 'dotenv'; loadEnv({ path: path.join(__dirname, '..', '..', '.env') }); const outputDir = path.join(__dirname, '..', '..', 'test-results'); -const config: PlaywrightTestConfig = { +export default defineConfig({ globalSetup: path.join(__dirname, 'globalSetup'), outputDir, testIgnore: '**\/fixture-scripts/**', @@ -40,6 +40,4 @@ const config: PlaywrightTestConfig = { }, }, ], -}; - -export default config; +}); diff --git a/tests/library/browsercontext-fetch.spec.ts b/tests/library/browsercontext-fetch.spec.ts index b797f0a934..0093d709ec 100644 --- a/tests/library/browsercontext-fetch.spec.ts +++ b/tests/library/browsercontext-fetch.spec.ts @@ -762,7 +762,6 @@ it('should throw on a redirect with an invalid URL', async ({ context, server }) conn.uncork(); conn.end(); }); - console.log(server.PREFIX + '/test'); 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'); }); diff --git a/tests/playwright-test/config.spec.ts b/tests/playwright-test/config.spec.ts index b037f3ab1e..974ab32d48 100644 --- a/tests/playwright-test/config.spec.ts +++ b/tests/playwright-test/config.spec.ts @@ -450,9 +450,9 @@ test('should work with undefined values and base', async ({ runInlineTest }) => test('should have correct types for the config', async ({ runTSC }) => { const result = await runTSC({ 'playwright.config.ts': ` - import type { PlaywrightTestConfig } from '@playwright/test'; + import { defineConfig } from '@playwright/test'; - const config: PlaywrightTestConfig = { + export default defineConfig({ webServer: [ { command: 'echo 123', @@ -473,9 +473,7 @@ test('should have correct types for the config', async ({ runTSC }) => { name: 'project name', } ], - }; - - export default config; + }); ` }); expect(result.exitCode).toBe(0); diff --git a/tests/playwright-test/to-have-screenshot.spec.ts b/tests/playwright-test/to-have-screenshot.spec.ts index 9daed62bc2..d6df3d423f 100644 --- a/tests/playwright-test/to-have-screenshot.spec.ts +++ b/tests/playwright-test/to-have-screenshot.spec.ts @@ -375,8 +375,8 @@ test('should compile with different option combinations', async ({ runTSC }) => const result = await runTSC({ 'playwright.config.ts': ` //@no-header - import type { PlaywrightTestConfig } from '@playwright/test'; - const config: PlaywrightTestConfig = { + import { defineConfig } from '@playwright/test'; + export default defineConfig({ expect: { timeout: 10000, toHaveScreenshot: { @@ -388,8 +388,7 @@ test('should compile with different option combinations', async ({ runTSC }) => scale: "css", }, }, - }; - export default config; + }); `, 'a.spec.ts': ` const { test } = pwt; diff --git a/tests/stress/playwright.config.ts b/tests/stress/playwright.config.ts index e2902d8865..615f32690e 100644 --- a/tests/stress/playwright.config.ts +++ b/tests/stress/playwright.config.ts @@ -14,9 +14,9 @@ * 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, reporter: 'html', projects: [ @@ -41,6 +41,4 @@ const config: PlaywrightTestConfig = { }, }, ] -}; - -export default config; +}); diff --git a/utils/generate_types/overrides-test.d.ts b/utils/generate_types/overrides-test.d.ts index 8c3d030a7e..2d5675fa22 100644 --- a/utils/generate_types/overrides-test.d.ts +++ b/utils/generate_types/overrides-test.d.ts @@ -359,5 +359,12 @@ export const _baseTest: TestType<{}, {}>; export const expect: Expect; export const store: TestStore; +/** + * Defines Playwright config + */ +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; +export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig; + // This is required to not export everything by default. See https://github.com/Microsoft/TypeScript/issues/19545#issuecomment-340490459 export {};