docs(network): introduce network docs (#1822)

* docs(network): introduce network docs

* update title

docs/api.md

@@ -814,7 +814,7 @@ console.log(await popup.evaluate('location.href'));
 - <[Request]>
 
 Emitted when a page issues a request. The [request] object is read-only.
-In order to intercept and mutate requests, see !!!`page.route()` or `brows.
+In order to intercept and mutate requests, see [`page.route()`](#pagerouteurl-handler) or [`browserContext.route()`](#browsercontextrouteurl-handler).
 
 #### event: 'requestfailed'
 - <[Request]>

docs/network.md

@@ -0,0 +1,104 @@
+# Working With Network
+
+![playwright network](https://user-images.githubusercontent.com/746130/79428385-f0264900-7f7a-11ea-86e6-cd03190b8de7.png)
+
+Playwright provides APIs to **monitor** and **modify** network traffic, both HTTP and HTTPS.
+Any requests that page does, including [XHRs](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) and
+[fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) requests, can be tracked and modified.
+
+
+> **NOTE** As of playwright v0.13.0, Playwright is not yet capable of tracking websocket messages.
+
+
+## Monitor all network activity in page
+
+```js
+const page = await browser.newPage();
+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');
+```
+
+#### API reference
+
+- [`event: 'request'`](./api.md#event-request)
+- [`event: 'response'`](./api.md#event-response)
+- [`request.method()`](./api.md#requestmethod)
+- [`request.url()`](./api.md#requesturl)
+
+
+## Wait for a response from API endpoint after button click
+
+```js
+const [response] = await Promise.all([
+  page.waitForResponse('/api/fetch_data'),
+  page.click('button[type=submit]'),
+]);
+```
+
+#### API reference
+
+- [`page.waitForRequest(urlOrPredicate[, options])`](./api.md#pagewaitforrequesturlorpredicate-options)
+- [`page.waitForResponse(urlOrPredicate[, options])`](./api.md#pagewaitforresponseurlorpredicate-options)
+
+
+
+## Mock API endpoint with test data
+
+```js
+await page.route('/api/fetch_data', route => route.fulfill({
+  status: 200,
+  body: testData,
+}));
+await page.goto('https://example.com');
+```
+
+You can also use [`browserContext.route`](./api.md#browsercontextrouteurl-handler) to mock
+API endpoints for all the pages in the context.
+
+#### API reference
+
+- [`page.route(url, handler)`](./api.md#pagerouteurl-handler)
+- [`browserContext.route(url, handler)`](./api.md#browsercontextrouteurl-handler)
+- [`route.fulfill(response)`](./api.md#routefulfillresponse)
+
+
+
+## Abort all images to speedup page load
+
+```js
+const page = await browser.newPage();
+await page.route('**/*.{png,jpg,jpeg}', route => route.abort());
+await page.goto('https://example.com');
+```
+
+You can also use [`browserContext.route`](./api.md#browsercontextrouteurl-handler) to abort
+images for all pages in the context, including popups.
+
+#### API reference
+
+- [`page.route(url, handler)`](./api.md#pagerouteurl-handler)
+- [`browserContext.route(url, handler)`](./api.md#browsercontextrouteurl-handler)
+- [`route.abort([errorCode])`](./api.md#routeaborterrorcode)
+
+
+
+## Setup [HTTP authentication](https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication)
+
+```js
+const context = await browser.newContext({
+  httpCredentials: {
+    username: 'bill',
+    password: 'pa55w0rd',
+  },
+});
+const page = await context.newPage();
+awat page.goto('https://example.com');
+```
+
+You can also use [`browserContext.setHTTPCredentials`](./api.md#browsercontextsethttpcredentialshttpcredentials) to update HTTP credentials of an existing context.
+
+#### API reference
+
+- [`browser.newContext([options])`](./api.md#browsernewcontextoptions)
+- [`browserContext.setHTTPCredentials(httpCredentials)`](./api.md#browsercontextsethttpcredentialshttpcredentials)