From 7a551b6413b36b808f381997f103b8009b68d076 Mon Sep 17 00:00:00 2001
From: nav-2d <navdeep.singh2088@gmail.com>
Date: Sat, 10 Sep 2022 19:23:09 -0700
Subject: [PATCH 1/3] docs(intro-section): fix links

---
 docs/src/codegen-intro.md    | 2 +-
 docs/src/intro-js.md         | 2 +-
 docs/src/running-tests-js.md | 2 +-
 docs/src/writing-tests-js.md | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/codegen-intro.md b/docs/src/codegen-intro.md
index 6d715d44c73c9..bee78d55bfa98 100644
--- a/docs/src/codegen-intro.md
+++ b/docs/src/codegen-intro.md
@@ -46,4 +46,4 @@ To learn more about generating tests check out or detailed guide on [Codegen](./
 
 ## What's Next
 
-- [See a trace of your tests](./trace-viewer.md)
+- [See a trace of your tests](./trace-viewer-intro.md)
diff --git a/docs/src/intro-js.md b/docs/src/intro-js.md
index 954dda2b6f3cc..c55208492a408 100644
--- a/docs/src/intro-js.md
+++ b/docs/src/intro-js.md
@@ -100,5 +100,5 @@ npx playwright show-report
 
 - [Write tests using web first assertions, page fixtures and locators](./writing-tests.md)
 - [Run single tests, multiple tests, headed mode](./running-tests.md)
-- [Generate tests with Codegen](./codegen.md)
+- [Generate tests with Codegen](./codegen-intro.md)
 - [See a trace of your tests](./trace-viewer-intro.md)
diff --git a/docs/src/running-tests-js.md b/docs/src/running-tests-js.md
index e2bf3f9f9beb3..61c66c03b42db 100644
--- a/docs/src/running-tests-js.md
+++ b/docs/src/running-tests-js.md
@@ -104,5 +104,5 @@ You can click on each test and explore the tests errors as well as each step of
 
 ## What's Next
 
-- [Generate tests with Codegen](./codegen.md)
+- [Generate tests with Codegen](./codegen-intro.md)
 - [See a trace of your tests](./trace-viewer-intro.md)
diff --git a/docs/src/writing-tests-js.md b/docs/src/writing-tests-js.md
index 6ed96a4667685..7aaa78dc3f899 100644
--- a/docs/src/writing-tests-js.md
+++ b/docs/src/writing-tests-js.md
@@ -145,5 +145,5 @@ test.describe("navigation", () => {
 ## What's Next
 
 - [Run single tests, multiple tests, headed mode](./running-tests.md)
-- [Generate tests with Codegen](./codegen.md)
+- [Generate tests with Codegen](./codegen-intro.md)
 - [See a trace of your tests](./trace-viewer-intro.md)
\ No newline at end of file

From c8ce031889ada0226f72b8490b9a291d2dc9428a Mon Sep 17 00:00:00 2001
From: nav-2d <navdeep.singh2088@gmail.com>
Date: Sat, 10 Sep 2022 19:58:59 -0700
Subject: [PATCH 2/3] docs(intro-section): add spacing

---
 docs/src/test-reporters-js.md | 227 ++++++++++++++++++++--------------
 1 file changed, 135 insertions(+), 92 deletions(-)

diff --git a/docs/src/test-reporters-js.md b/docs/src/test-reporters-js.md
index 80780775877b6..42bb0ac181735 100644
--- a/docs/src/test-reporters-js.md
+++ b/docs/src/test-reporters-js.md
@@ -5,7 +5,6 @@ title: "Reporters"
 
 Playwright Test comes with a few built-in reporters for different needs and ability to provide custom reporters. The easiest way to try out built-in reporters is to pass `--reporter` [command line option](./test-cli.md).
 
-
 ```bash
 npx playwright test --reporter=line
 ```
@@ -18,7 +17,7 @@ For more control, you can specify reporters programmatically in the [configurati
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: 'line',
+  reporter: "line",
 };
 
 module.exports = config;
@@ -26,17 +25,17 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from '@playwright/test';
+import type { PlaywrightTestConfig } from "@playwright/test";
 
 const config: PlaywrightTestConfig = {
-  reporter: 'line',
+  reporter: "line",
 };
 export default config;
 ```
 
 ### Multiple reporters
 
-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.
+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 tab=js-js
 // playwright.config.js
@@ -44,10 +43,7 @@ You can use multiple reporters at the same time. For example  you can use`'list'
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: [
-    ['list'],
-    ['json', {  outputFile: 'test-results.json' }]
-  ],
+  reporter: [["list"], ["json", { outputFile: "test-results.json" }]],
 };
 
 module.exports = config;
@@ -55,13 +51,10 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from '@playwright/test';
+import type { PlaywrightTestConfig } from "@playwright/test";
 
 const config: PlaywrightTestConfig = {
-  reporter: [
-    ['list'],
-    ['json', {  outputFile: 'test-results.json' }]
-  ],
+  reporter: [["list"], ["json", { outputFile: "test-results.json" }]],
 };
 export default config;
 ```
@@ -77,7 +70,7 @@ You can use different reporters locally and on CI. For example, using concise `'
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
   // Concise 'dot' for CI, default 'list' when running locally
-  reporter: process.env.CI ? 'dot' : 'list',
+  reporter: process.env.CI ? "dot" : "list",
 };
 
 module.exports = config;
@@ -85,11 +78,11 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from '@playwright/test';
+import type { PlaywrightTestConfig } from "@playwright/test";
 
 const config: PlaywrightTestConfig = {
   // Concise 'dot' for CI, default 'list' when running locally
-  reporter: process.env.CI ? 'dot' : 'list',
+  reporter: process.env.CI ? "dot" : "list",
 };
 export default config;
 ```
@@ -112,7 +105,7 @@ npx playwright test --reporter=list
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: 'list',
+  reporter: "list",
 };
 
 module.exports = config;
@@ -120,15 +113,16 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from '@playwright/test';
+import type { PlaywrightTestConfig } from "@playwright/test";
 
 const config: PlaywrightTestConfig = {
-  reporter: 'list',
+  reporter: "list",
 };
 export default config;
 ```
 
 Here is an example output in the middle of a test run. Failures will be listed at the end.
+
 ```bash
 npx playwright test --reporter=list
 Running 124 tests using 6 workers
@@ -159,7 +153,7 @@ npx playwright test --reporter=line
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: 'line',
+  reporter: "line",
 };
 
 module.exports = config;
@@ -167,15 +161,16 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from '@playwright/test';
+import type { PlaywrightTestConfig } from "@playwright/test";
 
 const config: PlaywrightTestConfig = {
-  reporter: 'line',
+  reporter: "line",
 };
 export default config;
 ```
 
 Here is an example output in the middle of a test run. Failures are reported inline.
+
 ```bash
 npx playwright test --reporter=line
 Running 124 tests using 6 workers
@@ -203,7 +198,7 @@ npx playwright test --reporter=dot
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: 'dot',
+  reporter: "dot",
 };
 
 module.exports = config;
@@ -211,15 +206,16 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from '@playwright/test';
+import type { PlaywrightTestConfig } from "@playwright/test";
 
 const config: PlaywrightTestConfig = {
-  reporter: 'dot',
+  reporter: "dot",
 };
 export default config;
 ```
 
 Here is an example output in the middle of a test run. Failures will be listed at the end.
+
 ```bash
 npx playwright test --reporter=dot
 Running 124 tests using 6 workers
@@ -244,7 +240,7 @@ By default, HTML report is opened automatically if some of the tests failed. You
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: [ ['html', { open: 'never' }] ],
+  reporter: [["html", { open: "never" }]],
 };
 
 module.exports = config;
@@ -252,10 +248,10 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from '@playwright/test';
+import type { PlaywrightTestConfig } from "@playwright/test";
 
 const config: PlaywrightTestConfig = {
-  reporter: [ ['html', { open: 'never' }] ],
+  reporter: [["html", { open: "never" }]],
 };
 export default config;
 ```
@@ -264,13 +260,14 @@ 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 tab=js-js
 // playwright.config.js
 // @ts-check
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: [ ['html', { outputFolder: 'my-report' }] ],
+  reporter: [["html", { outputFolder: "my-report" }]],
 };
 
 module.exports = config;
