Add recipe for AVA & Puppeteer #1913
Conversation
docs/recipes/puppeteer.md
Outdated
| `./test/helpers/setup.js` | ||
|
|
||
| ```js | ||
| const { test } = require('ava'); |
There was a problem hiding this comment.
This no longer works. Use const test = require('ava').
docs/recipes/puppeteer.md
Outdated
|
|
||
| test.before(async () => { | ||
| global.browser = await puppeteer.launch(); | ||
| global.page = await browser.newPage(); |
There was a problem hiding this comment.
We're not very keen on globals with AVA. Instead, export a setup function that takes a test object. Then use that to hook up before and after.
This function also gets a t object. I would assign browser and page to t.context.browser, etc. Then in the tests you can access them via t.context and you can avoid the globals.
There was a problem hiding this comment.
Thanks for the updates @sh7dm. Are you looking to add anything else?
docs/recipes/puppeteer.md
Outdated
|
|
||
| ```js | ||
| const puppeteer = require('puppeteer'); | ||
| const url = "https://google.com"; // App URL, for example, google.com |
There was a problem hiding this comment.
It might be neat to be able to pass the URL to the setup function instead.
There was a problem hiding this comment.
Yes, it will be awesome to add some more examples
docs/recipes/puppeteer.md
Outdated
| test.before(async t => { | ||
| t.context.browser = await puppeteer.launch(); | ||
| t.context.page = await t.context.browser.newPage(); | ||
| await t.context.page.goto(url); |
There was a problem hiding this comment.
Sharing the browser/page between tests might cause unexpected issues because all tests will run in parallel. What I usually do in my ava/puppeteer tests is to start a separate browser instance for each test.
async function withBrowserPage(fn) {
const browser = await puppeteer.launch();
const page = browser.newPage();
try {
await fn(page);
} finally {
await page.close();
await browser.close();
}
}
test('foo', t => {
return withBrowserPage(page => {
page.goto('https://google.com');
t.is(await page.title(), 'Google');
});
});
test('bar', t => {
return withBrowserPage(page => {
page.goto('https://bing.com');
t.is(await page.title(), 'Bing');
});
});There was a problem hiding this comment.
Thank you very much!
sindresorhus
changed the title
* Use ESM rather than CJS (AVA compiles helpers, too) * Use a macro to wrap page management * Remove `document.innerHTML` test, it resolved to `undefined` * Fix searchform innerHTML test
|
@sindresorhus @sh7dm happy with my changes? |
|
Thanks for contributing, @sh7dm 🎉 |
Added recipe for using AVA with Puppeteer for testing web apps.
Work in progress, recipe may be incomplete or buggy. I think it's worth adding a few pictures and more examples. If you have an idea for enhancing this recipe, write it in the comments.
Fixes #1799