使用 Puppeteer 单击选择器

Question

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

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

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

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

节点版本：14.4.0 Puppeteer 版本：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 测试，因此当您从自己的 chrome 浏览器访问该网站时，您可能会登陆一个选择器与您检索到的选择器截然不同的页面。在这种情况下，您可以尝试使用 XPath 及其contains方法通过文本内容获取元素（不幸的是，在这种特定情况下也会更改设计） 。例如$x('//span[contains(text(), "Sign In")]')[0]所以我建议检测两个按钮版本并获得它们最稳定的选择器，这些也可以基于数据属性：A$('[data-path="sign in"]')乙$('[data-path="join or login"]')然后使用 aPromise.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)})()