Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

docs(verification): nits and typos

Browse source
This commit is contained in:
Pavel Feldman 2020-04-20 17:17:10 -07:00
parent 948d51d52c
commit 80a7fcd2de
2 changed files with 87 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
docs/README.md
View file

@ -32,11 +32,10 @@
- [Modify requests](./network.md#modify-requests) - [Modify requests](./network.md#modify-requests)
- [Abort requests](./network.md#abort-requests) - [Abort requests](./network.md#abort-requests)
1. [Scraping and verification](./verification.md) 1. [Scraping and verification](./verification.md)
- [Screenshots](./verification.md#capturing-screenshot) - [Evaluating JavaScript](./verification.md#evaluating-javascript)
- [Evaluation](./verification.md#evaluating-javascript) - [Capturing screenshot](./verification.md#capturing-screenshot)
- [Console messages](./verification.md#listening-console-messages) - [Page events](./verification.md#page-events)
- [Uncaghut exceptions](./verification.md#uncaghut-exceptions) - [Handling exceptions](./verification.md#handling-exceptions)
- [Page crashes](./verification.md#page-crashes)
1. [Navigation and loading](./loading.md) 1. [Navigation and loading](./loading.md)
- [Common scenarios](./loading.md#common-scenarios) - [Common scenarios](./loading.md#common-scenarios)
- [Loading a popup](./loading.md#loading-a-popup) - [Loading a popup](./loading.md#loading-a-popup)

170
docs/verification.md
View file

@ -1,19 +1,10 @@
# Scraping and verification # Scraping and verification
Playwright allows verifiying state of the page and catching abnormal behavior by:
- evaluating JavaScript code snippets in the page
- capturing screenshots (png or jpeg)
- listening console messages
- observing uncaghut exceptions in the page
- observing page crashes
- etc
#### Contents #### Contents
- [Evaluating JavaScript](#evaluating-javascript) - [Evaluating JavaScript](#evaluating-javascript)
- [Capturing screenshot](#capturing-screenshot) - [Capturing screenshot](#capturing-screenshot)
- [Listening console messages](#listening-console-messages) - [Page events](#page-events)
- [Uncaghut exceptions](#uncaghut-exceptions) - [Handling exceptions](#handling-exceptions)
- [Page crashes](#page-crashes)
<br/> <br/>
@ -21,43 +12,43 @@ Playwright allows verifiying state of the page and catching abnormal behavior by
Execute JavaScript function in the page: Execute JavaScript function in the page:
```js ```js
const href = await page.evaluate(() => document.location.href); const href = await page.evaluate(() => document.location.href);
``` ```
If the result is a Promise or if the function is asynchronouse eveluate will automatically wait until it's resolved: If the result is a Promise or if the function is asynchronous evaluate will automatically wait until it's resolved:
```js ```js
const status = await page.evaluate(async () => { const status = await page.evaluate(async () => {
const response = await fetch(location.href); const response = await fetch(location.href);
return response.status; return response.status;
}); });
``` ```
Get object handle and use it in multiple evaluations: Get object handle and use it in multiple evaluations:
```js ```js
// Create a new array in the page, wriate a reference to it in // Create a new array in the page, write a reference to it in
// window.myArray and get a handle to it. // window.myArray and get a handle to it.
const myArrayHandle = await page.evaluateHandle(() => { const myArrayHandle = await page.evaluateHandle(() => {
window.myArray = [1]; window.myArray = [1];
return myArray; return myArray;
}); });
// Get current length of the array using the handle. // Get current length of the array using the handle.
const length = await page.evaluate( const length = await page.evaluate(
(arg) => arg.myArray.length, (arg) => arg.myArray.length,
{ myArray: myArrayHandle } { myArray: myArrayHandle }
); );
// Add one more element to the array using the handle // Add one more element to the array using the handle
await page.evaluate((arg) => arg.myArray.push(arg.newElement), { await page.evaluate((arg) => arg.myArray.push(arg.newElement), {
myArray:myArrayHandle, myArray: myArrayHandle,
newElement: 2 newElement: 2
}); });
// Get current length of the array using window.myArray reference. // Get current length of the array using window.myArray reference.
const newLength = await page.evaluate(() => window.myArray.length); const newLength = await page.evaluate(() => window.myArray.length);
// Release the object when it's no longer needed. // Release the object when it's no longer needed.
await myArrayHandle.dispose(); await myArrayHandle.dispose();
``` ```
#### API reference #### API reference
@ -75,70 +66,91 @@ Get object handle and use it in multiple evaluations:
Take screenshot of the page's viewport and save it in a png file: Take screenshot of the page's viewport and save it in a png file:
```js ```js
await page.screenshot({path: 'screenshot.png'}); await page.screenshot({path: 'screenshot.png'});
``` ```
Capture entire scrollable area of the page:
#### Variations
Capture particular element:
```js ```js
await page.screenshot({path: 'screenshot.png', fullPage: true}); const elementHandle = await page.$('.header');
await elementHandle.screenshot({ path: 'screenshot.png' });
``` ```
Save screenshot in an in-memory buffer (the content is base64-encoded image bytes):
Capture full page screenshot:
```js ```js
const buffer = await page.screenshot(); await page.screenshot({path: 'screenshot.png', fullPage: true});
// Log the length. ```
console.log(buffer.length);
Capture screenshot into a Node [Buffer](https://nodejs.org/api/buffer.html#buffer_class_buffer).
```js
const buffer = await page.screenshot();
// Log the length.
console.log(buffer.toString('base64'));
``` ```
#### API reference #### API reference
- [page.screenshot([options])](./api.md#pagescreenshotoptions) - [page.screenshot([options])](./api.md#pagescreenshotoptions)
- [Node.js Buffer](https://nodejs.org/api/buffer.html) - [elementHandle.screenshot([options])](./api.md#elementhandlescreenshotoptions)
<br/> <br/>
## Listening console messages ## Page events
Listen all console messages in a page and dump _errors_ in to the terminal: You can listen for various events on the `page` object. Following are just some of the examples of the events you can assert and handle:
#### "`console`" - get all console messages from the page
```js ```js
// Get all console messages from the page. page.on('console', msg => {
page.on('console', msg => { // Handle only errors.
// Handle only errors. if (msg.type() !== 'error')
if (msg.type() !== 'error') return;
return; console.log(`text: "${msg.text()}"`);
console.log(`text: "${msg.text()}"`); });
});
await page.evaluate(() => console.error('Page error message'));
``` ```
Get access to the console message arguments:
#### "`dialog`" - Handle assert, confirm, prompt
```js ```js
page.on('console', msg => { page.on('dialog', dialog => {
for (let i = 0; i < msg.args().length; ++i) dialog.accept();
console.log(`${i}: ${msg.args()[i]}`); });
}); ```
#### "`popup`" - Handle assert, confirm, prompt
```js
const [popup] = await Promise.all([
page.waitForEvent('popup'),
page.click('#open')
]);
``` ```
#### API reference #### API reference
- [class: ConsoleMessage](./api.md#class-consolemessage) - [class: Page](./api.md#class-page)
- [class `JSHandle`](./api.md#class-jshandle)
- [event: 'console'](./api.md#event-console) - [event: 'console'](./api.md#event-console)
- [event: 'dialog'](./api.md#event-dialog)
- [event: 'popup'](./api.md#event-popup)
- [class: ConsoleMessage](./api.md#class-consolemessage)
<br/> <br/>
## Uncaghut exceptions ## Handling exceptions
Listen uncaghut exceptions in the page: Listen uncaught exceptions in the page:
```js ```js
// Log all uncaught errors to the terminal // Log all uncaught errors to the terminal
page.on('pageerror', exception => { page.on('pageerror', exception => {
console.log(`Uncaught exception: "${exception}"`); console.log(`Uncaught exception: "${exception}"`);
}); });
// Navigate to a page with an exception. // Navigate to a page with an exception.
await page.goto('data:text/html,<script>throw new Error("Test")</script>'); await page.goto('data:text/html,<script>throw new Error("Test")</script>');
``` ```
#### API reference #### API reference
@ -146,19 +158,3 @@ Listen uncaghut exceptions in the page:
- [event: 'pageerror'](./api.md#event-pageerror) - [event: 'pageerror'](./api.md#event-pageerror)
<br/> <br/>
## Page crashes
Listen to page crashes:
```js
page.on('crash', exception => {
console.log(`Page crashed`);
});
```
It's very unusual for page to crash but might happen if a page allocates too much memory or due to a bug in a browser.
#### API reference
- [event: 'crash'](./api.md#event-crash)
<br/>