diff --git a/docs/api.md b/docs/api.md index c4cd39f24d..340e8d5f31 100644 --- a/docs/api.md +++ b/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]> diff --git a/docs/network.md b/docs/network.md new file mode 100644 index 0000000000..f55b0402e3 --- /dev/null +++ b/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)