@@ -278,10 +275,10 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from '@playwright/test';
+import type { PlaywrightTestConfig } from "@playwright/test";
 
 const config: PlaywrightTestConfig = {
-  reporter: [ ['html', { outputFolder: 'my-report' }] ],
+  reporter: [["html", { outputFolder: "my-report" }]],
 };
 export default config;
 ```
@@ -300,7 +297,6 @@ npx playwright show-report my-report
 
 > The `html` reporter currently does not support merging reports generated across multiple [`--shards`](./test-parallel.md#shard-tests-between-multiple-machines) into a single report. See [this](https://github.com/microsoft/playwright/issues/10437) issue for available third party solutions.
 
-
 ### JSON reporter
 
 JSON reporter produces an object with all information about the test run.
@@ -322,13 +318,14 @@ npx playwright test --reporter=json
 ```
 
 In configuration file, pass options directly:
+
 ```js tab=js-js
 // playwright.config.js
 // @ts-check
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: [ ['json', { outputFile: 'results.json' }] ],
+  reporter: [["json", { outputFile: "results.json" }]],
 };
 
 module.exports = config;
@@ -336,10 +333,10 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from '@playwright/test';
+import type { PlaywrightTestConfig } from "@playwright/test";
 
 const config: PlaywrightTestConfig = {
-  reporter: [ ['json', { outputFile: 'results.json' }] ],
+  reporter: [["json", { outputFile: "results.json" }]],
 };
 export default config;
 ```
