From 76898ec1e80db2729b8e07c128cda7469e812bfc Mon Sep 17 00:00:00 2001 From: Max Schmitt Date: Mon, 4 Oct 2021 14:37:35 +0200 Subject: [PATCH 1/2] feat: add tabs for shell code snippets --- dotnet/docs/browsers.mdx | 186 ++++++++++++++++++++----- dotnet/docs/debug.mdx | 30 ++++- java/docs/browsers.mdx | 187 ++++++++++++++++++++++---- java/docs/debug.mdx | 61 +++++++-- java/docs/inspector.mdx | 33 ++++- nodejs/docs/api/class-fixtures.mdx | 6 +- nodejs/docs/api/class-reporter.mdx | 4 +- nodejs/docs/api/class-test.mdx | 62 ++++----- nodejs/docs/api/class-testconfig.mdx | 10 +- nodejs/docs/api/class-testinfo.mdx | 14 +- nodejs/docs/api/class-testoptions.mdx | 6 +- nodejs/docs/api/class-testproject.mdx | 8 +- nodejs/docs/api/class-workerinfo.mdx | 2 +- nodejs/docs/browsers.mdx | 97 ++++++++++--- nodejs/docs/debug.mdx | 61 +++++++-- nodejs/docs/inspector.mdx | 31 ++++- nodejs/docs/intro.mdx | 10 +- nodejs/docs/test-advanced.mdx | 26 ++-- nodejs/docs/test-annotations.mdx | 14 +- nodejs/docs/test-auth.mdx | 14 +- nodejs/docs/test-configuration.mdx | 28 ++-- nodejs/docs/test-fixtures.mdx | 16 +-- nodejs/docs/test-parallel.mdx | 6 +- nodejs/docs/test-pom.mdx | 4 +- nodejs/docs/test-reporters.mdx | 84 +++++++++--- nodejs/docs/test-retries.mdx | 8 +- nodejs/docs/test-snapshots.mdx | 8 +- nodejs/docs/trace-viewer.mdx | 4 +- python/docs/browsers.mdx | 187 ++++++++++++++++++++++---- python/docs/debug.mdx | 61 +++++++-- python/docs/inspector.mdx | 31 ++++- python/docs/intro.mdx | 31 ++++- src/format_csharp.js | 6 +- src/format_java.js | 6 +- src/format_js.js | 73 +--------- src/format_python.js | 6 +- src/format_utils.js | 123 +++++++++++++++++ 37 files changed, 1167 insertions(+), 377 deletions(-) create mode 100644 src/format_utils.js diff --git a/dotnet/docs/browsers.mdx b/dotnet/docs/browsers.mdx index 889b4cf8fa8..3e078ce0733 100644 --- a/dotnet/docs/browsers.mdx +++ b/dotnet/docs/browsers.mdx @@ -120,35 +120,77 @@ 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 -# Linux/macOS PLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsers playwright install +``` -# Windows with cmd.exe -set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers -playwright install + + -# Windows with PowerShell +```powershell $env:PLAYWRIGHT_BROWSERS_PATH="$env:USERPROFILE\pw-browsers" playwright install ``` + + + +```batch +set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers +playwright install +``` + + + + When running Playwright scripts, ask it to search for browsers in a shared location. + + + ```bash -# Linux/macOS PLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsers dotnet test +``` -# Windows with cmd.exe -set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers -dotnet test + + -# Windows with PowerShell +```powershell $env:PLAYWRIGHT_BROWSERS_PATH="$env:USERPROFILE\pw-browsers" dotnet test ``` + + + +```batch +set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers +dotnet test +``` + + + + Playwright keeps track of packages that need those browsers and will garbage collect them as you update Playwright to the newer versions. :::note @@ -160,60 +202,123 @@ 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 -# Linux/macOS # Places binaries to node_modules/@playwright/test PLAYWRIGHT_BROWSERS_PATH=0 npx playwright install +``` -# Windows with cmd.exe + + + +```powershell # Places binaries to node_modules\@playwright\test -set PLAYWRIGHT_BROWSERS_PATH=0 +$env:PLAYWRIGHT_BROWSERS_PATH=0 npx playwright install +``` -# Windows with PowerShell + + + +```batch # Places binaries to node_modules\@playwright\test -$env:PLAYWRIGHT_BROWSERS_PATH=0 +set PLAYWRIGHT_BROWSERS_PATH=0 npx playwright install ``` + + + ## Install behind a firewall or a proxy 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 -# Linux/macOS HTTPS_PROXY=https://192.0.2.1 playwright install +``` -# Windows with cmd.exe -set HTTPS_PROXY=https://192.0.2.1 -playwright install + + -# Windows with PowerShell +```powershell $env:HTTPS_PROXY="https://192.0.2.1" playwright install ``` + + + +```batch +set HTTPS_PROXY=https://192.0.2.1 +playwright install +``` + + + + ## Download from artifact repository By default, Playwright downloads browsers from Microsoft CDN. 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 -# Linux/macOS PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 playwright install +``` -# Windows with cmd.exe -set PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 -playwright install + + -# Windows with PowerShell +```powershell $env:PLAYWRIGHT_DOWNLOAD_HOST="192.0.2.1" playwright install ``` + + + +```batch +set PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 +playwright 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 @@ -227,19 +332,40 @@ In certain cases, it is desired to avoid browser downloads altogether because br This can be done by setting `PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD` variable before installation. + + + ```bash -# Linux/macOS PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 playwright install +``` -# Windows with cmd.exe -set PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 -playwright install + + -# Windows with PowerShell +```powershell $env:PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 playwright install ``` + + + +```batch +set PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 +playwright install +``` + + + + ## Stale browser removal Playwright keeps track of the clients that use its browsers. When there are no more clients that require particular version of the browser, that version is deleted from the system. That way you can safely use Playwright instances of different versions and at the same time, you don't waste disk space for the browsers that are no longer in use. diff --git a/dotnet/docs/debug.mdx b/dotnet/docs/debug.mdx index f4380740b82..32656a79598 100644 --- a/dotnet/docs/debug.mdx +++ b/dotnet/docs/debug.mdx @@ -107,19 +107,39 @@ Setup [`launch.json` configuration](https://code.visualstudio.com/docs/nodejs/no Playwright supports verbose logging with the `DEBUG` environment variable. + + + ```bash -# Linux/macOS DEBUG=pw:api dotnet run +``` -# Windows with cmd.exe -set DEBUG=pw:api -dotnet run + + -# Windows with PowerShell +```powershell $env:DEBUG="pw:api" dotnet run ``` + + + +```batch +set DEBUG=pw:api +dotnet run +``` + + + [Accessibility]: ./api/class-accessibility.mdx "Accessibility" [Browser]: ./api/class-browser.mdx "Browser" diff --git a/java/docs/browsers.mdx b/java/docs/browsers.mdx index 9ca89481b0f..995ad8fbc2a 100644 --- a/java/docs/browsers.mdx +++ b/java/docs/browsers.mdx @@ -90,31 +90,76 @@ 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 -# Linux/macOS PLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsers mvn test +``` -# Windows with cmd.exe -set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers -mvn test + + -# Windows with PowerShell +```powershell $env:PLAYWRIGHT_BROWSERS_PATH="$env:USERPROFILE\pw-browsers" mvn test ``` -When running Playwright scripts, ask it to search for browsers in a shared location. + + -```bash -# Windows with cmd.exe +```batch set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers mvn test +``` + + + + +When running Playwright scripts, ask it to search for browsers in a shared location. + + + + +```bash +PLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsers mvn test +``` + + + -# Windows with PowerShell +```powershell $env:PLAYWRIGHT_BROWSERS_PATH="$env:USERPROFILE\pw-browsers" mvn test ``` + + + +```batch +set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers +mvn test +``` + + + + Playwright keeps track of packages that need those browsers and will garbage collect them as you update Playwright to the newer versions. :::note @@ -126,60 +171,123 @@ 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 -# Linux/macOS # Places binaries to node_modules/@playwright/test PLAYWRIGHT_BROWSERS_PATH=0 npx playwright install +``` -# Windows with cmd.exe + + + +```powershell # Places binaries to node_modules\@playwright\test -set PLAYWRIGHT_BROWSERS_PATH=0 +$env:PLAYWRIGHT_BROWSERS_PATH=0 npx playwright install +``` -# Windows with PowerShell + + + +```batch # Places binaries to node_modules\@playwright\test -$env:PLAYWRIGHT_BROWSERS_PATH=0 +set PLAYWRIGHT_BROWSERS_PATH=0 npx playwright install ``` + + + ## Install behind a firewall or a proxy 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 -# Linux/macOS HTTPS_PROXY=https://192.0.2.1 mvn test +``` -# Windows with cmd.exe -set HTTPS_PROXY=https://192.0.2.1 -mvn test + + -# Windows with PowerShell +```powershell $env:HTTPS_PROXY="https://192.0.2.1" mvn test ``` + + + +```batch +set HTTPS_PROXY=https://192.0.2.1 +mvn test +``` + + + + ## Download from artifact repository By default, Playwright downloads browsers from Microsoft CDN. 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 -# Linux/macOS PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 mvn test +``` -# Windows with cmd.exe -set PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 -mvn test + + -# Windows with PowerShell +```powershell $env:PLAYWRIGHT_DOWNLOAD_HOST="192.0.2.1" mvn test ``` + + + +```batch +set PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 +mvn test +``` + + + + 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 @@ -193,19 +301,40 @@ In certain cases, it is desired to avoid browser downloads altogether because br This can be done by setting `PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD` variable before installation. + + + ```bash -# Linux/macOS PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 mvn test +``` -# Windows with cmd.exe -set PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 -mvn test + + -# Windows with PowerShell +```powershell $env:PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 mvn test ``` + + + +```batch +set PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 +mvn test +``` + + + + ## Stale browser removal Playwright keeps track of the clients that use its browsers. When there are no more clients that require particular version of the browser, that version is deleted from the system. That way you can safely use Playwright instances of different versions and at the same time, you don't waste disk space for the browsers that are no longer in use. diff --git a/java/docs/debug.mdx b/java/docs/debug.mdx index 7dce5ab8d81..75d91471925 100644 --- a/java/docs/debug.mdx +++ b/java/docs/debug.mdx @@ -68,19 +68,40 @@ Using `PWDEBUG=console` will configure the browser for debugging in Developer to * **Disables timeout**: Sets default timeout to 0 (= no timeout) * **Console helper**: Configures a `playwright` object in the browser to generate and highlight [Playwright selectors](./selectors.mdx). This can be used to verify text or composite selectors. + + + ```bash -# Linux/macOS PWDEBUG=console mvn test +``` -# Windows with cmd.exe -set PWDEBUG=console -mvn test + + -# Windows with PowerShell +```powershell $env:PWDEBUG="console" mvn test ``` + + + +```batch +set PWDEBUG=console +mvn test +``` + + + + ## Selectors in Developer Tools Console When running in Debug Mode with `PWDEBUG=console`, a `playwright` object is available in Developer tools console. @@ -114,19 +135,39 @@ Setup [`launch.json` configuration](https://code.visualstudio.com/docs/nodejs/no Playwright supports verbose logging with the `DEBUG` environment variable. + + + ```bash -# Linux/macOS DEBUG=pw:api mvn test +``` -# Windows with cmd.exe -set DEBUG=pw:api -mvn test + + -# Windows with PowerShell +```powershell $env:DEBUG="pw:api" mvn test ``` + + + +```batch +set DEBUG=pw:api +mvn test +``` + + + [Browser]: ./api/class-browser.mdx "Browser" [BrowserContext]: ./api/class-browsercontext.mdx "BrowserContext" diff --git a/java/docs/inspector.mdx b/java/docs/inspector.mdx index e55b8527a9f..453082d1767 100644 --- a/java/docs/inspector.mdx +++ b/java/docs/inspector.mdx @@ -20,20 +20,41 @@ Playwright Inspector is a GUI tool that helps authoring and debugging Playwright 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 - # Linux/macOS PWDEBUG=1 PLAYWRIGHT_JAVA_SRC= mvn test + ``` - # Windows with cmd.exe - set PLAYWRIGHT_JAVA_SRC= - set PWDEBUG=1 - mvn test + + - # Windows with PowerShell + ```powershell $env:PLAYWRIGHT_JAVA_SRC="" $env:PWDEBUG=1 mvn test ``` + + + + + ```batch + set PLAYWRIGHT_JAVA_SRC= + set PWDEBUG=1 + mvn test + ``` + + + Additional useful defaults are configured when `PWDEBUG=1` is set: - Browsers launch in the headed mode diff --git a/nodejs/docs/api/class-fixtures.mdx b/nodejs/docs/api/class-fixtures.mdx index 53f27b5437e..b8c21e03763 100644 --- a/nodejs/docs/api/class-fixtures.mdx +++ b/nodejs/docs/api/class-fixtures.mdx @@ -19,7 +19,7 @@ Playwright Test looks at each test declaration, analyses the set of fixtures the }> -```js +```ts import { test, expect } from '@playwright/test'; test('basic test', async ({ page }) => { @@ -73,7 +73,7 @@ Name of the browser that runs tests. Defaults to `'chromium'`. Useful to [annota }> -```js +```ts test('skip this test in Firefox', async ({ page, browserName }) => { test.skip(browserName === 'firefox', 'Still working on it'); // ... @@ -119,7 +119,7 @@ This is the most common fixture used in a test. }> -```js +```ts import { test, expect } from '@playwright/test'; test('basic test', async ({ page }) => { diff --git a/nodejs/docs/api/class-reporter.mdx b/nodejs/docs/api/class-reporter.mdx index cac2562928c..6ebf1ce0e9d 100644 --- a/nodejs/docs/api/class-reporter.mdx +++ b/nodejs/docs/api/class-reporter.mdx @@ -19,7 +19,7 @@ You can create a custom reporter by implementing a class with some of the report }> -```js +```ts // my-awesome-reporter.ts import { Reporter } from '@playwright/test/reporter'; @@ -87,7 +87,7 @@ Now use this reporter with [testConfig.reporter](./api/class-testconfig.mdx#test }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; diff --git a/nodejs/docs/api/class-test.mdx b/nodejs/docs/api/class-test.mdx index c61ca40ea7b..af1f5290511 100644 --- a/nodejs/docs/api/class-test.mdx +++ b/nodejs/docs/api/class-test.mdx @@ -17,7 +17,7 @@ Playwright Test provides a `test` function to declare tests and [`expect` functi }> -```js +```ts import { test, expect } from '@playwright/test'; test('basic test', async ({ page }) => { @@ -85,7 +85,7 @@ Declares a test. }> -```js +```ts import { test, expect } from '@playwright/test'; test('basic test', async ({ page }) => { @@ -139,7 +139,7 @@ Declares a `beforeAll` hook that is executed once before all tests. When called }> -```js +```ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -197,7 +197,7 @@ Declares a `beforeEach` hook that is executed before each test. When called in t }> -```js +```ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -250,7 +250,7 @@ Declares a group of tests. }> -```js +```ts test.describe('two tests', () => { test('one', async ({ page }) => { // ... @@ -297,7 +297,7 @@ Declares a focused group of tests. If there are some focused tests or suites, al }> -```js +```ts test.describe.only('focused group', () => { test('in the focused group', async ({ page }) => { // This test will run @@ -342,7 +342,7 @@ Declares a group of tests that could be run in parallel. By default, tests in a }> -```js +```ts test.describe.parallel('group', () => { test('runs in parallel 1', async ({ page }) => { }); @@ -396,7 +396,7 @@ Using serial is not recommended. It is usually better to make your tests isolate }> -```js +```ts test.describe.serial('group', () => { test('runs first', async ({ page }) => { }); @@ -441,7 +441,7 @@ Using serial is not recommended. It is usually better to make your tests isolate }> -```js +```ts test.describe.serial.only('group', () => { test('runs first', async ({ page }) => { }); @@ -484,7 +484,7 @@ Unconditional fail: }> -```js +```ts import { test, expect } from '@playwright/test'; test('not yet ready', async ({ page }) => { @@ -520,7 +520,7 @@ Conditional fail a test with an optional description: }> -```js +```ts import { test, expect } from '@playwright/test'; test('fail in WebKit', async ({ page, browserName }) => { @@ -556,7 +556,7 @@ Conditional fail for all tests in a file or [test.describe(title, callback)](./a }> -```js +```ts import { test, expect } from '@playwright/test'; test.fail(({ browserName }) => browserName === 'webkit'); @@ -607,7 +607,7 @@ Unconditional fixme: }> -```js +```ts import { test, expect } from '@playwright/test'; test('not yet ready', async ({ page }) => { @@ -643,7 +643,7 @@ Conditional fixme a test with an optional description: }> -```js +```ts import { test, expect } from '@playwright/test'; test('fixme in WebKit', async ({ page, browserName }) => { @@ -679,7 +679,7 @@ Conditional fixme for all tests in a file or [test.describe(title, callback)](./ }> -```js +```ts import { test, expect } from '@playwright/test'; test.fixme(({ browserName }) => browserName === 'webkit'); @@ -723,7 +723,7 @@ test('fixme in WebKit 2', async ({ page }) => { }> -```js +```ts import { test, expect } from '@playwright/test'; test.beforeEach(async ({ page }) => { @@ -764,7 +764,7 @@ Declares a focused test. If there are some focused tests or suites, all of them }> -```js +```ts test.only('focus this test', async ({ page }) => { // Run only focused tests in the entire project. }); @@ -798,7 +798,7 @@ Changes the timeout for the test. }> -```js +```ts import { test, expect } from '@playwright/test'; test('very slow test', async ({ page }) => { @@ -834,7 +834,7 @@ Changing timeout from a slow hook: }> -```js +```ts import { test, expect } from '@playwright/test'; test.beforeEach(async ({ page }, testInfo) => { @@ -877,7 +877,7 @@ Declares a skipped test, similarly to [test(title, testFunction)](./api/class-te }> -```js +```ts import { test, expect } from '@playwright/test'; test.skip('broken test', async ({ page }) => { @@ -914,7 +914,7 @@ Unconditionally skip a test. Test is immediately aborted when you call [test.ski }> -```js +```ts import { test, expect } from '@playwright/test'; test('skipped test', async ({ page }) => { @@ -950,7 +950,7 @@ Unconditionally skip all tests in a file or [test.describe(title, callback)](./a }> -```js +```ts import { test, expect } from '@playwright/test'; test.skip(); @@ -999,7 +999,7 @@ Conditionally skip a test with an optional description. }> -```js +```ts import { test, expect } from '@playwright/test'; test('skip in WebKit', async ({ page, browserName }) => { @@ -1035,7 +1035,7 @@ Skip from [test.beforeEach(hookFunction)](./api/class-test.mdx#test-before-each) }> -```js +```ts import { test, expect } from '@playwright/test'; test.beforeEach(async ({ page }) => { @@ -1076,7 +1076,7 @@ Conditionally skips all tests in a file or [test.describe(title, callback)](./ap }> -```js +```ts import { test, expect } from '@playwright/test'; test.skip(({ browserName }) => browserName === 'webkit'); @@ -1127,7 +1127,7 @@ Unconditional slow: }> -```js +```ts import { test, expect } from '@playwright/test'; test('slow test', async ({ page }) => { @@ -1163,7 +1163,7 @@ Conditional slow a test with an optional description: }> -```js +```ts import { test, expect } from '@playwright/test'; test('slow in WebKit', async ({ page, browserName }) => { @@ -1199,7 +1199,7 @@ Conditional slow for all tests in a file or [test.describe(title, callback)](./a }> -```js +```ts import { test, expect } from '@playwright/test'; test.slow(({ browserName }) => browserName === 'webkit'); @@ -1248,7 +1248,7 @@ Declares a test step. }> -```js +```ts import { test, expect } from '@playwright/test'; test('test', async ({ page }) => { @@ -1290,7 +1290,7 @@ Specifies options or fixtures to use in a single test file or a [test.describe(t }> -```js +```ts import { test, expect } from '@playwright/test'; test.use({ locale: 'en-US' }); @@ -1328,7 +1328,7 @@ It is also possible to override a fixture by providing a function. }> -```js +```ts import { test, expect } from '@playwright/test'; test.use({ diff --git a/nodejs/docs/api/class-testconfig.mdx b/nodejs/docs/api/class-testconfig.mdx index 67c3340b7a6..076cd868a45 100644 --- a/nodejs/docs/api/class-testconfig.mdx +++ b/nodejs/docs/api/class-testconfig.mdx @@ -19,7 +19,7 @@ Playwright Test supports running multiple test projects at the same time. Projec }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; @@ -109,7 +109,7 @@ Learn more about [global setup and teardown](./test-advanced.mdx#global-setup-an }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig, devices } from '@playwright/test'; @@ -194,7 +194,7 @@ Here is an example that uses [testInfo.outputPath(pathSegments)](./api/class-tes }> -```js +```ts import { test, expect } from '@playwright/test'; import fs from 'fs'; @@ -276,7 +276,7 @@ Learn more in the [reporters guide](./test-reporters.mdx). }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; @@ -369,7 +369,7 @@ Global options for all tests, for example [testOptions.browserName](./api/class- }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; diff --git a/nodejs/docs/api/class-testinfo.mdx b/nodejs/docs/api/class-testinfo.mdx index b6659d19957..f654e2e4e89 100644 --- a/nodejs/docs/api/class-testinfo.mdx +++ b/nodejs/docs/api/class-testinfo.mdx @@ -17,7 +17,7 @@ import TabItem from '@theme/TabItem'; }> -```js +```ts import { test, expect } from '@playwright/test'; test('basic test', async ({ page }, testInfo) => { @@ -101,7 +101,7 @@ Returns a path inside the [testInfo.outputDir](./api/class-testinfo.mdx#test-inf }> -```js +```ts import { test, expect } from '@playwright/test'; import fs from 'fs'; @@ -148,7 +148,7 @@ Timeout is usually specified in the [configuration file](./test-configuration.md }> -```js +```ts import { test, expect } from '@playwright/test'; test.beforeEach(async ({ page }, testInfo) => { @@ -223,7 +223,7 @@ The list of files or buffers attached to the current test. Some reporters show t }> -```js +```ts import { test, expect } from '@playwright/test'; test('basic test', async ({ page }, testInfo) => { @@ -297,7 +297,7 @@ Expected status is usually compared with the actual [testInfo.status](./api/clas }> -```js +```ts import { test, expect } from '@playwright/test'; test.afterEach(async ({}, testInfo) => { @@ -378,7 +378,7 @@ Status is usually compared with the [testInfo.expectedStatus](./api/class-testin }> -```js +```ts import { test, expect } from '@playwright/test'; test.afterEach(async ({}, testInfo) => { @@ -427,7 +427,7 @@ Timeout in milliseconds for the currently running test. Zero means no timeout. T }> -```js +```ts import { test, expect } from '@playwright/test'; test.beforeEach(async ({ page }, testInfo) => { diff --git a/nodejs/docs/api/class-testoptions.mdx b/nodejs/docs/api/class-testoptions.mdx index c35722164d4..44113f980c1 100644 --- a/nodejs/docs/api/class-testoptions.mdx +++ b/nodejs/docs/api/class-testoptions.mdx @@ -19,7 +19,7 @@ These options are usually provided in the [configuration file](./test-configurat }> -```js +```ts import { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { use: { @@ -66,7 +66,7 @@ Alternatively, with [test.use(options)](./api/class-test.mdx#test-use) you can o }> -```js +```ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -162,7 +162,7 @@ Name of the browser that runs tests. Defaults to `'chromium'`. Most of the time }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig, devices } from '@playwright/test'; diff --git a/nodejs/docs/api/class-testproject.mdx b/nodejs/docs/api/class-testproject.mdx index 9ed24bd6df4..d26c2f73d71 100644 --- a/nodejs/docs/api/class-testproject.mdx +++ b/nodejs/docs/api/class-testproject.mdx @@ -21,7 +21,7 @@ Here is an example configuration that runs every test in Chromium, Firefox and W }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig, devices } from '@playwright/test'; @@ -174,7 +174,7 @@ Here is an example that uses [testInfo.outputPath(pathSegments)](./api/class-tes }> -```js +```ts import { test, expect } from '@playwright/test'; import fs from 'fs'; @@ -227,7 +227,7 @@ Each project can use a different directory. Here is an example that runs smoke t }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; @@ -351,7 +351,7 @@ Options for all tests in this project, for example [testOptions.browserName](./a }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; diff --git a/nodejs/docs/api/class-workerinfo.mdx b/nodejs/docs/api/class-workerinfo.mdx index 844c2f6695f..ddbf397a280 100644 --- a/nodejs/docs/api/class-workerinfo.mdx +++ b/nodejs/docs/api/class-workerinfo.mdx @@ -17,7 +17,7 @@ import TabItem from '@theme/TabItem'; }> -```js +```ts import { test, expect } from '@playwright/test'; test.beforeAll(async ({ browserName }, workerInfo) => { diff --git a/nodejs/docs/browsers.mdx b/nodejs/docs/browsers.mdx index 0fea488cc3b..b554392f2f5 100644 --- a/nodejs/docs/browsers.mdx +++ b/nodejs/docs/browsers.mdx @@ -49,7 +49,7 @@ While Playwright can download and use the recent Chromium build, it can operate }> -```js +```ts import { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { use: { @@ -78,7 +78,7 @@ module.exports = config; -```js +```library const { chromium } = require('playwright'); const browser = await chromium.launch({ channel: 'chrome' // or 'msedge', 'chrome-beta', 'msedge-beta', 'msedge-dev', etc. @@ -126,34 +126,76 @@ 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 -# Linux/macOS PLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsers npx playwright install +``` -# Windows with cmd.exe -set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers -npx playwright install + + -# Windows with PowerShell +```powershell $env:PLAYWRIGHT_BROWSERS_PATH="$env:USERPROFILE\pw-browsers" npx playwright install ``` + + + +```batch +set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers +npx playwright install +``` + + + + When running Playwright scripts, ask it to search for browsers in a shared location. + + + ```bash -# Linux/macOS PLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsers npx playwright test +``` -# Windows with cmd.exe -set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers -npx playwright test + + -# Windows with PowerShell +```powershell $env:PLAYWRIGHT_BROWSERS_PATH="$env:USERPROFILE\pw-browsers" npx playwright test ``` + + + +```batch +set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers +npx playwright test +``` + + + + Playwright keeps track of packages that need those browsers and will garbage collect them as you update Playwright to the newer versions. :::note @@ -165,22 +207,43 @@ 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 -# Linux/macOS # Places binaries to node_modules/@playwright/test PLAYWRIGHT_BROWSERS_PATH=0 npx playwright install +``` + + + -# Windows with cmd.exe +```powershell # Places binaries to node_modules\@playwright\test -set PLAYWRIGHT_BROWSERS_PATH=0 +$env:PLAYWRIGHT_BROWSERS_PATH=0 npx playwright install +``` -# Windows with PowerShell + + + +```batch # Places binaries to node_modules\@playwright\test -$env:PLAYWRIGHT_BROWSERS_PATH=0 +set PLAYWRIGHT_BROWSERS_PATH=0 npx playwright install ``` + + + ## Install behind a firewall or a proxy By default, Playwright downloads browsers from Microsoft CDN. diff --git a/nodejs/docs/debug.mdx b/nodejs/docs/debug.mdx index e2a9fa30bd8..203b7a5e191 100644 --- a/nodejs/docs/debug.mdx +++ b/nodejs/docs/debug.mdx @@ -66,19 +66,40 @@ Using `PWDEBUG=console` will configure the browser for debugging in Developer to * **Disables timeout**: Sets default timeout to 0 (= no timeout) * **Console helper**: Configures a `playwright` object in the browser to generate and highlight [Playwright selectors](./selectors.mdx). This can be used to verify text or composite selectors. + + + ```bash -# Linux/macOS PWDEBUG=console npm run test +``` -# Windows with cmd.exe -set PWDEBUG=console + + + +```powershell +env:PWDEBUG="console" npm run test +``` -# Windows with PowerShell -$env:PWDEBUG="console" + + + +```batch +set PWDEBUG=console npm run test ``` + + + ## Selectors in Developer Tools Console When running in Debug Mode with `PWDEBUG=console`, a `playwright` object is available in Developer tools console. @@ -112,19 +133,39 @@ Setup [`launch.json` configuration](https://code.visualstudio.com/docs/nodejs/no Playwright supports verbose logging with the `DEBUG` environment variable. + + + ```bash -# Linux/macOS DEBUG=pw:api npm run test +``` -# Windows with cmd.exe -set DEBUG=pw:api -npm run test + + -# Windows with PowerShell +```powershell $env:DEBUG="pw:api" npm run test ``` + + + +```batch +set DEBUG=pw:api +npm run test +``` + + + [Accessibility]: ./api/class-accessibility.mdx "Accessibility" [Android]: ./api/class-android.mdx "Android" diff --git a/nodejs/docs/inspector.mdx b/nodejs/docs/inspector.mdx index 43d2daf2591..921ba9e2405 100644 --- a/nodejs/docs/inspector.mdx +++ b/nodejs/docs/inspector.mdx @@ -20,18 +20,39 @@ Playwright Inspector is a GUI tool that helps authoring and debugging Playwright 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 - # Linux/macOS PWDEBUG=1 npm run test + ``` - # Windows with cmd.exe - set PWDEBUG=1 - npm run test + + - # Windows with PowerShell + ```powershell $env:PWDEBUG=1 npm run test ``` + + + + + ```batch + set PWDEBUG=1 + npm run test + ``` + + + Additional useful defaults are configured when `PWDEBUG=1` is set: - Browsers launch in the headed mode diff --git a/nodejs/docs/intro.mdx b/nodejs/docs/intro.mdx index b7cf59d5cee..2bb98a5a944 100644 --- a/nodejs/docs/intro.mdx +++ b/nodejs/docs/intro.mdx @@ -53,7 +53,7 @@ Create `tests/foo.spec.js` (or `tests/foo.spec.ts` for TypeScript) to define you }> -```js +```ts import { test, expect } from '@playwright/test'; test('basic test', async ({ page }) => { @@ -123,7 +123,7 @@ Here is a quick example of using them: }> -```js +```ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -214,7 +214,7 @@ You noticed an argument `{ page }` that the test above has access to: }> -```js +```ts test('basic test', async ({ page }) => { ... ``` @@ -255,7 +255,7 @@ You can use `test.beforeAll` and `test.afterAll` hooks to set up and tear down r }> -```js +```ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -386,7 +386,7 @@ Create `playwright.config.ts` (or `playwright.config.js`) to configure your test }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig, devices } from '@playwright/test'; diff --git a/nodejs/docs/test-advanced.mdx b/nodejs/docs/test-advanced.mdx index fea497faf4b..9e088ab00fd 100644 --- a/nodejs/docs/test-advanced.mdx +++ b/nodejs/docs/test-advanced.mdx @@ -76,7 +76,7 @@ Consider an example where we run a new http server per worker process, and use ` }> -```js +```ts // my-test.ts import { test as base } from '@playwright/test'; import * as http from 'http'; @@ -167,7 +167,7 @@ Here is an example test that saves some information: }> -```js +```ts // example.spec.ts import { test } from '@playwright/test'; @@ -209,7 +209,7 @@ Here is an example fixture that automatically saves debug logs when the test fai }> -```js +```ts // my-test.ts import * as debug from 'debug'; import * as fs from 'fs'; @@ -277,7 +277,7 @@ The port gets then passed over to Playwright as a `baseURL` when creating the co }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { @@ -324,7 +324,7 @@ Now you can use a relative path when navigating the page, or use `baseURL` fixtu }> -```js +```ts // test.spec.ts import { test } from '@playwright/test'; test('test', async ({ page, baseURL }) => { @@ -376,7 +376,7 @@ Here is a global setup example that authenticates once and reuses authentication }> -```js +```ts // global-setup.ts import { chromium, FullConfig } from '@playwright/test'; @@ -430,7 +430,7 @@ Specify `globalSetup`, `baseURL` and `storageState` in the configuration file. }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; @@ -476,7 +476,7 @@ Tests start already authenticated because we specify `storageState` that was pop }> -```js +```ts import { test } from '@playwright/test'; test('test', async ({ page }) => { @@ -516,7 +516,7 @@ To make use of this feature, we will declare an "option fixture" for the backend }> -```js +```ts // my-test.ts import { test as base } from '@playwright/test'; import { startBackend } from './my-backend'; @@ -575,7 +575,7 @@ We can use our fixtures in the test. }> -```js +```ts // example.spec.ts import { test } from './my-test'; @@ -627,7 +627,7 @@ Now, we can run test in multiple configurations by using projects. }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; import { TestOptions } from './my-test'; @@ -704,7 +704,7 @@ In this example we add a custom `toBeWithinRange` function in the configuration }> -```js +```ts // playwright.config.ts import { expect, PlaywrightTestConfig } from '@playwright/test'; @@ -771,7 +771,7 @@ Now we can use `toBeWithinRange` in the test. }> -```js +```ts // example.spec.ts import { test, expect } from '@playwright/test'; diff --git a/nodejs/docs/test-annotations.mdx b/nodejs/docs/test-annotations.mdx index e8b9a05b742..68222565701 100644 --- a/nodejs/docs/test-annotations.mdx +++ b/nodejs/docs/test-annotations.mdx @@ -38,7 +38,7 @@ You can focus some tests. When there are focused tests, only these tests run. }> -```js +```ts test.only('focus this test', async ({ page }) => { // Run only focused tests in the entire project. }); @@ -70,7 +70,7 @@ Mark a test as skipped. }> -```js +```ts test.skip('skip this test', async ({ page }) => { // This test is not run }); @@ -102,7 +102,7 @@ You can skip certain test based on the condition. }> -```js +```ts test('skip this test', async ({ page, browserName }) => { test.skip(browserName === 'firefox', 'Still working on it'); }); @@ -134,7 +134,7 @@ You can group tests to give them a logical name or to scope before/after hooks t }> -```js +```ts import { test, expect } from '@playwright/test'; test.describe('two tests', () => { @@ -182,7 +182,7 @@ Sometimes you want to tag your tests as `@fast` or `@slow` and only run the test }> -```js +```ts import { test, expect } from '@playwright/test'; test('Test login page @fast', async ({ page }) => { @@ -238,7 +238,7 @@ For example, you can run a group of tests just in Chromium by passing a callback }> -```js +```ts // example.spec.ts test.describe('chromium only', () => { @@ -298,7 +298,7 @@ To avoid running `beforeEach` hooks, you can put annotations in the hook itself. }> -```js +```ts // example.spec.ts test.beforeEach(async ({ page }) => { diff --git a/nodejs/docs/test-auth.mdx b/nodejs/docs/test-auth.mdx index 5bd7b38373d..819f9c15299 100644 --- a/nodejs/docs/test-auth.mdx +++ b/nodejs/docs/test-auth.mdx @@ -28,7 +28,7 @@ This is the simplest way where each test signs in inside the `beforeEach` hook. }> -```js +```ts import { test } from '@playwright/test'; test.beforeEach(async ({ page }) => { @@ -94,7 +94,7 @@ Create a new global setup script: }> -```js +```ts // global-setup.ts import { chromium, FullConfig } from '@playwright/test'; @@ -148,7 +148,7 @@ Register global setup script in the Playwright configuration file: }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; @@ -194,7 +194,7 @@ Tests start already authenticated because we specify `storageState` that was pop }> -```js +```ts import { test } from '@playwright/test'; test('test', async ({ page }) => { @@ -234,7 +234,7 @@ Sometimes you have more than one signed-in user in your end to end tests. You ca }> -```js +```ts // global-setup.ts import { chromium, FullConfig } from '@playwright/test'; @@ -288,7 +288,7 @@ After that you can specify the user to use for each test file or each test group }> -```js +```ts import { test } from '@playwright/test'; test.use({ storageState: 'adminStorageState.json' }); @@ -344,7 +344,7 @@ Although discouraged, sometimes it is necessary to sacrifice the isolation and r }> -```js +```ts // example.spec.ts import { test, Page } from '@playwright/test'; diff --git a/nodejs/docs/test-configuration.mdx b/nodejs/docs/test-configuration.mdx index d548c57c27f..85416215324 100644 --- a/nodejs/docs/test-configuration.mdx +++ b/nodejs/docs/test-configuration.mdx @@ -39,7 +39,7 @@ Create `playwright.config.js` (or `playwright.config.ts`) and specify options in }> -```js +```ts import { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { use: { @@ -100,7 +100,7 @@ With [test.use(options)](./api/class-test.mdx#test-use) you can override some op }> -```js +```ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -142,7 +142,7 @@ The same works inside describe. }> -```js +```ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -198,7 +198,7 @@ These are commonly used options for various scenarios. You usually set them glob }> -```js +```ts import { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { use: { @@ -247,7 +247,7 @@ Here is an example configuration that runs tests in "Pixel 4" and "iPhone 11" em }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig, devices } from '@playwright/test'; @@ -334,7 +334,7 @@ You can specify options separately instead of using predefined devices. There ar }> -```js +```ts import { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { use: { @@ -391,7 +391,7 @@ You don't have to configure anything to mock network requests. Just define a cus }> -```js +```ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -439,7 +439,7 @@ Alternatively, you can use [page.route(url, handler[, options])](./api/class-pag }> -```js +```ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -490,7 +490,7 @@ Screenshots will appear in the test output directory, typically `test-results`. }> -```js +```ts import { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { use: { @@ -539,7 +539,7 @@ Video files will appear in the test output directory, typically `test-results`. }> -```js +```ts import { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { use: { @@ -588,7 +588,7 @@ Trace files will appear in the test output directory, typically `test-results`. }> -```js +```ts import { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { use: { @@ -631,7 +631,7 @@ Any options accepted by [browserType.launch([options])](./api/class-browsertype. }> -```js +```ts import { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { use: { @@ -692,7 +692,7 @@ You can specify these options in the configuration file. Note that testing optio }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; @@ -768,7 +768,7 @@ To specify different options per browser, for example command line arguments for }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; diff --git a/nodejs/docs/test-fixtures.mdx b/nodejs/docs/test-fixtures.mdx index 1df78c46154..3f257b49299 100644 --- a/nodejs/docs/test-fixtures.mdx +++ b/nodejs/docs/test-fixtures.mdx @@ -64,7 +64,7 @@ test.describe('todo tests', () => { }> -```js +```ts // example.spec.ts import { test as base } from '@playwright/test'; import { TodoPage } from './todo-page'; @@ -144,7 +144,7 @@ Test fixtures are set up for each test. Consider the following test file: }> -```js +```ts // hello.spec.ts import test from './hello'; @@ -190,7 +190,7 @@ Here is how test fixtures are declared and defined. Fixtures can use other fixtu }> -```js +```ts // hello.ts import { test as base } from '@playwright/test'; @@ -268,7 +268,7 @@ Here is how the test looks: }> -```js +```ts // express.spec.ts import test from './express-test'; import fetch from 'node-fetch'; @@ -318,7 +318,7 @@ And here is how fixtures are declared and defined: }> -```js +```ts // express-test.ts import { test as base } from '@playwright/test'; import express from 'express'; @@ -437,7 +437,7 @@ In addition to creating your own fixtures, you can also override existing fixtur }> -```js +```ts import { test as base } from '@playwright/test'; export const test = base.extend({ @@ -477,7 +477,7 @@ Notice that in this example, the `page` fixture is able to depend on other built }> -```js +```ts test.use({ baseURL: 'https://playwright.dev' }) ``` @@ -503,7 +503,7 @@ Fixtures can also be overridden where the base fixture is completely replaced wi }> -```js +```ts import { test as base } from '@playwright/test'; export const test = base.extend({ diff --git a/nodejs/docs/test-parallel.mdx b/nodejs/docs/test-parallel.mdx index 81f8ee8d610..7d7c9af420a 100644 --- a/nodejs/docs/test-parallel.mdx +++ b/nodejs/docs/test-parallel.mdx @@ -50,7 +50,7 @@ In the configuration file: }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; @@ -104,7 +104,7 @@ Note that parallel tests are executed in separate worker processes and cannot sh }> -```js +```ts import { test } from '@playwright/test'; test.describe.parallel('suite', () => { @@ -164,7 +164,7 @@ Setting in the configuration file: }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; diff --git a/nodejs/docs/test-pom.mdx b/nodejs/docs/test-pom.mdx index ba242ea44d5..2dc528c3bfd 100644 --- a/nodejs/docs/test-pom.mdx +++ b/nodejs/docs/test-pom.mdx @@ -19,7 +19,7 @@ We will create a `PlaywrightDevPage` helper class to encapsulate common operatio }> -```js +```ts // playwright-dev-page.ts import { expect, Locator, Page } from '@playwright/test'; @@ -106,7 +106,7 @@ Now we can use the `PlaywrightDevPage` class in our tests. }> -```js +```ts // example.spec.ts import { test, expect } from '@playwright/test'; import { PlaywrightDevPage } from './playwright-dev-page'; diff --git a/nodejs/docs/test-reporters.mdx b/nodejs/docs/test-reporters.mdx index 587629871a5..e1714bcb785 100644 --- a/nodejs/docs/test-reporters.mdx +++ b/nodejs/docs/test-reporters.mdx @@ -30,7 +30,7 @@ For more control, you can specify reporters programmatically in the [configurati }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; @@ -72,7 +72,7 @@ You can use multiple reporters at the same time. For example you can use`'list' }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; @@ -120,7 +120,7 @@ You can use different reporters locally and on CI. For example, using concise `' }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; @@ -164,7 +164,7 @@ You can use the built in `github` reporter to get automatic failure annotations }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; @@ -216,7 +216,7 @@ npx playwright test --reporter=list }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; @@ -280,7 +280,7 @@ npx playwright test --reporter=line }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; @@ -341,7 +341,7 @@ npx playwright test --reporter=dot }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; @@ -383,19 +383,40 @@ JSON reporter produces an object with all information about the test run. It is Most likely you want to write the JSON to a file. When running with `--reporter=json`, use `PLAYWRIGHT_JSON_OUTPUT_NAME` environment variable: + + + ```bash -# Linux/macOS PLAYWRIGHT_JSON_OUTPUT_NAME=results.json npx playwright test --reporter=json,dot +``` -# Windows with cmd.exe -set PLAYWRIGHT_JSON_OUTPUT_NAME=results.json -npx playwright test --reporter=json,dot + + -# Windows with PowerShell +```powershell $env:PLAYWRIGHT_JSON_OUTPUT_NAME="results.json" npx playwright test --reporter=json,dot ``` + + + +```batch +set PLAYWRIGHT_JSON_OUTPUT_NAME=results.json +npx playwright test --reporter=json,dot +``` + + + + In configuration file, pass options directly: -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; @@ -442,19 +463,40 @@ JUnit reporter produces a JUnit-style xml report. It is usually used together wi 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 -# Linux/macOS PLAYWRIGHT_JUNIT_OUTPUT_NAME=results.xml npx playwright test --reporter=junit,line +``` -# Windows with cmd.exe -set PLAYWRIGHT_JUNIT_OUTPUT_NAME=results.xml -npx playwright test --reporter=junit,line + + -# Windows with PowerShell +```powershell $env:PLAYWRIGHT_JUNIT_OUTPUT_NAME="results.xml" npx playwright test --reporter=junit,line ``` + + + +```batch +set PLAYWRIGHT_JUNIT_OUTPUT_NAME=results.xml +npx playwright test --reporter=junit,line +``` + + + + In configuration file, pass options directly: -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; @@ -509,7 +551,7 @@ You can create a custom reporter by implementing a class with some of the report }> -```js +```ts // playwright.config.ts import { Reporter } from '@playwright/test/reporter'; @@ -577,7 +619,7 @@ Now use this reporter with [testConfig.reporter](./api/class-testconfig.mdx#test }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; diff --git a/nodejs/docs/test-retries.mdx b/nodejs/docs/test-retries.mdx index 89a43d6e9be..3d97f8403ba 100644 --- a/nodejs/docs/test-retries.mdx +++ b/nodejs/docs/test-retries.mdx @@ -26,7 +26,7 @@ Consider the following snippet: }> -```js +```ts import { test } from '@playwright/test'; test.describe('suite', () => { @@ -94,7 +94,7 @@ npx playwright test --retries=3 }> -```js +```ts // playwright.config.ts import { PlaywrightTestConfig } from '@playwright/test'; @@ -158,7 +158,7 @@ Consider the following snippet that uses `test.describe.serial`: }> -```js +```ts import { test } from '@playwright/test'; test.describe.serial('suite', () => { @@ -218,7 +218,7 @@ Playwright Test creates an isolated [Page] object for each test. However, if you }> -```js +```ts // example.spec.ts import { test, Page } from '@playwright/test'; diff --git a/nodejs/docs/test-snapshots.mdx b/nodejs/docs/test-snapshots.mdx index cb26851923c..4006e33473e 100644 --- a/nodejs/docs/test-snapshots.mdx +++ b/nodejs/docs/test-snapshots.mdx @@ -17,7 +17,7 @@ Playwright Test includes the ability to produce and visually compare screenshots }> -```js +```ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -89,7 +89,7 @@ Playwright Test uses the [pixelmatch](https://github.com/mapbox/pixelmatch) libr }> -```js +```ts // example.spec.ts import { test, expect } from '@playwright/test'; @@ -127,7 +127,7 @@ If you'd like to share the default value among all the tests in the project, you }> -```js +```ts import { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { expect: { @@ -165,7 +165,7 @@ Here we compare text content against the reference. }> -```js +```ts // example.spec.ts import { test, expect } from '@playwright/test'; diff --git a/nodejs/docs/trace-viewer.mdx b/nodejs/docs/trace-viewer.mdx index 3f203eaabd1..f573d37be42 100644 --- a/nodejs/docs/trace-viewer.mdx +++ b/nodejs/docs/trace-viewer.mdx @@ -31,7 +31,7 @@ Set the `trace: 'on-first-retry'` option in the test configuration file. This wi }> -```js +```ts import { PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { retries: 1, @@ -62,7 +62,7 @@ module.exports = config; -```js +```library const browser = await chromium.launch(); const context = await browser.newContext(); diff --git a/python/docs/browsers.mdx b/python/docs/browsers.mdx index 0357f247a03..965ab6c9e0f 100644 --- a/python/docs/browsers.mdx +++ b/python/docs/browsers.mdx @@ -103,37 +103,81 @@ 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 -# Linux/macOS pip install playwright PLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsers python -m playwright install +``` -# Windows with cmd.exe -set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers + + + +```powershell +$env:PLAYWRIGHT_BROWSERS_PATH="$env:USERPROFILE\pw-browsers" pip install playwright playwright install +``` -# Windows with PowerShell -$env:PLAYWRIGHT_BROWSERS_PATH="$env:USERPROFILE\pw-browsers" + + + +```batch +set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers pip install playwright playwright install ``` + + + When running Playwright scripts, ask it to search for browsers in a shared location. + + + ```bash # Linux/macOS PLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsers python playwright_script.py +``` -# Windows with cmd.exe -set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers -python playwright_script.py + + + +```powershell -# Windows with PowerShell $env:PLAYWRIGHT_BROWSERS_PATH="$env:USERPROFILE\pw-browsers" python playwright_script.py ``` + + + +```batch +set PLAYWRIGHT_BROWSERS_PATH=%USERPROFILE%\pw-browsers +python playwright_script.py +``` + + + + Playwright keeps track of packages that need those browsers and will garbage collect them as you update Playwright to the newer versions. :::note @@ -145,66 +189,130 @@ 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 -# Linux/macOS # Places binaries to node_modules/@playwright/test PLAYWRIGHT_BROWSERS_PATH=0 npx playwright install +``` + + + -# Windows with cmd.exe +```powershell # Places binaries to node_modules\@playwright\test -set PLAYWRIGHT_BROWSERS_PATH=0 +$env:PLAYWRIGHT_BROWSERS_PATH=0 npx playwright install +``` + + + -# Windows with PowerShell +```batch # Places binaries to node_modules\@playwright\test -$env:PLAYWRIGHT_BROWSERS_PATH=0 +set PLAYWRIGHT_BROWSERS_PATH=0 npx playwright install ``` + + + ## Install behind a firewall or a proxy 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 -# Linux/macOS pip install playwright HTTPS_PROXY=https://192.0.2.1 playwright install +``` -# Windows with cmd.exe -set HTTPS_PROXY=https://192.0.2.1 + + + +```powershell +$env:HTTPS_PROXY="https://192.0.2.1" pip install playwright playwright install +``` -# Windows with PowerShell -$env:HTTPS_PROXY="https://192.0.2.1" + + + +```batch +set HTTPS_PROXY=https://192.0.2.1 pip install playwright playwright install ``` + + + ## Download from artifact repository By default, Playwright downloads browsers from Microsoft CDN. 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 -# Linux/macOS pip install playwright PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 playwright install -# Windows with cmd.exe -set PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 +``` + + + + +```powershell +$env:PLAYWRIGHT_DOWNLOAD_HOST="192.0.2.1" pip install playwright playwright install +``` -# Windows with PowerShell -$env:PLAYWRIGHT_DOWNLOAD_HOST="192.0.2.1" + + + +```batch +set PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 pip install playwright playwright 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 @@ -219,22 +327,43 @@ In certain cases, it is desired to avoid browser downloads altogether because br This can be done by setting `PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD` variable before installation. + + + ```bash -# Linux/macOS pip install playwright PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 python -m playwright install +``` -# Windows with cmd.exe -set PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 + + + +```powershell +$env:PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 pip install playwright playwright install +``` -# Windows with PowerShell -$env:PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 + + + +```batch +set PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 pip install playwright playwright install ``` + + + ## Download single browser binary Playwright downloads Chromium, Firefox and WebKit browsers by default. To install a specific browser, pass it as an argument during installation. diff --git a/python/docs/debug.mdx b/python/docs/debug.mdx index 055abfd9596..30e76a787fd 100644 --- a/python/docs/debug.mdx +++ b/python/docs/debug.mdx @@ -108,19 +108,40 @@ Using `PWDEBUG=console` will configure the browser for debugging in Developer to * **Disables timeout**: Sets default timeout to 0 (= no timeout) * **Console helper**: Configures a `playwright` object in the browser to generate and highlight [Playwright selectors](./selectors.mdx). This can be used to verify text or composite selectors. + + + ```bash -# Linux/macOS PWDEBUG=console pytest -s +``` -# Windows with cmd.exe -set PWDEBUG=console -pytest -s + + -# Windows with PowerShell +```powershell $env:PWDEBUG="console" pytest -s ``` + + + +```batch +set PWDEBUG=console +pytest -s +``` + + + + ## Selectors in Developer Tools Console When running in Debug Mode with `PWDEBUG=console`, a `playwright` object is available in Developer tools console. @@ -154,19 +175,39 @@ Setup [`launch.json` configuration](https://code.visualstudio.com/docs/nodejs/no Playwright supports verbose logging with the `DEBUG` environment variable. + + + ```bash -# Linux/macOS DEBUG=pw:api pytest -s +``` -# Windows with cmd.exe -set DEBUG=pw:api -pytest -s + + -# Windows with PowerShell +```powershell $env:DEBUG="pw:api" pytest -s ``` + + + +```batch +set DEBUG=pw:api +pytest -s +``` + + + [Accessibility]: ./api/class-accessibility.mdx "Accessibility" [Browser]: ./api/class-browser.mdx "Browser" diff --git a/python/docs/inspector.mdx b/python/docs/inspector.mdx index 003da1a430e..7b1a10e63a1 100644 --- a/python/docs/inspector.mdx +++ b/python/docs/inspector.mdx @@ -20,18 +20,39 @@ Playwright Inspector is a GUI tool that helps authoring and debugging Playwright 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 - # Linux/macOS PWDEBUG=1 pytest -s + ``` - # Windows with cmd.exe - set PWDEBUG=1 - pytest -s + + - # Windows with PowerShell + ```powershell $env:PWDEBUG=1 pytest -s ``` + + + + + ```batch + set PWDEBUG=1 + pytest -s + ``` + + + Additional useful defaults are configured when `PWDEBUG=1` is set: - Browsers launch in the headed mode diff --git a/python/docs/intro.mdx b/python/docs/intro.mdx index efbee680aa9..fd10b387387 100644 --- a/python/docs/intro.mdx +++ b/python/docs/intro.mdx @@ -164,22 +164,43 @@ with sync_playwright() as p: If you want to bundle browsers with the executables: + + + ```bash -# Linux/macOS PLAYWRIGHT_BROWSERS_PATH=0 playwright install chromium pyinstaller -F main.py +``` -# Windows with cmd.exe -set PLAYWRIGHT_BROWSERS_PATH=0 + + + +```powershell +$env:PLAYWRIGHT_BROWSERS_PATH="0" playwright install chromium pyinstaller -F main.py +``` -# Windows with PowerShell -$env:PLAYWRIGHT_BROWSERS_PATH="0" + + + +```batch +set PLAYWRIGHT_BROWSERS_PATH=0 playwright install chromium pyinstaller -F main.py ``` + + + :::note Bundling the browsers with the executables will generate bigger binaries. It is recommended to only bundle the browsers you use. ::: diff --git a/src/format_csharp.js b/src/format_csharp.js index 7daf02156c1..676c8dc4f93 100644 --- a/src/format_csharp.js +++ b/src/format_csharp.js @@ -17,6 +17,7 @@ //@ts-check const Documentation = require('./documentation'); +const { generateTabGroup } = require('./format_utils'); const { toTitleCase } = require('./generator'); /** @typedef {import('./generator').GeneratorFormatter} GeneratorFormatter */ @@ -24,6 +25,9 @@ const { toTitleCase } = require('./generator'); * @implements {GeneratorFormatter} */ class CSharpFormatter { + constructor() { + this.lang = 'csharp'; + } /** * @param {Documentation.Member} member */ @@ -141,7 +145,7 @@ class CSharpFormatter { } preprocessComment(spec) { - return spec; + return generateTabGroup(spec, this.lang, 'bash'); } } diff --git a/src/format_java.js b/src/format_java.js index 7b558d67df1..62baddbec67 100644 --- a/src/format_java.js +++ b/src/format_java.js @@ -17,6 +17,7 @@ //@ts-check const Documentation = require('./documentation'); +const { generateTabGroup } = require('./format_utils'); const { toTitleCase, renderJSSignature } = require('./generator'); /** @typedef {import('./generator').GeneratorFormatter} GeneratorFormatter */ @@ -24,6 +25,9 @@ const { toTitleCase, renderJSSignature } = require('./generator'); * @implements {GeneratorFormatter} */ class JavaFormatter { + constructor() { + this.lang = 'java'; + } formatMember(member) { let text; let args = []; @@ -127,7 +131,7 @@ class JavaFormatter { if (n.text === 'extends: [Error]') n.text = 'extends: [PlaywrightException]'; }); - return spec; + return generateTabGroup(spec, this.lang, 'bash'); } } diff --git a/src/format_js.js b/src/format_js.js index befde7e1518..78396599326 100644 --- a/src/format_js.js +++ b/src/format_js.js @@ -19,6 +19,7 @@ const md = require('./markdown'); const Documentation = require('./documentation'); const { toTitleCase, renderJSSignature } = require('./generator'); +const { generateTabGroup } = require('./format_utils'); /** @typedef {import('./generator').GeneratorFormatter} GeneratorFormatter */ /** @typedef {import('./markdown').MarkdownNode} MarkdownNode */ @@ -26,6 +27,9 @@ const { toTitleCase, renderJSSignature } = require('./generator'); * @implements {GeneratorFormatter} */ class JavaScriptFormatter { + constructor() { + this.lang = 'js'; + } formatMember(member) { let text; let args = []; @@ -78,74 +82,9 @@ class JavaScriptFormatter { * @returns {MarkdownNode[]} */ preprocessComment(spec) { - /** @type {MarkdownNode[]} */ - const newSpec = []; - for (let i = 0; i < spec.length; ++i) { - const tabs = []; - let match = spec[i].codeLang && spec[i].codeLang.match(/^js ([\w+-_]+)=([\w+-_]+)/); - while (match) { - spec[i].codeLang = 'js'; - tabs.push({ groupId: match[1], value: match[2], spec: spec[i] }); - ++i; - if (i >= spec.length) - break; - match = spec[i].codeLang && spec[i].codeLang.match(/^js ([\w+-_]+)=([\w+-_]+)/); - } - if (tabs.length) { - if (tabs.length === 1) - throw new Error('Bad js tab group: ' + md.render(spec)); - tabs.sort((t1, t2) => tabWeight(t2.value) - tabWeight(t1.value)); - - // Validate group consistency. - const groupId = tabs[0].groupId; - const values = new Set(); - for (const tab of tabs) { - if (tab.groupId !== groupId) - throw new Error('Mixed group ids: ' + md.render(spec)); - if (values.has(tab.value)) - throw new Error('Dupe tabs: ' + md.render(spec)); - values.add(tab.value); - } - - const tokens = []; - tokens.push(` ` {label: '${tabLabel(t.value)}', value: '${t.value}'}${ i === tabs.length - 1 ? '' : ','}`)) - tokens.push(` ] -}>`); - tokens.push(...tabs.map(t => ` -${md.render([t.spec])} -`)); - tokens.push(``); - - newSpec.push({ - type: 'text', - text: tokens.join('\n') - }); - } - if (i < spec.length) - newSpec.push(spec[i]); - } - return newSpec; + const newSpec = generateTabGroup(spec, this.lang, 'js'); + return generateTabGroup(newSpec, this.lang, 'bash') } } -function tabLabel(type) { - if (type === 'ts') - return 'TypeScript'; - if (type === 'js') - return 'JavaScript'; - if (type === 'library') - return 'Library'; -} - -function tabWeight(type) { - if (type === 'ts') - return 2; - if (type === 'js') - return 1; -} - module.exports = { JavaScriptFormatter }; diff --git a/src/format_python.js b/src/format_python.js index d483121a441..dafd3133826 100644 --- a/src/format_python.js +++ b/src/format_python.js @@ -19,6 +19,7 @@ const md = require('./markdown'); const Documentation = require('./documentation'); const { toSnakeCase } = require('./generator'); +const { generateTabGroup } = require('./format_utils'); /** @typedef {import('./generator').GeneratorFormatter} GeneratorFormatter */ /** @typedef {import('./markdown').MarkdownNode} MarkdownNode */ @@ -26,6 +27,9 @@ const { toSnakeCase } = require('./generator'); * @implements {GeneratorFormatter} */ class PythonFormatter { + constructor() { + this.lang = 'python'; + } formatMember(member) { let text; const args = []; @@ -126,7 +130,7 @@ ${md.render([spec[i]])} newSpec.push(spec[i]); } } - return newSpec; + return generateTabGroup(newSpec, this.lang, 'bash'); } } diff --git a/src/format_utils.js b/src/format_utils.js new file mode 100644 index 00000000000..3247fe4f3b5 --- /dev/null +++ b/src/format_utils.js @@ -0,0 +1,123 @@ +/** + * Copyright (c) Microsoft Corporation. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +//@ts-check + +const md = require('./markdown'); +/** @typedef {import('./generator').GeneratorFormatter} GeneratorFormatter */ +/** @typedef {import('./markdown').MarkdownNode} MarkdownNode */ + +/** + * @param {MarkdownNode[]} spec + * @param {string} language + * @param {string} tabGroupName + * @returns {MarkdownNode[]} + */ +function generateTabGroup(spec, language, tabGroupName) { + /** @type {MarkdownNode[]} */ + const newSpec = []; + for (let i = 0; i < spec.length; ++i) { + /** @type {{value: string, groupId: string, spec: md.MarkdownNode}[]} */ + const tabs = []; + for (;i < spec.length; i++) { + const match = spec[i].codeLang && spec[i].codeLang.match(new RegExp(`^${tabGroupName} ([\\w+-_]+)=([\\w+-_]+)( lang=(\\w+))?`)) + if (!match) + break + // Language filter + if (match[4] && match[4] !== language) { + continue; + } + spec[i].codeLang = match[2]; + tabs.push({ groupId: match[1], value: match[2], spec: spec[i] }); + } + if (tabs.length) { + if (tabs.length === 1) + throw new Error('Bad js tab group: ' + md.render(spec)); + tabs.sort((t1, t2) => tabWeight(t2.value) - tabWeight(t1.value)); + + // Validate group consistency. + const groupId = tabs[0].groupId; + const values = new Set(); + for (const tab of tabs) { + if (tab.groupId !== groupId) + throw new Error('Mixed group ids: ' + md.render(spec)); + if (values.has(tab.value)) + throw new Error('Dupe tabs: ' + md.render(spec)); + values.add(tab.value); + } + + const tokens = []; + tokens.push(` ` {label: '${tabLabel(t.value)}', value: '${t.value}'}${ i === tabs.length - 1 ? '' : ','}`)) + tokens.push(` ] +}>`); + tokens.push(...tabs.map(t => ` +${md.render([t.spec])} +`)); + tokens.push(``); + + newSpec.push({ + type: 'text', + text: tokens.join('\n') + }); + } + if (i < spec.length) + newSpec.push(spec[i]); + } + return newSpec; +} + +function tabLabel(type) { + if (type === 'ts') + return 'TypeScript'; + if (type === 'js') + return 'JavaScript'; + if (type === 'library') + return 'Library'; + if (type === 'bash') + return 'Bash'; + if (type === 'batch') + return 'Batch'; + if (type === 'powershell') + return 'PowerShell' + throw new Error(`Unknown label type: ${type}`) +} + +/** + * @param {string} type + * @returns {number} + */ +function tabWeight(type) { + const weights = new Map([ + ['ts', 2], + ['js', 1], + ['library', 0], + + ['bash', 3], + ['powershell', 2], + ['batch', 1], + ]) + if (!weights.has(type)) + throw new Error(`Unrecognized language: ${type}`) + return weights.get(type); +} + +module.exports = { + generateTabGroup, +} \ No newline at end of file From e1becad350b197e2e8dabb691f8005701ee6c23c Mon Sep 17 00:00:00 2001 From: Max Schmitt Date: Mon, 4 Oct 2021 15:15:52 +0200 Subject: [PATCH 2/2] syntax highlighting --- dotnet/docusaurus.config.js | 2 +- java/docusaurus.config.js | 2 +- nodejs/docusaurus.config.js | 4 ++++ python/docusaurus.config.js | 2 +- 4 files changed, 7 insertions(+), 3 deletions(-) diff --git a/dotnet/docusaurus.config.js b/dotnet/docusaurus.config.js index 0d839db66c6..6d62277bbe4 100644 --- a/dotnet/docusaurus.config.js +++ b/dotnet/docusaurus.config.js @@ -41,7 +41,7 @@ module.exports = { }, prism: { theme: require('prism-react-renderer/themes/dracula'), - additionalLanguages: ['csharp'], + additionalLanguages: ['csharp', 'bash', 'batch', 'powershell'], }, navbar: { title: "Playwright for .NET", diff --git a/java/docusaurus.config.js b/java/docusaurus.config.js index f0d8cc39515..cc24860ec01 100644 --- a/java/docusaurus.config.js +++ b/java/docusaurus.config.js @@ -41,7 +41,7 @@ module.exports = { }, prism: { theme: require('prism-react-renderer/themes/dracula'), - additionalLanguages: ['java'], + additionalLanguages: ['java', 'bash', 'batch', 'powershell'], }, navbar: { title: "Playwright for Java", diff --git a/nodejs/docusaurus.config.js b/nodejs/docusaurus.config.js index 6f8b18bec2c..77b3c7faca0 100644 --- a/nodejs/docusaurus.config.js +++ b/nodejs/docusaurus.config.js @@ -39,6 +39,10 @@ module.exports = { colorMode: { defaultMode: "dark", }, + prism: { + theme: require('prism-react-renderer/themes/dracula'), + additionalLanguages: ['bash', 'batch', 'powershell'], + }, navbar: { title: "Playwright", logo: { diff --git a/python/docusaurus.config.js b/python/docusaurus.config.js index 473bb539379..75006f09d18 100644 --- a/python/docusaurus.config.js +++ b/python/docusaurus.config.js @@ -41,7 +41,7 @@ module.exports = { }, prism: { theme: require('prism-react-renderer/themes/dracula'), - additionalLanguages: ['python'], + additionalLanguages: ['python', 'bash', 'batch', 'powershell'], }, navbar: { title: "Playwright for Python",