How to locate the username and password field within Instagram login page using Chromedriver and Selenium Python

问题

Here's inspected source code

input aria-label="Phone number, username, or email" aria-required="true" autocapitalize="off" autocorrect="off" maxlength="75" name="username" type="text" class="_2hvTZ pexuQ zyHYP" value=""

I have tried this code run

driver = webdriver.Chrome()
driver.get('https://www.instagram.com/')
driver.find_element_by_xpath("//input[@name=\"username\"]").send_keys(username)
driver.find_element_by_xpath("//input[@name=\"password\"]").send_keys(pw)
driver.find_element_by_xpath('//button[@type="submit"]').click()

But having error like this

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//input[@name="username"]"}
  (Session info: chrome=83.0.4103.61)

My chromedriver and chrome version are match, and finding elements by following instruction. Why am I getting this error?

回答1:

Instagram application is built through React elements. Hence just after invoking the url when you initiate the search for the login element, you face NoSuchElementException

---

Solution

To login within Instagram using a valid set of credentials you need to induce WebDriverWait for the element_to_be_clickable() and you can use the following Locator Strategy:

• Using XPATH:

  driver.get("https://www.instagram.com/")
  WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//input[@name='username']"))).send_keys("username")
  driver.find_element_by_xpath("//input[@name='password']").send_keys("password")
  driver.find_element_by_xpath("//button/div[text()='Log In']").click()
  

• Note : You have to add the following imports:

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

Browser Snapshot:

---

Reference

You can find a couple of relevant discussions in:

• Filling in login forms in Instagram using selenium and webdriver (chrome) python OSX
• selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element while trying to click Next button with selenium

回答2:

Observe that while open instagram homepage, it shows spinner on login form for few moment and then display the fields. So your need to manage synchronization in your script.

Use explicit wait in your code until desired field get ready for interaction.

username = WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//input[@name='username']")))
username.send_keys('username')
password = WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//input[@name='password']")))
password.send_keys('pw')

Need to import below packages

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

回答3:

Try the below code:

driver = webdriver.Chrome()
driver.get('https://www.instagram.com/')
txt_user = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.NAME, 'username')))
txt_user.send_keys('yourUserName')
txt_pwd = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.NAME, 'password')))
txt_pwd.send_keys('yourPassword')
btn_submit = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, 'button[type="submit"]')))
btn_submit.click()

Following import:

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

回答4:

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

driver = webdriver.Chrome()  
driver.get('https://www.instagram.com/')
element = WebDriverWait(driver, 2).until(
    EC.presence_of_element_located((By.ID, "//input[@name=\"username\"]"))
)
element.sendkeys('user')

来源：https://stackoverflow.com/questions/62018006/how-to-locate-the-username-and-password-field-within-instagram-login-page-using