Puppeteer 抛出“节点不可见...”错误答案

【问题标题】：Puppeteer throws error with "Node not visible..."Puppeteer 抛出“节点不可见...”错误
【发布时间】：2019-09-14 20:59:48
【问题描述】：

当我使用 puppeteer 打开此页面并尝试单击该元素时，它会在预期可以单击该元素时引发错误。

const puppeteer = require('puppeteer');
const url = "https://www.zapimoveis.com.br/venda/apartamentos/rj+rio-de-janeiro/";

async function run() {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto(url, {waitUntil: 'load'});

  const nextPageSelector = "#list > div.pagination > #proximaPagina";
  await page.waitForSelector(nextPageSelector, {visible: true})
  console.log("Found the button");
  await page.click(nextPageSelector)
  console.log('clicked');
}

run();

【问题讨论】：

标签： javascript events puppeteer

【解决方案1】：

这是您的代码的工作版本。

const puppeteer = require('puppeteer');
const url = "https://www.zapimoveis.com.br/venda/apartamentos/rj+rio-de-janeiro/";

async function run() {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto(url);

  const nextPageSelector = "#list > div.pagination > #proximaPagina";
  console.log("Found the button");

  await page.evaluate(selector=>{
      return document.querySelector(selector).click();
  },nextPageSelector)
  console.log('clicked');
}

run();

我个人更喜欢使用page.evaluate，因为page.click在某些情况下对我也不起作用，你可以直接在页面上执行任何js。

唯一需要知道的是语法： - 第一个参数：要执行的函数 - 第二个参数：要传递给这个函数的变量

【讨论】：

【解决方案2】：

发现问题。当你 page.click(selector) 或 ElementHandle.click() 时，Puppeteer 滚动到元素，找到它的中心坐标，最后点击。它使用 node_modules/puppeteer/lib/JSHandle.js 中的函数 _clickablePoint 来查找坐标。

这个网站 (zapimoveis) 的问题是滚动到元素视口的速度太慢，所以 Puppeteer 找不到它的 (x,y) 中心。

您可以单击此元素的一种好方法是使用 page.evaluate 使用页面 javascript 来单击它。但是，我更喜欢一种甘比的方式。 :) 通过以下几行更改await page.click(nextPageSelector) 行：

try { await page.click(nextPageSelector) } catch (error) {} // sacrifice click  :)
await page.waitFor(3000); // time for scrolling
await page.click(nextPageSelector); // this will work

【讨论】：