node.js - Puppeteer page.click 在 headless 模式下不起作用

Question

有什么问题
我尝试使用 Puppeteer 单击某个元素，我同时尝试了 page.click和 page.evaluate在这个任务上。

如果在 headless=false模式，两种方法都运行良好。

如果在 headless=true模式，page.evaluate有效，但 page.click永远挂起。

我当时所做的是page.waitForSelector明确表示 page.click 之前的元素，见下面的代码。
看起来像 waitForSelector也永远挂起。
谁能帮我理解为什么它卡在 headless 模式下？
环境

chrome version is HeadlessChrome/80.0.3987.0
puppeteer version 2.1
macOS catalina 10.15.3

代码

const pptr = require('puppeteer');

console.log(pptr.version);

(async () => {
    var br = await pptr.launch({
        headless: true,
        defaultViewport: null,
        args: [
            '--user-agent=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36',
            '--user-data-dir=/tmp/user_data/',
        ],
    });
    var page = await br.newPage();
    var url = 'https://www.lookfantastic.com/brands/aesop/view-all.list';
    var css = 'div.responsiveProductListPage_topPagination button[aria-label="next page" i]:not([disabled])';

    const chrome_version = await page.browser().version();
    console.log(`chrome version is ${chrome_version}`);

    await page.goto(url);
    await page.waitForSelector(css, { visible: true });  // when headless=true, hangs here.

    await Promise.all([
        page.click(css),
        //page.evaluate((css) => { document.querySelector(css).click(); }, css),
        page.waitForNavigation({waitUntil: 'networkidle0'}),
    ]);
    console.log('success');
    await new Promise(r => setTimeout(r, 1000));
    await br.close();
})();

Answer 1

根据您的评论， headless 屏幕的大小可能不适合您正在测试的元素。此元素是否应该显示在笔记本电脑大小的屏幕上(在您的情况下，宽度 > 1200 像素)？

您可以使用选项 --window-size=width,height 设置 Puppeteer 的窗口大小。 ， 例如:

args: [
            '--user-agent=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36',
            '--user-data-dir=/tmp/user_data/',
            '--window-size=1200,800',
        ],