Javascript 使用“木偶演员”单击选择器

因此，我在单击nike网站上的登录按钮时遇到问题

我不知道为什么它一直崩溃，因为它找不到选择器，但我不确定我做错了什么

我还想说，在Puppeter崩溃之前，我有一些内存泄漏，如果我不在控制台内及时取消这个过程，有时它甚至会完全崩溃我的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"');

试试看：

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

它们是他们的网站，因此您可能会在一个页面上使用与您从自己的chrome浏览器访问该网站时检索到的非常不同的选择器

在这种情况下，您可以尝试使用XPath及其方法通过元素的文本内容获取元素（不幸的是，在这种特定情况下，随着设计的变化也会发生变化）。例如，

$x（'//span[contains（text（），“Sign-In”）]'[0]

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

A

$（“[data path=“sign-in”]”）

B

$（'[data path=“加入或登录”]'））

然后，您可以使用检测按钮，然后从

JSHandle@node

如下所示：

\u 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}'
}

=>

例如：

const browser=wait puppeter.launch({
无头：错，
defaultViewport:null，
参数：['--开始最大化']
})
const page=wait browser.newPage（）
等待页面。转到（'https://www.nike.com/')
const winner=等待承诺([
page.waitForSelector（'[data path=“join or login”]'），
page.waitForSelector（'[data path=“sign-in”]'））
])
等待页面。单击（winner.\u remoteObject.description）

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

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

默认情况下，Chromium从一个较小的窗口开始，使用Puppeter。

您需要与

页面一起使用。转到

这告诉木偶演员等待网络空闲（500毫秒内无请求）

const puppeter=require（'puppeter'）；
（异步（）=>{
const browser=wait puppeter.launch({
无头：错，
defaultViewport:null，
参数：['--开始最大化']
})
const page=wait browser.newPage（）
//加载nike.com页面并等待其完全加载（包括A/B脚本）
等待页面。转到（'https://www.nike.com/“，{waitUntil:'networkidle0'}）
//选择最先出现的元素
var el=wait page.waitForSelector（'[data path=“join或login”]，[data path=“sign-in”]，{timeout:1000}）
//执行单击
等待页面。单击（el.\u remoteObject.description）
})()
在我的例子中，登录按钮位于这样一个选择器按钮上[data type=“click_navJoinLogin”]”由于上面的答案，我确信它与a/B测试有关，这就是为什么我们的选择器不同的原因。：）太棒了，谢谢你提供的所有新信息！我仍然很难让它点击，我确实明白你说的页面不同是什么意思，现在我甚至没有注意到这一点！承诺被拒绝了，所以我猜它仍然难以找到选择器？是的，这可能是一个有两次以上UX迭代的A/B测试。另外，确保最大化浏览器窗口（如果您还没有这样做），您可以避免Puppeter加载平板电脑版本。是的，我所做的与您在示例中所做的完全相同。我将更新post以显示当前代码，chromium窗口在未处理Promiser弹出前冻结一秒钟，TimeoutError在控制台中抛出错误。然后我可以关闭窗口。我想
等待承诺。race
是导致Mac电脑内存泄漏的罪魁祸首（在这个特定网站的情况下……否则这将是一个众所周知的问题。傀儡开发者也在Mac电脑上工作）。你能用你的Node.Js版本更新你的问题吗？确切的傀儡版本和你的操作系统？谢谢（从现在起我不确定是否能帮上忙，我在Windows环境和Ubuntu上工作）
defaultViewport: null, args: ['--start-maximized']