chore: unify tab generation (#14802)

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" });

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" });

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
 ```

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
 ```

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=<java source dirs> 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=<java source dirs>
   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="<java source dirs>"
   $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
   ```

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';
 

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

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';
 

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 }) => {

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');
 

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 }) => {

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<Options & { todoPage: TodoPage }>({
 
 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({

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 `<package.json-directory>/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';
 

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) => {

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';
 

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';
 

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) => {

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';

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';
 

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<{

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';
 

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<TestOptions>({
 
 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');

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';

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';
 

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 `<property>` elements on the JUnit XML report. The annotation type is mapped to the `name` attribute of the `<property>`, and the annotation description will be added as a `value` attribute. In this case, the exception will be the annotation type `testrun_evidence` whose description will be added as inner content on the respective `<property>`.
 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';
 

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';

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';
 

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 }>({

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();
 

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
  * ```
  *

packages/playwright-test/types/test.d.ts

@@ -42,7 +42,7 @@ type UseOptions<TestArgs, WorkerArgs> = { [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<TestArgs = {}, WorkerArgs = {}> 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<TestArgs = {}, WorkerArgs = {}> 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<TestArgs = {}, WorkerArgs = {}> {
    * [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<TestArgs = {}, WorkerArgs = {}> {
    * 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<TestArgs = {}, WorkerArgs = {}> {
    * [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 extends U, U = string> = 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 `<package.json-directory>/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<TestArgs = {}, WorkerArgs = {}> 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<TestArgs = {}, WorkerArgs = {}> {
    * [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<TestArgs = {}, WorkerArgs = {}> {
    *
    * 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<TestArgs = {}, WorkerArgs = {}> {
    *
    * 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<TestArgs = {}, WorkerArgs = {}> {
    * 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<TestArgs = {}, WorkerArgs = {}> {
    *
    * 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<TestArgs = {}, WorkerArgs = {}> {
    *
    * 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<TestArgs = {}, WorkerArgs = {}> {
    * 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<TestArgs = {}, WorkerArgs = {}> {
    * [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<TestArgs = {}, WorkerArgs = {}> {
    *
    * 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<TestArgs> {
  * 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<TestArgs extends KeyValue, WorkerArgs extends KeyValue
   /**
    * Declares a focused test. If there are some focused tests or suites, all of them will be run but nothing else.
    *
-   * ```ts
+   * ```js
    * test.only('focus this test', async ({ page }) => {
    *   // Run only focused tests in the entire project.
    * });
@@ -1743,7 +1743,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
   /**
    * Declares a group of tests.
    *
-   * ```ts
+   * ```js
    * test.describe('two tests', () => {
    *   test('one', async ({ page }) => {
    *     // ...
@@ -1763,7 +1763,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
     /**
    * Declares a focused group of tests. If there are some focused tests or suites, all of them will be run but nothing else.
    *
-   * ```ts
+   * ```js
    * test.describe.only('focused group', () => {
    *   test('in the focused group', async ({ page }) => {
    *     // This test will run
@@ -1784,7 +1784,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * [test.describe(title, callback)](https://playwright.dev/docs/api/class-test#test-describe). Tests in the skipped group
    * are never run.
    *
-   * ```ts
+   * ```js
    * test.describe.skip('skipped group', () => {
    *   test('example', async ({ page }) => {
    *     // This test will not run
@@ -1806,7 +1806,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * > 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<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * > 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<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * > 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<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    *
    * Running tests in parallel:
    *
-   * ```ts
+   * ```js
    * // Run all the tests in the file concurrently using parallel workers.
    * test.describe.configure({ mode: 'parallel' });
    * test('runs in parallel 1', async ({ page }) => {});
@@ -1890,7 +1890,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    *
    * Running tests sequentially:
    *
-   * ```ts
+   * ```js
    * // Annotate tests as inter-dependent.
    * test.describe.configure({ mode: 'serial' });
    * test('runs first', async ({ page }) => {});
@@ -1905,7 +1905,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * Declares a skipped test, similarly to
    * [test.(call)(title, testFunction)](https://playwright.dev/docs/api/class-test#test-call). Skipped test is never run.
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test.skip('broken test', async ({ page }) => {
@@ -1921,7 +1921,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * Unconditionally skip a test. Test is immediately aborted when you call
    * [test.skip()](https://playwright.dev/docs/api/class-test#test-skip-2).
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test('skipped test', async ({ page }) => {
@@ -1933,7 +1933,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * Unconditionally skip all tests in a file or
    * [test.describe(title, callback)](https://playwright.dev/docs/api/class-test#test-describe) group:
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test.skip();
@@ -1951,7 +1951,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
   /**
    * Conditionally skip a test with an optional description.
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test('skip in WebKit', async ({ page, browserName }) => {
@@ -1962,7 +1962,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    *
    * Skip from [test.beforeEach(hookFunction)](https://playwright.dev/docs/api/class-test#test-before-each) hook:
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test.beforeEach(async ({ page }) => {
@@ -1979,7 +1979,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * Conditionally skips all tests in a file or
    * [test.describe(title, callback)](https://playwright.dev/docs/api/class-test#test-describe) group.
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test.skip(({ browserName }) => browserName === 'webkit');
@@ -2000,7 +2000,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * Declares a test to be fixed, similarly to
    * [test.(call)(title, testFunction)](https://playwright.dev/docs/api/class-test#test-call). This test will not be run.
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test.fixme('test to be fixed', async ({ page }) => {
@@ -2016,7 +2016,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * Mark a test as "fixme", with the intention to fix it. Test is immediately aborted when you call
    * [test.fixme()](https://playwright.dev/docs/api/class-test#test-fixme-2).
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test('test to be fixed', async ({ page }) => {
@@ -2028,7 +2028,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * Mark all tests in a file or [test.describe(title, callback)](https://playwright.dev/docs/api/class-test#test-describe)
    * group as "fixme".
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test.fixme();
@@ -2046,7 +2046,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
   /**
    * Conditionally mark a test as "fixme" with an optional description.
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test('broken in WebKit', async ({ page, browserName }) => {
@@ -2063,7 +2063,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * Conditionally mark all tests in a file or
    * [test.describe(title, callback)](https://playwright.dev/docs/api/class-test#test-describe) group as "fixme".
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test.fixme(({ browserName }) => browserName === 'webkit');
@@ -2084,7 +2084,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * 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.
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test('not yet ready', async ({ page }) => {
@@ -2098,7 +2098,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
   /**
    * Conditionally mark a test as "should fail" with an optional description.
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test('fail in WebKit', async ({ page, browserName }) => {
@@ -2115,7 +2115,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * Conditionally mark all tests in a file or
    * [test.describe(title, callback)](https://playwright.dev/docs/api/class-test#test-describe) group as "should fail".
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test.fail(({ browserName }) => browserName === 'webkit');
@@ -2135,7 +2135,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
   /**
    * Unconditionally marks a test as "slow". Slow test will be given triple the default timeout.
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test('slow test', async ({ page }) => {
@@ -2151,7 +2151,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
   /**
    * Conditionally mark a test as "slow" with an optional description. Slow test will be given triple the default timeout.
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test('slow in WebKit', async ({ page, browserName }) => {
@@ -2169,7 +2169,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * [test.describe(title, callback)](https://playwright.dev/docs/api/class-test#test-describe) group as "slow". Slow tests
    * will be given triple the default timeout.
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test.slow(({ browserName }) => browserName === 'webkit');
@@ -2189,7 +2189,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
   /**
    * Changes the timeout for the test. Zero means no timeout. Learn more about [various timeouts](https://playwright.dev/docs/test-timeouts).
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test('very slow test', async ({ page }) => {
@@ -2201,7 +2201,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * Changing timeout from a slow `beforeEach` or `afterEach` hook. Note that this affects the test timeout that is shared
    * with `beforeEach`/`afterEach` hooks.
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test.beforeEach(async ({ page }, testInfo) => {
@@ -2212,7 +2212,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    *
    * Changing timeout for a `beforeAll` or `afterAll` hook. Note this affects the hook's timeout, not the test timeout.
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test.beforeAll(async () => {
@@ -2224,7 +2224,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * Changing timeout for all tests in a
    * [test.describe(title, callback)](https://playwright.dev/docs/api/class-test#test-describe) group.
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test.describe('group', () => {
@@ -2251,7 +2251,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * 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.
    *
-   * ```ts
+   * ```js
    * // example.spec.ts
    * import { test, expect } from '@playwright/test';
    *
@@ -2279,7 +2279,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * 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.
    *
-   * ```ts
+   * ```js
    * // example.spec.ts
    * import { test, expect } from '@playwright/test';
    *
@@ -2304,7 +2304,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * [test.describe(title, callback)](https://playwright.dev/docs/api/class-test#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.
    *
-   * ```ts
+   * ```js
    * // example.spec.ts
    * import { test, expect } from '@playwright/test';
    *
@@ -2346,7 +2346,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    * 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`.
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test.use({ locale: 'en-US' });
@@ -2358,7 +2358,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    *
    * It is also possible to override a fixture by providing a function.
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test.use({
@@ -2380,7 +2380,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
   /**
    * Declares a test step.
    *
-   * ```ts
+   * ```js
    * import { test, expect } from '@playwright/test';
    *
    * test('test', async ({ page }) => {
@@ -2404,7 +2404,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    *
    * First define a fixture and/or an option.
    *
-   * ```ts
+   * ```js
    * import { test as base } from '@playwright/test';
    * import { TodoPage } from './todo-page';
    *
@@ -2430,7 +2430,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    *
    * Then use the fixture in the test.
    *
-   * ```ts
+   * ```js
    * // example.spec.ts
    * import { test } from './my-test';
    *
@@ -2442,7 +2442,7 @@ export interface TestType<TestArgs extends KeyValue, WorkerArgs extends KeyValue
    *
    * Configure the option in config file.
    *
-   * ```ts
+   * ```js
    * // playwright.config.ts
    * import type { PlaywrightTestConfig } from '@playwright/test';
    * import { Options } from './my-test';
@@ -2519,7 +2519,7 @@ type ConnectOptions = {
  * [testConfig.use](https://playwright.dev/docs/api/class-testconfig#test-config-use) and
  * [testProject.use](https://playwright.dev/docs/api/class-testproject#test-project-use).
  *
- * ```ts
+ * ```js
  * import type { PlaywrightTestConfig } from '@playwright/test';
  * const config: PlaywrightTestConfig = {
  *   use: {
@@ -2535,7 +2535,7 @@ type ConnectOptions = {
  * Alternatively, with [test.use(options)](https://playwright.dev/docs/api/class-test#test-use) you can override some
  * options for a file.
  *
- * ```ts
+ * ```js
  * // example.spec.ts
  * import { test, expect } from '@playwright/test';
  *
@@ -2553,7 +2553,7 @@ export interface PlaywrightWorkerOptions {
    * Name of the browser that runs tests. Defaults to `'chromium'`. Most of the time you should set `browserName` in your
    * [TestConfig]:
    *
-   * ```ts
+   * ```js
    * // playwright.config.ts
    * import { type PlaywrightTestConfig, devices } from '@playwright/test';
    *
@@ -2646,7 +2646,7 @@ export type VideoMode = 'off' | 'on' | 'retain-on-failure' | 'on-first-retry';
  * [testConfig.use](https://playwright.dev/docs/api/class-testconfig#test-config-use) and
  * [testProject.use](https://playwright.dev/docs/api/class-testproject#test-project-use).
  *
- * ```ts
+ * ```js
  * import type { PlaywrightTestConfig } from '@playwright/test';
  * const config: PlaywrightTestConfig = {
  *   use: {
@@ -2662,7 +2662,7 @@ export type VideoMode = 'off' | 'on' | 'retain-on-failure' | 'on-first-retry';
  * Alternatively, with [test.use(options)](https://playwright.dev/docs/api/class-test#test-use) you can override some
  * options for a file.
  *
- * ```ts
+ * ```js
  * // example.spec.ts
  * import { test, expect } from '@playwright/test';
  *
@@ -2818,7 +2818,7 @@ export interface PlaywrightTestOptions {
  * 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 }) => {
@@ -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';
    *

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';
  *

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') {

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('```')) {

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 };