使用 Puppeteer 单击选择器

Question

所以我在点击耐克网站上的登录按钮时遇到了问题..

我不确定为什么它总是崩溃，因为它找不到我猜的选择器，但我不确定我做错了什么。

我还想说在 puppeteer 崩溃之前我有某种内存泄漏，如果我不及时取消控制台内的进程，有时它甚至会使我的 macbook 完全崩溃。

编辑： 如果我没有足够快地取消应用程序，这段代码还会在崩溃时导致内存泄漏，迫使我不得不硬重置我的 mac。

节点版本：14.4.0 木偶版：5.2.1

当前代码：

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: null,
        args: ['--start-maximized']
    })

    const page = await browser.newPage()
    await page.goto('https://www.nike.com/')

    const winner = await Promise.race([
        page.waitForSelector('[data-path="join or login"]'),
        page.waitForSelector('[data-path="sign in"]')
    ])

    await page.click(winner._remoteObject.description)
})()

我也试过了：

await page.click('button[data-var]="loginBtn"');

Answer 1

试试看：

await page.click('button[data-var="loginBtn"]');

Answer 2

他们是A/B testing 他们的网站，因此您登陆的页面可能与您从自己的 chrome 浏览器访问该网站时检索到的选择器截然不同。

在这种情况下，您可以尝试使用 XPath 及其contains 方法通过元素的文本内容来获取元素（不幸的是，在这种特殊情况下，设计也会发生变化）。例如。 $x('//span[contains(text(), "Sign In")]')[0]

所以我建议检测两个按钮版本并获取它们最稳定的选择器，这些也可以基于数据属性：

一个

$('[data-path="sign in"]')

B

$('[data-path="join or login"]')

然后使用Promise.race，您可以检测存在哪个按钮，然后从JSHandle@node 中提取其选择器，如下所示：._remoteObject.description：

{
  type: 'object',
  subtype: 'node',
  className: 'HTMLButtonElement',
  description: 'button.nav-btn.p0-sm.body-3.u-bold.ml2-sm.mr2-sm',
  objectId: '{"injectedScriptId":3,"id":1}'
}

=>

button.nav-btn.p0-sm.prl3-sm.pt2-sm.pb2-sm.fs12-nav-sm.d-sm-b.nav-color-grey.hover-color-black

例子：

const browser = await puppeteer.launch({
  headless: false,
  defaultViewport: null,
  args: ['--start-maximized']
})
const page = await browser.newPage()
await page.goto('https://www.nike.com/')
const winner = await Promise.race([
  page.waitForSelector('[data-path="join or login"]'),
  page.waitForSelector('[data-path="sign in"]')
])

await page.click(winner._remoteObject.description)

仅供参考：同时最大化浏览器窗口以确保元素具有相同的选择器名称。

defaultViewport: null, args: ['--start-maximized']

Chromium 默认使用 puppeteer 以较小的窗口启动。

Answer 3

您需要将{ waitUntil: 'networkidle0' } 与page.goto 一起使用

这告诉 puppeteer 等待网络空闲 （500 毫秒内没有请求）

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: null,
        args: ['--start-maximized']
    })

    const page = await browser.newPage()

    // load the nike.com page and wait for it to fully load (inc A/B scripts)
    await page.goto('https://www.nike.com/', { waitUntil: 'networkidle0' })

    // select whichever element appears first
    var el = await page.waitForSelector('[data-path="join or login"], [data-path="sign in"]', { timeout: 1000 })

    // execute click
    await page.click(el._remoteObject.description)
})()