@@ -365,13 +362,14 @@ npx playwright test --reporter=junit
 ```
 
 In configuration file, pass options directly:
+
 ```js tab=js-js
 // playwright.config.js
 // @ts-check
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: [ ['junit', { outputFile: 'results.xml' }] ],
+  reporter: [["junit", { outputFile: "results.xml" }]],
 };
 
 module.exports = config;
@@ -379,10 +377,10 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from '@playwright/test';
+import type { PlaywrightTestConfig } from "@playwright/test";
 
 const config: PlaywrightTestConfig = {
-  reporter: [ ['junit', { outputFile: 'results.xml' }] ],
+  reporter: [["junit", { outputFile: "results.xml" }]],
 };
 export default config;
 ```
@@ -404,18 +402,18 @@ const xrayOptions = {
 
   // By default, annotation is reported as <property name='' value=''>.
   // These annotations are reported as <property name=''>value</property>.
-  textContentAnnotations: ['test_description'],
+  textContentAnnotations: ["test_description"],
 
   // This will create a "testrun_evidence" property that contains all attachments. Each attachment is added as an inner <item> element.
   // Disables [[ATTACHMENT|path]] in the <system-out>.
-  embedAttachmentsAsProperty: 'testrun_evidence',
+  embedAttachmentsAsProperty: "testrun_evidence",
 
   // Where to put the report.
-  outputFile: './xray-report.xml'
+  outputFile: "./xray-report.xml",
 };
 
 const config = {
-  reporter: [ ['junit', xrayOptions] ]
+  reporter: [["junit", xrayOptions]],
 };
 
 module.exports = config;
@@ -423,7 +421,7 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import { PlaywrightTestConfig } from '@playwright/test';
+import { PlaywrightTestConfig } from "@playwright/test";
 
 // JUnit reporter config for Xray
 const xrayOptions = {
@@ -432,18 +430,18 @@ const xrayOptions = {
 
   // By default, annotation is reported as <property name='' value=''>.
   // These annotations are reported as <property name=''>value</property>.
-  textContentAnnotations: ['test_description'],
+  textContentAnnotations: ["test_description"],
 
   // This will create a "testrun_evidence" property that contains all attachments. Each attachment is added as an inner <item> element.
   // Disables [[ATTACHMENT|path]] in the <system-out>.
-  embedAttachmentsAsProperty: 'testrun_evidence',
+  embedAttachmentsAsProperty: "testrun_evidence",
 
   // Where to put the report.
-  outputFile: './xray-report.xml'
+  outputFile: "./xray-report.xml",
 };
 
 const config: PlaywrightTestConfig = {
-  reporter: [ ['junit', xrayOptions] ]
+  reporter: [["junit", xrayOptions]],
 };
 
 export default config;
@@ -454,26 +452,44 @@ Annotations can be used to, for example, link a Playwright test with an existing
 
 ```js tab=js-js
 // @ts-check
