How do I ensure I get the correct CSS/CTA Selector for a button when automating a login?

user_13023846 0
Viewed 126

I'm trying to automate a login with some javascript code. My process at the moment is inspecting element of each the username box, password box and login button. I then simple use "copy selector" to find the selector and adjust my .js file accordingly.

This worked perfectly well on linkedin for example: 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';

However, using the same method on some other sites does not work with the login/submit button (CTA_SELECTOR).

For example: 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';

Running this will tell me it cannot find the CTA_SELECTOR on the page.

Does anyone know what I can do to ensure I do get the correct selector?

puppeteer node.js web-scraping css javascript
1 Answers

You could use a semantic approach with XPath selectors. We are able to build text matching expressions with XPath using the contains() method. Like this it is possible to grab elements (e.g. a <button>) by their innerText.

You can test it on chrome console by running $x('//button[contains(text(), "Sign in")]').

And it looks like this in puppeteer (you will need page.$x in case of xpaths to select elements):

const signInBtn = await page.$x('//button[contains(text(), "Sign in")]')
await signInBtn[0].click()

If the format of "Sign in" text can differ among the visited sites you can parameterize it for each pages. E.g.:

const signInContent = 'Sign in'
const signInXpath = `//button[contains(text(), "${signInContent}")]`
const signInBtn = await page.$x(signInXpath)
user_124125950
Related