Chromeリモートインターフェイス：新しいページが読み込まれるまでの待ち時間の方法

Question

基本的にgoogle.comに移動し、「Google」というタイトルを印刷して「about」ボタンをクリックして、「About Us | 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(); 
    } 

}); 

})();