Introduce Page.waitForNavigation (#94)

This patch introduces Page.waitForNavigation which allows to wait
for render-initiated navigation.

This patch also does a nice refactoring, replacing Navigator with NavigatorWatcher which
is not a part of a page state.

References #89
This commit is contained in:
Pavel Feldman 2017-07-18 18:54:24 -07:00 committed by Andrey Lushnikov
parent bef9982687
commit 98c3894c84
5 changed files with 74 additions and 35 deletions

View File

@ -42,7 +42,7 @@
* [page.navigate(url, options)](#pagenavigateurl-options) * [page.navigate(url, options)](#pagenavigateurl-options)
* [page.pdf(options)](#pagepdfoptions) * [page.pdf(options)](#pagepdfoptions)
* [page.plainText()](#pageplaintext) * [page.plainText()](#pageplaintext)
* [page.reload()](#pagereload) * [page.reload(options)](#pagereloadoptions)
* [page.screenshot([options])](#pagescreenshotoptions) * [page.screenshot([options])](#pagescreenshotoptions)
* [page.setContent(html)](#pagesetcontenthtml) * [page.setContent(html)](#pagesetcontenthtml)
* [page.setHTTPHeaders(headers)](#pagesethttpheadersheaders) * [page.setHTTPHeaders(headers)](#pagesethttpheadersheaders)
@ -57,6 +57,7 @@
* [page.userAgent()](#pageuseragent) * [page.userAgent()](#pageuseragent)
* [page.viewport()](#pageviewport) * [page.viewport()](#pageviewport)
* [page.waitFor(selector)](#pagewaitforselector) * [page.waitFor(selector)](#pagewaitforselector)
* [page.waitForNavigation(options)](#pagewaitfornavigationoptions)
- [class: Keyboard](#class-keyboard) - [class: Keyboard](#class-keyboard)
* [keyboard.hold(key[, options])](#keyboardholdkey-options) * [keyboard.hold(key[, options])](#keyboardholdkey-options)
* [keyboard.modifiers()](#keyboardmodifiers) * [keyboard.modifiers()](#keyboardmodifiers)
@ -422,7 +423,8 @@ The `format` options are:
#### page.plainText() #### page.plainText()
- returns: <[Promise]<[string]>> Returns page's inner text. - returns: <[Promise]<[string]>> Returns page's inner text.
#### page.reload() #### page.reload(options)
- `options` <[Object]> Navigation parameters, same as in [page.navigate](#pagenavigateurl-options).
- returns: <[Promise]<[Response]>> Promise which resolves to the main resource response. In case of multiple redirects, the navigation will resolve with the response of the last redirect. - returns: <[Promise]<[Response]>> Promise which resolves to the main resource response. In case of multiple redirects, the navigation will resolve with the response of the last redirect.
#### page.screenshot([options]) #### page.screenshot([options])
@ -535,6 +537,10 @@ This is a shortcut for [page.mainFrame().url()](#frameurl)
- `selector` <[string]> A query selector to wait for on the page. - `selector` <[string]> A query selector to wait for on the page.
- returns: <[Promise]> Promise which resolves when the element matching `selector` appears in the page. - returns: <[Promise]> Promise which resolves when the element matching `selector` appears in the page.
#### page.waitForNavigation(options)
- `options` <[Object]> Navigation parameters, same as in [page.navigate](#pagenavigateurl-options).
- returns: <[Promise]<[Response]>> Promise which resolves to the main resource response. In case of multiple redirects, the navigation will resolve with the response of the last redirect.
Shortcut for [page.mainFrame().waitFor(selector)](#framewaitforselector). Shortcut for [page.mainFrame().waitFor(selector)](#framewaitforselector).
### class: Keyboard ### class: Keyboard

View File

@ -14,30 +14,31 @@
* limitations under the License. * limitations under the License.
*/ */
class Navigator { const NetworkManager = require('./NetworkManager');
class NavigatorWatcher {
/** /**
* @param {!Connection} client * @param {!Connection} client
* @param {string} url * @param {!NetworkManager} networkManager
* @param {string=} referrer
* @param {!Object=} options * @param {!Object=} options
*/ */
constructor(client, url, referrer, options = {}) { constructor(client, networkManager, options = {}) {
this._client = client; this._client = client;
this._url = url; this._networkManager = networkManager;
this._referrer = referrer;
this._maxTime = typeof options['maxTime'] === 'number' ? options['maxTime'] : 30000; this._maxTime = typeof options['maxTime'] === 'number' ? options['maxTime'] : 30000;
this._idleTime = typeof options['networkIdleTimeout'] === 'number' ? options['networkIdleTimeout'] : 1000; this._idleTime = typeof options['networkIdleTimeout'] === 'number' ? options['networkIdleTimeout'] : 1000;
this._idleInflight = typeof options['networkIdleInflight'] === 'number' ? options['networkIdleInflight'] : 2; this._idleInflight = typeof options['networkIdleInflight'] === 'number' ? options['networkIdleInflight'] : 2;
this._waitUntil = typeof options['waitUntil'] === 'string' ? options['waitUntil'] : 'load'; this._waitUntil = typeof options['waitUntil'] === 'string' ? options['waitUntil'] : 'load';
console.assert(this._waitUntil === 'load' || this._waitUntil === 'networkidle', 'Unknown value for options.waitUntil: ' + this._waitUntil); console.assert(this._waitUntil === 'load' || this._waitUntil === 'networkidle', 'Unknown value for options.waitUntil: ' + this._waitUntil);
} }
/** /**
* @return {!Promise} * @return {!Promise<!Map<string, !Response>>}
*/ */
async navigate() { async waitForNavigation() {
this._init(); this._init();
let certificateError = new Promise(fulfill => this._client.once('Security.certificateError', fulfill)) let certificateError = new Promise(fulfill => this._client.once('Security.certificateError', fulfill))
.then(error => new Error('SSL Certiciate error: ' + error.errorType)); .then(error => new Error('SSL Certiciate error: ' + error.errorType));
let networkIdle = new Promise(fulfill => this._networkIdleCallback = fulfill).then(() => null); let networkIdle = new Promise(fulfill => this._networkIdleCallback = fulfill).then(() => null);
@ -46,15 +47,19 @@ class Navigator {
try { try {
// Await for the command to throw exception in case of illegal arguments. // Await for the command to throw exception in case of illegal arguments.
await this._client.send('Page.navigate', {url: this._url, referrer: this._referrer});
const error = await Promise.race([certificateError, watchdog, this._waitUntil === 'load' ? loadEventFired : networkIdle]); const error = await Promise.race([certificateError, watchdog, this._waitUntil === 'load' ? loadEventFired : networkIdle]);
if (error) if (error)
throw error; throw error;
return this._responses;
} finally { } finally {
this._cleanup(); this._cleanup();
} }
} }
cancel() {
this._cleanup();
}
/** /**
* @param {!Object} event * @param {!Object} event
*/ */
@ -83,14 +88,18 @@ class Navigator {
_init() { _init() {
this._loadingStartedHandler = this._onLoadingStarted.bind(this); this._loadingStartedHandler = this._onLoadingStarted.bind(this);
this._loadingCompletedHandler = this._onLoadingCompleted.bind(this); this._loadingCompletedHandler = this._onLoadingCompleted.bind(this);
this._onResponseHandler = this._onResponse.bind(this);
this._client.on('Network.requestWillBeSent', this._loadingStartedHandler); this._client.on('Network.requestWillBeSent', this._loadingStartedHandler);
this._client.on('Network.loadingFinished', this._loadingCompletedHandler); this._client.on('Network.loadingFinished', this._loadingCompletedHandler);
this._client.on('Network.loadingFailed', this._loadingCompletedHandler); this._client.on('Network.loadingFailed', this._loadingCompletedHandler);
this._client.on('Network.webSocketCreated', this._loadingStartedHandler); this._client.on('Network.webSocketCreated', this._loadingStartedHandler);
this._client.on('Network.webSocketClosed', this._loadingCompletedHandler); this._client.on('Network.webSocketClosed', this._loadingCompletedHandler);
this._networkManager.on(NetworkManager.Events.Response, this._onResponseHandler);
this._inflightRequests = 0; this._inflightRequests = 0;
this._requestIds = new Set(); this._requestIds = new Set();
/** @type {!Map<string, !Response>} */
this._responses = new Map();
} }
_cleanup() { _cleanup() {
@ -99,10 +108,19 @@ class Navigator {
this._client.removeListener('Network.loadingFailed', this._loadingCompletedHandler); this._client.removeListener('Network.loadingFailed', this._loadingCompletedHandler);
this._client.removeListener('Network.webSocketCreated', this._loadingStartedHandler); this._client.removeListener('Network.webSocketCreated', this._loadingStartedHandler);
this._client.removeListener('Network.webSocketClosed', this._loadingCompletedHandler); this._client.removeListener('Network.webSocketClosed', this._loadingCompletedHandler);
this._networkManager.removeListener(NetworkManager.Events.Response, this._onResponseHandler);
clearTimeout(this._idleTimer); clearTimeout(this._idleTimer);
clearTimeout(this._maximumTimer); clearTimeout(this._maximumTimer);
this._responses = new Map();
}
/**
* @param {!Response} response
*/
_onResponse(response) {
this._responses.set(response.url, response);
} }
} }
module.exports = Navigator; module.exports = NavigatorWatcher;

View File

@ -18,7 +18,7 @@ let fs = require('fs');
let EventEmitter = require('events'); let EventEmitter = require('events');
let mime = require('mime'); let mime = require('mime');
let NetworkManager = require('./NetworkManager'); let NetworkManager = require('./NetworkManager');
let Navigator = require('./Navigator'); let NavigatorWatcher = require('./NavigatorWatcher');
let Dialog = require('./Dialog'); let Dialog = require('./Dialog');
let EmulationManager = require('./EmulationManager'); let EmulationManager = require('./EmulationManager');
let FrameManager = require('./FrameManager'); let FrameManager = require('./FrameManager');
@ -267,32 +267,36 @@ class Page extends EventEmitter {
* @return {!Promise<!Response>} * @return {!Promise<!Response>}
*/ */
async navigate(url, options) { async navigate(url, options) {
const watcher = new NavigatorWatcher(this._client, this._networkManager, options);
const result = watcher.waitForNavigation();
const referrer = this._networkManager.httpHeaders()['referer']; const referrer = this._networkManager.httpHeaders()['referer'];
this._navigator = new Navigator(this._client, url, referrer, options); try {
return this.reload(); await this._client.send('Page.navigate', {url, referrer});
} catch (e) {
watcher.cancel();
throw e;
}
const responses = await result;
return responses.get(this.mainFrame().url());
} }
/** /**
* @return {!Promise<!Response>} * @param {!Object=} options
* @return {!Promise<?Response>}
*/ */
async reload() { async reload(options) {
if (!this._navigator) this._client.send('Page.reload');
return; return this.waitForNavigation(options);
/** @type {!Map<string, !Response>} */ }
const responses = new Map();
const onResponse = response => responses.set(response.url, response);
this._networkManager.on(NetworkManager.Events.Response, onResponse);
try {
await this._navigator.navigate();
} finally {
this._networkManager.removeListener(NetworkManager.Events.Response, onResponse);
}
const response = responses.get(this.mainFrame().url());
console.assert(response);
// Await for a single raf rountrip to ensure basic rasterization is complete. /**
await this.evaluate(() => new Promise(fulfill => requestAnimationFrame(fulfill))); * @param {!Object=} options
return response; * @return {!Promise<?Response>}
*/
async waitForNavigation(options) {
const watcher = new NavigatorWatcher(this._client, this._networkManager, options);
const responses = await watcher.waitForNavigation();
return responses.get(this.mainFrame().url()) || null;
} }
/** /**

View File

@ -427,6 +427,17 @@ describe('Puppeteer', function() {
})); }));
}); });
describe('Page.waitForNavigation', function() {
it('should work', SX(async function() {
await page.navigate(EMPTY_PAGE);
const result = page.waitForNavigation();
page.evaluate(url => window.location.href = url, PREFIX + '/grid.html');
const response = await result;
expect(response.ok).toBe(true);
expect(response.url).toContain('grid.html');
}));
});
describe('Page.setInPageCallback', function() { describe('Page.setInPageCallback', function() {
it('should work', SX(async function() { it('should work', SX(async function() {
await page.setInPageCallback('callController', function(a, b) { await page.setInPageCallback('callController', function(a, b) {

View File

@ -11,7 +11,7 @@ let EXCLUDE_CLASSES = new Set([
'EmulationManager', 'EmulationManager',
'FrameManager', 'FrameManager',
'Helper', 'Helper',
'Navigator', 'NavigatorWatcher',
'NetworkManager', 'NetworkManager',
'ProxyStream' 'ProxyStream'
]); ]);