From d5881b8d4843a5beccb3728276c017597427d706 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Fri, 23 Dec 2022 10:57:29 +0100
Subject: [PATCH] docs: test runner first inside Node.js docs (#19659)

---
 docs/src/emulation.md | 39 +++++++++++++++-------------
 docs/src/network.md   | 60 +++++++++++++++++++++++++++++--------------
 2 files changed, 62 insertions(+), 37 deletions(-)

diff --git a/docs/src/emulation.md b/docs/src/emulation.md
index fab9d3c961..f208beac31 100644
--- a/docs/src/emulation.md
+++ b/docs/src/emulation.md
@@ -420,30 +420,33 @@ await context.GrantPermissionsAsync(new[] { "geolocation" });
 Allow notifications for a specific domain.
 
 ```js tab=js-js
-// @ts-check
+const { test } = require('@playwright/test');
 
-/** @type {import('@playwright/test').PlaywrightTestConfig} */
-const config = {
-  use: {
-    permissions: ['notifications'], {origin: 'https://skype.com'},
-  },
-};
+test.beforeEach(async ({ context }) => {
+  // Runs before each test and signs in each page.
+  await context.grantPermissions(['notifications'], { origin: 'https://skype.com' });
+});
 
-module.exports = config;
+test('first', async ({ page }) => {
+  // page has notifications permission for https://skype.com.
+});
 ```
 
 ```js tab=js-ts
-import type { PlaywrightTestConfig } from '@playwright/test';
-const config: PlaywrightTestConfig = {
-  use: {
-    permissions: ['notifications'], {origin: 'https://skype.com'},
-  },
-};
-export default config;
+import { test } from '@playwright/test';
+
+test.beforeEach(async ({ context }) => {
+  // Runs before each test and signs in each page.
+  await context.grantPermissions(['notifications'], { origin: 'https://skype.com' });
+});
+
+test('first', async ({ page }) => {
+  // page has notifications permission for https://skype.com.
+});
 ```
 
 ```js tab=js-library
-await context.grantPermissions(['notifications'], {origin: 'https://skype.com'} );
+await context.grantPermissions(['notifications'], { origin: 'https://skype.com' });
 ```
 
 ```java
@@ -563,7 +566,7 @@ test.use({
 
 test('my test with geolocation', async ({ page, context }) => {
   // overwrite the location for this test
-  context.setGeolocation({ longitude: 29.979097, latitude: 31.134256 });
+  await context.setGeolocation({ longitude: 29.979097, latitude: 31.134256 });
 });
 ```
 
@@ -577,7 +580,7 @@ test.use({
 
 test('my test with geolocation', async ({ page, context }) => {
   // overwrite the location for this test
-  context.setGeolocation({ longitude: 29.979097, latitude: 31.134256 });
+  await context.setGeolocation({ longitude: 29.979097, latitude: 31.134256 });
 });
 ```
 
diff --git a/docs/src/network.md b/docs/src/network.md
index a08cb5a437..71d6bd3456 100644
--- a/docs/src/network.md
+++ b/docs/src/network.md
@@ -11,6 +11,7 @@ Playwright provides APIs to **monitor** and **modify** network traffic, both HTT
 Perform HTTP Authentication.
 
 ```js tab=js-ts
+import type { PlaywrightTestConfig } from '@playwright/test';
 const config: PlaywrightTestConfig = {
   use: {
     httpCredentials: {
@@ -18,7 +19,8 @@ const config: PlaywrightTestConfig = {
       password: 'pa55w0rd',
     }
   }
-}
+};
+export default config;
 ```
 
 ```js tab=js-library
@@ -77,7 +79,21 @@ bypass proxy for.
 
 Here is an example of a global proxy:
 
-```js
+```js tab=js-ts
+import type { PlaywrightTestConfig } from '@playwright/test';
+const config: PlaywrightTestConfig = {
+  use: {
+    proxy: {
+      server: 'http://myproxy.com:3128',
+      username: 'usr',
+      password: 'pwd'
+    }
+  }
+};
+export default config;
+```
+
+```js tab=js-library
 const browser = await chromium.launch({
   proxy: {
     server: 'http://myproxy.com:3128',
@@ -125,7 +141,23 @@ await using var browser = await BrowserType.LaunchAsync(new()
 
 When specifying proxy for each context individually, **Chromium on Windows** needs a hint that proxy will be set. This is done via passing a non-empty proxy server to the browser itself. Here is an example of a context-specific proxy:
 
-```js
+```js tab=js-ts
+import type { PlaywrightTestConfig } from '@playwright/test';
+const config: PlaywrightTestConfig = {
+  use: {
+    launchOptions: {
+      // Browser proxy option is required for Chromium on Windows.
+      proxy: { server: 'per-context' }
+    },
+    proxy: {
+      server: 'http://myproxy.com:3128',
+    }
+  }
+};
+export default config;
+```
+
+```js tab=js-library
 const browser = await chromium.launch({
   // Browser proxy option is required for Chromium on Windows.
   proxy: { server: 'per-context' }
@@ -173,21 +205,11 @@ using var context = await Browser.NewContextAsync(new()
 You can monitor all the [Request]s and [Response]s:
 
 ```js
-const { chromium, webkit, firefox } = require('playwright');
+// Subscribe to 'request' and 'response' events.
+page.on('request', request => console.log('>>', request.method(), request.url()));
+page.on('response', response => console.log('<<', response.status(), response.url()));
 
-(async () => {
-  const browser = await chromium.launch();
-  const page = await browser.newPage();
-
-  // Subscribe to 'request' and 'response' events.
-  page.on('request', request =>
-      console.log('>>', request.method(), request.url()));
-  page.on('response', response =>
-      console.log('<<', response.status(), response.url()));
-  await page.goto('https://example.com');
-
-  await browser.close();
-})();
+await page.goto('https://example.com');
 ```
 
 ```java
@@ -437,11 +459,11 @@ await page.GotoAsync("https://example.com");
 await page.route('**/*', route => {
   const headers = route.request().headers();
   delete headers['X-Secret'];
-  route.continue({headers});
+  route.continue({ headers });
 });
 
 // Continue requests as POST.
-await page.route('**/*', route => route.continue({method: 'POST'}));
+await page.route('**/*', route => route.continue({ method: 'POST' }));
 ```
 
 ```java