Chrome 远程界面：如何等待新页面加载答案

【问题标题】：Chrome Remote Interface: How to Wait Until a New Page LoadsChrome 远程界面：如何等待新页面加载
【发布时间】：2017-12-11 22:30:00
【问题描述】：

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

问题是它没有等待 about 页面加载，而是再次打印“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();
});

})();

【问题讨论】：

标签： javascript node.js google-chrome interface

【解决方案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();
  }

});

})();

【讨论】：