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

}); 

})();