Chrome远程界面：如何等待直到新页面加载

Question

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

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

如果我连接到远程调试器，那么它显然是正确点击并导航到about页面。

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(); 
    } 

}); 

})();