Skip to content
This repository has been archived by the owner on Apr 11, 2024. It is now read-only.

Commit

Permalink
fix(puppeteer): Wait until networkidle2 for better dev server support (
Browse files Browse the repository at this point in the history
…#63)

Switches to networkidle2 during Puppeteer navigation, preventing
timeouts when requesting pages that are served from development
environments like webpack-dev-server (which holds open event-
source sockets for HMR).

The networkidle2 event is fired when there are no more than 2 network
connections for at least 500 ms. If the page you're requesting has 2 or
fewer resources that stall for longer than 500ms and doesn't complete
loading, you can switch back to networkidle0 using the new
`--puppeteer-wait-until` option.
  • Loading branch information
toolmantim authored and markdalgleish committed Oct 1, 2018
1 parent ed60b44 commit 17f9663
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 1 deletion.
12 changes: 12 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,18 @@ $ html-sketchapp --puppeteer-args="--no-sandbox --disable-setuid-sandbox" --file

*Note: Because Puppeteer args are prefixed with hyphens, you **must** use an equals sign and quotes when providing this option via the command line (as seen above).*

### Puppeteer `waitUntil`

By default, Puppeteer is configured to consider the page loaded when there are no more than 2 network connections for at least 500ms (`networkidle2`). This is so that html-sketchapp-cli can handle development environments with long-lived connections.

If the page you're requesting has 2 or fewer resources that stall for longer than 500ms and doesn't complete loading, you can switch back to `networkidle0` via the `puppeteer-wait-until` argument:

```bash
$ html-sketchapp --puppeteer-wait-until networkidle0 --file sketch.html --out-dir dist
```

For the full list of available options for `waitUntil`, view the [Puppeteer `page.goto()` API documentation](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options).

### Chromium executable

If you'd like to override the Chromium used by Puppeteer, you can provide a path to the executable with the `puppeteer-executable-path` option.
Expand Down
8 changes: 7 additions & 1 deletion bin/cli.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,12 @@ require('yargs')
'puppeteer-executable-path': {
type: 'string',
describe: 'Path to a Chromium executable to use instead of the one downloaded by Puppeteer.'
},
'puppeteer-wait-until': {
type: 'string',
describe: 'The Puppeteer navigation event to use before considering the page loaded.',
default: 'networkidle2',
choices: ['load', 'domcontentloaded', 'networkidle0', 'networkidle2']
}
}, async argv => {
try {
Expand Down Expand Up @@ -106,7 +112,7 @@ require('yargs')
page.on('console', msg => console.log('PAGE LOG:', msg.text()));
}

await page.goto(symbolsUrl, { waitUntil: 'networkidle0' });
await page.goto(symbolsUrl, { waitUntil: argv.puppeteerWaitUntil });

const bundle = await rollup({
input: path.resolve(__dirname, '../script/generateAlmostSketch.js'),
Expand Down

0 comments on commit 17f9663

Please sign in to comment.