javascript - 如何确保在自动登录时为按钮获得正确的 CSS/CTA 选择器？

Question

我正在尝试使用一些 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。
有谁知道我能做些什么来确保我得到正确的选择器？

Answer 1

您可以使用语义方法与 XPath选择器。我们可以使用 contains() 使用 XPath 构建文本匹配表达式。方法。像这样，可以通过其innerText 抓取元素(例如<button>)。
您可以通过运行 $x('//button[contains(text(), "Sign in")]') 在 chrome 控制台上测试它.
在 puppeteer 中看起来像这样(如果使用 xpaths 来选择元素，您将需要 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)