Как убедиться, что я получу правильный селектор CSS / CTA для кнопки при автоматизации входа в систему? - PullRequest
Новая
       96

Как убедиться, что я получу правильный селектор CSS / CTA для кнопки при автоматизации входа в систему?

2 голосов
/ 13 июля 2020

Я пытаюсь автоматизировать логин с каким-то кодом javascript. В настоящий момент мой процесс проверяет элементы каждого поля имени пользователя, поля пароля и кнопки входа. Затем я просто использую «селектор копирования», чтобы найти селектор и соответствующим образом настроить мой. js файл.

Это отлично сработало, например, в linkedin: URL: 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).

Например: URL: 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 на странице.

Кто-нибудь знает, что я могу сделать, чтобы получить правильный селектор?

1 Ответ

2 голосов
/ 13 июля 2020

Вы можете использовать подход semanti c с селекторами XPath . Мы можем создавать выражения сопоставления текста с помощью XPath, используя метод contains(). Таким образом, можно захватить элементы (например, <button>) по их внутреннему тексту.

Вы можете проверить это на консоли chrome, запустив $x('//button[contains(text(), "Sign in")]').

И это выглядит так: это в кукловоде (вам понадобится page.$x в случае xpaths для выбора элементов): 

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)
...