diff --git a/docs/recipes/puppeteer.md b/docs/recipes/puppeteer.md new file mode 100644 index 000000000..62e356042 --- /dev/null +++ b/docs/recipes/puppeteer.md @@ -0,0 +1,53 @@ +# Testing web apps using Puppeteer + +## Dependencies + +- [Puppeteer](https://github.com/GoogleChrome/puppeteer): `npm install --save-dev puppeteer` + +## Setup + +The first step is setting up a helper to configure the environment: + +`./test/helpers/withPage.js` + +```js +import puppeteer from 'puppeteer'; + +export default async function withPage(t, run) { + const browser = await puppeteer.launch(); + const page = await browser.newPage(); + try { + await run(t, page); + } finally { + await page.close(); + await browser.close(); + } +} +``` + +## Usage example + +`./test/main.js` + +```js +import test from 'ava'; +import withPage from './helpers/withPage'; + +const url = 'https://google.com'; + +test('page title should contain "Google"', withPage, async (t, page) => { + await page.goto(url); + t.true((await page.title()).includes('Google')); +}); + +test('page should contain an element with `#hplogo` selector', withPage, async (t, page) => { + await page.goto(url); + t.not(await page.$('#hplogo'), null); +}); + +test('search form should match the snapshot', withPage, async (t, page) => { + await page.goto(url); + const innerHTML = await page.evaluate(form => form.innerHTML, await page.$('#searchform')); + t.snapshot(innerHTML); +}); +``` diff --git a/readme.md b/readme.md index 7b0645ebb..d7eaa48e3 100644 --- a/readme.md +++ b/readme.md @@ -1219,6 +1219,7 @@ It's the [Andromeda galaxy](https://simple.wikipedia.org/wiki/Andromeda_galaxy). - [Debugging tests with WebStorm](docs/recipes/debugging-with-webstorm.md) - [Precompiling source files with webpack](docs/recipes/precompiling-with-webpack.md) - [Isolated MongoDB integration tests](docs/recipes/isolated-mongodb-integration-tests.md) +- [Testing web apps using Puppeteer](docs/recipes/puppeteer.md) ## Support