Logging Into An AngularJS Site Using Selenium

Question

New to Selenium, but my understanding is that it doesn't play nice with AngularJS sites. I'm using Javascript to access input boxes and I successfully populate them with values, but then when I click on the Login button programmatically or not, I get a "wrong username or password" error. What am I doing wrong?

Here's what the code looks like (without personal details of course):

from selenium import webdriver
from selenium.webdriver.common.keys import Keys

import time

PATH = "/Users/<home drive>/Documents/chromedriver"
driver = webdriver.Chrome(PATH)

driver.get("https://www.binarycent.com/")

link = driver.find_element_by_link_text("Login")
link.click()

#javascript finds an input element and changes its text value to my username
print(driver.execute_script("document.getElementsByTagName('input')[2].value = \"myusername\""))

#javascript finds an input element and changes its text value to my password
print(driver.execute_script("document.getElementsByTagName('input')[3].value = \"mypassword\""))
time.sleep(20)

#print(driver.execute_script("document.getElementsByTagName('button')[0].click()"))

time.sleep(2)

driver.quit()

Here's what the site inspection yields for the email and password input fields:

Are you sure if they are correct ? Cause you have mentioned that even manually you are seeing that error — cruisepandey
– cruisepandey, Commented Aug 19, 2021 at 18:26
It's fails only in the Chrome window generated by my Python code. If I use a Chrome tab not generated by Python, it logs in without issue. U/N and P/W are definitely fine. — 02fentym
– 02fentym, Commented Aug 19, 2021 at 18:29
should use sendKeys... any reason you're setting the 'value' attribute instead? — browsermator
– browsermator, Commented Aug 19, 2021 at 18:42
Yeah, as stated in the question above and shown in the image, the only way to identify/capture these tags is via Javascript. Can I use send_keys still? — 02fentym
– 02fentym, Commented Aug 19, 2021 at 18:54

cruisepandey · Accepted Answer · 2021-08-20 06:03:11Z

I do not have the right credentials to check this out, but I believe below code should work :

This code is with Explicit waits and with good css selectors, help you by past this issue.

driver = webdriver.Chrome(driver_path)
driver.maximize_window()
driver.get("https://www.binarycent.com/")
wait = WebDriverWait(driver, 10)

link = wait.until(EC.element_to_be_clickable((By.LINK_TEXT, "Login")))
link.click()

wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "input[ng-model='email']"))).send_keys('user name should be given here')
wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "input[ng-model='password']"))).send_keys('password should be given here')
wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, "button[class*='ui primal']"))).click()

Imports :

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

jaewhicha · Accepted Answer · 2021-08-19 19:03:54Z

0

Try to use the sendKeys() method so that Angular can listen to the events being sent by normal key press events.

The reason for this is that Angular expects events for data binding and with an attribute on an input box gets overridden it doesn't trigger an Angular onChange event.

Example:

from selenium import webdriver
from selenium.webdriver.common.keys import Keys

import time

PATH = "/Users/<home drive>/Documents/chromedriver"
driver = webdriver.Chrome(PATH)

driver.get("https://www.binarycent.com/")

link = driver.find_element_by_link_text("Login")
link.click()

#javascript finds an input element and changes its text value to my username
driver.find_elements_by_tag_name('input')[2].send_keys('updateWithUsername')

#javascript finds an input element and changes its text value to my password
driver.find_elements_by_tag_name('input')[3].send_keys('updateWithPassword')
time.sleep(20)

driver.find_elements_by_tag_name('button')[0].click()

time.sleep(2)

driver.quit()

Replace 'updateWithUsername' and 'updateWithPassword' with your actual values

edited Aug 19, 2021 at 19:03

answered Aug 19, 2021 at 18:44

jaewhicha

12 bronze badges

4 Comments

02fentym Over a year ago

I just tried your solution, but it's not filling in the email or password anymore.

jaewhicha Over a year ago

My apologies, found a syntax issuesendKeys() should be send_keys() in Python chrome driver. I will edit the answer. EDIT: find_element_by_tag_name should also be find_elements_by_tag_name as well.

02fentym Over a year ago

Going to try it now.

02fentym Over a year ago

This gives me an invalid username or password message :/

Collectives™ on Stack Overflow

Logging Into An AngularJS Site Using Selenium

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related