docs: use explicit tab suffixes (#6855)

docs/src/test-annotations.md

@@ -5,7 +5,7 @@ title: "Annotations"
 
 Sadly, tests do not always pass. Playwright Test supports test annotations to deal with failures, flakiness and tests that are not yet ready.
 
-```js
+```js js-flavor=js
 // example.spec.js
 const { test, expect } = require('playwright/test');
 
@@ -20,7 +20,7 @@ test('another feature', async ({ page }) => {
 });
 ```
 
-```ts
+```js js-flavor=ts
 // example.spec.ts
 import { test, expect } from 'playwright/test';
 

docs/src/test-configuration.md

@@ -28,7 +28,7 @@ You can specify any options either locally in a test file, or globally in the co
 
 Create `playwright.config.js` (or `playwright.config.ts`) and specify options in the `use` section.
 
-```js
+```js js-flavor=js
 module.exports = {
   use: {
     // Browser options
@@ -46,7 +46,7 @@ module.exports = {
 };
 ```
 
-```ts
+```js js-flavor=ts
 import { PlaywrightTestConfig } from 'playwright/test';
 const config: PlaywrightTestConfig = {
   use: {
@@ -82,7 +82,7 @@ npx playwright test --config=tests/my.config.js
 
 With `test.use()` you can override some options for a file or a `test.describe` block.
 
-```js
+```js js-flavor=js
 // example.spec.js
 const { test, expect } = require('playwright/test');
 
@@ -94,7 +94,7 @@ test('my portrait test', async ({ page }) => {
 });
 ```
 
-```ts
+```js js-flavor=ts
 // example.spec.ts
 import { test, expect } from 'playwright/test';
 
@@ -106,7 +106,9 @@ test('my portrait test', async ({ page }) => {
 });
 ```
 
-```js
+The same works inside describe.
+
+```js js-flavor=js
 // example.spec.js
 const { test, expect } = require('playwright/test');
 
@@ -120,7 +122,7 @@ test.describe('headed block', () => {
 });
 ```
 
-```ts
+```js js-flavor=ts
 // example.spec.ts
 import { test, expect } from 'playwright/test';
 
@@ -150,7 +152,7 @@ In addition to configuring [Browser] or [BrowserContext], videos or screenshots,
 
 You can specify these options in the configuration file.
 
-```js
+```js js-flavor=js
 // playwright.config.js
 module.exports = {
   // Look for test files in the "tests" directory, relative to this configuration file
@@ -174,7 +176,7 @@ module.exports = {
 };
 ```
 
-```ts
+```js js-flavor=ts
 // playwright.config.ts
 import { PlaywrightTestConfig } from 'playwright/test';
 
@@ -205,7 +207,7 @@ export default config;
 
 To specify different options per browser, for example command line arguments for Chromium, create multiple projects in your configuration file. Below is an example that runs all tests in three browsers, with different options.
 
-```js
+```js js-flavor=js
 // playwright.config.js
 module.exports = {
   // Put any shared options on the top level.
@@ -238,7 +240,7 @@ module.exports = {
 };
 ```
 
-```ts
+```js js-flavor=ts
 // playwright.config.ts
 import { PlaywrightTestConfig } from 'playwright/test';
 
@@ -312,7 +314,7 @@ You can use configuration file to make default `context` emulate a mobile device
 
 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 js-flavor=js
 // playwright.config.js
 const { devices } = require('playwright');
 
@@ -339,7 +341,7 @@ module.exports = {
 };
 ```
 
-```ts
+```js js-flavor=ts
 // playwright.config.ts
 import { PlaywrightTestConfig } from 'playwright/test';
 import { devices } from 'playwright';
@@ -372,7 +374,7 @@ export default config;
 
 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 js-flavor=js
 // example.spec.js
 const { test, expect } = require('playwright/test');
 
@@ -387,7 +389,7 @@ test('loads page without css', async ({ page }) => {
 });
 ```
 
-```ts
+```js js-flavor=ts
 // example.spec.ts
 import { test, expect } from 'playwright/test';
 
@@ -404,7 +406,7 @@ test('loads page without css', async ({ page }) => {
 
 Alternatively, you can use [`method: Page.route`] to mock network in a single test.
 
-```js
+```js js-flavor=js
 // example.spec.js
 const { test, expect } = require('playwright/test');
 
@@ -417,7 +419,7 @@ test('loads page without images', async ({ page }) => {
 });
 ```
 
-```ts
+```js js-flavor=ts
 // example.spec.ts
 import { test, expect } from 'playwright/test';
 

docs/src/test-fixtures.md

@@ -49,7 +49,7 @@ describe('todo tests', () => {
 
 ### With fixtures
 
-```js
+```js js-flavor=js
 // todo.spec.js
 const base = require('playwright/test');
 const { TodoPage } = require('./todo-page');
@@ -77,7 +77,7 @@ test('should remove an item', async ({ todoPage }) => {
 });
 ```
 
-```ts
+```js js-flavor=ts
 // example.spec.ts
 import { test as base } from 'playwright/test';
 import { TodoPage } from './todo-page';
@@ -113,7 +113,7 @@ There are two types of fixtures: `test` and `worker`. Test fixtures are set up f
 
 Test fixtures are set up for each test. Consider the following test file:
 
-```js
+```js js-flavor=js
 // hello.spec.js
 const test = require('./hello');
 
@@ -126,7 +126,7 @@ test('hello world', ({ helloWorld }) => {
 });
 ```
 
-```ts
+```js js-flavor=ts
 // hello.spec.ts
 import test from './hello';
 
@@ -143,7 +143,7 @@ It uses fixtures `hello` and `helloWorld` that are set up by the framework for e
 
 Here is how test fixtures are declared and defined. Fixtures can use other fixtures - note how `helloWorld` uses `hello`.
 
-```js
+```js js-flavor=js
 // hello.js
 const base = require('playwright/test');
 
@@ -166,7 +166,7 @@ module.exports = base.test.extend({
 });
 ```
 
-```ts
+```js js-flavor=ts
 // hello.ts
 import base from 'playwright/test';
 
@@ -204,7 +204,7 @@ With fixtures, test organization becomes flexible - you can put tests that make
 Playwright Test uses worker processes to run test files. You can specify the maximum number of workers using `--workers` command line option. Similarly to how test fixtures are set up for individual test runs, worker fixtures are set up for each worker process. That's where you can set up services, run servers, etc. Playwright Test will reuse the worker process for as many test files as it can, provided their worker fixtures match and hence environments are identical.
 
 Here is how the test looks:
-```js
+```js js-flavor=js
 // express.spec.js
 const test = require('./express-test');
 const fetch = require('node-fetch');
@@ -220,7 +220,7 @@ test('fetch 2', async ({ port }) => {
 });
 ```
 
-```ts
+```js js-flavor=ts
 // express.spec.ts
 import test from './express-test';
 import fetch from 'node-fetch';
@@ -237,7 +237,7 @@ test('fetch 2', async ({ port }) => {
 ```
 
 And here is how fixtures are declared and defined:
-```js
+```js js-flavor=js
 // express-test.js
 const base = require('playwright/test');
 const express = require('express');
@@ -282,7 +282,7 @@ module.exports = base.test.extend({
 });
 ```
 
-```ts
+```js js-flavor=ts
 // express-test.ts
 import { test as base } from 'playwright/test';
 import express from 'express';

docs/src/test-intro.md

@@ -29,7 +29,7 @@ npm i -D playwright
 
 Create `tests/foo.spec.js` (or `tests/foo.spec.ts` for TypeScript) to define your test.
 
-```js
+```js js-flavor=js
 const { test, expect } = require('playwright/test');
 
 test('basic test', async ({ page }) => {
@@ -39,7 +39,7 @@ test('basic test', async ({ page }) => {
 });
 ```
 
-```ts
+```js js-flavor=ts
 import { test, expect } from 'playwright/test';
 
 test('basic test', async ({ page }) => {
@@ -79,12 +79,12 @@ Refer to [configuration](./test-configuration.md) section for configuring test r
 
 You noticed an argument `{ page }` that the test above has access to:
 
-```js
+```js js-flavor=js
 test('basic test', async ({ page }) => {
   ...
 ```
 
-```ts
+```js js-flavor=ts
 test('basic test', async ({ page }) => {
   ...
 ```
@@ -108,13 +108,13 @@ If you are familiar with test runners like Jest, Mocha and Ava, you will find th
 
 You can focus some tests. When there are focused tests, only they run.
 
-```js
+```js js-flavor=js
 test.only('focus this test', async ({ page }) => {
   // Run only focused tests in the entire project.
 });
 ```
 
-```ts
+```js js-flavor=ts
 test.only('focus this test', async ({ page }) => {
   // Run only focused tests in the entire project.
 });
@@ -124,13 +124,13 @@ test.only('focus this test', async ({ page }) => {
 
 You can skip certain test based on the condition.
 
-```js
+```js js-flavor=js
 test('skip this test', async ({ page, browserName }) => {
   test.skip(browserName === 'firefox', 'Still working on it');
 });
 ```
 
-```ts
+```js js-flavor=ts
 test('skip this test', async ({ page, browserName }) => {
   test.skip(browserName === 'firefox', 'Still working on it');
 });
@@ -139,7 +139,7 @@ test('skip this test', async ({ page, browserName }) => {
 ### Group tests
 
 You can group tests to give them a logical name or to scope before/after hooks to the group.
-```js
+```js js-flavor=js
 const { test, expect } = require('playwright/test');
 
 test.describe('two tests', () => {
@@ -153,7 +153,7 @@ test.describe('two tests', () => {
 });
 ```
 
-```ts
+```js js-flavor=ts
 import { test, expect } from 'playwright/test';
 
 test.describe('two tests', () => {
@@ -172,7 +172,7 @@ test.describe('two tests', () => {
 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 js-flavor=js
 // example.spec.js
 const { test, expect } = require('playwright/test');
 
@@ -189,7 +189,7 @@ test.describe('feature foo', () => {
 });
 ```
 
-```ts
+```js js-flavor=ts
 // example.spec.ts
 import { test, expect } from 'playwright/test';
 
@@ -218,7 +218,7 @@ Combine `expect` with various Playwright methods to create expectations for your
 - [`method: Page.screenshot`]
 - Find out more in the [assertions](./assertions.md) guide
 
-```js
+```js js-flavor=js
 // example.spec.js
 const { test, expect } = require('playwright/test');
 
@@ -243,7 +243,7 @@ test('my test', async ({ page }) => {
 });
 ```
 
-```ts
+```js js-flavor=ts
 // example.spec.ts
 import { test, expect } from 'playwright/test';
 
@@ -323,7 +323,7 @@ So far, we've looked at the zero-config operation of Playwright Test. For a real
 
 Create `playwright.config.js` (or `playwright.config.ts`) to configure your tests. You can specify browser launch options, run tests in multiple browsers and much more with the config. Here is an example configuration that runs every test in Chromium, Firefox and WebKit. Look for more options in the [configuration section](./test-configuration.md).
 
-```js
+```js js-flavor=js
 module.exports = {
   // Each test is given 30 seconds.
   timeout: 30000,
@@ -338,7 +338,7 @@ module.exports = {
 };
 ```
 
-```ts
+```js js-flavor=ts
 import { PlaywrightTestConfig } from 'playwright/test';
 
 const config: PlaywrightTestConfig = {

docs/src/test-parallel.md

@@ -31,7 +31,7 @@ You can control the maximum number of worker processes via [command line](./test
   ```
 
 - In the configuration file
-  ```js
+  ```js js-flavor=js
   // playwright.config.js
   module.exports = {
     // Limit the number of workers on CI, use default locally
@@ -39,7 +39,7 @@ You can control the maximum number of worker processes via [command line](./test
   };
   ```
 
-  ```ts
+  ```js js-flavor=ts
   // playwright.config.ts
   import { PlaywrightTestConfig } from 'playwright/test';
 

docs/src/test-pom.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 js-flavor=js
 // playwright-dev-page.js
 exports.PlaywrightDevPage = class PlaywrightDevPage {
   constructor(page: Page) {
@@ -36,7 +36,7 @@ exports.PlaywrightDevPage = class PlaywrightDevPage {
 }
 ```
 
-```ts
+```js js-flavor=ts
 // playwright-dev-page.ts
 import type { Page } from 'playwright';
 
@@ -71,7 +71,7 @@ export class PlaywrightDevPage {
 
 Now we can use the `PlaywrightDevPage` class in our tests.
 
-```js
+```js js-flavor=js
 // example.spec.js
 const { test, expect } = require('playwright/test');
 const { PlaywrightDevPage } = require('./playwright-dev-page');
@@ -107,7 +107,7 @@ test('Core Concepts table of contents', async ({ page }) => {
 });
 ```
 
-```ts
+```js js-flavor=ts
 // example.spec.ts
 import { test, expect } from 'playwright/test';
 import { PlaywrightDevPage } from './playwright-dev-page';

docs/src/test-reporters.md

@@ -16,14 +16,14 @@ npx playwright test --reporter=line
 
 For more control, you can specify reporters programmatically in the [configuration file](./test-configuration.md).
 
-```js
+```js js-flavor=js
 // playwright.config.js
 module.exports = {
   reporter: 'line',
 };
 ```
 
-```ts
+```js js-flavor=ts
 // playwright.config.ts
 import { PlaywrightTestConfig } from 'playwright/test';
 
@@ -35,7 +35,7 @@ export default config;
 
 You can use different reporters locally and on CI.
 
-```js
+```js js-flavor=js
 // playwright.config.js
 module.exports = {
   reporter: !process.env.CI
@@ -46,7 +46,7 @@ module.exports = {
 };
 ```
 
-```ts
+```js js-flavor=ts
 // playwright.config.ts
 import { PlaywrightTestConfig } from 'playwright/test';
 
@@ -72,14 +72,14 @@ List reporter is default. It prints a line for each test being run.
 npx playwright test --reporter=list
 ```
 
-```js
+```js js-flavor=js
 // playwright.config.js
 module.exports = {
   reporter: 'list',
 };
 ```
 
-```ts
+```js js-flavor=ts
 // playwright.config.ts
 import { PlaywrightTestConfig } from 'playwright/test';
 
@@ -114,14 +114,14 @@ Line reporter is more concise than the list reporter. It uses a single line to r
 npx playwright test --reporter=line
 ```
 
-```js
+```js js-flavor=js
 // playwright.config.js
 module.exports = {
   reporter: 'line',
 };
 ```
 
-```ts
+```js js-flavor=ts
 // playwright.config.ts
 import { PlaywrightTestConfig } from 'playwright/test';
 
@@ -153,14 +153,14 @@ Dot reporter is very concise - it only produces a single character per successfu
 npx playwright test --reporter=dot
 ```
 
-```js
+```js js-flavor=js
 // playwright.config.js
 module.exports = {
   reporter: 'dot',
 };
 ```
 
-```ts
+```js js-flavor=ts
 // playwright.config.ts
 import { PlaywrightTestConfig } from 'playwright/test';
 
@@ -187,14 +187,14 @@ PLAYWRIGHT_JSON_OUTPUT_NAME=results.json npx playwright test --reporter=json,dot
 ```
 
 In configuration file, pass options directly:
-```js
+```js js-flavor=js
 // playwright.config.js
 module.exports = {
   reporter: { name: 'json', outputFile: 'results.json' },
 };
 ```
 
-```ts
+```js js-flavor=ts
 // playwright.config.ts
 import { PlaywrightTestConfig } from 'playwright/test';
 
@@ -214,14 +214,14 @@ PLAYWRIGHT_JUNIT_OUTPUT_NAME=results.xml npx playwright test --reporter=junit,li
 ```
 
 In configuration file, pass options directly:
-```js
+```js js-flavor=js
 // playwright.config.js
 module.exports = {
   reporter: { name: 'junit', outputFile: 'results.xml' },
 };
 ```
 
-```ts
+```js js-flavor=ts
 // playwright.config.ts
 import { PlaywrightTestConfig } from 'playwright/test';
 

docs/src/test-retries.md

@@ -9,14 +9,14 @@ Playwright Test will retry tests if they failed. Pass the maximum number of retr
 npx playwright test --retries=3
 ```
 
-```js
+```js js-flavor=js
 // playwright.config.js
 module.exports = {
   retries: 3,
 };
 ```
 
-```ts
+```js js-flavor=ts
 // playwright.config.ts
 import { PlaywrightTestConfig } from 'playwright/test';
 

docs/src/test-snapshots.md

@@ -5,7 +5,7 @@ title: "Visual comparisons"
 
 Playwright Test includes the ability to produce and visually compare screenshots using `expect(value).toMatchSnapshot()`. On first execution, Playwright test will generate reference screenshots. Subsequent runs will compare against the reference.
 
-```js
+```js js-flavor=js
 // example.spec.js
 const { test, expect } = require('playwright/test');
 
@@ -15,7 +15,7 @@ test('example test', async ({ page }) => {
 });
 ```
 
-```ts
+```js js-flavor=ts
 // example.spec.ts
 import { test, expect } from 'playwright/test';
 
@@ -33,7 +33,7 @@ npx playwright test --update-snapshots
 
 Playwright Test uses the [pixelmatch](https://github.com/mapbox/pixelmatch) library. You can pass comparison `threshold` as an option.
 
-```js
+```js js-flavor=js
 // example.spec.js
 const { test, expect } = require('playwright/test');
 
@@ -43,7 +43,7 @@ test('example test', async ({ page }) => {
 });
 ```
 
-```ts
+```js js-flavor=ts
 // example.spec.ts
 import { test, expect } from 'playwright/test';
 
@@ -57,7 +57,7 @@ Apart from screenshots, `expect(value).toMatchSnapshot()` can also be used to co
 
 Here we compare text content against the reference.
 
-```js
+```js js-flavor=js
 // example.spec.js
 const { test, expect } = require('playwright/test');
 
@@ -67,7 +67,7 @@ test('example test', async ({ page }) => {
 });
 ```
 
-```ts
+```js js-flavor=ts
 // example.spec.ts
 import { test, expect } from 'playwright/test';