我正在尝试使用一些 JavaScript 代码自动登录。我目前的流程是检查每个用户名框、密码框和登录按钮的元素。然后，我简单地使用“复制选择器”来查找选择器并相应地调整我的 .js 文件。
这在 linkedin 上效果很好，例如: 网址:https://www.linkedin.com/login?fromSignIn=true&trk=guest_homepage-basic_nav-header-signin
const USERNAME_SELECTOR = '#username';
const PASSWORD_SELECTOR = '#password';
const CTA_SELECTOR = '#app__container > main > div:nth-child(2) > form > div.login__form_action_container > button';
但是，在其他一些网站上使用相同的方法无法使用登录/提交按钮 (CTA_SELECTOR)。
例如: 网址:https://www.criticker.com/signin.php
const USERNAME_SELECTOR = '#si_username';
const PASSWORD_SELECTOR = '#si_password';
const CTA_SELECTOR = '#si_box > form > div:nth-child(4) > div > button';
运行此命令将告诉我它在页面上找不到 CTA_SELECTOR。
有谁知道我可以做什么来确保我得到正确的选择器？
最佳答案
您可以使用 XPath 的语义方法选择器。我们能够使用 contains() 通过 XPath 构建文本匹配表达式方法。像这样，可以通过元素的内部文本来抓取元素(例如 <button> )。
您可以通过运行 $x('//button[contains(text(), "Sign in")]') 在 Chrome 控制台上测试它.
在 puppeteer 中看起来像这样(如果使用 xpath 来选择元素，则需要 page.$x ):
const signInBtn = await page.$x('//button[contains(text(), "Sign in")]')
await signInBtn[0].click()
如果“登录”文本的格式在访问的站点之间可能有所不同，您可以为每个页面对其进行参数化。例如:
const signInContent = 'Sign in'
const signInXpath = `//button[contains(text(), "${signInContent}")]`
const signInBtn = await page.$x(signInXpath)
关于javascript - 自动登录时如何确保按钮获得正确的 CSS/CTA 选择器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62873952/