Puppeteer page.click 在无头模式下不起作用

Question

有什么问题

我尝试使用 Puppeteer 单击某个元素，page.click并page.evaluate在此任务中尝试了两者。

• 如果在headless=false模式下，两种方法都可以很好地工作。
• 如果在headless=true模式下，page.evaluate工作，但page.click 永远挂起。

我当时所做的是page.waitForSelector明确针对之前的元素page.click，请参阅下面的代码。

看起来也waitForSelector永远挂起。

谁能帮我理解为什么它挂在无头模式下？

环境

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

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

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

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',
        ],