doc(network): reorder items in network docs

microsoft · Apr 20, 2020 · ef7815e · ef7815e
1 parent f6fec27
commit ef7815e
Show file tree

Hide file tree

Showing 6 changed files with 191 additions and 223 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -17,20 +17,20 @@
     - [Keys and shortcuts](./input.md#keys-and-shortcuts)
     - [Upload files](./input.md#upload-files)
     - [Focus element](./input.md#focus-element)
-1. Emulation
-    - User agent
-    - Viewport, color scheme
-    - Devices
-    - Locale & Timezone
-    - Geolocation
-    - Permissions
-1. Network
-    - Navigation & load
-    - Waiting for navigation
-    - Handling downloads
-    - Network events
-    - Mocking network
-    - Aborting requests
+1. [Emulation](./emulation.md)
+    - [User agent](./emulation.md#user-agent)
+    - [Viewport, color scheme](./emulation.md#viewport-color-scheme)
+    - [Devices](./emulation.md#select-options)
+    - [Locale & Timezone](./emulation.md#locale--timezone)
+    - [Permissions](./emulation.md#permissions)
+    - [Geolocation](./emulation.md#geolocation)
+1. [Network](./network.md)
+    - [HTTP Authentication](./network.md#http-authentication)
+    - [Handle file downloads](./network.md#handle-file-downloads)
+    - [Network events](./network.md#network-events)
+    - [Handle requests](./network.md#handle-requests)
+    - [Modify requests](./network.md#modify-requests)
+    - [Abort requests](./network.md#abort-requests)
 1. Scraping and verification
     - Screenshots
     - Evaluation

diff --git a/docs/core-concepts.md b/docs/core-concepts.md
@@ -36,6 +36,10 @@ await browser.close();
 Launching a browser instance can be expensive, and Playwright is designed to
 maximize what a single instance can do through multiple browser contexts.
 
+#### API reference
+
+- [class `Browser`](./api.md#class-browser)
+
 <br/>
 
 ## Browser contexts
@@ -65,6 +69,10 @@ const context = await browser.newContext({
 });
 ```
 
+#### API reference
+
+- [class `BrowserContext`](./api.md#class-browser-context)
+
 <br/>
 
 ## Pages and frames
@@ -92,6 +100,11 @@ const frame = page.frame('frame-login');
 await frame.fill('#username-input', 'John');
 ```
 
+#### API reference
+
+- [class `Page`](./api.md#class-page)
+- [class `Frame`](./api.md#class-frame)
+
 <br/>
 
 ## Selectors
@@ -142,6 +155,11 @@ await page.fill('#search', 'query');
 await page.click('#search');
 ```
 
+#### API reference
+
+- [page.click(selector[, options])](./api.md#pageclickselector-options)
+- [page.fill(selector, value[, options])](./api.md#pagefillselector-value-options)
+
 <br/>
 
 ## Execution contexts

diff --git a/docs/emulation.md b/docs/emulation.md
@@ -9,32 +9,33 @@ Playwright allows overriding various parameters of the device where the browser
 
 Most of these parameters are configured during the browser context construction, but some of them such as viewport size can be changed for individual pages.
 
-<br/>
+#### Contents
+- [User agent](#user-agent)
+- [Viewport, color scheme](#viewport-color-scheme)
+- [Devices](#select-options)
+- [Locale & Timezone](#locale--timezone)
+- [Permissions](#permissions)
+- [Geolocation](#geolocation)
 
-## Emulating popular devices
+<br/>
 
-Playwright comes with a registry of device parameters for selected mobile devices. It can be used to simulate browser behavior on a mobile device:
+## User agent
 
 ```js
-  const { chromium, devices } = require('playwright');
-  const browser = await chromium.launch();
-
-  const pixel2 = devices['Pixel 2'];
   const context = await browser.newContext({
-    ...pixel2,
+    userAgent: 'My user agent'
   });
 ```
 
-All pages created in the context above will share the same device parameters.
+All pages created in the context above will share the user agent specified.
 
 #### API reference
 
-- [`playwright.devices`](./api.md#playwrightdevices)
 - [`browser.newContext([options])`](./api.md#browsernewcontextoptions)
 
 <br/>
 
-## Configuring screen size, touch support, mobile viewport
+## Viewport, color scheme
 
 Create a context with custom viewport size:
 
@@ -66,18 +67,7 @@ Emulate desktop device with the high-DPI screen and touch support:
   });
 ```
 
-#### API reference
-
-- [`browser.newContext([options])`](./api.md#browsernewcontextoptions)
-- [`page.setViewportSize(viewportSize)`](./api.md#pagesetviewportsizeviewportsize)
-
-<br/>
-
-## Configuring color scheme
-
 Create device with the dark color scheme:
-
-
 ```js
   const context = await browser.newContext({
     colorScheme: 'dark'
@@ -93,48 +83,57 @@ Change color scheme for individual pages:
 #### API reference
 
 - [`browser.newContext([options])`](./api.md#browsernewcontextoptions)
-- [`page.emulateMedia([options])`](./api.md#pageemulatemediaoptions)
+- [`page.setViewportSize(viewportSize)`](./api.md#pagesetviewportsizeviewportsize)
 
 <br/>
 
-## Locale and timezone
+## Devices
+
+Playwright comes with a registry of device parameters for selected mobile devices. It can be used to simulate browser behavior on a mobile device:
 
 ```js
+  const { chromium, devices } = require('playwright');
+  const browser = await chromium.launch();
+
+  const pixel2 = devices['Pixel 2'];
   const context = await browser.newContext({
-    locale: 'de-DE',
-    timezoneId: 'Europe/Berlin',
+    ...pixel2,
   });
 ```
 
+All pages created in the context above will share the same device parameters.
+
 #### API reference
 
+- [`playwright.devices`](./api.md#playwrightdevices)
 - [`browser.newContext([options])`](./api.md#browsernewcontextoptions)
 
 <br/>
 
-## Geolocation
-Create a context with `"geolocation"` permissions granted:
+#### API reference
+
+- [`browser.newContext([options])`](./api.md#browsernewcontextoptions)
+- [`page.emulateMedia([options])`](./api.md#pageemulatemediaoptions)
+
+<br/>
+
+## Locale & timezone
+
 ```js
   const context = await browser.newContext({
-    geolocation: { longitude: 48.858455, latitude: 2.294474 },
-    permissions: ['geolocation']
+    locale: 'de-DE',
+    timezoneId: 'Europe/Berlin',
   });
 ```
-Change the location later:
-
-```js
-  await context.setGeolocation({ longitude: 29.979097, latitude: 31.134256 };
-```
-**Note** you can only change geolocation for all pages in the context.
 
 #### API reference
 
 - [`browser.newContext([options])`](./api.md#browsernewcontextoptions)
-- [`browserContext.setGeolocation(geolocation)`](./api.md#browsercontextsetgeolocationgeolocation)
 
 <br/>
 
 ## Permissions
+
 Allow all pages in the context to show system notifications:
 ```js
   const context = await browser.newContext({
@@ -163,3 +162,25 @@ Revoke all permissions:
 - [`browserContext.clearPermissions()`](./api.md#browsercontextclearpermissions)
 
 <br/>
+
+## Geolocation
+Create a context with `"geolocation"` permissions granted:
+```js
+  const context = await browser.newContext({
+    geolocation: { longitude: 48.858455, latitude: 2.294474 },
+    permissions: ['geolocation']
+  });
+```
+Change the location later:
+
+```js
+  await context.setGeolocation({ longitude: 29.979097, latitude: 31.134256 };
+```
+**Note** you can only change geolocation for all pages in the context.
+
+#### API reference
+
+- [`browser.newContext([options])`](./api.md#browsernewcontextoptions)
+- [`browserContext.setGeolocation(geolocation)`](./api.md#browsercontextsetgeolocationgeolocation)
+
+<br/>
diff --git a/docs/input.md b/docs/input.md
@@ -34,7 +34,7 @@ await page.fill('#local', '2020-03-02T05:15');
 
 ```
 
-#### Reference
+#### API reference
 
 - [page.fill(selector, value[, options])](./api.md#pagefillselector-value-options) — main frame
 - [frame.fill(selector, value[, options])](./api.md#framefillselector-value-options) — given frame
@@ -54,7 +54,7 @@ await page.uncheck('#subscribe-label');
 
 This is the easiest way to check and uncheck a checkbox. This method can be used on the `input[type=checkbox]` and on the `label` associated with that input.
 
-#### Reference
+#### API reference
 
 - [page.check(selector[, options])](./api.md#pagecheckselector-options) — main frame
 - [page.uncheck(selector[, options])](./api.md#pageuncheckselector-options) — main frame
@@ -97,7 +97,7 @@ const option = await page.$('#best-option');
 await page.selectOption('select#colors', option);
 ```
 
-#### Reference
+#### API reference
 
 - [page.selectOption(selector, values[, options])](./api.md#pageselectoptionselector-values-options) — main frame
 - [frame.selectOption(selector, values[, options])](./api.md#frameselectoptionselector-values-options) — given frame
@@ -140,7 +140,7 @@ await page.hover('#item');
 await page.click('#item', { position: { x: 0, y: 0} });
 ```
 
-#### Reference
+#### API reference
 
 - [page.click(selector[, options])](./api.md#pageclickselector-options) — main frame
 - [frame.click(selector[, options])](./api.md#frameclickselector-options) — given frame
@@ -166,7 +166,7 @@ Note that most of the time, [`page.fill`](#text-input) will just work. You only
 
 But sometimes it is important to type into the field character by character, as if it was a user with a real keyboard. This method will emit all the necessary keyboard events, with all the `keydown`, `keyup`, `keypress` events in place. You can even specify the optional `delay` between the key presses to simulate real user behavior.
 
-#### Reference
+#### API reference
 
 - [page.type(selector, text[, options])](./api.md#pagetypeselector-text-options) — main frame
 - [frame.type(selector, text[, options])](./api.md#frametypeselector-text-options) — given frame
@@ -224,7 +224,7 @@ Shortcuts such as `"Control+o"` or `"Control+Shift+T"` are supported as well. Wh
 Note that you still need to specify the capital `A` in `Shift-A` to produce the capital character. `Shift-a` produces a lower-case one as if you had the `CapsLock` toggled.
 
 
-#### Reference
+#### API reference
 
 - [page.press(selector, key[, options])](./api.md#pagepressselector-key-options) — main frame
 - [frame.press(selector, key[, options])](./api.md#framepressselector-key-options) — given frame
@@ -260,7 +260,7 @@ await page.setInputFiles('input#upload', {
 await page.setInputFiles('input#upload', []);
 ```
 
-#### Reference
+#### API reference
 
 - [page.setInputFiles(selector, files[, options])](https://github.com/microsoft/playwright/blob/master/docs/api.md#pagesetinputfilesselector-value-options)
 - [frame.setInputFiles(selector, files[, options])](https://github.com/microsoft/playwright/blob/master/docs/api.md#framesetinputfilesselector-value-options)
@@ -279,7 +279,7 @@ await page.focus('input#name');
 
 For the dynamic pages that handle focus events, you can focus the given element.
 
-#### Reference
+#### API reference
 
 - [page.focus(selector, [options])](https://github.com/microsoft/playwright/blob/master/docs/api.md#pagefocusselector-options)
 - [frame.focus(selector, [options])](https://github.com/microsoft/playwright/blob/master/docs/api.md#framefocusselector-options)