-const { test } = require('@playwright/test');
-
-test('using specific annotations for passing test metadata to Xray', async ({}, testInfo) => {
-  testInfo.annotations.push({ type: 'test_id', description: '1234' });
-  testInfo.annotations.push({ type: 'test_key', description: 'CALC-2' });
-  testInfo.annotations.push({ type: 'test_summary', description: 'sample summary' });
-  testInfo.annotations.push({ type: 'requirements', description: 'CALC-5,CALC-6' });
-  testInfo.annotations.push({ type: 'test_description', description: 'sample description' });
+const { test } = require("@playwright/test");
+
+test("using specific annotations for passing test metadata to Xray", async ({}, testInfo) => {
+  testInfo.annotations.push({ type: "test_id", description: "1234" });
+  testInfo.annotations.push({ type: "test_key", description: "CALC-2" });
+  testInfo.annotations.push({
+    type: "test_summary",
+    description: "sample summary",
+  });
+  testInfo.annotations.push({
+    type: "requirements",
+    description: "CALC-5,CALC-6",
+  });
+  testInfo.annotations.push({
+    type: "test_description",
+    description: "sample description",
+  });
 });
 ```
 
 ```js tab=js-ts
-import { test } from '@playwright/test';
-
-test('using specific annotations for passing test metadata to Xray', async ({}, testInfo) => {
-  testInfo.annotations.push({ type: 'test_id', description: '1234' });
-  testInfo.annotations.push({ type: 'test_key', description: 'CALC-2' });
-  testInfo.annotations.push({ type: 'test_summary', description: 'sample summary' });
-  testInfo.annotations.push({ type: 'requirements', description: 'CALC-5,CALC-6' });
-  testInfo.annotations.push({ type: 'test_description', description: 'sample description' });
+import { test } from "@playwright/test";
+
+test("using specific annotations for passing test metadata to Xray", async ({}, testInfo) => {
+  testInfo.annotations.push({ type: "test_id", description: "1234" });
+  testInfo.annotations.push({ type: "test_key", description: "CALC-2" });
+  testInfo.annotations.push({
+    type: "test_summary",
+    description: "sample summary",
+  });
+  testInfo.annotations.push({
+    type: "requirements",
+    description: "CALC-5,CALC-6",
+  });
+  testInfo.annotations.push({
+    type: "test_description",
+    description: "sample description",
+  });
 });
 ```
 
@@ -490,7 +506,15 @@ The following configuration sample enables embedding attachments by using the `t
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: [ ['junit', { embedAttachmentsAsProperty: 'testrun_evidence', outputFile: 'results.xml' }] ],
+  reporter: [
+    [
+      "junit",
+      {
+        embedAttachmentsAsProperty: "testrun_evidence",
+        outputFile: "results.xml",
+      },
+    ],
+  ],
 };
 
 module.exports = config;
@@ -499,9 +523,17 @@ module.exports = config;
 ```js tab=js-ts
 // playwright.config.js
 
-import { PlaywrightTestConfig } from '@playwright/test';
+import { PlaywrightTestConfig } from "@playwright/test";
 const config: PlaywrightTestConfig = {
-  reporter: [ ['junit', { embedAttachmentsAsProperty: 'testrun_evidence', outputFile: 'results.xml' }] ],
+  reporter: [
+    [
+      "junit",
+      {
+        embedAttachmentsAsProperty: "testrun_evidence",
+        outputFile: "results.xml",
+      },
+    ],
+  ],
 };
 
 export default config;
@@ -511,24 +543,36 @@ The following test adds attachments:
 
 ```js tab=js-js
 // @ts-check
-const { test } = require('@playwright/test');
-
-test('embed attachments, including its content, on the JUnit report', async ({}, testInfo) => {
-  const file = testInfo.outputPath('evidence1.txt');
-  require('fs').writeFileSync(file, 'hello', 'utf8');
-  await testInfo.attach('evidence1.txt', { path: file, contentType: 'text/plain' });
-  await testInfo.attach('evidence2.txt', { body: Buffer.from('world'), contentType: 'text/plain' });
+const { test } = require("@playwright/test");
+
+test("embed attachments, including its content, on the JUnit report", async ({}, testInfo) => {
+  const file = testInfo.outputPath("evidence1.txt");
+  require("fs").writeFileSync(file, "hello", "utf8");
+  await testInfo.attach("evidence1.txt", {
+    path: file,
+    contentType: "text/plain",
+  });
+  await testInfo.attach("evidence2.txt", {
+    body: Buffer.from("world"),
+    contentType: "text/plain",
+  });
 });
 ```
 
 ```js tab=js-ts
-import { test } from '@playwright/test';
-
-test('embed attachments, including its content, on the JUnit report', async ({}, testInfo) => {
-  const file = testInfo.outputPath('evidence1.txt');
-  require('fs').writeFileSync(file, 'hello', 'utf8');
-  await testInfo.attach('evidence1.txt', { path: file, contentType: 'text/plain' });
-  await testInfo.attach('evidence2.txt', { body: Buffer.from('world'), contentType: 'text/plain' });
+import { test } from "@playwright/test";
+
+test("embed attachments, including its content, on the JUnit report", async ({}, testInfo) => {
+  const file = testInfo.outputPath("evidence1.txt");
+  require("fs").writeFileSync(file, "hello", "utf8");
+  await testInfo.attach("evidence1.txt", {
+    path: file,
+    contentType: "text/plain",
+  });
+  await testInfo.attach("evidence2.txt", {
+    body: Buffer.from("world"),
+    contentType: "text/plain",
+  });
 });
 ```
 
@@ -546,7 +590,7 @@ Note that all other reporters work on GitHub Actions as well, but do not provide
 const config = {
   // 'github' for GitHub Actions CI to generate annotations, plus a concise 'dot'
   // default 'list' when running locally
-  reporter: process.env.CI ? 'github' : 'list',
+  reporter: process.env.CI ? "github" : "list",
 };
 
 module.exports = config;
@@ -554,12 +598,12 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from '@playwright/test';
+import type { PlaywrightTestConfig } from "@playwright/test";
 
 const config: PlaywrightTestConfig = {
   // 'github' for GitHub Actions CI to generate annotations, plus a concise 'dot'
   // default 'list' when running locally
-  reporter: process.env.CI ? 'github' : 'list',
+  reporter: process.env.CI ? "github" : "list",
 };
 export default config;
 ```
@@ -596,7 +640,7 @@ module.exports = MyReporter;
 
 ```js tab=js-ts
 // my-awesome-reporter.ts
-import { Reporter } from '@playwright/test/reporter';
+import { Reporter } from "@playwright/test/reporter";
 
 class MyReporter implements Reporter {
   onBegin(config, suite) {
@@ -626,7 +670,7 @@ Now use this reporter with [`property: TestConfig.reporter`].
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: './my-awesome-reporter.js',
+  reporter: "./my-awesome-reporter.js",
 };
 
 module.exports = config;
@@ -634,17 +678,16 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from '@playwright/test';
+import type { PlaywrightTestConfig } from "@playwright/test";
 
 const config: PlaywrightTestConfig = {
-  reporter: './my-awesome-reporter.ts',
+  reporter: "./my-awesome-reporter.ts",
 };
 export default config;
 ```
 
-
 ## Third party reporter showcase
 
-* [Allure](https://www.npmjs.com/package/allure-playwright)
-* [Monocart](https://github.com/cenfun/monocart-reporter)
-* [Tesults](https://www.tesults.com/docs/playwright)
\ No newline at end of file
+- [Allure](https://www.npmjs.com/package/allure-playwright)
+- [Monocart](https://github.com/cenfun/monocart-reporter)
+- [Tesults](https://www.tesults.com/docs/playwright)

From d22f0d99960aa90690fa7c8f3a91bf0dcdc3f8cb Mon Sep 17 00:00:00 2001
From: nav-2d <navdeep.singh2088@gmail.com>
Date: Sun, 11 Sep 2022 10:56:27 -0700
Subject: [PATCH 3/3] docs(intro-section): fix formatting

---
 docs/src/test-reporters-js.md | 227 ++++++++++++++--------------------
 1 file changed, 92 insertions(+), 135 deletions(-)

diff --git a/docs/src/test-reporters-js.md b/docs/src/test-reporters-js.md
index 42bb0ac181735..b15fb5cd163bb 100644
--- a/docs/src/test-reporters-js.md
+++ b/docs/src/test-reporters-js.md
@@ -5,6 +5,7 @@ title: "Reporters"
 
 Playwright Test comes with a few built-in reporters for different needs and ability to provide custom reporters. The easiest way to try out built-in reporters is to pass `--reporter` [command line option](./test-cli.md).
 
+
 ```bash
 npx playwright test --reporter=line
 ```
@@ -17,7 +18,7 @@ For more control, you can specify reporters programmatically in the [configurati
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: "line",
+  reporter: 'line',
 };
 
 module.exports = config;
@@ -25,17 +26,17 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from "@playwright/test";
+import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
-  reporter: "line",
+  reporter: 'line',
 };
 export default config;
 ```
 
 ### Multiple reporters
 
-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.
+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 tab=js-js
 // playwright.config.js
@@ -43,7 +44,10 @@ You can use multiple reporters at the same time. For example you can use `'list'
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: [["list"], ["json", { outputFile: "test-results.json" }]],
+  reporter: [
+    ['list'],
+    ['json', {  outputFile: 'test-results.json' }]
+  ],
 };
 
 module.exports = config;
@@ -51,10 +55,13 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from "@playwright/test";
+import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
-  reporter: [["list"], ["json", { outputFile: "test-results.json" }]],
+  reporter: [
+    ['list'],
+    ['json', {  outputFile: 'test-results.json' }]
+  ],
 };
 export default config;
 ```
@@ -70,7 +77,7 @@ You can use different reporters locally and on CI. For example, using concise `'
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
   // Concise 'dot' for CI, default 'list' when running locally
-  reporter: process.env.CI ? "dot" : "list",
+  reporter: process.env.CI ? 'dot' : 'list',
 };
 
 module.exports = config;
@@ -78,11 +85,11 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from "@playwright/test";
+import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
   // Concise 'dot' for CI, default 'list' when running locally
-  reporter: process.env.CI ? "dot" : "list",
+  reporter: process.env.CI ? 'dot' : 'list',
 };
 export default config;
 ```
@@ -105,7 +112,7 @@ npx playwright test --reporter=list
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: "list",
+  reporter: 'list',
 };
 
 module.exports = config;
@@ -113,16 +120,15 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from "@playwright/test";
+import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
-  reporter: "list",
+  reporter: 'list',
 };
 export default config;
 ```
 
 Here is an example output in the middle of a test run. Failures will be listed at the end.
-
 ```bash
 npx playwright test --reporter=list
 Running 124 tests using 6 workers
@@ -153,7 +159,7 @@ npx playwright test --reporter=line
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: "line",
+  reporter: 'line',
 };
 
 module.exports = config;
@@ -161,16 +167,15 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from "@playwright/test";
+import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
-  reporter: "line",
+  reporter: 'line',
 };
 export default config;
 ```
 
 Here is an example output in the middle of a test run. Failures are reported inline.
-
 ```bash
 npx playwright test --reporter=line
 Running 124 tests using 6 workers
@@ -198,7 +203,7 @@ npx playwright test --reporter=dot
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: "dot",
+  reporter: 'dot',
 };
 
 module.exports = config;
@@ -206,16 +211,15 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from "@playwright/test";
+import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
-  reporter: "dot",
+  reporter: 'dot',
 };
 export default config;
 ```
 
 Here is an example output in the middle of a test run. Failures will be listed at the end.
-
 ```bash
 npx playwright test --reporter=dot
 Running 124 tests using 6 workers
@@ -240,7 +244,7 @@ By default, HTML report is opened automatically if some of the tests failed. You
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: [["html", { open: "never" }]],
+  reporter: [ ['html', { open: 'never' }] ],
 };
 
 module.exports = config;
@@ -248,10 +252,10 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from "@playwright/test";
+import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
-  reporter: [["html", { open: "never" }]],
+  reporter: [ ['html', { open: 'never' }] ],
 };
 export default config;
 ```
@@ -260,14 +264,13 @@ 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 tab=js-js
 // playwright.config.js
 // @ts-check
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: [["html", { outputFolder: "my-report" }]],
+  reporter: [ ['html', { outputFolder: 'my-report' }] ],
 };
 
 module.exports = config;
@@ -275,10 +278,10 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from "@playwright/test";
+import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
-  reporter: [["html", { outputFolder: "my-report" }]],
+  reporter: [ ['html', { outputFolder: 'my-report' }] ],
 };
 export default config;
 ```
@@ -297,6 +300,7 @@ npx playwright show-report my-report
 
 > The `html` reporter currently does not support merging reports generated across multiple [`--shards`](./test-parallel.md#shard-tests-between-multiple-machines) into a single report. See [this](https://github.com/microsoft/playwright/issues/10437) issue for available third party solutions.
 
+
 ### JSON reporter
 
 JSON reporter produces an object with all information about the test run.
@@ -318,14 +322,13 @@ npx playwright test --reporter=json
 ```
 
 In configuration file, pass options directly:
-
 ```js tab=js-js
 // playwright.config.js
 // @ts-check
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: [["json", { outputFile: "results.json" }]],
+  reporter: [ ['json', { outputFile: 'results.json' }] ],
 };
 
 module.exports = config;
@@ -333,10 +336,10 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from "@playwright/test";
+import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
-  reporter: [["json", { outputFile: "results.json" }]],
+  reporter: [ ['json', { outputFile: 'results.json' }] ],
 };
 export default config;
 ```
@@ -362,14 +365,13 @@ npx playwright test --reporter=junit
 ```
 
 In configuration file, pass options directly:
-
 ```js tab=js-js
 // playwright.config.js
 // @ts-check
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: [["junit", { outputFile: "results.xml" }]],
+  reporter: [ ['junit', { outputFile: 'results.xml' }] ],
 };
 
 module.exports = config;
@@ -377,10 +379,10 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from "@playwright/test";
+import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
-  reporter: [["junit", { outputFile: "results.xml" }]],
+  reporter: [ ['junit', { outputFile: 'results.xml' }] ],
 };
 export default config;
 ```
@@ -402,18 +404,18 @@ const xrayOptions = {
 
   // By default, annotation is reported as <property name='' value=''>.
   // These annotations are reported as <property name=''>value</property>.
-  textContentAnnotations: ["test_description"],
+  textContentAnnotations: ['test_description'],
 
   // This will create a "testrun_evidence" property that contains all attachments. Each attachment is added as an inner <item> element.
   // Disables [[ATTACHMENT|path]] in the <system-out>.
-  embedAttachmentsAsProperty: "testrun_evidence",
+  embedAttachmentsAsProperty: 'testrun_evidence',
 
   // Where to put the report.
-  outputFile: "./xray-report.xml",
+  outputFile: './xray-report.xml'
 };
 
 const config = {
-  reporter: [["junit", xrayOptions]],
+  reporter: [ ['junit', xrayOptions] ]
 };
 
 module.exports = config;
@@ -421,7 +423,7 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import { PlaywrightTestConfig } from "@playwright/test";
+import { PlaywrightTestConfig } from '@playwright/test';
 
 // JUnit reporter config for Xray
 const xrayOptions = {
@@ -430,18 +432,18 @@ const xrayOptions = {
 
   // By default, annotation is reported as <property name='' value=''>.
   // These annotations are reported as <property name=''>value</property>.
-  textContentAnnotations: ["test_description"],
+  textContentAnnotations: ['test_description'],
 
   // This will create a "testrun_evidence" property that contains all attachments. Each attachment is added as an inner <item> element.
   // Disables [[ATTACHMENT|path]] in the <system-out>.
-  embedAttachmentsAsProperty: "testrun_evidence",
+  embedAttachmentsAsProperty: 'testrun_evidence',
 
   // Where to put the report.
-  outputFile: "./xray-report.xml",
+  outputFile: './xray-report.xml'
 };
 
 const config: PlaywrightTestConfig = {
-  reporter: [["junit", xrayOptions]],
+  reporter: [ ['junit', xrayOptions] ]
 };
 
 export default config;
@@ -452,44 +454,26 @@ Annotations can be used to, for example, link a Playwright test with an existing
 
 ```js tab=js-js
 // @ts-check
-const { test } = require("@playwright/test");
-
-test("using specific annotations for passing test metadata to Xray", async ({}, testInfo) => {
-  testInfo.annotations.push({ type: "test_id", description: "1234" });
-  testInfo.annotations.push({ type: "test_key", description: "CALC-2" });
-  testInfo.annotations.push({
-    type: "test_summary",
-    description: "sample summary",
-  });
-  testInfo.annotations.push({
-    type: "requirements",
-    description: "CALC-5,CALC-6",
-  });
-  testInfo.annotations.push({
-    type: "test_description",
-    description: "sample description",
-  });
+const { test } = require('@playwright/test');
+
+test('using specific annotations for passing test metadata to Xray', async ({}, testInfo) => {
+  testInfo.annotations.push({ type: 'test_id', description: '1234' });
+  testInfo.annotations.push({ type: 'test_key', description: 'CALC-2' });
+  testInfo.annotations.push({ type: 'test_summary', description: 'sample summary' });
+  testInfo.annotations.push({ type: 'requirements', description: 'CALC-5,CALC-6' });
+  testInfo.annotations.push({ type: 'test_description', description: 'sample description' });
 });
 ```
 
 ```js tab=js-ts
-import { test } from "@playwright/test";
-
-test("using specific annotations for passing test metadata to Xray", async ({}, testInfo) => {
-  testInfo.annotations.push({ type: "test_id", description: "1234" });
-  testInfo.annotations.push({ type: "test_key", description: "CALC-2" });
-  testInfo.annotations.push({
-    type: "test_summary",
-    description: "sample summary",
-  });
-  testInfo.annotations.push({
-    type: "requirements",
-    description: "CALC-5,CALC-6",
-  });
-  testInfo.annotations.push({
-    type: "test_description",
-    description: "sample description",
-  });
+import { test } from '@playwright/test';
+
+test('using specific annotations for passing test metadata to Xray', async ({}, testInfo) => {
+  testInfo.annotations.push({ type: 'test_id', description: '1234' });
+  testInfo.annotations.push({ type: 'test_key', description: 'CALC-2' });
+  testInfo.annotations.push({ type: 'test_summary', description: 'sample summary' });
+  testInfo.annotations.push({ type: 'requirements', description: 'CALC-5,CALC-6' });
+  testInfo.annotations.push({ type: 'test_description', description: 'sample description' });
 });
 ```
 
@@ -506,15 +490,7 @@ The following configuration sample enables embedding attachments by using the `t
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: [
-    [
-      "junit",
-      {
-        embedAttachmentsAsProperty: "testrun_evidence",
-        outputFile: "results.xml",
-      },
-    ],
-  ],
+  reporter: [ ['junit', { embedAttachmentsAsProperty: 'testrun_evidence', outputFile: 'results.xml' }] ],
 };
 
 module.exports = config;
@@ -523,17 +499,9 @@ module.exports = config;
 ```js tab=js-ts
 // playwright.config.js
 
-import { PlaywrightTestConfig } from "@playwright/test";
+import { PlaywrightTestConfig } from '@playwright/test';
 const config: PlaywrightTestConfig = {
-  reporter: [
-    [
-      "junit",
-      {
-        embedAttachmentsAsProperty: "testrun_evidence",
-        outputFile: "results.xml",
-      },
-    ],
-  ],
+  reporter: [ ['junit', { embedAttachmentsAsProperty: 'testrun_evidence', outputFile: 'results.xml' }] ],
 };
 
 export default config;
@@ -543,36 +511,24 @@ The following test adds attachments:
 
 ```js tab=js-js
 // @ts-check
-const { test } = require("@playwright/test");
-
-test("embed attachments, including its content, on the JUnit report", async ({}, testInfo) => {
-  const file = testInfo.outputPath("evidence1.txt");
-  require("fs").writeFileSync(file, "hello", "utf8");
-  await testInfo.attach("evidence1.txt", {
-    path: file,
-    contentType: "text/plain",
-  });
-  await testInfo.attach("evidence2.txt", {
-    body: Buffer.from("world"),
-    contentType: "text/plain",
-  });
+const { test } = require('@playwright/test');
+
+test('embed attachments, including its content, on the JUnit report', async ({}, testInfo) => {
+  const file = testInfo.outputPath('evidence1.txt');
+  require('fs').writeFileSync(file, 'hello', 'utf8');
+  await testInfo.attach('evidence1.txt', { path: file, contentType: 'text/plain' });
+  await testInfo.attach('evidence2.txt', { body: Buffer.from('world'), contentType: 'text/plain' });
 });
 ```
 
 ```js tab=js-ts
-import { test } from "@playwright/test";
-
-test("embed attachments, including its content, on the JUnit report", async ({}, testInfo) => {
-  const file = testInfo.outputPath("evidence1.txt");
-  require("fs").writeFileSync(file, "hello", "utf8");
-  await testInfo.attach("evidence1.txt", {
-    path: file,
-    contentType: "text/plain",
-  });
-  await testInfo.attach("evidence2.txt", {
-    body: Buffer.from("world"),
-    contentType: "text/plain",
-  });
+import { test } from '@playwright/test';
+
+test('embed attachments, including its content, on the JUnit report', async ({}, testInfo) => {
+  const file = testInfo.outputPath('evidence1.txt');
+  require('fs').writeFileSync(file, 'hello', 'utf8');
+  await testInfo.attach('evidence1.txt', { path: file, contentType: 'text/plain' });
+  await testInfo.attach('evidence2.txt', { body: Buffer.from('world'), contentType: 'text/plain' });
 });
 ```
 
@@ -590,7 +546,7 @@ Note that all other reporters work on GitHub Actions as well, but do not provide
 const config = {
   // 'github' for GitHub Actions CI to generate annotations, plus a concise 'dot'
   // default 'list' when running locally
-  reporter: process.env.CI ? "github" : "list",
+  reporter: process.env.CI ? 'github' : 'list',
 };
 
 module.exports = config;
@@ -598,12 +554,12 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from "@playwright/test";
+import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
   // 'github' for GitHub Actions CI to generate annotations, plus a concise 'dot'
   // default 'list' when running locally
-  reporter: process.env.CI ? "github" : "list",
+  reporter: process.env.CI ? 'github' : 'list',
 };
 export default config;
 ```
@@ -640,7 +596,7 @@ module.exports = MyReporter;
 
 ```js tab=js-ts
 // my-awesome-reporter.ts
-import { Reporter } from "@playwright/test/reporter";
+import { Reporter } from '@playwright/test/reporter';
 
 class MyReporter implements Reporter {
   onBegin(config, suite) {
@@ -670,7 +626,7 @@ Now use this reporter with [`property: TestConfig.reporter`].
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-  reporter: "./my-awesome-reporter.js",
+  reporter: './my-awesome-reporter.js',
 };
 
 module.exports = config;
@@ -678,16 +634,17 @@ module.exports = config;
 
 ```js tab=js-ts
 // playwright.config.ts
-import type { PlaywrightTestConfig } from "@playwright/test";
+import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
-  reporter: "./my-awesome-reporter.ts",
+  reporter: './my-awesome-reporter.ts',
 };
 export default config;
 ```
 
+
 ## Third party reporter showcase
 
-- [Allure](https://www.npmjs.com/package/allure-playwright)
-- [Monocart](https://github.com/cenfun/monocart-reporter)
-- [Tesults](https://www.tesults.com/docs/playwright)
+* [Allure](https://www.npmjs.com/package/allure-playwright)
+* [Monocart](https://github.com/cenfun/monocart-reporter)
+* [Tesults](https://www.tesults.com/docs/playwright)
\ No newline at end of file