Chrome 远程界面:如何等到新页面加载

Question

基本上我想导航到 google.com，打印标题"Google"，然后单击"关于"按钮，并打印标题"关于我们|谷歌"。

问题是它不会等待关于页面加载，而是再次打印"Google"。

如果我连接到远程调试器，那么它显然会正确单击并导航到关于页面。

const chromeLauncher = require('chrome-launcher');
const CDP = require('chrome-remote-interface');
/**
* Launches a debugging instance of Chrome.
* @param {boolean=} headless True (default) launches Chrome in headless mode.
*     False launches a full version of Chrome.
* @return {Promise<ChromeLauncher>}
*/
function launchChrome(headless=true) {
return chromeLauncher.launch({
port: 9222,
chromeFlags: [
'--disable-gpu',
headless ? '--headless' : ''
]
});
}
(async function() {
const chrome = await launchChrome();
const protocol = await CDP({port: chrome.port});
const {Page, Runtime} = protocol;
await Promise.all([Page.enable(), Runtime.enable()]);
const url = "https://www.google.com/";
Page.navigate({url: url});
// Wait for window.onload before doing stuff.
Page.loadEventFired(async () => {
const result1 = await Runtime.evaluate({expression: "document.querySelector('title').textContent"});
// Prints "Google"
console.log('Title of page: ' + result1.result.value);
// Navigate to the About page
const result2 = await Runtime.evaluate({expression: "document.querySelector('#fsl a:nth-child(3)').click()"});
const result3 = await Runtime.evaluate({expression: "document.querySelector('title').textContent"});
// This should have printed "About Us | Google" but instead printed "Google"
console.log('Title of page: ' + result3.result.value);
protocol.close();
});
})();

Answer 1

我只是错误地查看了流程。Page.loadEventFired 在每个新页面加载后被调用。因此，您将代码更改为这种类型的格式，效果很好。

const chromeLauncher = require('chrome-launcher');
const CDP = require('chrome-remote-interface');
/**
* Launches a debugging instance of Chrome.
* @param {boolean=} headless True (default) launches Chrome in headless mode.
*     False launches a full version of Chrome.
* @return {Promise<ChromeLauncher>}
*/
function launchChrome(headless=true) {
return chromeLauncher.launch({
port: 9222,
chromeFlags: [
'--disable-gpu',
headless ? '--headless' : ''
]
});
}
(async function() {
const chrome = await launchChrome();
const protocol = await CDP({port: chrome.port});
const {Page, Runtime} = protocol;
await Promise.all([Page.enable(), Runtime.enable()]);
const url = "https://www.google.com/";
Page.navigate({url: url});
// Create a value to track which page we are on
let pageNum = 0;
// Wait for window.onload before doing stuff.
Page.loadEventFired(async () => {
if (pageNum === 0) {
const result1 = await Runtime.evaluate({expression: "document.querySelector('title').textContent"});
// Prints "Google"
console.log('Title of page: ' + result1.result.value);
// Navigate to the About page
const result2 = await Runtime.evaluate({expression: "document.querySelector('#fsl a:nth-child(3)').click()"});
pageNum = 1;
} else if (pageNum === 1) {
const result3 = await Runtime.evaluate({expression: "document.querySelector('title').textContent"});
// Prints "About Us | Google"
console.log('Title of page: ' + result3.result.value);
protocol.close();
}
});
})();