启用无头时找不到选择器 - Puppeteer

Question

我使用无头记录器扩展创建了一个简单的 puppeteer 脚本，但是当我运行它时它不起作用。

TimeoutError: waiting for selector `.a-button-stack > #atc-declarative > #submit.add-to-cart #add-to-cart-button` failed: timeout 30000ms exceeded

我也尝试过自己检查元素。因此，如果您转到该亚马逊网址并检查按钮，我尝试了以下操作，但总是超时。

await page.waitForSelector('#add-to-cart-button')

await page.waitForSelector('.a-button-stack')

await page.waitForSelector('.a-button-input a-declarative')

启用无头时如何找到正确的选择器？必须有一种方法，否则无头浏览器将如何导航。我猜这个从headless-recorder chrome 扩展生成的脚本是在 headless 设置为 false 时使用的。不过我可能是错的。目标很简单。进入亚马逊产品页面，点击添加到购物车，然后点击查看购物车。感谢您的帮助！

amazon.js

const puppeteer = require('puppeteer');
const randomUseragent = require('random-useragent');

(async () => {
    const browser = await puppeteer.launch()
    const page = await browser.newPage()

    const navigationPromise = page.waitForNavigation()

    await page.goto('https://www.amazon.com/Amazon-Essentials-Full-Zip-Hooded-Sweatshirt/dp/B075JW9CYR?ref_=Oct_DLandingS_D_cf757c44_63&smid=ATVPDKIKX0DER&th=1&psc=1')

    await page.setViewport({ width: 1920, height: 969 })

    await page.waitForSelector('.a-button-stack > #atc-declarative > #submit\.add-to-cart #add-to-cart-button')
    await page.click('.a-button-stack > #atc-declarative > #submit\.add-to-cart #add-to-cart-button')

    await navigationPromise

    await page.waitForSelector('.nav-right > #nav-tools > #nav-cart #nav-cart-count')
    await page.click('.nav-right > #nav-tools > #nav-cart #nav-cart-count')

    await navigationPromise

    await browser.close()
})()

Answer 1

试试：

await page.goto('https://www.amazon.com/Amazon-Essentials-Full-Zip-Hooded-Sweatshirt/dp/B075JW9CYR?ref_=Oct_DLandingS_D_cf757c44_63&smid=ATVPDKIKX0DER&th=1&psc=1')
await page.waitForFunction('document.querySelector("body")');