diff --git a/docs/src/api/class-elementhandle.md b/docs/src/api/class-elementhandle.md index d9665c3bbc..0cd557e4c3 100644 --- a/docs/src/api/class-elementhandle.md +++ b/docs/src/api/class-elementhandle.md @@ -688,17 +688,6 @@ handle.select_option(label="blue") handle.select_option(value=["red", "green", "blue"]) ``` -```python sync -# single selection matching the value -handle.select_option("blue") -# single selection matching both the value and the label -handle.select_option(label="blue") -# multiple selection -handle.select_option("red", "green", "blue") -# multiple selection for blue, red and second option -handle.select_option(value="blue", { index: 2 }, "red") -``` - ```csharp // single selection matching the value await handle.SelectOptionAsync(new[] { "blue" }); diff --git a/docs/src/api/class-locator.md b/docs/src/api/class-locator.md index 8abf0a37d7..a70d736037 100644 --- a/docs/src/api/class-locator.md +++ b/docs/src/api/class-locator.md @@ -674,17 +674,6 @@ element.select_option(label="blue") element.select_option(value=["red", "green", "blue"]) ``` -```python sync -# single selection matching the value -element.select_option("blue") -# single selection matching both the value and the label -element.select_option(label="blue") -# multiple selection -element.select_option("red", "green", "blue") -# multiple selection for blue, red and second option -element.select_option(value="blue", { index: 2 }, "red") -``` - ```csharp // single selection matching the value await element.SelectOptionAsync(new[] { "blue" }); diff --git a/docs/src/browsers.md b/docs/src/browsers.md index 20cffbbd91..72ed3cea5c 100644 --- a/docs/src/browsers.md +++ b/docs/src/browsers.md @@ -34,7 +34,7 @@ While Playwright can download and use the recent Chromium build, it can operate Chrome and Microsoft Edge browsers available on the machine. In particular, current Playwright version will support Stable and Beta channels of these browsers. Here is how you can opt into using the stock browser: -```js js-flavor=js +```js tab=js-js // @ts-check /** @type {import('@playwright/test').PlaywrightTestConfig} */ @@ -47,7 +47,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts import type { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { use: { @@ -57,7 +57,7 @@ const config: PlaywrightTestConfig = { export default config; ``` -```js js-flavor=library +```js tab=js-library const { chromium } = require('playwright'); const browser = await chromium.launch({ channel: 'chrome' // or 'msedge', 'chrome-beta', 'msedge-beta', 'msedge-dev', etc. @@ -176,122 +176,122 @@ du -hs ~/Library/Caches/ms-playwright/* You can override default behavior using environment variables. When installing Playwright, ask it to download browsers into a specific location: -```bash bash-flavor=bash lang=js +```bash tab=bash-bash lang=js PLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsers npx playwright install ``` -```bash bash-flavor=batch lang=js +```batch tab=bash-batch lang=js set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers npx playwright install ``` -```bash bash-flavor=powershell lang=js +```powershell tab=bash-powershell lang=js $env:PLAYWRIGHT_BROWSERS_PATH="$env:USERPROFILE\pw-browsers" npx playwright install ``` -```bash bash-flavor=bash lang=python +```bash tab=bash-bash lang=python pip install playwright PLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsers python -m playwright install ``` -```bash bash-flavor=batch lang=python +```batch tab=bash-batch lang=python set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers pip install playwright playwright install ``` -```bash bash-flavor=powershell lang=python +```powershell tab=bash-powershell lang=python $env:PLAYWRIGHT_BROWSERS_PATH="$env:USERPROFILE\pw-browsers" pip install playwright playwright install ``` -```bash bash-flavor=bash lang=java +```bash tab=bash-bash lang=java PLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsers mvn test ``` -```bash bash-flavor=batch lang=java +```batch tab=bash-batch lang=java set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers mvn test ``` -```bash bash-flavor=powershell lang=java +```powershell tab=bash-powershell lang=java $env:PLAYWRIGHT_BROWSERS_PATH="$env:USERPROFILE\pw-browsers" mvn test ``` -```bash bash-flavor=bash lang=csharp +```bash tab=bash-bash lang=csharp PLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsers pwsh bin\Debug\netX\playwright.ps1 install ``` -```bash bash-flavor=batch lang=csharp +```batch tab=bash-batch lang=csharp set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers pwsh bin\Debug\netX\playwright.ps1 install ``` -```bash bash-flavor=powershell lang=csharp +```powershell tab=bash-powershell lang=csharp $env:PLAYWRIGHT_BROWSERS_PATH="$env:USERPROFILE\pw-browsers" pwsh bin\Debug\netX\playwright.ps1 install ``` When running Playwright scripts, ask it to search for browsers in a shared location. -```bash bash-flavor=bash lang=js +```bash tab=bash-bash lang=js PLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsers npx playwright test ``` -```bash bash-flavor=batch lang=js +```batch tab=bash-batch lang=js set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers npx playwright test ``` -```bash bash-flavor=powershell lang=js +```powershell tab=bash-powershell lang=js $env:PLAYWRIGHT_BROWSERS_PATH="$env:USERPROFILE\pw-browsers" npx playwright test ``` -```bash bash-flavor=bash lang=python +```bash tab=bash-bash lang=python # Linux/macOS PLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsers python playwright_script.py ``` -```bash bash-flavor=batch lang=python +```batch tab=bash-batch lang=python set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers python playwright_script.py ``` -```bash bash-flavor=powershell lang=python +```powershell tab=bash-powershell lang=python $env:PLAYWRIGHT_BROWSERS_PATH="$env:USERPROFILE\pw-browsers" python playwright_script.py ``` -```bash bash-flavor=bash lang=java +```bash tab=bash-bash lang=java PLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsers mvn test ``` -```bash bash-flavor=batch lang=java +```batch tab=bash-batch lang=java set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers mvn test ``` -```bash bash-flavor=powershell lang=java +```powershell tab=bash-powershell lang=java $env:PLAYWRIGHT_BROWSERS_PATH="$env:USERPROFILE\pw-browsers" mvn test ``` -```bash bash-flavor=bash lang=csharp +```bash tab=bash-bash lang=csharp PLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsers dotnet test ``` -```bash bash-flavor=batch lang=csharp +```batch tab=bash-batch lang=csharp set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers dotnet test ``` -```bash bash-flavor=powershell lang=csharp +```powershell tab=bash-powershell lang=csharp $env:PLAYWRIGHT_BROWSERS_PATH="$env:USERPROFILE\pw-browsers" dotnet test ``` @@ -307,18 +307,18 @@ Developers can opt-in in this mode via exporting `PLAYWRIGHT_BROWSERS_PATH=$HOME You can opt into the hermetic install and place binaries in the local folder: -```bash bash-flavor=bash +```bash tab=bash-bash # Places binaries to node_modules/@playwright/test PLAYWRIGHT_BROWSERS_PATH=0 npx playwright install ``` -```bash bash-flavor=batch +```batch tab=bash-batch # Places binaries to node_modules\@playwright\test set PLAYWRIGHT_BROWSERS_PATH=0 npx playwright install ``` -```bash bash-flavor=powershell +```powershell tab=bash-powershell # Places binaries to node_modules\@playwright\test $env:PLAYWRIGHT_BROWSERS_PATH=0 npx playwright install @@ -331,7 +331,7 @@ By default, Playwright downloads browsers from Microsoft CDN. Sometimes companies maintain an internal proxy that blocks direct access to the public resources. In this case, Playwright can be configured to download browsers via a proxy server. -```bash bash-flavor=bash lang=js +```bash tab=bash-bash lang=js # For Playwright Test HTTPS_PROXY=https://192.0.2.1 npx playwright install @@ -339,7 +339,7 @@ HTTPS_PROXY=https://192.0.2.1 npx playwright install HTTPS_PROXY=https://192.0.2.1 npm install playwright ``` -```bash bash-flavor=batch lang=js +```batch tab=bash-batch lang=js # For Playwright Test set HTTPS_PROXY=https://192.0.2.1 npx playwright install @@ -349,7 +349,7 @@ set HTTPS_PROXY=https://192.0.2.1 npm install playwright ``` -```bash bash-flavor=powershell lang=js +```powershell tab=bash-powershell lang=js # For Playwright Test $env:HTTPS_PROXY="https://192.0.2.1" npx playwright install @@ -359,47 +359,47 @@ $env:HTTPS_PROXY="https://192.0.2.1" npm install playwright ``` -```bash bash-flavor=bash lang=python +```bash tab=bash-bash lang=python pip install playwright HTTPS_PROXY=https://192.0.2.1 playwright install ``` -```bash bash-flavor=batch lang=python +```batch tab=bash-batch lang=python set HTTPS_PROXY=https://192.0.2.1 pip install playwright playwright install ``` -```bash bash-flavor=powershell lang=python +```powershell tab=bash-powershell lang=python $env:HTTPS_PROXY="https://192.0.2.1" pip install playwright playwright install ``` -```bash bash-flavor=bash lang=java +```bash tab=bash-bash lang=java HTTPS_PROXY=https://192.0.2.1 mvn test ``` -```bash bash-flavor=batch lang=java +```batch tab=bash-batch lang=java set HTTPS_PROXY=https://192.0.2.1 mvn test ``` -```bash bash-flavor=powershell lang=java +```powershell tab=bash-powershell lang=java $env:HTTPS_PROXY="https://192.0.2.1" mvn test ``` -```bash bash-flavor=bash lang=csharp +```bash tab=bash-bash lang=csharp HTTPS_PROXY=https://192.0.2.1 pwsh bin\Debug\netX\playwright.ps1 install ``` -```bash bash-flavor=batch lang=csharp +```batch tab=bash-batch lang=csharp set HTTPS_PROXY=https://192.0.2.1 pwsh bin\Debug\netX\playwright.ps1 install ``` -```bash bash-flavor=powershell lang=csharp +```powershell tab=bash-powershell lang=csharp $env:HTTPS_PROXY="https://192.0.2.1" pwsh bin\Debug\netX\playwright.ps1 install ``` @@ -412,7 +412,7 @@ Sometimes companies maintain an internal artifact repository to host browser binaries. In this case, Playwright can be configured to download from a custom location using the `PLAYWRIGHT_DOWNLOAD_HOST` env variable. -```bash bash-flavor=bash lang=js +```bash tab=bash-bash lang=js # For Playwright Test PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 npx playwright install @@ -420,7 +420,7 @@ PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 npx playwright install PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 npm install playwright ``` -```bash bash-flavor=batch lang=js +```batch tab=bash-batch lang=js # For Playwright Test set PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 npx playwright install @@ -430,7 +430,7 @@ set PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 npm install playwright ``` -```bash bash-flavor=powershell lang=js +```powershell tab=bash-powershell lang=js # For Playwright Test $env:PLAYWRIGHT_DOWNLOAD_HOST="192.0.2.1" npx playwright install @@ -440,47 +440,47 @@ $env:PLAYWRIGHT_DOWNLOAD_HOST="192.0.2.1" npm install playwright ``` -```bash bash-flavor=bash lang=python +```bash tab=bash-bash lang=python pip install playwright PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 playwright install ``` -```bash bash-flavor=batch lang=python +```batch tab=bash-batch lang=python set PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 pip install playwright playwright install ``` -```bash bash-flavor=powershell lang=python +```powershell tab=bash-powershell lang=python $env:PLAYWRIGHT_DOWNLOAD_HOST="192.0.2.1" pip install playwright playwright install ``` -```bash bash-flavor=bash lang=java +```bash tab=bash-bash lang=java PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 mvn test ``` -```bash bash-flavor=batch lang=java +```batch tab=bash-batch lang=java set PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 mvn test ``` -```bash bash-flavor=powershell lang=java +```powershell tab=bash-powershell lang=java $env:PLAYWRIGHT_DOWNLOAD_HOST="192.0.2.1" mvn test ``` -```bash bash-flavor=bash lang=csharp +```bash tab=bash-bash lang=csharp PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 pwsh bin\Debug\netX\playwright.ps1 install ``` -```bash bash-flavor=batch lang=csharp +```batch tab=bash-batch lang=csharp set PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 pwsh bin\Debug\netX\playwright.ps1 install ``` -```bash bash-flavor=powershell lang=csharp +```powershell tab=bash-powershell lang=csharp $env:PLAYWRIGHT_DOWNLOAD_HOST="192.0.2.1" pwsh bin\Debug\netX\playwright.ps1 install ``` @@ -488,7 +488,7 @@ pwsh bin\Debug\netX\playwright.ps1 install It is also possible to use a per-browser download hosts using `PLAYWRIGHT_CHROMIUM_DOWNLOAD_HOST`, `PLAYWRIGHT_FIREFOX_DOWNLOAD_HOST` and `PLAYWRIGHT_WEBKIT_DOWNLOAD_HOST` env variables that take precedence over `PLAYWRIGHT_DOWNLOAD_HOST`. -```bash bash-flavor=bash lang=js +```bash tab=bash-bash lang=js # For Playwright Test PLAYWRIGHT_FIREFOX_DOWNLOAD_HOST=203.0.113.3 PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 npx playwright install @@ -496,7 +496,7 @@ PLAYWRIGHT_FIREFOX_DOWNLOAD_HOST=203.0.113.3 PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 PLAYWRIGHT_FIREFOX_DOWNLOAD_HOST=203.0.113.3 PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 npm install playwright ``` -```bash bash-flavor=batch lang=js +```batch tab=bash-batch lang=js # For Playwright Test set PLAYWRIGHT_FIREFOX_DOWNLOAD_HOST=203.0.113.3 set PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 @@ -508,7 +508,7 @@ set PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 npm install playwright ``` -```bash bash-flavor=powershell lang=js +```powershell tab=bash-powershell lang=js # For Playwright Test $env:PLAYWRIGHT_FIREFOX_DOWNLOAD_HOST="203.0.113.3" $env:PLAYWRIGHT_DOWNLOAD_HOST="192.0.2.1" @@ -520,52 +520,52 @@ $env:PLAYWRIGHT_DOWNLOAD_HOST="192.0.2.1" npm install playwright ``` -```bash bash-flavor=bash lang=python +```bash tab=bash-bash lang=python pip install playwright PLAYWRIGHT_FIREFOX_DOWNLOAD_HOST=203.0.113.3 PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 playwright install ``` -```bash bash-flavor=batch lang=python +```batch tab=bash-batch lang=python set PLAYWRIGHT_FIREFOX_DOWNLOAD_HOST=203.0.113.3 set PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 pip install playwright playwright install ``` -```bash bash-flavor=powershell lang=python +```powershell tab=bash-powershell lang=python $env:PLAYWRIGHT_FIREFOX_DOWNLOAD_HOST="203.0.113.3" $env:PLAYWRIGHT_DOWNLOAD_HOST="192.0.2.1" pip install playwright playwright install ``` -```bash bash-flavor=bash lang=java +```bash tab=bash-bash lang=java PLAYWRIGHT_FIREFOX_DOWNLOAD_HOST=203.0.113.3 PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 mvn test ``` -```bash bash-flavor=batch lang=java +```batch tab=bash-batch lang=java set PLAYWRIGHT_FIREFOX_DOWNLOAD_HOST=203.0.113.3 set PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 mvn test ``` -```bash bash-flavor=powershell lang=java +```powershell tab=bash-powershell lang=java $env:PLAYWRIGHT_FIREFOX_DOWNLOAD_HOST="203.0.113.3" $env:PLAYWRIGHT_DOWNLOAD_HOST="192.0.2.1" mvn test ``` -```bash bash-flavor=bash lang=csharp +```bash tab=bash-bash lang=csharp PLAYWRIGHT_FIREFOX_DOWNLOAD_HOST=203.0.113.3 PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 pwsh bin\Debug\netX\playwright.ps1 install ``` -```bash bash-flavor=batch lang=csharp +```batch tab=bash-batch lang=csharp set PLAYWRIGHT_FIREFOX_DOWNLOAD_HOST=203.0.113.3 set PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 pwsh bin\Debug\netX\playwright.ps1 install ``` -```bash bash-flavor=powershell lang=csharp +```powershell tab=bash-powershell lang=csharp $env:PLAYWRIGHT_DOWNLOAD_HOST="192.0.2.1" $env:PLAYWRIGHT_FIREFOX_DOWNLOAD_HOST="203.0.113.3" pwsh bin\Debug\netX\playwright.ps1 install @@ -578,47 +578,47 @@ browser binaries are managed separately. This can be done by setting `PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD` variable before installation. -```bash bash-flavor=bash lang=python +```bash tab=bash-bash lang=python pip install playwright PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 python -m playwright install ``` -```bash bash-flavor=batch lang=python +```batch tab=bash-batch lang=python set PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 pip install playwright playwright install ``` -```bash bash-flavor=powershell lang=python +```powershell tab=bash-powershell lang=python $env:PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 pip install playwright playwright install ``` -```bash bash-flavor=bash lang=java +```bash tab=bash-bash lang=java PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 mvn test ``` -```bash bash-flavor=batch lang=java +```batch tab=bash-batch lang=java set PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 mvn test ``` -```bash bash-flavor=powershell lang=java +```powershell tab=bash-powershell lang=java $env:PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 mvn test ``` -```bash bash-flavor=bash lang=csharp +```bash tab=bash-bash lang=csharp PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 pwsh bin\Debug\netX\playwright.ps1 install ``` -```bash bash-flavor=batch lang=csharp +```batch tab=bash-batch lang=csharp set PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 pwsh bin\Debug\netX\playwright.ps1 install ``` -```bash bash-flavor=powershell lang=csharp +```powershell tab=bash-powershell lang=csharp $env:PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 pwsh bin\Debug\netX\playwright.ps1 install ``` diff --git a/docs/src/debug.md b/docs/src/debug.md index 857cee3139..62680d11ad 100644 --- a/docs/src/debug.md +++ b/docs/src/debug.md @@ -111,44 +111,44 @@ Using `PWDEBUG=console` will configure the browser for debugging in Developer to [Playwright selectors](./selectors.md). This can be used to verify text or composite selectors. -```bash bash-flavor=bash lang=js +```bash tab=bash-bash lang=js PWDEBUG=console npm run test ``` -```bash bash-flavor=batch lang=js +```batch tab=bash-batch lang=js set PWDEBUG=console npm run test ``` -```bash bash-flavor=powershell lang=js +```powershell tab=bash-powershell lang=js $env:PWDEBUG="console" npm run test ``` -```bash bash-flavor=bash lang=java +```bash tab=bash-bash lang=java PWDEBUG=console mvn test ``` -```bash bash-flavor=batch lang=java +```batch tab=bash-batch lang=java set PWDEBUG=console mvn test ``` -```bash bash-flavor=powershell lang=java +```powershell tab=bash-powershell lang=java $env:PWDEBUG="console" mvn test ``` -```bash bash-flavor=bash lang=python +```bash tab=bash-bash lang=python PWDEBUG=console pytest -s ``` -```bash bash-flavor=batch lang=python +```batch tab=bash-batch lang=python set PWDEBUG=console pytest -s ``` -```bash bash-flavor=powershell lang=python +```powershell tab=bash-powershell lang=python $env:PWDEBUG="console" pytest -s ``` @@ -194,58 +194,58 @@ breakpoints. Playwright supports verbose logging with the `DEBUG` environment variable. -```bash bash-flavor=bash lang=js +```bash tab=bash-bash lang=js DEBUG=pw:api npm run test ``` -```bash bash-flavor=batch lang=js +```batch tab=bash-batch lang=js set DEBUG=pw:api npm run test ``` -```bash bash-flavor=powershell lang=js +```powershell tab=bash-powershell lang=js $env:DEBUG="pw:api" npm run test ``` -```bash bash-flavor=bash lang=java +```bash tab=bash-bash lang=java DEBUG=pw:api mvn test ``` -```bash bash-flavor=batch lang=java +```batch tab=bash-batch lang=java set DEBUG=pw:api mvn test ``` -```bash bash-flavor=powershell lang=java +```powershell tab=bash-powershell lang=java $env:DEBUG="pw:api" mvn test ``` -```bash bash-flavor=bash lang=python +```bash tab=bash-bash lang=python DEBUG=pw:api pytest -s ``` -```bash bash-flavor=batch lang=python +```batch tab=bash-batch lang=python set DEBUG=pw:api pytest -s ``` -```bash bash-flavor=powershell lang=python +```powershell tab=bash-powershell lang=python $env:DEBUG="pw:api" pytest -s ``` -```bash bash-flavor=bash lang=csharp +```bash tab=bash-bash lang=csharp DEBUG=pw:api dotnet run ``` -```bash bash-flavor=batch lang=csharp +```batch tab=bash-batch lang=csharp set DEBUG=pw:api dotnet run ``` -```bash bash-flavor=powershell lang=csharp +```powershell tab=bash-powershell lang=csharp $env:DEBUG="pw:api" dotnet run ``` diff --git a/docs/src/inspector.md b/docs/src/inspector.md index 0857840a7c..978b83deb8 100644 --- a/docs/src/inspector.md +++ b/docs/src/inspector.md @@ -16,63 +16,63 @@ There are several ways of opening Playwright Inspector: - Set the `PWDEBUG` environment variable to run your scripts in debug mode. This configures Playwright for debugging and opens the inspector. - ```bash bash-flavor=bash lang=js + ```bash tab=bash-bash lang=js PWDEBUG=1 npm run test ``` - ```bash bash-flavor=batch lang=js + ```batch tab=bash-batch lang=js set PWDEBUG=1 npm run test ``` - ```bash bash-flavor=powershell lang=js + ```powershell tab=bash-powershell lang=js $env:PWDEBUG=1 npm run test ``` - ```bash bash-flavor=bash lang=java + ```bash tab=bash-bash lang=java # Source directories in the list are separated by : on macos and linux and by ; on win. PWDEBUG=1 PLAYWRIGHT_JAVA_SRC= mvn test ``` - ```bash bash-flavor=batch lang=java + ```batch tab=bash-batch lang=java # Source directories in the list are separated by : on macos and linux and by ; on win. set PLAYWRIGHT_JAVA_SRC= set PWDEBUG=1 mvn test ``` - ```bash bash-flavor=powershell lang=java + ```powershell tab=bash-powershell lang=java # Source directories in the list are separated by : on macos and linux and by ; on win. $env:PLAYWRIGHT_JAVA_SRC="" $env:PWDEBUG=1 mvn test ``` - ```bash bash-flavor=bash lang=python + ```bash tab=bash-bash lang=python PWDEBUG=1 pytest -s ``` - ```bash bash-flavor=batch lang=python + ```batch tab=bash-batch lang=python set PWDEBUG=1 pytest -s ``` - ```bash bash-flavor=powershell lang=python + ```powershell tab=bash-powershell lang=python $env:PWDEBUG=1 pytest -s ``` - ```bash bash-flavor=bash lang=csharp + ```bash tab=bash-bash lang=csharp PWDEBUG=1 dotnet test ``` - ```bash bash-flavor=batch lang=csharp + ```batch tab=bash-batch lang=csharp set PWDEBUG=1 dotnet test ``` - ```bash bash-flavor=powershell lang=csharp + ```powershell tab=bash-powershell lang=csharp $env:PWDEBUG=1 dotnet test ``` diff --git a/docs/src/intro-js.md b/docs/src/intro-js.md index e3ed738dee..ed9895f7c2 100644 --- a/docs/src/intro-js.md +++ b/docs/src/intro-js.md @@ -67,7 +67,7 @@ You can optionally install only selected browsers, see [install browsers](./cli. Create `tests/example.spec.js` (or `tests/example.spec.ts` for TypeScript) to define your test. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('basic test', async ({ page }) => { @@ -77,7 +77,7 @@ test('basic test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('basic test', async ({ page }) => { @@ -105,7 +105,7 @@ To enjoy all the features that Playwright Test has to offer, you would want to c Here is an example configuration that runs every test in Chromium, Firefox and WebKit, by creating a "project" for each browser configuration. It also specifies [two retries](./test-retries.md) and [tracing](./trace-viewer.md) options. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check const { devices } = require('@playwright/test'); @@ -136,7 +136,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import { type PlaywrightTestConfig, devices } from '@playwright/test'; @@ -197,7 +197,7 @@ Learn more about [test assertions here](./test-assertions.md). Here is a quick example of using them: -```js js-flavor=js +```js tab=js-js // example.spec.js const { test, expect } = require('@playwright/test'); @@ -216,7 +216,7 @@ test('my test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -239,12 +239,12 @@ test('my test', async ({ page }) => { You noticed an argument `{ page }` that the test above has access to: -```js js-flavor=js +```js tab=js-js test('basic test', async ({ page }) => { ... ``` -```js js-flavor=ts +```js tab=js-ts test('basic test', async ({ page }) => { ... ``` @@ -265,7 +265,7 @@ Here is a list of the pre-defined fixtures that you are likely to use most of th You can use `test.beforeAll` and `test.afterAll` hooks to set up and tear down resources shared between tests. And you can use `test.beforeEach` and `test.afterEach` hooks to set up and tear down resources for each test individually. -```js js-flavor=js +```js tab=js-js // example.spec.js const { test, expect } = require('@playwright/test'); @@ -282,7 +282,7 @@ test.describe('feature foo', () => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test, expect } from '@playwright/test'; diff --git a/docs/src/intro-python.md b/docs/src/intro-python.md index d11f3ce807..576703abd1 100644 --- a/docs/src/intro-python.md +++ b/docs/src/intro-python.md @@ -155,18 +155,18 @@ with sync_playwright() as p: If you want to bundle browsers with the executables: -```bash bash-flavor=bash +```bash tab=bash-bash PLAYWRIGHT_BROWSERS_PATH=0 playwright install chromium pyinstaller -F main.py ``` -```bash bash-flavor=batch +```batch tab=bash-batch set PLAYWRIGHT_BROWSERS_PATH=0 playwright install chromium pyinstaller -F main.py ``` -```bash bash-flavor=powershell +```powershell tab=bash-powershell $env:PLAYWRIGHT_BROWSERS_PATH="0" playwright install chromium pyinstaller -F main.py diff --git a/docs/src/test-advanced-js.md b/docs/src/test-advanced-js.md index d08b141ac8..b34110a70e 100644 --- a/docs/src/test-advanced-js.md +++ b/docs/src/test-advanced-js.md @@ -13,7 +13,7 @@ Note that each [test project](#projects) can provide its own [options][TestProje Here is an example that defines a common timeout and two projects. The "Smoke" project runs a small subset of tests without retries, and "Default" project runs all other tests with retries. -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { @@ -34,7 +34,7 @@ const config: PlaywrightTestConfig = { export default config; ``` -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check /** @type {import('@playwright/test').PlaywrightTestConfig} */ @@ -66,7 +66,7 @@ Test functions, fixtures and hooks receive a [TestInfo] parameter that provides See [TestInfo] methods and properties for all available information and utilities. Here is an example test that saves information to a file using [TestInfo]. -```js js-flavor=js +```js tab=js-js // example.spec.js const { test } = require('@playwright/test'); @@ -78,7 +78,7 @@ test('my test needs a file', async ({ table }, testInfo) => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test } from '@playwright/test'; @@ -91,7 +91,7 @@ test('my test needs a file', async ({ table }, testInfo) => { ``` Here is an example fixture that automatically saves debug logs when the test fails. -```js js-flavor=js +```js tab=js-js // my-test.js const debug = require('debug'); const fs = require('fs'); @@ -113,7 +113,7 @@ exports.test = base.test.extend({ }); ``` -```js js-flavor=ts +```js tab=js-ts // my-test.ts import * as debug from 'debug'; import * as fs from 'fs'; @@ -150,7 +150,7 @@ The `port` (but not the `url`) gets passed over to Playwright as a [`property: T It is also recommended to specify [`property: TestOptions.baseURL`] in the config, so that tests could use relative urls. ::: -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { @@ -167,7 +167,7 @@ const config: PlaywrightTestConfig = { export default config; ``` -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check /** @type {import('@playwright/test').PlaywrightTestConfig} */ @@ -187,7 +187,7 @@ module.exports = config; Now you can use a relative path when navigating the page: -```js js-flavor=ts +```js tab=js-ts // test.spec.ts import { test } from '@playwright/test'; test('test', async ({ page }) => { @@ -197,7 +197,7 @@ test('test', async ({ page }) => { }); ``` -```js js-flavor=js +```js tab=js-js // test.spec.js const { test } = require('@playwright/test'); test('test', async ({ page }) => { @@ -215,7 +215,7 @@ Similarly, use `globalTeardown` to run something once after all the tests. Alter Here is a global setup example that authenticates once and reuses authentication state in tests. It uses `baseURL` and `storageState` options from the configuration file. -```js js-flavor=js +```js tab=js-js // global-setup.js const { chromium } = require('@playwright/test'); @@ -232,7 +232,7 @@ module.exports = async config => { }; ``` -```js js-flavor=ts +```js tab=js-ts // global-setup.ts import { chromium, FullConfig } from '@playwright/test'; @@ -253,7 +253,7 @@ export default globalSetup; Specify `globalSetup`, `baseURL` and `storageState` in the configuration file. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check /** @type {import('@playwright/test').PlaywrightTestConfig} */ @@ -267,7 +267,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -283,7 +283,7 @@ export default config; Tests start already authenticated because we specify `storageState` that was populated by global setup. -```js js-flavor=ts +```js tab=js-ts import { test } from '@playwright/test'; test('test', async ({ page }) => { @@ -292,7 +292,7 @@ test('test', async ({ page }) => { }); ``` -```js js-flavor=js +```js tab=js-js const { test } = require('@playwright/test'); test('test', async ({ page }) => { @@ -303,7 +303,7 @@ test('test', async ({ page }) => { You can make arbitrary data available in your tests from your global setup file by setting them as environment variables via `process.env`. -```js js-flavor=js +```js tab=js-js // global-setup.js module.exports = async config => { process.env.FOO = 'some data'; @@ -312,7 +312,7 @@ module.exports = async config => { }; ``` -```js js-flavor=ts +```js tab=js-ts // global-setup.ts import { FullConfig } from '@playwright/test'; @@ -327,7 +327,7 @@ export default globalSetup; Tests have access to the `process.env` properties set in the global setup. -```js js-flavor=ts +```js tab=js-ts import { test } from '@playwright/test'; test('test', async ({ page }) => { @@ -342,7 +342,7 @@ test('test', async ({ page }) => { }); ``` -```js js-flavor=js +```js tab=js-js const { test } = require('@playwright/test'); test('test', async ({ page }) => { @@ -364,7 +364,7 @@ Playwright Test supports running multiple test projects at the same time. This i ### Same tests, different configuration Here is an example that runs the same tests in different browsers: -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check const { devices } = require('@playwright/test'); @@ -390,7 +390,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import { type PlaywrightTestConfig, devices } from '@playwright/test'; @@ -428,7 +428,7 @@ Each project can be configured separately, and run different set of tests with d Here is an example that runs projects with different tests and configurations. The "Smoke" project runs a small subset of tests without retries, and "Default" project runs all other tests with retries. -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { @@ -449,7 +449,7 @@ const config: PlaywrightTestConfig = { export default config; ``` -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check /** @type {import('@playwright/test').PlaywrightTestConfig} */ @@ -492,7 +492,7 @@ Worker-scoped fixtures receive a [WorkerInfo] parameter that describes the curre Consider an example where we run a new http server per worker process, and use `workerIndex` to produce a unique port number: -```js js-flavor=js +```js tab=js-js // my-test.js const base = require('@playwright/test'); const http = require('http'); @@ -515,7 +515,7 @@ exports.test = base.test.extend({ }); ``` -```js js-flavor=ts +```js tab=js-ts // my-test.ts import { test as base } from '@playwright/test'; import * as http from 'http'; @@ -543,7 +543,7 @@ export const test = base.extend<{}, { server: http.Server }>({ Playwright Test uses [`expect` library](https://jestjs.io/docs/expect) under the hood which has the functionality to extend it with [custom matchers](https://jestjs.io/docs/expect#expectextendmatchers). In this example we add a custom `toBeWithinRange` function in the configuration file. -```js js-flavor=js +```js tab=js-js // playwright.config.js const { expect } = require('@playwright/test'); @@ -567,7 +567,7 @@ expect.extend({ module.exports = {}; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import { expect, PlaywrightTestConfig } from '@playwright/test'; @@ -593,7 +593,7 @@ export default config; ``` Now we can use `toBeWithinRange` in the test. -```js js-flavor=js +```js tab=js-js // example.spec.js const { test, expect } = require('@playwright/test'); @@ -603,7 +603,7 @@ test('numeric ranges', () => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test, expect } from '@playwright/test'; diff --git a/docs/src/test-annotations-js.md b/docs/src/test-annotations-js.md index 630054447c..8040873448 100644 --- a/docs/src/test-annotations-js.md +++ b/docs/src/test-annotations-js.md @@ -19,13 +19,13 @@ Annotations can be used on a single test or a group of tests. Annotations can be You can focus some tests. When there are focused tests, only these tests run. -```js js-flavor=js +```js tab=js-js test.only('focus this test', async ({ page }) => { // Run only focused tests in the entire project. }); ``` -```js js-flavor=ts +```js tab=js-ts test.only('focus this test', async ({ page }) => { // Run only focused tests in the entire project. }); @@ -35,13 +35,13 @@ test.only('focus this test', async ({ page }) => { Mark a test as skipped. -```js js-flavor=js +```js tab=js-js test.skip('skip this test', async ({ page }) => { // This test is not run }); ``` -```js js-flavor=ts +```js tab=js-ts test.skip('skip this test', async ({ page }) => { // This test is not run }); @@ -51,13 +51,13 @@ test.skip('skip this test', async ({ page }) => { You can skip certain test based on the condition. -```js js-flavor=js +```js tab=js-js test('skip this test', async ({ page, browserName }) => { test.skip(browserName === 'firefox', 'Still working on it'); }); ``` -```js js-flavor=ts +```js tab=js-ts test('skip this test', async ({ page, browserName }) => { test.skip(browserName === 'firefox', 'Still working on it'); }); @@ -67,7 +67,7 @@ test('skip this test', async ({ page, browserName }) => { You can group tests to give them a logical name or to scope before/after hooks to the group. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.describe('two tests', () => { @@ -81,7 +81,7 @@ test.describe('two tests', () => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.describe('two tests', () => { @@ -99,7 +99,7 @@ test.describe('two tests', () => { Sometimes you want to tag your tests as `@fast` or `@slow` and only run the tests that have the certain tag. We recommend that you use the `--grep` and `--grep-invert` command line flags for that: -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('Test login page @fast', async ({ page }) => { @@ -111,7 +111,7 @@ test('Test full report @slow', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('Test login page @fast', async ({ page }) => { @@ -139,7 +139,7 @@ npx playwright test --grep-invert @slow For example, you can run a group of tests just in Chromium by passing a callback. -```js js-flavor=js +```js tab=js-js // example.spec.js test.describe('chromium only', () => { @@ -159,7 +159,7 @@ test.describe('chromium only', () => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts test.describe('chromium only', () => { @@ -183,7 +183,7 @@ test.describe('chromium only', () => { To avoid running `beforeEach` hooks, you can put annotations in the hook itself. -```js js-flavor=js +```js tab=js-js // example.spec.js test.beforeEach(async ({ page, isMobile }) => { @@ -198,7 +198,7 @@ test('user profile', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts test.beforeEach(async ({ page, isMobile }) => { @@ -217,7 +217,7 @@ test('user profile', async ({ page }) => { It's also possible to add custom metadata in the form of annotations to your tests. Annotations are key/value pairs accessible via [`test.info().annotations`](./api/class-testinfo#test-info-annotations). Many reporters show annotations, for example `'html'`. -```js js-flavor=js +```js tab=js-js // example.spec.js test('user profile', async ({ page }) => { @@ -226,7 +226,7 @@ test('user profile', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts test('user profile', async ({ page }) => { diff --git a/docs/src/test-api-testing-js.md b/docs/src/test-api-testing-js.md index a77a71d3c3..09011d9508 100644 --- a/docs/src/test-api-testing-js.md +++ b/docs/src/test-api-testing-js.md @@ -29,7 +29,7 @@ The following example demonstrates how to use Playwright to test issues creation GitHub API requires authorization, so we'll configure the token once for all tests. While at it, we'll also set the `baseURL` to simplify the tests. You can either put them in the configuration file, or in the test file with `test.use()`. -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -49,7 +49,7 @@ const config: PlaywrightTestConfig = { export default config; ``` -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check /** @type {import('@playwright/test').PlaywrightTestConfig} */ @@ -182,7 +182,7 @@ While running tests inside browsers you may want to make calls to the HTTP API o The following test creates a new issue via API and then navigates to the list of all issues in the project to check that it appears at the top of the list. -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; const REPO = 'test-repo-1'; @@ -224,7 +224,7 @@ test('last created issue should be first in the list', async ({ page }) => { }); ``` -```js js-flavor=js +```js tab=js-js // @ts-check const { test, expect } = require('@playwright/test'); @@ -272,7 +272,7 @@ test('last created issue should be first in the list', async ({ page }) => { The following test creates a new issue via user interface in the browser and then uses checks if it was created via API: -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; const REPO = 'test-repo-1'; @@ -316,7 +316,7 @@ test('last created issue should be on the server', async ({ page, request }) => }); ``` -```js js-flavor=js +```js tab=js-js // @ts-check const { test, expect } = require('@playwright/test'); diff --git a/docs/src/test-api/class-fixtures.md b/docs/src/test-api/class-fixtures.md index 6997734d30..f7699a23d1 100644 --- a/docs/src/test-api/class-fixtures.md +++ b/docs/src/test-api/class-fixtures.md @@ -5,7 +5,7 @@ Playwright Test is based on the concept of the [test fixtures](../test-fixtures. Playwright Test looks at each test declaration, analyses the set of fixtures the test needs and prepares those fixtures specifically for the test. Values prepared by the fixtures are merged into a single object that is available to the `test`, hooks, annotations and other fixtures as a first parameter. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('basic test', async ({ page }) => { @@ -13,7 +13,7 @@ test('basic test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('basic test', async ({ page }) => { @@ -37,14 +37,14 @@ Learn how to [configure browser](../test-configuration.md) and see [available op Name of the browser that runs tests. Defaults to `'chromium'`. Useful to [annotate tests](../test-annotations.md) based on the browser. -```js js-flavor=js +```js tab=js-js test('skip this test in Firefox', async ({ page, browserName }) => { test.skip(browserName === 'firefox', 'Still working on it'); // ... }); ``` -```js js-flavor=ts +```js tab=js-ts test('skip this test in Firefox', async ({ page, browserName }) => { test.skip(browserName === 'firefox', 'Still working on it'); // ... @@ -67,7 +67,7 @@ Isolated [Page] instance, created for each test. Pages are isolated between test This is the most common fixture used in a test. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('basic test', async ({ page }) => { @@ -79,7 +79,7 @@ test('basic test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('basic test', async ({ page }) => { @@ -96,7 +96,7 @@ test('basic test', async ({ page }) => { Isolated [APIRequestContext] instance for each test. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('basic test', async ({ request }) => { @@ -109,7 +109,7 @@ test('basic test', async ({ request }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('basic test', async ({ request }) => { diff --git a/docs/src/test-api/class-test.md b/docs/src/test-api/class-test.md index 4faf65c989..2a3cdbf893 100644 --- a/docs/src/test-api/class-test.md +++ b/docs/src/test-api/class-test.md @@ -3,7 +3,7 @@ Playwright Test provides a `test` function to declare tests and [`expect` function](https://jestjs.io/docs/expect) to write assertions. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('basic test', async ({ page }) => { @@ -13,7 +13,7 @@ test('basic test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('basic test', async ({ page }) => { @@ -27,7 +27,7 @@ test('basic test', async ({ page }) => { Declares a test. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('basic test', async ({ page }) => { @@ -37,7 +37,7 @@ test('basic test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('basic test', async ({ page }) => { @@ -78,7 +78,7 @@ Declares an `afterEach` hook that is executed after each test. When called in th You can access all the same [Fixtures] as the test function itself, and also the [TestInfo] object that gives a lot of useful information. For example, you can check whether the test succeeded or failed. -```js js-flavor=js +```js tab=js-js // example.spec.js const { test, expect } = require('@playwright/test'); @@ -94,7 +94,7 @@ test('my test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -120,7 +120,7 @@ Hook function that takes one or two arguments: an object with fixtures and optio Declares a `beforeAll` hook that is executed once per worker process before all tests. When called in the scope of a test file, runs before all tests in the file. When called inside a [`method: Test.describe`] group, runs before all tests in the group. If multiple `beforeAll` hooks are added, they will run in the order of their registration. -```js js-flavor=js +```js tab=js-js // example.spec.js const { test, expect } = require('@playwright/test'); @@ -137,7 +137,7 @@ test('my test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -171,7 +171,7 @@ Declares a `beforeEach` hook that is executed before each test. When called in t You can access all the same [Fixtures] as the test function itself, and also the [TestInfo] object that gives a lot of useful information. For example, you can navigate the page before starting the test. -```js js-flavor=js +```js tab=js-js // example.spec.js const { test, expect } = require('@playwright/test'); @@ -185,7 +185,7 @@ test('my test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -213,7 +213,7 @@ Hook function that takes one or two arguments: an object with fixtures and optio Declares a group of tests. -```js js-flavor=js +```js tab=js-js test.describe('two tests', () => { test('one', async ({ page }) => { // ... @@ -225,7 +225,7 @@ test.describe('two tests', () => { }); ``` -```js js-flavor=ts +```js tab=js-ts test.describe('two tests', () => { test('one', async ({ page }) => { // ... @@ -257,14 +257,14 @@ Learn more about the execution modes [here](../test-parallel.md). Running tests in parallel: -```js js-flavor=js +```js tab=js-js // Run all the tests in the file concurrently using parallel workers. test.describe.configure({ mode: 'parallel' }); test('runs in parallel 1', async ({ page }) => {}); test('runs in parallel 2', async ({ page }) => {}); ``` -```js js-flavor=ts +```js tab=js-ts // Run all the tests in the file concurrently using parallel workers. test.describe.configure({ mode: 'parallel' }); test('runs in parallel 1', async ({ page }) => {}); @@ -273,14 +273,14 @@ test('runs in parallel 2', async ({ page }) => {}); Running tests sequentially: -```js js-flavor=js +```js tab=js-js // Annotate tests as inter-dependent. test.describe.configure({ mode: 'serial' }); test('runs first', async ({ page }) => {}); test('runs second', async ({ page }) => {}); ``` -```js js-flavor=ts +```js tab=js-ts // Annotate tests as inter-dependent. test.describe.configure({ mode: 'serial' }); test('runs first', async ({ page }) => {}); @@ -296,7 +296,7 @@ test('runs second', async ({ page }) => {}); Declares a focused group of tests. If there are some focused tests or suites, all of them will be run but nothing else. -```js js-flavor=js +```js tab=js-js test.describe.only('focused group', () => { test('in the focused group', async ({ page }) => { // This test will run @@ -307,7 +307,7 @@ test('not in the focused group', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts test.describe.only('focused group', () => { test('in the focused group', async ({ page }) => { // This test will run @@ -338,14 +338,14 @@ Declares a group of tests that could be run in parallel. By default, tests in a See [`method: Test.describe.configure`] for the preferred way of configuring the execution mode. ::: -```js js-flavor=js +```js tab=js-js test.describe.parallel('group', () => { test('runs in parallel 1', async ({ page }) => {}); test('runs in parallel 2', async ({ page }) => {}); }); ``` -```js js-flavor=ts +```js tab=js-ts test.describe.parallel('group', () => { test('runs in parallel 1', async ({ page }) => {}); test('runs in parallel 2', async ({ page }) => {}); @@ -394,14 +394,14 @@ See [`method: Test.describe.configure`] for the preferred way of configuring the Using serial is not recommended. It is usually better to make your tests isolated, so they can be run independently. ::: -```js js-flavor=js +```js tab=js-js test.describe.serial('group', () => { test('runs first', async ({ page }) => {}); test('runs second', async ({ page }) => {}); }); ``` -```js js-flavor=ts +```js tab=js-ts test.describe.serial('group', () => { test('runs first', async ({ page }) => {}); test('runs second', async ({ page }) => {}); @@ -428,7 +428,7 @@ Declares a focused group of tests that should always be run serially. If one of Using serial is not recommended. It is usually better to make your tests isolated, so they can be run independently. ::: -```js js-flavor=js +```js tab=js-js test.describe.serial.only('group', () => { test('runs first', async ({ page }) => { }); @@ -437,7 +437,7 @@ test.describe.serial.only('group', () => { }); ``` -```js js-flavor=ts +```js tab=js-ts test.describe.serial.only('group', () => { test('runs first', async ({ page }) => { }); @@ -463,7 +463,7 @@ A callback that is run immediately when calling [`method: Test.describe.serial.o Declares a skipped test group, similarly to [`method: Test.describe`]. Tests in the skipped group are never run. -```js js-flavor=js +```js tab=js-js test.describe.skip('skipped group', () => { test('example', async ({ page }) => { // This test will not run @@ -471,7 +471,7 @@ test.describe.skip('skipped group', () => { }); ``` -```js js-flavor=ts +```js tab=js-ts test.describe.skip('skipped group', () => { test('example', async ({ page }) => { // This test will not run @@ -507,7 +507,7 @@ Extends the `test` object by defining fixtures and/or options that can be used i First define a fixture and/or an option. -```js js-flavor=js +```js tab=js-js // my-test.js const base = require('@playwright/test'); const { TodoPage } = require('./todo-page'); @@ -530,7 +530,7 @@ exports.test = base.test.extend({ }); ``` -```js js-flavor=ts +```js tab=js-ts import { test as base } from '@playwright/test'; import { TodoPage } from './todo-page'; @@ -556,7 +556,7 @@ export const test = base.extend({ Then use the fixture in the test. -```js js-flavor=js +```js tab=js-js // example.spec.js const { test } = require('./my-test'); @@ -566,7 +566,7 @@ test('test 1', async ({ todoPage }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test } from './my-test'; @@ -578,7 +578,7 @@ test('test 1', async ({ todoPage }) => { Configure the option in config file. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -599,7 +599,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; import { Options } from './my-test'; @@ -634,7 +634,7 @@ An object containing fixtures and/or options. Learn more about [fixtures format] Unconditonally marks a test as "should fail". Playwright Test runs this test and ensures that it is actually failing. This is useful for documentation purposes to acknowledge that some functionality is broken until it is fixed. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('not yet ready', async ({ page }) => { @@ -643,7 +643,7 @@ test('not yet ready', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('not yet ready', async ({ page }) => { @@ -656,7 +656,7 @@ test('not yet ready', async ({ page }) => { Conditionally mark a test as "should fail" with an optional description. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('fail in WebKit', async ({ page, browserName }) => { @@ -665,7 +665,7 @@ test('fail in WebKit', async ({ page, browserName }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('fail in WebKit', async ({ page, browserName }) => { @@ -689,7 +689,7 @@ Optional description that will be reflected in a test report. Conditionally mark all tests in a file or [`method: Test.describe`] group as "should fail". -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.fail(({ browserName }) => browserName === 'webkit'); @@ -702,7 +702,7 @@ test('fail in WebKit 2', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.fail(({ browserName }) => browserName === 'webkit'); @@ -730,7 +730,7 @@ Optional description that will be reflected in a test report. Declares a test to be fixed, similarly to [`method: Test.(call)`]. This test will not be run. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.fixme('test to be fixed', async ({ page }) => { @@ -738,7 +738,7 @@ test.fixme('test to be fixed', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.fixme('test to be fixed', async ({ page }) => { @@ -762,7 +762,7 @@ Test function that takes one or two arguments: an object with fixtures and optio Mark a test as "fixme", with the intention to fix it. Test is immediately aborted when you call [`method: Test.fixme#2`]. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('test to be fixed', async ({ page }) => { @@ -771,7 +771,7 @@ test('test to be fixed', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('test to be fixed', async ({ page }) => { @@ -782,7 +782,7 @@ test('test to be fixed', async ({ page }) => { Mark all tests in a file or [`method: Test.describe`] group as "fixme". -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.fixme(); @@ -795,7 +795,7 @@ test('test to be fixed 2', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.fixme(); @@ -813,7 +813,7 @@ test('test to be fixed 2', async ({ page }) => { Conditionally mark a test as "fixme" with an optional description. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('broken in WebKit', async ({ page, browserName }) => { @@ -822,7 +822,7 @@ test('broken in WebKit', async ({ page, browserName }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('broken in WebKit', async ({ page, browserName }) => { @@ -849,7 +849,7 @@ Optional description that will be reflected in a test report. Conditionally mark all tests in a file or [`method: Test.describe`] group as "fixme". -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.fixme(({ browserName }) => browserName === 'webkit'); @@ -862,7 +862,7 @@ test('broken in WebKit 2', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.fixme(({ browserName }) => browserName === 'webkit'); @@ -896,13 +896,13 @@ Returns information about the currently running test. This method can only be ca Declares a focused test. If there are some focused tests or suites, all of them will be run but nothing else. -```js js-flavor=js +```js tab=js-js test.only('focus this test', async ({ page }) => { // Run only focused tests in the entire project. }); ``` -```js js-flavor=ts +```js tab=js-ts test.only('focus this test', async ({ page }) => { // Run only focused tests in the entire project. }); @@ -925,7 +925,7 @@ Test function that takes one or two arguments: an object with fixtures and optio Changes the timeout for the test. Zero means no timeout. Learn more about [various timeouts](../test-timeouts.md). -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('very slow test', async ({ page }) => { @@ -934,7 +934,7 @@ test('very slow test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('very slow test', async ({ page }) => { @@ -945,7 +945,7 @@ test('very slow test', async ({ page }) => { Changing timeout from a slow `beforeEach` or `afterEach` hook. Note that this affects the test timeout that is shared with `beforeEach`/`afterEach` hooks. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.beforeEach(async ({ page }, testInfo) => { @@ -954,7 +954,7 @@ test.beforeEach(async ({ page }, testInfo) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.beforeEach(async ({ page }, testInfo) => { @@ -965,7 +965,7 @@ test.beforeEach(async ({ page }, testInfo) => { Changing timeout for a `beforeAll` or `afterAll` hook. Note this affects the hook's timeout, not the test timeout. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.beforeAll(async () => { @@ -974,7 +974,7 @@ test.beforeAll(async () => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.beforeAll(async () => { @@ -985,7 +985,7 @@ test.beforeAll(async () => { Changing timeout for all tests in a [`method: Test.describe`] group. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.describe('group', () => { @@ -998,7 +998,7 @@ test.describe('group', () => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.describe('group', () => { @@ -1024,7 +1024,7 @@ Timeout in milliseconds. Declares a skipped test, similarly to [`method: Test.(call)`]. Skipped test is never run. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.skip('broken test', async ({ page }) => { @@ -1032,7 +1032,7 @@ test.skip('broken test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.skip('broken test', async ({ page }) => { @@ -1056,7 +1056,7 @@ Test function that takes one or two arguments: an object with fixtures and optio Unconditionally skip a test. Test is immediately aborted when you call [`method: Test.skip#2`]. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('skipped test', async ({ page }) => { @@ -1065,7 +1065,7 @@ test('skipped test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('skipped test', async ({ page }) => { @@ -1076,7 +1076,7 @@ test('skipped test', async ({ page }) => { Unconditionally skip all tests in a file or [`method: Test.describe`] group: -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.skip(); @@ -1089,7 +1089,7 @@ test('skipped test 2', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.skip(); @@ -1107,7 +1107,7 @@ test('skipped test 2', async ({ page }) => { Conditionally skip a test with an optional description. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('skip in WebKit', async ({ page, browserName }) => { @@ -1116,7 +1116,7 @@ test('skip in WebKit', async ({ page, browserName }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('skip in WebKit', async ({ page, browserName }) => { @@ -1127,7 +1127,7 @@ test('skip in WebKit', async ({ page, browserName }) => { Skip from [`method: Test.beforeEach`] hook: -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.beforeEach(async ({ page }) => { @@ -1136,7 +1136,7 @@ test.beforeEach(async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.beforeEach(async ({ page }) => { @@ -1162,7 +1162,7 @@ Optional description that will be reflected in a test report. Conditionally skips all tests in a file or [`method: Test.describe`] group. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.skip(({ browserName }) => browserName === 'webkit'); @@ -1175,7 +1175,7 @@ test('skip in WebKit 2', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.skip(({ browserName }) => browserName === 'webkit'); @@ -1205,7 +1205,7 @@ Optional description that will be reflected in a test report. Unconditionally marks a test as "slow". Slow test will be given triple the default timeout. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('slow test', async ({ page }) => { @@ -1214,7 +1214,7 @@ test('slow test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('slow test', async ({ page }) => { @@ -1231,7 +1231,7 @@ test('slow test', async ({ page }) => { Conditionally mark a test as "slow" with an optional description. Slow test will be given triple the default timeout. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('slow in WebKit', async ({ page, browserName }) => { @@ -1240,7 +1240,7 @@ test('slow in WebKit', async ({ page, browserName }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('slow in WebKit', async ({ page, browserName }) => { @@ -1264,7 +1264,7 @@ Optional description that will be reflected in a test report. Conditionally mark all tests in a file or [`method: Test.describe`] group as "slow". Slow tests will be given triple the default timeout. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.slow(({ browserName }) => browserName === 'webkit'); @@ -1277,7 +1277,7 @@ test('slow in WebKit 2', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.slow(({ browserName }) => browserName === 'webkit'); @@ -1305,7 +1305,7 @@ Optional description that will be reflected in a test report. Declares a test step. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('test', async ({ page }) => { @@ -1315,7 +1315,7 @@ test('test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('test', async ({ page }) => { @@ -1342,7 +1342,7 @@ Step body. Specifies options or fixtures to use in a single test file or a [`method: Test.describe`] group. Most useful to set an option, for example set `locale` to configure `context` fixture. `test.use` can be called either in the global scope or inside `test.describe`, it's is an error to call it within `beforeEach` or `beforeAll`. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.use({ locale: 'en-US' }); @@ -1352,7 +1352,7 @@ test('test with locale', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.use({ locale: 'en-US' }); @@ -1364,7 +1364,7 @@ test('test with locale', async ({ page }) => { It is also possible to override a fixture by providing a function. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.use({ @@ -1380,7 +1380,7 @@ test('test with locale', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.use({ diff --git a/docs/src/test-api/class-testconfig.md b/docs/src/test-api/class-testconfig.md index 1c54e6723a..c071c6c3f5 100644 --- a/docs/src/test-api/class-testconfig.md +++ b/docs/src/test-api/class-testconfig.md @@ -5,7 +5,7 @@ Playwright Test provides many options to configure how your tests are collected Playwright Test supports running multiple test projects at the same time. Project-specific options should be put to [`property: TestConfig.projects`], but top-level [TestConfig] can also define base options shared between all projects. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -20,7 +20,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -50,7 +50,7 @@ export default config; Configuration for the `expect` assertion library. Learn more about [various timeouts](../test-timeouts.md). -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -67,7 +67,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -87,7 +87,7 @@ export default config; Whether to exit with an error if any tests or groups are marked as [`method: Test.only`] or [`method: Test.describe.only`]. Useful on CI. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -99,7 +99,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -124,7 +124,7 @@ Path to the global setup file. This file will be required and run before all the Learn more about [global setup and teardown](../test-advanced.md#global-setup-and-teardown). -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -136,7 +136,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import { type PlaywrightTestConfig, devices } from '@playwright/test'; @@ -153,7 +153,7 @@ Path to the global teardown file. This file will be required and run after all t Learn more about [global setup and teardown](../test-advanced.md#global-setup-and-teardown). -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -165,7 +165,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import { type PlaywrightTestConfig, devices } from '@playwright/test'; @@ -180,7 +180,7 @@ export default config; Maximum time in milliseconds the whole test suite can run. Zero timeout (default) disables this behavior. Useful on CI to prevent broken setup from running too long and wasting resources. Learn more about [various timeouts](../test-timeouts.md). -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -192,7 +192,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -225,7 +225,7 @@ The maximum number of test failures for the whole test suite run. After reaching Also available in the [command line](../test-cli.md) with the `--max-failures` and `-x` options. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -237,7 +237,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -262,7 +262,7 @@ Config name is visible in the report and during test execution, unless overridde The output directory for files created during test execution. Defaults to `/test-results`. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -274,7 +274,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import { type PlaywrightTestConfig, devices } from '@playwright/test'; @@ -288,7 +288,7 @@ This directory is cleaned at the start. When running a test, a unique subdirecto Here is an example that uses [`method: TestInfo.outputPath`] to create a temporary file. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); const fs = require('fs'); @@ -298,7 +298,7 @@ test('example test', async ({}, testInfo) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; import fs from 'fs'; @@ -357,7 +357,7 @@ You can pass options to the reporter in a tuple like `['json', { outputFile: './ Learn more in the [reporters guide](../test-reporters.md). -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -369,7 +369,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -393,7 +393,7 @@ Test files that took more than `threshold` milliseconds are considered slow, and The maximum number of retry attempts given to failed tests. By default failing tests are not retried. Learn more about [test retries](../test-retries.md#retries). -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -405,7 +405,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -465,7 +465,7 @@ Learn more about [parallelism and sharding](../test-parallel.md) with Playwright Directory that will be recursively scanned for test files. Defaults to the directory of the configuration file. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -477,7 +477,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -494,7 +494,7 @@ Files matching one of these patterns are not executed as test files. Matching is For example, `'**/test-assets/**'` will ignore any files in the `test-assets` directory. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -506,7 +506,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import { type PlaywrightTestConfig, devices } from '@playwright/test'; @@ -523,7 +523,7 @@ Only the files matching one of these patterns are executed as test files. Matchi By default, Playwright Test looks for files matching `.*(test|spec)\.(js|ts|mjs)`. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -535,7 +535,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import { type PlaywrightTestConfig, devices } from '@playwright/test'; @@ -552,7 +552,7 @@ Timeout for each test in milliseconds. Defaults to 30 seconds. This is a base timeout for all tests. In addition, each test can configure its own timeout with [`method: Test.setTimeout`]. Learn more about [various timeouts](../test-timeouts.md). -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -564,7 +564,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -589,7 +589,7 @@ Learn more about [snapshots](../test-snapshots.md). Global options for all tests, for example [`property: TestOptions.browserName`]. Learn more about [configuration](../test-configuration.md) and see [available options][TestOptions]. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -603,7 +603,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -638,7 +638,7 @@ The `port` (but not the `url`) gets passed over to Playwright as a [`property: T It is also recommended to specify [`property: TestOptions.baseURL`] in the config, so that tests could use relative urls. ::: -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { @@ -655,7 +655,7 @@ const config: PlaywrightTestConfig = { export default config; ``` -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check /** @type {import('@playwright/test').PlaywrightTestConfig} */ @@ -675,7 +675,7 @@ module.exports = config; Now you can use a relative path when navigating the page: -```js js-flavor=ts +```js tab=js-ts // test.spec.ts import { test } from '@playwright/test'; @@ -685,7 +685,7 @@ test('test', async ({ page }) => { }); ``` -```js js-flavor=js +```js tab=js-js // test.spec.js const { test } = require('@playwright/test'); @@ -704,7 +704,7 @@ Playwright Test uses worker processes to run tests. There is always at least one Defaults to one half of the number of CPU cores. Learn more about [parallelism and sharding](../test-parallel.md) with Playwright Test. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -716,7 +716,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; diff --git a/docs/src/test-api/class-testinfo.md b/docs/src/test-api/class-testinfo.md index 5296635a8b..142d16b33e 100644 --- a/docs/src/test-api/class-testinfo.md +++ b/docs/src/test-api/class-testinfo.md @@ -3,7 +3,7 @@ `TestInfo` contains information about currently running test. It is available to any test function, [`method: Test.beforeEach`] and [`method: Test.afterEach`] hooks and test-scoped fixtures. `TestInfo` provides utilities to control test execution: attach files, update test timeout, determine which test is currently running and whether it was retried, etc. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('basic test', async ({ page }, testInfo) => { @@ -12,7 +12,7 @@ test('basic test', async ({ page }, testInfo) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('basic test', async ({ page }, testInfo) => { @@ -48,7 +48,7 @@ Attach a value or a file from disk to the current test. Some reporters show test For example, you can attach a screenshot to the test: -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('basic test', async ({ page }, testInfo) => { @@ -58,7 +58,7 @@ test('basic test', async ({ page }, testInfo) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('basic test', async ({ page }, testInfo) => { @@ -70,7 +70,7 @@ test('basic test', async ({ page }, testInfo) => { Or you can attach files returned by your APIs: -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('basic test', async ({}, testInfo) => { @@ -80,7 +80,7 @@ test('basic test', async ({}, testInfo) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('basic test', async ({}, testInfo) => { @@ -156,7 +156,7 @@ Expected status for the currently running test. This is usually `'passed'`, exce Expected status is usually compared with the actual [`property: TestInfo.status`]: -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.afterEach(async ({}, testInfo) => { @@ -165,7 +165,7 @@ test.afterEach(async ({}, testInfo) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.afterEach(async ({}, testInfo) => { @@ -243,7 +243,7 @@ Absolute path to the output directory for this specific test run. Each test run Returns a path inside the [`property: TestInfo.outputDir`] where the test can safely put a temporary file. Guarantees that tests running in parallel will not interfere with each other. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); const fs = require('fs'); @@ -253,7 +253,7 @@ test('example test', async ({}, testInfo) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; import fs from 'fs'; @@ -294,7 +294,7 @@ Specifies a unique repeat index when running in "repeat each" mode. This mode is Specifies the retry number when the test is retried after a failure. The first test run has [`property: TestInfo.retry`] equal to zero, the first retry has it equal to one, and so on. Learn more about [retries](../test-retries.md#retries). -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.beforeEach(async ({}, testInfo) => { @@ -311,7 +311,7 @@ test('my test', async ({ page }, testInfo) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.beforeEach(async ({}, testInfo) => { @@ -334,7 +334,7 @@ Changes the timeout for the currently running test. Zero means no timeout. Learn Timeout is usually specified in the [configuration file](../test-configuration.md), but it could be useful to change the timeout in certain scenarios: -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.beforeEach(async ({ page }, testInfo) => { @@ -343,7 +343,7 @@ test.beforeEach(async ({ page }, testInfo) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.beforeEach(async ({ page }, testInfo) => { @@ -420,7 +420,7 @@ Actual status for the currently running test. Available after the test has finis Status is usually compared with the [`property: TestInfo.expectedStatus`]: -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.afterEach(async ({}, testInfo) => { @@ -429,7 +429,7 @@ test.afterEach(async ({}, testInfo) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.afterEach(async ({}, testInfo) => { @@ -455,7 +455,7 @@ Timeout in milliseconds for the currently running test. Zero means no timeout. L Timeout is usually specified in the [configuration file](../test-configuration.md) -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.beforeEach(async ({ page }, testInfo) => { @@ -464,7 +464,7 @@ test.beforeEach(async ({ page }, testInfo) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.beforeEach(async ({ page }, testInfo) => { diff --git a/docs/src/test-api/class-testoptions.md b/docs/src/test-api/class-testoptions.md index 44036c8bcc..7c86c20736 100644 --- a/docs/src/test-api/class-testoptions.md +++ b/docs/src/test-api/class-testoptions.md @@ -5,7 +5,7 @@ Playwright Test provides many options to configure test environment, [Browser], These options are usually provided in the [configuration file](../test-configuration.md) through [`property: TestConfig.use`] and [`property: TestProject.use`]. -```js js-flavor=js +```js tab=js-js // @ts-check /** @type {import('@playwright/test').PlaywrightTestConfig} */ @@ -21,7 +21,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts import type { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { use: { @@ -36,7 +36,7 @@ export default config; Alternatively, with [`method: Test.use`] you can override some options for a file. -```js js-flavor=js +```js tab=js-js // example.spec.js const { test, expect } = require('@playwright/test'); @@ -48,7 +48,7 @@ test('my portrait test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -69,7 +69,7 @@ test('my portrait test', async ({ page }) => { Name of the browser that runs tests. Defaults to `'chromium'`. Most of the time you should set `browserName` in your [TestConfig]: -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -83,7 +83,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import { type PlaywrightTestConfig, devices } from '@playwright/test'; diff --git a/docs/src/test-api/class-testproject.md b/docs/src/test-api/class-testproject.md index 76cf9503bb..1ba7c605e1 100644 --- a/docs/src/test-api/class-testproject.md +++ b/docs/src/test-api/class-testproject.md @@ -7,7 +7,7 @@ Playwright Test supports running multiple test projects at the same time. This i Here is an example configuration that runs every test in Chromium, Firefox and WebKit, both Desktop and Mobile versions. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check const { devices } = require('@playwright/test'); @@ -57,7 +57,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import { type PlaywrightTestConfig, devices } from '@playwright/test'; @@ -211,7 +211,7 @@ This directory is cleaned at the start. When running a test, a unique subdirecto Here is an example that uses [`method: TestInfo.outputPath`] to create a temporary file. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); const fs = require('fs'); @@ -221,7 +221,7 @@ test('example test', async ({}, testInfo) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; import fs from 'fs'; @@ -254,7 +254,7 @@ Directory that will be recursively scanned for test files. Defaults to the direc Each project can use a different directory. Here is an example that runs smoke tests in three browsers and all other tests in stable Chrome browser. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -296,7 +296,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -370,7 +370,7 @@ Use [`property: TestConfig.timeout`] to change this option for all projects. Options for all tests in this project, for example [`property: TestOptions.browserName`]. Learn more about [configuration](../test-configuration.md) and see [available options][TestOptions]. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -389,7 +389,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; diff --git a/docs/src/test-api/class-workerinfo.md b/docs/src/test-api/class-workerinfo.md index b996edb187..5451254fbc 100644 --- a/docs/src/test-api/class-workerinfo.md +++ b/docs/src/test-api/class-workerinfo.md @@ -3,7 +3,7 @@ `WorkerInfo` contains information about the worker that is running tests. It is available to [`method: Test.beforeAll`] and [`method: Test.afterAll`] hooks and worker-scoped fixtures. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.beforeAll(async ({ browserName }, workerInfo) => { @@ -11,7 +11,7 @@ test.beforeAll(async ({ browserName }, workerInfo) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.beforeAll(async ({ browserName }, workerInfo) => { diff --git a/docs/src/test-auth-js.md b/docs/src/test-auth-js.md index 9cea5a2ea6..332bf63640 100644 --- a/docs/src/test-auth-js.md +++ b/docs/src/test-auth-js.md @@ -17,7 +17,7 @@ Below are the typical strategies for implementing the signed-in scenarios. This is the simplest way where each test signs in inside the `beforeEach` hook. It also is the least efficient one in case the log in process has high latencies. -```js js-flavor=ts +```js tab=js-ts import { test } from '@playwright/test'; test.beforeEach(async ({ page }) => { @@ -38,7 +38,7 @@ test('second', async ({ page }) => { }); ``` -```js js-flavor=js +```js tab=js-js const { test } = require('@playwright/test'); test.beforeEach(async ({ page }) => { @@ -69,7 +69,7 @@ in only once and then skip the log in step for all of the tests. Create a new global setup script: -```js js-flavor=js +```js tab=js-js // global-setup.js const { chromium } = require('@playwright/test'); @@ -86,7 +86,7 @@ module.exports = async config => { }; ``` -```js js-flavor=ts +```js tab=js-ts // global-setup.ts import { chromium, FullConfig } from '@playwright/test'; @@ -107,7 +107,7 @@ export default globalSetup; Register global setup script in the Playwright configuration file: -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -121,7 +121,7 @@ const config: PlaywrightTestConfig = { export default config; ``` -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check /** @type {import('@playwright/test').PlaywrightTestConfig} */ @@ -137,7 +137,7 @@ module.exports = config; Tests start already authenticated because we specify `storageState` that was populated by global setup. -```js js-flavor=ts +```js tab=js-ts import { test } from '@playwright/test'; test('test', async ({ page }) => { @@ -145,7 +145,7 @@ test('test', async ({ page }) => { }); ``` -```js js-flavor=js +```js tab=js-js const { test } = require('@playwright/test'); test('test', async ({ page }) => { @@ -162,7 +162,7 @@ setup at all, just specify the `storageState.json` in Playwright Config as above If your web application supports signing in via API, you can use [APIRequestContext] to simplify sign in flow. Global setup script from the example above would change like this: -```js js-flavor=js +```js tab=js-js // global-setup.js const { request } = require('@playwright/test'); @@ -180,7 +180,7 @@ module.exports = async () => { } ``` -```js js-flavor=ts +```js tab=js-ts // global-setup.ts import { request } from '@playwright/test'; @@ -204,7 +204,7 @@ export default globalSetup; Sometimes you have more than one signed-in user in your end to end tests. You can achieve that via logging in for these users multiple times in globalSetup and saving that state into different files. -```js js-flavor=js +```js tab=js-js // global-setup.js const { chromium } = require('@playwright/test'); @@ -221,7 +221,7 @@ module.exports = async config => { }; ``` -```js js-flavor=ts +```js tab=js-ts // global-setup.ts import { chromium, FullConfig } from '@playwright/test'; @@ -242,7 +242,7 @@ export default globalSetup; After that you can specify the user to use for each test file or each test group: -```js js-flavor=ts +```js tab=js-ts import { test } from '@playwright/test'; test.use({ storageState: 'adminStorageState.json' }); @@ -260,7 +260,7 @@ test.describe(() => { }); ``` -```js js-flavor=js +```js tab=js-js const { test } = require('@playwright/test'); test.use({ storageState: 'adminStorageState.json' }); @@ -285,7 +285,7 @@ in the same page. In that case, you can log into that page once in `beforeAll` a page in all the tests. Note that you need to run these tests serially using `test.describe.serial` in order to achieve that: -```js js-flavor=js +```js tab=js-js // example.spec.js // @ts-check @@ -318,7 +318,7 @@ test('second test', async () => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test, Page } from '@playwright/test'; diff --git a/docs/src/test-configuration-js.md b/docs/src/test-configuration-js.md index b059c44bbd..cfd2bdd2c4 100644 --- a/docs/src/test-configuration-js.md +++ b/docs/src/test-configuration-js.md @@ -17,7 +17,7 @@ See the full list of [test options][TestOptions] and all [configuration properti Create `playwright.config.js` (or `playwright.config.ts`) and specify options in the [`property: TestConfig.use`] section. -```js js-flavor=js +```js tab=js-js // @ts-check /** @type {import('@playwright/test').PlaywrightTestConfig} */ @@ -33,7 +33,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts import type { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { use: { @@ -62,7 +62,7 @@ npx playwright test --config=tests/my.config.js With [`method: Test.use`] you can override some options for a file or a [`method: Test.describe`] block. -```js js-flavor=js +```js tab=js-js // example.spec.js const { test, expect } = require('@playwright/test'); @@ -74,7 +74,7 @@ test('my portrait test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -88,7 +88,7 @@ test('my portrait test', async ({ page }) => { The same works inside describe. -```js js-flavor=js +```js tab=js-js // example.spec.js const { test, expect } = require('@playwright/test'); @@ -102,7 +102,7 @@ test.describe('locale block', () => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -129,7 +129,7 @@ These are commonly used options for various scenarios. You usually set them glob - `viewport` - Viewport used for all pages in the context. - `storageState` - Populates context with given storage state. Useful for easy authentication, [learn more](./auth.md). -```js js-flavor=js +```js tab=js-js // @ts-check /** @type {import('@playwright/test').PlaywrightTestConfig} */ @@ -144,7 +144,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts import type { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { use: { @@ -160,7 +160,7 @@ export default config; Playwright Test supports multiple "projects" that can run your tests in multiple browsers and configurations. Here is an example that runs every test in Chromium, Firefox and WebKit, by creating a project for each. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check const { devices } = require('@playwright/test'); @@ -186,7 +186,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import { type PlaywrightTestConfig, devices } from '@playwright/test'; @@ -239,7 +239,7 @@ Playwright can [emulate different environments](./emulation.md) like mobile devi Here is an example configuration that runs tests in "Pixel 4" and "iPhone 11" emulation modes. Note that it uses the [projects](./test-advanced.md#projects) feature to run the same set of tests in multiple configurations. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check const { devices } = require('@playwright/test'); @@ -270,7 +270,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import { type PlaywrightTestConfig, devices } from '@playwright/test'; @@ -311,7 +311,7 @@ You can specify options separately instead of using predefined devices. There ar - `timezoneId` - Changes the timezone of the context. - `userAgent` - Specific user agent to use in the context. -```js js-flavor=js +```js tab=js-js // @ts-check /** @type {import('@playwright/test').PlaywrightTestConfig} */ @@ -326,7 +326,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts import type { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { use: { @@ -353,7 +353,7 @@ Available options to configure networking: You don't have to configure anything to mock network requests. Just define a custom [Route] that mocks network for a browser context. -```js js-flavor=js +```js tab=js-js // example.spec.js const { test, expect } = require('@playwright/test'); @@ -368,7 +368,7 @@ test('loads page without css', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -385,7 +385,7 @@ test('loads page without css', async ({ page }) => { Alternatively, you can use [`method: Page.route`] to mock network in a single test. -```js js-flavor=js +```js tab=js-js // example.spec.js const { test, expect } = require('@playwright/test'); @@ -398,7 +398,7 @@ test('loads page without images', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -421,7 +421,7 @@ You can make Playwright Test capture screenshots for you - control it with the ` Screenshots will appear in the test output directory, typically `test-results`. -```js js-flavor=js +```js tab=js-js // @ts-check /** @type {import('@playwright/test').PlaywrightTestConfig} */ @@ -434,7 +434,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts import type { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { use: { @@ -455,7 +455,7 @@ Playwright Test can record videos for your tests, controlled by the `video` opti Video files will appear in the test output directory, typically `test-results`. See [`property: TestOptions.video`] for advanced video configuration. -```js js-flavor=js +```js tab=js-js // @ts-check /** @type {import('@playwright/test').PlaywrightTestConfig} */ @@ -468,7 +468,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts import type { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { use: { @@ -489,7 +489,7 @@ Playwright Test can produce test traces while running the tests. Later on, you c Trace files will appear in the test output directory, typically `test-results`. See [`property: TestOptions.trace`] for advanced video configuration. -```js js-flavor=js +```js tab=js-js // @ts-check /** @type {import('@playwright/test').PlaywrightTestConfig} */ @@ -502,7 +502,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts import type { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { use: { @@ -516,7 +516,7 @@ export default config; Any options accepted by [`method: BrowserType.launch`] or [`method: Browser.newContext`] can be put into `launchOptions` or `contextOptions` respectively in the `use` section. Take a look at the [full list of available options][TestOptions]. -```js js-flavor=js +```js tab=js-js // @ts-check /** @type {import('@playwright/test').PlaywrightTestConfig} */ @@ -531,7 +531,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts import type { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { use: { @@ -562,7 +562,7 @@ In addition to configuring [Browser] or [BrowserContext], videos or screenshots, You can specify these options in the configuration file. Note that testing options are **top-level**, do not put them into the `use` section. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -591,7 +591,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; diff --git a/docs/src/test-fixtures-js.md b/docs/src/test-fixtures-js.md index 17e94dd4ce..b0259b4a0a 100644 --- a/docs/src/test-fixtures-js.md +++ b/docs/src/test-fixtures-js.md @@ -13,7 +13,7 @@ Playwright Test is based on the concept of test fixtures. Test fixtures are used You have already used test fixtures in your first test. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('basic test', async ({ page }) => { @@ -23,7 +23,7 @@ test('basic test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('basic test', async ({ page }) => { @@ -91,7 +91,7 @@ Fixtures have a number of advantages over before/after hooks: - Fixtures are **flexible**. Tests can use any combinations of the fixtures to tailor precise environment they need, without affecting other tests. - Fixtures simplify **grouping**. You no longer need to wrap tests in `describe`s that set up environment, and are free to group your tests by their meaning instead. -```js js-flavor=js +```js tab=js-js // todo.spec.js const base = require('@playwright/test'); const { TodoPage } = require('./todo-page'); @@ -119,7 +119,7 @@ test('should remove an item', async ({ todoPage }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test as base } from '@playwright/test'; import { TodoPage } from './todo-page'; @@ -153,7 +153,7 @@ To create your own fixture, use [`method: Test.extend`] to create a new `test` o Below we create two fixtures `todoPage` and `settingsPage` that follow the [Page Object Model](./test-pom.md) pattern. -```js js-flavor=js +```js tab=js-js // my-test.js const base = require('@playwright/test'); const { TodoPage } = require('./todo-page'); @@ -183,7 +183,7 @@ exports.test = base.test.extend({ exports.expect = base.expect; ``` -```js js-flavor=ts +```js tab=js-ts // my-test.ts import { test as base } from '@playwright/test'; import { TodoPage } from './todo-page'; @@ -225,7 +225,7 @@ Just mention fixture in your test function argument, and test runner will take c Below we use the `todoPage` and `settingsPage` fixtures defined above. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('./my-test'); test.beforeEach(async ({ settingsPage }) => { @@ -238,7 +238,7 @@ test('basic test', async ({ todoPage, page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from './my-test'; test.beforeEach(async ({ settingsPage }) => { @@ -255,7 +255,7 @@ test('basic test', async ({ todoPage, page }) => { In addition to creating your own fixtures, you can also override existing fixtures to fit your needs. Consider the following example which overrides the `page` fixture by automatically navigating to some `baseURL`: -```js js-flavor=js +```js tab=js-js const base = require('@playwright/test'); exports.test = base.test.extend({ @@ -266,7 +266,7 @@ exports.test = base.test.extend({ }); ``` -```js js-flavor=ts +```js tab=js-ts import { test as base } from '@playwright/test'; export const test = base.extend({ @@ -279,13 +279,13 @@ export const test = base.extend({ Notice that in this example, the `page` fixture is able to depend on other built-in fixtures such as [`property: TestOptions.baseURL`]. We can now configure `baseURL` in the configuration file, or locally in the test file with [`method: Test.use`]. -```js js-flavor=js +```js tab=js-js // example.spec.js test.use({ baseURL: 'https://playwright.dev' }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts test.use({ baseURL: 'https://playwright.dev' }); @@ -293,7 +293,7 @@ test.use({ baseURL: 'https://playwright.dev' }); Fixtures can also be overridden where the base fixture is completely replaced with something different. For example, we could override the [`property: TestOptions.storageState`] fixture to provide our own data. -```js js-flavor=js +```js tab=js-js const base = require('@playwright/test'); exports.test = base.test.extend({ @@ -304,7 +304,7 @@ exports.test = base.test.extend({ }); ``` -```js js-flavor=ts +```js tab=js-ts import { test as base } from '@playwright/test'; export const test = base.extend({ @@ -321,7 +321,7 @@ Playwright Test uses [worker processes](./test-parallel.md) to run test files. S Below we'll create an `account` fixture that will be shared by all tests in the same worker, and override the `page` fixture to login into this account for each test. To generate unique accounts, we'll use the [`property: WorkerInfo.workerIndex`] that is available to any test or fixture. Note the tuple-like syntax for the worker fixture - we have to pass `{scope: 'worker'}` so that test runner sets up this fixture once per worker. -```js js-flavor=js +```js tab=js-js // my-test.js const base = require('@playwright/test'); @@ -362,7 +362,7 @@ exports.test = base.test.extend({ exports.expect = base.expect; ``` -```js js-flavor=ts +```js tab=js-ts // my-test.ts import { test as base } from '@playwright/test'; @@ -415,7 +415,7 @@ Automatic fixtures are set up for each test/worker, even when the test does not Here is an example fixture that automatically attaches debug logs when the test fails, so we can later review the logs in the reporter. Note how it uses [TestInfo] object that is available in each test/fixture to retrieve metadata about the test being run. -```js js-flavor=js +```js tab=js-js // my-test.js const debug = require('debug'); const fs = require('fs'); @@ -441,7 +441,7 @@ exports.test = base.test.extend({ }); ``` -```js js-flavor=ts +```js tab=js-ts // my-test.ts import * as debug from 'debug'; import * as fs from 'fs'; @@ -472,7 +472,7 @@ export { expect } from '@playwright/test'; By default, fixture shares timeout with the test. However, for slow fixtures, especially [worker-scoped](#worker-scoped-fixtures) ones, it is convenient to have a separate timeout. This way you can keep the overall test timeout small, and give the slow fixture more time. -```js js-flavor=js +```js tab=js-js const { test: base, expect } = require('@playwright/test'); const test = base.extend({ @@ -487,7 +487,7 @@ test('example test', async ({ slowFixture }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test as base, expect } from '@playwright/test'; const test = base.extend<{ slowFixture: string }>({ @@ -514,7 +514,7 @@ Playwright Test supports running multiple test projects that can be separately c Below we'll create a `defaultItem` option in addition to the `todoPage` fixture from other examples. This option will be set in configuration file. Note the tuple syntax and `{ option: true }` argument. -```js js-flavor=js +```js tab=js-js // my-test.js const base = require('@playwright/test'); const { TodoPage } = require('./todo-page'); @@ -536,7 +536,7 @@ exports.test = base.test.extend({ exports.expect = base.expect; ``` -```js js-flavor=ts +```js tab=js-ts // my-test.ts import { test as base } from '@playwright/test'; import { TodoPage } from './todo-page'; @@ -569,7 +569,7 @@ export { expect } from '@playwright/test'; We can now use `todoPage` fixture as usual, and set the `defaultItem` option in the config file. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -590,7 +590,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; import { MyOptions } from './my-test'; @@ -621,7 +621,7 @@ Fixtures follow these rules to determine the execution order: Consider the following example: -```js js-flavor=js +```js tab=js-js const { test: base } = require('@playwright/test'); const test = base.extend({ @@ -664,7 +664,7 @@ test.afterEach(async () => { /* ... */ }); test.afterAll(async () => { /* ... */ }); ``` -```js js-flavor=ts +```js tab=js-ts import { test as base } from '@playwright/test'; const test = base.extend<{ diff --git a/docs/src/test-parallel-js.md b/docs/src/test-parallel-js.md index d0ba8ae455..4d184bc84a 100644 --- a/docs/src/test-parallel-js.md +++ b/docs/src/test-parallel-js.md @@ -32,7 +32,7 @@ npx playwright test --workers 4 ``` In the configuration file: -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -45,7 +45,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -70,7 +70,7 @@ By default, tests in a single file are run in order. If you have many independen Note that parallel tests are executed in separate worker processes and cannot share any state or global variables. Each test executes all relevant hooks just for itself, including `beforeAll` and `afterAll`. -```js js-flavor=js +```js tab=js-js const { test } = require('@playwright/test'); test.describe.configure({ mode: 'parallel' }); @@ -79,7 +79,7 @@ test('runs in parallel 1', async ({ page }) => { /* ... */ }); test('runs in parallel 2', async ({ page }) => { /* ... */ }); ``` -```js js-flavor=ts +```js tab=js-ts import { test } from '@playwright/test'; test.describe.configure({ mode: 'parallel' }); @@ -90,7 +90,7 @@ test('runs in parallel 2', async ({ page }) => { /* ... */ }); Alternatively, you can opt-in all tests (or just a few projects) into this fully-parallel mode in the configuration file: -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -102,7 +102,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -121,7 +121,7 @@ fails, all subsequent tests are skipped. All tests in a group are retried togeth Using serial is not recommended. It is usually better to make your tests isolated, so they can be run independently. ::: -```js js-flavor=js +```js tab=js-js // @ts-check const { test } = require('@playwright/test'); @@ -148,7 +148,7 @@ test('runs second', async () => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test, Page } from '@playwright/test'; @@ -199,7 +199,7 @@ npx playwright test --max-failures=10 ``` Setting in the configuration file: -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -212,7 +212,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -243,7 +243,7 @@ When you **disable parallel test execution**, Playwright Test runs test files in Suppose we have two test files. -```js js-flavor=js +```js tab=js-js // feature-a.spec.js const { test, expect } = require('@playwright/test'); @@ -265,7 +265,7 @@ test.describe('feature-b', () => { }); ``` -```js js-flavor=ts +```js tab=js-ts // feature-a.spec.ts import { test, expect } from '@playwright/test'; @@ -289,13 +289,13 @@ test.describe('feature-b', () => { We can create a test list file that will control the order of tests - first run `feature-b` tests, then `feature-a` tests. -```js js-flavor=js +```js tab=js-js // test.list.js require('./feature-b.spec.js'); require('./feature-a.spec.js'); ``` -```js js-flavor=ts +```js tab=js-ts // test.list.ts import './feature-b.spec.ts'; import './feature-a.spec.ts'; @@ -303,7 +303,7 @@ import './feature-a.spec.ts'; Now **disable parallel execution** by setting workers to one, and specify your test list file. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -316,7 +316,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; diff --git a/docs/src/test-parameterize-js.md b/docs/src/test-parameterize-js.md index 362093805a..a5dabfc585 100644 --- a/docs/src/test-parameterize-js.md +++ b/docs/src/test-parameterize-js.md @@ -9,7 +9,7 @@ You can either parametrize tests on a test level or on a project level. ## Parameterized Tests -```js js-flavor=js +```js tab=js-js // example.spec.js const people = ['Alice', 'Bob']; for (const name of people) { @@ -20,7 +20,7 @@ for (const name of people) { } ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts const people = ['Alice', 'Bob']; for (const name of people) { @@ -37,7 +37,7 @@ Playwright Test supports running multiple test projects at the same time. In the We declare the option `person` and set the value in the config. The first project runs with the value `Alice` and the second with the value `Bob`. -```js js-flavor=js +```js tab=js-js // my-test.js const base = require('@playwright/test'); @@ -48,7 +48,7 @@ exports.test = base.test.extend({ }); ``` -```js js-flavor=ts +```js tab=js-ts // my-test.ts import { test as base } from '@playwright/test'; @@ -65,7 +65,7 @@ export const test = base.extend({ We can use this option in the test, similarly to [fixtures](./test-fixtures.md). -```js js-flavor=js +```js tab=js-js // example.spec.js const { test } = require('./my-test'); @@ -76,7 +76,7 @@ test('test 1', async ({ page, person }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test } from './my-test'; @@ -89,7 +89,7 @@ test('test 1', async ({ page, person }) => { Now, we can run tests in multiple configurations by using projects. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -110,7 +110,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; import { TestOptions } from './my-test'; @@ -132,7 +132,7 @@ export default config; We can also use the option in a fixture. Learn more about [fixtures](./test-fixtures.md). -```js js-flavor=js +```js tab=js-js // my-test.js const base = require('@playwright/test'); @@ -153,7 +153,7 @@ exports.test = base.test.extend({ }); ``` -```js js-flavor=ts +```js tab=js-ts // my-test.ts import { test as base } from '@playwright/test'; @@ -188,7 +188,7 @@ You can use environment variables to configure tests from the command line. For example, consider the following test file that needs a username and a password. It is usually a good idea not to store your secrets in the source code, so we'll need a way to pass secrets from outside. -```js js-flavor=js +```js tab=js-js // example.spec.js test(`example test`, async ({ page }) => { // ... @@ -197,7 +197,7 @@ test(`example test`, async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts test(`example test`, async ({ page }) => { // ... @@ -208,17 +208,17 @@ test(`example test`, async ({ page }) => { You can run this test with your secrect username and password set in the command line. -```bash bash-flavor=bash +```bash tab=bash-bash USERNAME=me PASSWORD=secret npx playwright test ``` -```bash bash-flavor=batch +```batch tab=bash-batch set USERNAME=me set PASSWORD=secret npx playwright test ``` -```bash bash-flavor=powershell +```powershell tab=bash-powershell $env:USERNAME=me $env:PASSWORD=secret npx playwright test @@ -227,7 +227,7 @@ npx playwright test Similarly, configuration file can also read environment variables passed throught the command line. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -241,7 +241,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -255,16 +255,16 @@ export default config; Now, you can run tests against a staging or a production environment: -```bash bash-flavor=bash +```bash tab=bash-bash STAGING=1 npx playwright test ``` -```bash bash-flavor=batch +```batch tab=bash-batch set STAGING=1 npx playwright test ``` -```bash bash-flavor=powershell +```powershell tab=bash-powershell $env:STAGING=1 npx playwright test ``` @@ -273,7 +273,7 @@ npx playwright test To make environment variables easier to manage, consider something like `.env` files. Here is an example that uses [`dotenv`](https://www.npmjs.com/package/dotenv) package to read environment variables directly in the configuration file. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -293,7 +293,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; import dotenv from 'dotenv'; @@ -344,7 +344,7 @@ See for example this CSV file, in our example `input.csv`: Based on this we'll generate some tests by using the [csv-parse](https://www.npmjs.com/package/csv-parse) library from NPM: -```js js-flavor=ts +```js tab=js-ts // foo.spec.ts import fs from 'fs'; import path from 'path'; @@ -363,7 +363,7 @@ for (const record of records) { } ``` -```js js-flavor=js +```js tab=js-js // foo.spec.js const fs = require('fs'); const path = require('path'); diff --git a/docs/src/test-pom-js.md b/docs/src/test-pom-js.md index d70a11022f..99ddc19e8d 100644 --- a/docs/src/test-pom-js.md +++ b/docs/src/test-pom-js.md @@ -7,7 +7,7 @@ Page Object Model is a common pattern that introduces abstractions over web app We will create a `PlaywrightDevPage` helper class to encapsulate common operations on the `playwright.dev` page. Internally, it will use the `page` object. -```js js-flavor=js +```js tab=js-js // playwright-dev-page.js const { expect } = require('@playwright/test'); @@ -40,7 +40,7 @@ exports.PlaywrightDevPage = class PlaywrightDevPage { } ``` -```js js-flavor=ts +```js tab=js-ts // playwright-dev-page.ts import { expect, Locator, Page } from '@playwright/test'; @@ -77,7 +77,7 @@ export class PlaywrightDevPage { Now we can use the `PlaywrightDevPage` class in our tests. -```js js-flavor=js +```js tab=js-js // example.spec.js const { test, expect } = require('@playwright/test'); const { PlaywrightDevPage } = require('./playwright-dev-page'); @@ -107,7 +107,7 @@ test('should show Page Object Model article', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test, expect } from '@playwright/test'; import { PlaywrightDevPage } from './playwright-dev-page'; diff --git a/docs/src/test-reporter-api/class-reporter.md b/docs/src/test-reporter-api/class-reporter.md index 1ac4826d35..6084781429 100644 --- a/docs/src/test-reporter-api/class-reporter.md +++ b/docs/src/test-reporter-api/class-reporter.md @@ -5,7 +5,7 @@ Test runner notifies the reporter about various events during test execution. Al You can create a custom reporter by implementing a class with some of the reporter methods. Make sure to export this class as default. -```js js-flavor=js +```js tab=js-js // my-awesome-reporter.js // @ts-check @@ -31,7 +31,7 @@ class MyReporter { module.exports = MyReporter; ``` -```js js-flavor=ts +```js tab=js-ts // my-awesome-reporter.ts import { Reporter } from '@playwright/test/reporter'; @@ -57,7 +57,7 @@ export default MyReporter; Now use this reporter with [`property: TestConfig.reporter`]. Learn more about [using reporters](../test-reporters.md). -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -69,7 +69,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; diff --git a/docs/src/test-reporters-js.md b/docs/src/test-reporters-js.md index 133b0eb63d..d81c013c6a 100644 --- a/docs/src/test-reporters-js.md +++ b/docs/src/test-reporters-js.md @@ -16,7 +16,7 @@ npx playwright test --reporter=line For more control, you can specify reporters programmatically in the [configuration file](./test-configuration.md). -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -28,7 +28,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -42,7 +42,7 @@ export default config; You can use multiple reporters at the same time. For example you can use`'list'` for nice terminal output and `'json'` to get a comprehensive json file with the test results. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -57,7 +57,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -74,7 +74,7 @@ export default config; You can use different reporters locally and on CI. For example, using concise `'dot'` reporter avoids too much output. This is the default on CI. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -87,7 +87,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -110,7 +110,7 @@ List reporter is default (except on CI where the `dot` reporter is default). It npx playwright test --reporter=list ``` -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -122,7 +122,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -157,7 +157,7 @@ Line reporter is more concise than the list reporter. It uses a single line to r npx playwright test --reporter=line ``` -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -169,7 +169,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -201,7 +201,7 @@ Dot reporter is very concise - it only produces a single character per successfu npx playwright test --reporter=dot ``` -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -213,7 +213,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -242,7 +242,7 @@ By default, HTML report is opened automatically if some of the tests failed. You `open` property in the Playwright config. The possible values for that property are `always`, `never` and `on-failure` (default). -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -254,7 +254,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -268,7 +268,7 @@ By default, report is written into the `playwright-report` folder in the current that location using the `PLAYWRIGHT_HTML_REPORT` environment variable or a reporter configuration. In configuration file, pass options directly: -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -280,7 +280,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -309,22 +309,22 @@ JSON reporter produces an object with all information about the test run. Most likely you want to write the JSON to a file. When running with `--reporter=json`, use `PLAYWRIGHT_JSON_OUTPUT_NAME` environment variable: -```bash bash-flavor=bash +```bash tab=bash-bash PLAYWRIGHT_JSON_OUTPUT_NAME=results.json npx playwright test --reporter=json ``` -```bash bash-flavor=batch +```batch tab=bash-batch set PLAYWRIGHT_JSON_OUTPUT_NAME=results.json npx playwright test --reporter=json ``` -```bash bash-flavor=powershell +```powershell tab=bash-powershell $env:PLAYWRIGHT_JSON_OUTPUT_NAME="results.json" npx playwright test --reporter=json ``` In configuration file, pass options directly: -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -336,7 +336,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -352,22 +352,22 @@ JUnit reporter produces a JUnit-style xml report. Most likely you want to write the report to an xml file. When running with `--reporter=junit`, use `PLAYWRIGHT_JUNIT_OUTPUT_NAME` environment variable: -```bash bash-flavor=bash +```bash tab=bash-bash PLAYWRIGHT_JUNIT_OUTPUT_NAME=results.xml npx playwright test --reporter=junit ``` -```bash bash-flavor=batch +```batch tab=bash-batch set PLAYWRIGHT_JUNIT_OUTPUT_NAME=results.xml npx playwright test --reporter=junit ``` -```bash bash-flavor=powershell +```powershell tab=bash-powershell $env:PLAYWRIGHT_JUNIT_OUTPUT_NAME="results.xml" npx playwright test --reporter=junit ``` In configuration file, pass options directly: -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -379,7 +379,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -393,7 +393,7 @@ The JUnit reporter provides support for embedding additional information on the In configuration file, a set of options can be used to configure this behavior. A full example, in this case for Xray, follows ahead. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -423,7 +423,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; @@ -454,7 +454,7 @@ 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 ``. Annotations can be used to, for example, link a Playwright test with an existing Test in Xray or to link a test with an existing story/requirement in Jira (i.e., "cover" it). -```js js-flavor=js +```js tab=js-js // @ts-check const { test } = require('@playwright/test'); @@ -467,7 +467,7 @@ test('using specific annotations for passing test metadata to Xray', async ({}, }); ``` -```js js-flavor=ts +```js tab=js-ts import { test } from '@playwright/test'; test('using specific annotations for passing test metadata to Xray', async ({}, testInfo) => { @@ -486,7 +486,7 @@ Embedding attachments can be used to attach screenshots or any other relevant ev The following configuration sample enables embedding attachments by using the `testrun_evidence` element on the JUnit XML report: -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -498,7 +498,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.js import { PlaywrightTestConfig } from '@playwright/test'; @@ -511,7 +511,7 @@ export default config; The following test adds attachments: -```js js-flavor=js +```js tab=js-js // @ts-check const { test } = require('@playwright/test'); @@ -523,7 +523,7 @@ test('embed attachments, including its content, on the JUnit report', async ({}, }); ``` -```js js-flavor=ts +```js tab=js-ts import { test } from '@playwright/test'; test('embed attachments, including its content, on the JUnit report', async ({}, testInfo) => { @@ -540,7 +540,7 @@ You can use the built in `github` reporter to get automatic failure annotations Note that all other reporters work on GitHub Actions as well, but do not provide annotations. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -554,7 +554,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -570,7 +570,7 @@ export default config; You can create a custom reporter by implementing a class with some of the reporter methods. Learn more about the [Reporter] API. -```js js-flavor=js +```js tab=js-js // my-awesome-reporter.js // @ts-check @@ -596,7 +596,7 @@ class MyReporter { module.exports = MyReporter; ``` -```js js-flavor=ts +```js tab=js-ts // my-awesome-reporter.ts import { Reporter } from '@playwright/test/reporter'; @@ -622,7 +622,7 @@ export default MyReporter; Now use this reporter with [`property: TestConfig.reporter`]. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -634,7 +634,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; diff --git a/docs/src/test-retries-js.md b/docs/src/test-retries-js.md index f744d67994..1a56557bb0 100644 --- a/docs/src/test-retries-js.md +++ b/docs/src/test-retries-js.md @@ -11,7 +11,7 @@ Playwright Test runs tests in worker processes. These processes are OS processes Consider the following snippet: -```js js-flavor=js +```js tab=js-js const { test } = require('@playwright/test'); test.describe('suite', () => { @@ -22,7 +22,7 @@ test.describe('suite', () => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test } from '@playwright/test'; test.describe('suite', () => { @@ -70,7 +70,7 @@ Playwright Test supports **test retries**. When enabled, failing tests will be r npx playwright test --retries=3 ``` -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -83,7 +83,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -114,7 +114,7 @@ Running 3 tests using 1 worker You can detect retries at runtime with [`property: TestInfo.retry`], which is accessible to any test, hook or fixture. Here is an example that clears some server-side state before a retry. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('my test', async ({ page }, testInfo) => { @@ -124,7 +124,7 @@ test('my test', async ({ page }, testInfo) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('my test', async ({ page }, testInfo) => { @@ -140,7 +140,7 @@ Use [`method: Test.describe.serial`] to group dependent tests to ensure they wil Consider the following snippet that uses `test.describe.serial`: -```js js-flavor=js +```js tab=js-js const { test } = require('@playwright/test'); test.describe.configure({ mode: 'serial' }); @@ -151,7 +151,7 @@ test('second flaky', async ({ page }) => { /* ... */ }); test('third good', async ({ page }) => { /* ... */ }); ``` -```js js-flavor=ts +```js tab=js-ts import { test } from '@playwright/test'; test.describe.configure({ mode: 'serial' }); @@ -189,7 +189,7 @@ It is usually better to make your tests isolated, so they can be efficiently run Playwright Test creates an isolated [Page] object for each test. However, if you'd like to reuse a single [Page] object between multiple tests, you can create your own in [`method: Test.beforeAll`] and close it in [`method: Test.afterAll`]. -```js js-flavor=js +```js tab=js-js // example.spec.js // @ts-check @@ -217,7 +217,7 @@ test('runs second', async () => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test, Page } from '@playwright/test'; diff --git a/docs/src/test-snapshots-js.md b/docs/src/test-snapshots-js.md index 89b5087d7a..4c94355f57 100644 --- a/docs/src/test-snapshots-js.md +++ b/docs/src/test-snapshots-js.md @@ -5,7 +5,7 @@ title: "Visual comparisons" Playwright Test includes the ability to produce and visually compare screenshots using `await expect(page).toHaveScreenshot()`. On first execution, Playwright test will generate reference screenshots. Subsequent runs will compare against the reference. -```js js-flavor=js +```js tab=js-js // example.spec.js const { test, expect } = require('@playwright/test'); @@ -15,7 +15,7 @@ test('example test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -44,10 +44,10 @@ drwxr-xr-x 3 user group 96 Jun 4 11:46 example.spec.ts-snapshots The snapshot name `example-test-1-chromium-darwin.png` consists of a few parts: - `example-test-1.png` - an auto-generated name of the snapshot. Alternatively you can specify snapshot name as the first argument of the `toHaveScreenshot()` method: - ```js js-flavor=js + ```js tab=js-js await expect(page).toHaveScreenshot('landing.png'); ``` - ```js js-flavor=ts + ```js tab=js-ts await expect(page).toHaveScreenshot('landing.png'); ``` @@ -72,7 +72,7 @@ npx playwright test --update-snapshots Playwright Test uses the [pixelmatch](https://github.com/mapbox/pixelmatch) library. You can [pass various options](./test-assertions#expectpageorlocatortomatchsnapshot-options) to modify its behavior: -```js js-flavor=js +```js tab=js-js // example.spec.js const { test, expect } = require('@playwright/test'); @@ -82,7 +82,7 @@ test('example test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -94,7 +94,7 @@ test('example test', async ({ page }) => { If you'd like to share the default value among all the tests in the project, you can specify it in the playwright config, either globally or per project: -```js js-flavor=js +```js tab=js-js module.exports = { expect: { toHaveScreenshot: { maxDiffPixels: 100 }, @@ -102,7 +102,7 @@ module.exports = { }; ``` -```js js-flavor=ts +```js tab=js-ts import type { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { expect: { @@ -116,7 +116,7 @@ Apart from screenshots, you can use `expect(value).toMatchSnapshot(snapshotName) Here we compare text content against the reference. -```js js-flavor=js +```js tab=js-js // example.spec.js const { test, expect } = require('@playwright/test'); @@ -126,7 +126,7 @@ test('example test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts // example.spec.ts import { test, expect } from '@playwright/test'; diff --git a/docs/src/test-timeouts-js.md b/docs/src/test-timeouts-js.md index 660e10c6f1..ebc2ed3ad6 100644 --- a/docs/src/test-timeouts-js.md +++ b/docs/src/test-timeouts-js.md @@ -35,7 +35,7 @@ The same timeout value also applies to `beforeAll` and `afterAll` hooks, but the ### Set test timeout in the config -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -47,7 +47,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -61,7 +61,7 @@ API reference: [`property: TestConfig.timeout`]. ### Set timeout for a single test -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('slow test', async ({ page }) => { @@ -75,7 +75,7 @@ test('very slow test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('slow test', async ({ page }) => { @@ -93,7 +93,7 @@ API reference: [`method: Test.setTimeout`] and [`method: Test.slow#1`]. ### Change timeout from a slow hook -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.beforeEach(async ({ page }, testInfo) => { @@ -102,7 +102,7 @@ test.beforeEach(async ({ page }, testInfo) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.beforeEach(async ({ page }, testInfo) => { @@ -117,7 +117,7 @@ API reference: [`method: TestInfo.setTimeout`]. `beforeAll` and `afterAll` hooks have a separate timeout, by default equal to test timeout. You can change it separately for each hook by calling [`method: TestInfo.setTimeout`] inside the hook. -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test.beforeAll(async () => { @@ -126,7 +126,7 @@ test.beforeAll(async () => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test.beforeAll(async () => { @@ -155,7 +155,7 @@ Call log: ### Set expect timeout in the config -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -169,7 +169,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -185,7 +185,7 @@ API reference: [`property: TestConfig.expect`]. ### Set timeout for a single assertion -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('basic test', async ({ page }) => { @@ -193,7 +193,7 @@ test('basic test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('basic test', async ({ page }) => { @@ -218,7 +218,7 @@ Playwright also allows to set a separate timeout for navigation actions like `pa ### Set action and navigation timeouts in the config -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -233,7 +233,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -250,7 +250,7 @@ API reference: [`property: TestOptions.actionTimeout`] and [`property: TestOptio ### Set timeout for a single action -```js js-flavor=js +```js tab=js-js const { test, expect } = require('@playwright/test'); test('basic test', async ({ page }) => { @@ -259,7 +259,7 @@ test('basic test', async ({ page }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test, expect } from '@playwright/test'; test('basic test', async ({ page }) => { @@ -282,7 +282,7 @@ Running 1000 tests using 10 workers You can set global timeout in the config. -```js js-flavor=js +```js tab=js-js // playwright.config.js // @ts-check @@ -294,7 +294,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts // playwright.config.ts import type { PlaywrightTestConfig } from '@playwright/test'; @@ -310,7 +310,7 @@ API reference: [`property: TestConfig.globalTimeout`]. By default, [fixture](./test-fixtures) shares timeout with the test. However, for slow fixtures, especially [worker-scoped](./test-fixtures#worker-scoped-fixtures) ones, it is convenient to have a separate timeout. This way you can keep the overall test timeout small, and give the slow fixture more time. -```js js-flavor=js +```js tab=js-js const { test: base, expect } = require('@playwright/test'); const test = base.extend({ @@ -325,7 +325,7 @@ test('example test', async ({ slowFixture }) => { }); ``` -```js js-flavor=ts +```js tab=js-ts import { test as base, expect } from '@playwright/test'; const test = base.extend<{ slowFixture: string }>({ diff --git a/docs/src/trace-viewer.md b/docs/src/trace-viewer.md index c87d7a47c7..83bcd49647 100644 --- a/docs/src/trace-viewer.md +++ b/docs/src/trace-viewer.md @@ -14,7 +14,7 @@ Playwright Trace Viewer is a GUI tool that helps exploring recorded Playwright t Set the `trace: 'on-first-retry'` option in the test configuration file. This will produce `trace.zip` file for each test that was retried. -```js js-flavor=js +```js tab=js-js // @ts-check /** @type {import('@playwright/test').PlaywrightTestConfig} */ @@ -28,7 +28,7 @@ const config = { module.exports = config; ``` -```js js-flavor=ts +```js tab=js-ts import type { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { retries: 1, @@ -39,7 +39,7 @@ const config: PlaywrightTestConfig = { export default config; ``` -```js js-flavor=library +```js tab=js-library const browser = await chromium.launch(); const context = await browser.newContext(); diff --git a/packages/playwright-core/types/types.d.ts b/packages/playwright-core/types/types.d.ts index dcdc410c87..8a5b8a9993 100644 --- a/packages/playwright-core/types/types.d.ts +++ b/packages/playwright-core/types/types.d.ts @@ -1535,7 +1535,7 @@ export interface Page { * * An example of overriding `Math.random` before the page loads: * - * ```js browser + * ```js * // preload.js * Math.random = () => 42; * ``` @@ -6580,7 +6580,7 @@ export interface BrowserContext { * * An example of overriding `Math.random` before the page loads: * - * ```js browser + * ```js * // preload.js * Math.random = () => 42; * ``` @@ -11177,7 +11177,7 @@ export {}; * Note that since you don't need Playwright to install web browsers when testing Android, you can omit browser download * via setting the following environment variable when installing Playwright: * - * ```bash js + * ```bash * PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm i -D playwright * ``` * @@ -13676,7 +13676,7 @@ export interface Download { * Note that since you don't need Playwright to install web browsers when testing Electron, you can omit browser download * via setting the following environment variable when installing Playwright: * - * ```bash js + * ```bash * PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm i -D playwright * ``` * diff --git a/packages/playwright-test/types/test.d.ts b/packages/playwright-test/types/test.d.ts index 6f69184f51..24fdefb8f9 100644 --- a/packages/playwright-test/types/test.d.ts +++ b/packages/playwright-test/types/test.d.ts @@ -42,7 +42,7 @@ type UseOptions = { [K in keyof WorkerArgs]?: WorkerArgs[K * * Here is an example configuration that runs every test in Chromium, Firefox and WebKit, both Desktop and Mobile versions. * - * ```ts + * ```js * // playwright.config.ts * import { type PlaywrightTestConfig, devices } from '@playwright/test'; * @@ -96,7 +96,7 @@ export interface Project extends TestProject { * [testOptions.browserName](https://playwright.dev/docs/api/class-testoptions#test-options-browser-name). Learn more about * [configuration](https://playwright.dev/docs/test-configuration) and see [available options][TestOptions]. * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -130,7 +130,7 @@ export interface Project extends TestProject { * * Here is an example configuration that runs every test in Chromium, Firefox and WebKit, both Desktop and Mobile versions. * - * ```ts + * ```js * // playwright.config.ts * import { type PlaywrightTestConfig, devices } from '@playwright/test'; * @@ -228,7 +228,7 @@ export interface FullProject { * [testInfo.outputPath(...pathSegments)](https://playwright.dev/docs/api/class-testinfo#test-info-output-path) to create a * temporary file. * - * ```ts + * ```js * import { test, expect } from '@playwright/test'; * import fs from 'fs'; * @@ -262,7 +262,7 @@ export interface FullProject { * Each project can use a different directory. Here is an example that runs smoke tests in three browsers and all other * tests in stable Chrome browser. * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -341,7 +341,7 @@ export interface FullProject { * [testOptions.browserName](https://playwright.dev/docs/api/class-testoptions#test-options-browser-name). Learn more about * [configuration](https://playwright.dev/docs/test-configuration) and see [available options][TestOptions]. * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -374,7 +374,7 @@ type LiteralUnion = T | (U & { zz_IGNORE_ME?: never }); * [testConfig.projects](https://playwright.dev/docs/api/class-testconfig#test-config-projects), but top-level [TestConfig] * can also define base options shared between all projects. * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -399,7 +399,7 @@ interface TestConfig { * * Learn more in the [reporters guide](https://playwright.dev/docs/test-reporters). * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -428,7 +428,7 @@ interface TestConfig { * [testOptions.baseURL](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) in the config, so that * tests could use relative urls. * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * const config: PlaywrightTestConfig = { @@ -447,7 +447,7 @@ interface TestConfig { * * Now you can use a relative path when navigating the page: * - * ```ts + * ```js * // test.spec.ts * import { test } from '@playwright/test'; * @@ -462,7 +462,7 @@ interface TestConfig { /** * Configuration for the `expect` assertion library. Learn more about [various timeouts](https://playwright.dev/docs/test-timeouts). * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -554,7 +554,7 @@ interface TestConfig { * [test.only(title, testFunction)](https://playwright.dev/docs/api/class-test#test-only) or * [test.describe.only(title, callback)](https://playwright.dev/docs/api/class-test#test-describe-only). Useful on CI. * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -582,7 +582,7 @@ interface TestConfig { * * Learn more about [global setup and teardown](https://playwright.dev/docs/test-advanced#global-setup-and-teardown). * - * ```ts + * ```js * // playwright.config.ts * import { type PlaywrightTestConfig, devices } from '@playwright/test'; * @@ -601,7 +601,7 @@ interface TestConfig { * * Learn more about [global setup and teardown](https://playwright.dev/docs/test-advanced#global-setup-and-teardown). * - * ```ts + * ```js * // playwright.config.ts * import { type PlaywrightTestConfig, devices } from '@playwright/test'; * @@ -619,7 +619,7 @@ interface TestConfig { * to prevent broken setup from running too long and wasting resources. Learn more about * [various timeouts](https://playwright.dev/docs/test-timeouts). * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -655,7 +655,7 @@ interface TestConfig { * * Also available in the [command line](https://playwright.dev/docs/test-cli) with the `--max-failures` and `-x` options. * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -682,7 +682,7 @@ interface TestConfig { /** * The output directory for files created during test execution. Defaults to `/test-results`. * - * ```ts + * ```js * // playwright.config.ts * import { type PlaywrightTestConfig, devices } from '@playwright/test'; * @@ -702,7 +702,7 @@ interface TestConfig { * [testInfo.outputPath(...pathSegments)](https://playwright.dev/docs/api/class-testinfo#test-info-output-path) to create a * temporary file. * - * ```ts + * ```js * import { test, expect } from '@playwright/test'; * import fs from 'fs'; * @@ -775,7 +775,7 @@ interface TestConfig { * The maximum number of retry attempts given to failed tests. By default failing tests are not retried. Learn more about * [test retries](https://playwright.dev/docs/test-retries#retries). * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -808,7 +808,7 @@ interface TestConfig { /** * Directory that will be recursively scanned for test files. Defaults to the directory of the configuration file. * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -827,7 +827,7 @@ interface TestConfig { * * For example, `'**\/test-assets/**'` will ignore any files in the `test-assets` directory. * - * ```ts + * ```js * // playwright.config.ts * import { type PlaywrightTestConfig, devices } from '@playwright/test'; * @@ -846,7 +846,7 @@ interface TestConfig { * * By default, Playwright Test looks for files matching `.*(test|spec)\.(js|ts|mjs)`. * - * ```ts + * ```js * // playwright.config.ts * import { type PlaywrightTestConfig, devices } from '@playwright/test'; * @@ -866,7 +866,7 @@ interface TestConfig { * [test.setTimeout(timeout)](https://playwright.dev/docs/api/class-test#test-set-timeout). Learn more about * [various timeouts](https://playwright.dev/docs/test-timeouts). * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -899,7 +899,7 @@ interface TestConfig { * Defaults to one half of the number of CPU cores. Learn more about [parallelism and sharding](https://playwright.dev/docs/test-parallel) with * Playwright Test. * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -920,7 +920,7 @@ interface TestConfig { * [testConfig.projects](https://playwright.dev/docs/api/class-testconfig#test-config-projects), but top-level [TestConfig] * can also define base options shared between all projects. * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -944,7 +944,7 @@ export interface Config extends TestConfig { * [testOptions.browserName](https://playwright.dev/docs/api/class-testoptions#test-options-browser-name). Learn more about * [configuration](https://playwright.dev/docs/test-configuration) and see [available options][TestOptions]. * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -970,7 +970,7 @@ export type Metadata = { [key: string]: any }; * [testConfig.projects](https://playwright.dev/docs/api/class-testconfig#test-config-projects), but top-level [TestConfig] * can also define base options shared between all projects. * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -990,7 +990,7 @@ export interface FullConfig { * [test.only(title, testFunction)](https://playwright.dev/docs/api/class-test#test-only) or * [test.describe.only(title, callback)](https://playwright.dev/docs/api/class-test#test-describe-only). Useful on CI. * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -1016,7 +1016,7 @@ export interface FullConfig { * * Learn more about [global setup and teardown](https://playwright.dev/docs/test-advanced#global-setup-and-teardown). * - * ```ts + * ```js * // playwright.config.ts * import { type PlaywrightTestConfig, devices } from '@playwright/test'; * @@ -1034,7 +1034,7 @@ export interface FullConfig { * * Learn more about [global setup and teardown](https://playwright.dev/docs/test-advanced#global-setup-and-teardown). * - * ```ts + * ```js * // playwright.config.ts * import { type PlaywrightTestConfig, devices } from '@playwright/test'; * @@ -1051,7 +1051,7 @@ export interface FullConfig { * to prevent broken setup from running too long and wasting resources. Learn more about * [various timeouts](https://playwright.dev/docs/test-timeouts). * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -1084,7 +1084,7 @@ export interface FullConfig { * * Also available in the [command line](https://playwright.dev/docs/test-cli) with the `--max-failures` and `-x` options. * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -1123,7 +1123,7 @@ export interface FullConfig { * * Learn more in the [reporters guide](https://playwright.dev/docs/test-reporters). * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -1172,7 +1172,7 @@ export interface FullConfig { * Defaults to one half of the number of CPU cores. Learn more about [parallelism and sharding](https://playwright.dev/docs/test-parallel) with * Playwright Test. * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * @@ -1201,7 +1201,7 @@ export interface FullConfig { * [testOptions.baseURL](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) in the config, so that * tests could use relative urls. * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * const config: PlaywrightTestConfig = { @@ -1220,7 +1220,7 @@ export interface FullConfig { * * Now you can use a relative path when navigating the page: * - * ```ts + * ```js * // test.spec.ts * import { test } from '@playwright/test'; * @@ -1242,7 +1242,7 @@ export type TestStatus = 'passed' | 'failed' | 'timedOut' | 'skipped'; * [test.afterAll(hookFunction)](https://playwright.dev/docs/api/class-test#test-after-all) hooks and worker-scoped * fixtures. * - * ```ts + * ```js * import { test, expect } from '@playwright/test'; * * test.beforeAll(async ({ browserName }, workerInfo) => { @@ -1286,7 +1286,7 @@ export interface WorkerInfo { * fixtures. `TestInfo` provides utilities to control test execution: attach files, update test timeout, determine which * test is currently running and whether it was retried, etc. * - * ```ts + * ```js * import { test, expect } from '@playwright/test'; * * test('basic test', async ({ page }, testInfo) => { @@ -1359,7 +1359,7 @@ export interface TestInfo { * * For example, you can attach a screenshot to the test: * - * ```ts + * ```js * import { test, expect } from '@playwright/test'; * * test('basic test', async ({ page }, testInfo) => { @@ -1371,7 +1371,7 @@ export interface TestInfo { * * Or you can attach files returned by your APIs: * - * ```ts + * ```js * import { test, expect } from '@playwright/test'; * * test('basic test', async ({}, testInfo) => { @@ -1436,7 +1436,7 @@ export interface TestInfo { * Expected status is usually compared with the actual * [testInfo.status](https://playwright.dev/docs/api/class-testinfo#test-info-status): * - * ```ts + * ```js * import { test, expect } from '@playwright/test'; * * test.afterEach(async ({}, testInfo) => { @@ -1509,7 +1509,7 @@ export interface TestInfo { * where the test can safely put a temporary file. Guarantees that tests running in parallel will not interfere with each * other. * - * ```ts + * ```js * import { test, expect } from '@playwright/test'; * import fs from 'fs'; * @@ -1549,7 +1549,7 @@ export interface TestInfo { * [testInfo.retry](https://playwright.dev/docs/api/class-testinfo#test-info-retry) equal to zero, the first retry has it * equal to one, and so on. Learn more about [retries](https://playwright.dev/docs/test-retries#retries). * - * ```ts + * ```js * import { test, expect } from '@playwright/test'; * * test.beforeEach(async ({}, testInfo) => { @@ -1576,7 +1576,7 @@ export interface TestInfo { * Timeout is usually specified in the [configuration file](https://playwright.dev/docs/test-configuration), but it could be useful to change the * timeout in certain scenarios: * - * ```ts + * ```js * import { test, expect } from '@playwright/test'; * * test.beforeEach(async ({ page }, testInfo) => { @@ -1644,7 +1644,7 @@ export interface TestInfo { * Status is usually compared with the * [testInfo.expectedStatus](https://playwright.dev/docs/api/class-testinfo#test-info-expected-status): * - * ```ts + * ```js * import { test, expect } from '@playwright/test'; * * test.afterEach(async ({}, testInfo) => { @@ -1672,7 +1672,7 @@ export interface TestInfo { * * Timeout is usually specified in the [configuration file](https://playwright.dev/docs/test-configuration) * - * ```ts + * ```js * import { test, expect } from '@playwright/test'; * * test.beforeEach(async ({ page }, testInfo) => { @@ -1715,7 +1715,7 @@ interface TestFunction { * Playwright Test provides a `test` function to declare tests and [`expect` function](https://jestjs.io/docs/expect) to * write assertions. * - * ```ts + * ```js * import { test, expect } from '@playwright/test'; * * test('basic test', async ({ page }) => { @@ -1730,7 +1730,7 @@ export interface TestType { * // Run only focused tests in the entire project. * }); @@ -1743,7 +1743,7 @@ export interface TestType { * test('one', async ({ page }) => { * // ... @@ -1763,7 +1763,7 @@ export interface TestType { * test('in the focused group', async ({ page }) => { * // This test will run @@ -1784,7 +1784,7 @@ export interface TestType { * test('example', async ({ page }) => { * // This test will not run @@ -1806,7 +1806,7 @@ export interface TestType NOTE: Using serial is not recommended. It is usually better to make your tests isolated, so they can be run * independently. * - * ```ts + * ```js * test.describe.serial('group', () => { * test('runs first', async ({ page }) => {}); * test('runs second', async ({ page }) => {}); @@ -1826,7 +1826,7 @@ export interface TestType NOTE: Using serial is not recommended. It is usually better to make your tests isolated, so they can be run * independently. * - * ```ts + * ```js * test.describe.serial.only('group', () => { * test('runs first', async ({ page }) => { * }); @@ -1849,7 +1849,7 @@ export interface TestType NOTE: See [test.describe.configure([options])](https://playwright.dev/docs/api/class-test#test-describe-configure) for * the preferred way of configuring the execution mode. * - * ```ts + * ```js * test.describe.parallel('group', () => { * test('runs in parallel 1', async ({ page }) => {}); * test('runs in parallel 2', async ({ page }) => {}); @@ -1881,7 +1881,7 @@ export interface TestType {}); @@ -1890,7 +1890,7 @@ export interface TestType {}); @@ -1905,7 +1905,7 @@ export interface TestType { @@ -1921,7 +1921,7 @@ export interface TestType { @@ -1933,7 +1933,7 @@ export interface TestType { @@ -1962,7 +1962,7 @@ export interface TestType { @@ -1979,7 +1979,7 @@ export interface TestType browserName === 'webkit'); @@ -2000,7 +2000,7 @@ export interface TestType { @@ -2016,7 +2016,7 @@ export interface TestType { @@ -2028,7 +2028,7 @@ export interface TestType { @@ -2063,7 +2063,7 @@ export interface TestType browserName === 'webkit'); @@ -2084,7 +2084,7 @@ export interface TestType { @@ -2098,7 +2098,7 @@ export interface TestType { @@ -2115,7 +2115,7 @@ export interface TestType browserName === 'webkit'); @@ -2135,7 +2135,7 @@ export interface TestType { @@ -2151,7 +2151,7 @@ export interface TestType { @@ -2169,7 +2169,7 @@ export interface TestType browserName === 'webkit'); @@ -2189,7 +2189,7 @@ export interface TestType { @@ -2201,7 +2201,7 @@ export interface TestType { @@ -2212,7 +2212,7 @@ export interface TestType { @@ -2224,7 +2224,7 @@ export interface TestType { @@ -2251,7 +2251,7 @@ export interface TestType { @@ -2404,7 +2404,7 @@ export interface TestType { @@ -2854,7 +2854,7 @@ export interface PlaywrightWorkerArgs { * specifically for the test. Values prepared by the fixtures are merged into a single object that is available to the * `test`, hooks, annotations and other fixtures as a first parameter. * - * ```ts + * ```js * import { test, expect } from '@playwright/test'; * * test('basic test', async ({ page }) => { @@ -2887,7 +2887,7 @@ export interface PlaywrightTestArgs { * * This is the most common fixture used in a test. * - * ```ts + * ```js * import { test, expect } from '@playwright/test'; * * test('basic test', async ({ page }) => { @@ -2904,7 +2904,7 @@ export interface PlaywrightTestArgs { /** * Isolated [APIRequestContext] instance for each test. * - * ```ts + * ```js * import { test, expect } from '@playwright/test'; * * test('basic test', async ({ request }) => { @@ -4016,7 +4016,7 @@ export interface TestError { * * Here is an example configuration that runs every test in Chromium, Firefox and WebKit, both Desktop and Mobile versions. * - * ```ts + * ```js * // playwright.config.ts * import { type PlaywrightTestConfig, devices } from '@playwright/test'; * @@ -4205,7 +4205,7 @@ interface TestProject { * [testInfo.outputPath(...pathSegments)](https://playwright.dev/docs/api/class-testinfo#test-info-output-path) to create a * temporary file. * - * ```ts + * ```js * import { test, expect } from '@playwright/test'; * import fs from 'fs'; * @@ -4242,7 +4242,7 @@ interface TestProject { * Each project can use a different directory. Here is an example that runs smoke tests in three browsers and all other * tests in stable Chrome browser. * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * diff --git a/packages/playwright-test/types/testReporter.d.ts b/packages/playwright-test/types/testReporter.d.ts index 545fe4aa32..c5b59bf1b2 100644 --- a/packages/playwright-test/types/testReporter.d.ts +++ b/packages/playwright-test/types/testReporter.d.ts @@ -294,7 +294,7 @@ export interface FullResult { * You can create a custom reporter by implementing a class with some of the reporter methods. Make sure to export this * class as default. * - * ```ts + * ```js * // my-awesome-reporter.ts * import { Reporter } from '@playwright/test/reporter'; * @@ -321,7 +321,7 @@ export interface FullResult { * Now use this reporter with [testConfig.reporter](https://playwright.dev/docs/api/class-testconfig#test-config-reporter). * Learn more about [using reporters](https://playwright.dev/docs/test-reporters). * - * ```ts + * ```js * // playwright.config.ts * import type { PlaywrightTestConfig } from '@playwright/test'; * diff --git a/utils/doclint/documentation.js b/utils/doclint/documentation.js index 04208537b7..029c2a5ff1 100644 --- a/utils/doclint/documentation.js +++ b/utils/doclint/documentation.js @@ -790,6 +790,8 @@ function patchLinks(classOrMember, spec, classesMap, membersMap, linkRenderer) { function generateSourceCodeComment(spec) { const comments = (spec || []).filter(n => !n.type.startsWith('h') && (n.type !== 'li' || n.liType !== 'default')).map(c => md.clone(c)); md.visitAll(comments, node => { + if (node.codeLang && node.codeLang.includes('tab=js-js')) + node.type = 'null'; if (node.liType === 'bullet') node.liType = 'default'; if (node.type === 'note') { diff --git a/utils/generate_types/index.js b/utils/generate_types/index.js index bd86ae5a8d..8879e9e43a 100644 --- a/utils/generate_types/index.js +++ b/utils/generate_types/index.js @@ -344,13 +344,13 @@ class TypesGenerator { }; let skipExample = false; for (let line of comment.split('\n')) { - const match = line.match(/```(\w+)(\s+js-flavor=(\w+))?/); + const match = line.match(/```(\w+)(\s+tab=js-(\w+))?/); if (match) { const lang = match[1]; let flavor = 'ts'; if (match[3]) { flavor = match[3]; - line = line.replace(/js-flavor=\w+/, '').replace(/```\w+/, '```ts'); + line = line.replace(/tab=js-\w+/, '').replace(/```\w+/, '```ts'); } skipExample = !["html", "yml", "bash", "js"].includes(lang) || flavor !== 'ts'; } else if (skipExample && line.trim().startsWith('```')) { diff --git a/utils/markdown.js b/utils/markdown.js index e71826d1c3..795c0f8865 100644 --- a/utils/markdown.js +++ b/utils/markdown.js @@ -17,7 +17,7 @@ // @ts-check /** @typedef {{ - * type: 'text' | 'li' | 'code' | 'properties' | 'h0' | 'h1' | 'h2' | 'h3' | 'h4' | 'note', + * type: 'text' | 'li' | 'code' | 'properties' | 'h0' | 'h1' | 'h2' | 'h3' | 'h4' | 'note' | 'null', * text?: string, * codeLang?: string, * noteType?: string, @@ -218,6 +218,8 @@ function render(nodes, maxColumns) { const result = []; let lastNode; for (let node of nodes) { + if (node.type === 'null') + continue; innerRenderMdNode('', node, lastNode, result, maxColumns); lastNode = node; } @@ -262,7 +264,7 @@ function innerRenderMdNode(indent, node, lastNode, result, maxColumns) { if (node.type === 'code') { newLine(); - result.push(`${indent}\`\`\`${node.codeLang}`); + result.push(`${indent}\`\`\`${codeLangToHighlighter(node.codeLang)}`); for (const line of node.lines) result.push(indent + line); result.push(`${indent}\`\`\``); @@ -422,4 +424,15 @@ function filterNodesForLanguage(nodes, language) { return result; } -module.exports = { parse, render, clone, visitAll, visit, generateToc, filterNodesForLanguage }; +/** + * @param {string} codeLang + * @return {string} + */ +function codeLangToHighlighter(codeLang) { + const [lang] = codeLang.split(' '); + if (lang === 'python') + return 'py'; + return lang; +} + +module.exports = { parse, render, clone, visitAll, visit, generateToc, filterNodesForLanguage, codeLangToHighlighter };