Selenium cannot find element by name on instagram autorisation page

I'm getting unexpected result when trying to handle username input field on instagram autorization page with selenium.

Code:

from selenium import webdriver
from selenium.webdriver.common.by import By

patch = r'{patch to driver}'
driver = webdriver.Chrome(patch)
driver.get('https://api.instagram.com/oauth/authorize?client_id=965975207687609&redirect_uri=https://6b4c-46-39-51-57.ngrok.io/autos/index.php/&scope=user_profile,user_media&response_type=code')
elem = driver.find_element(By.NAME, 'username')

The page driver is redirected to is: https://www.instagram.com/accounts/login/?force_authentication=1&enable_fb_login=1&next=/oauth/authorize%3Fclient_id%3D965975207687609%26redirect_uri%3Dhttps%3A//6b4c-46-39-51-57.ngrok.io/autos/index.php/%26scope%3Duser_profile%2Cuser_media%26response_type%3Dcode and this page defenitely has element eith name "username" on it but I'm getting a bunch of error messages instead:

C:\Users\digit\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Python 3.10\gitdir\api\insta_api.py:54: DeprecationWarning: executable_path has been deprecated, please pass in a Service object   driver = webdriver.Chrome(patch)
DevTools listening on ws://127.0.0.1:58299/devtools/browser/8fd4d931-7cc4-4070-b3f6-3a6a0df9769e Traceback (most recent call last):   File "C:\Users\digit\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Python 3.10\gitdir\api\insta_api.py", line 64, in <module>
    elem = driver.find_element(By.NAME, 'username')   File "C:\Users\digit\AppData\Local\Programs\Python\Python310\lib\site-packages\selenium\webdriver\remote\webdriver.py", line 1244, in find_element
    return self.execute(Command.FIND_ELEMENT, {   File "C:\Users\digit\AppData\Local\Programs\Python\Python310\lib\site-packages\selenium\webdriver\remote\webdriver.py", line 424, in execute
    self.error_handler.check_response(response)   File "C:\Users\digit\AppData\Local\Programs\Python\Python310\lib\site-packages\selenium\webdriver\remote\errorhandler.py", line 247, in check_response
    raise exception_class(message, screen, stacktrace) selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector","selector":"[name="username"]"}   (Session info: chrome=97.0.4692.71)

The username field on Instagram Login Page is a ReactJS element. So to send a character sequence you have to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:

• Using CSS_SELECTOR:

  driver.get('https://api.instagram.com/oauth/authorize?client_id=965975207687609&redirect_uri=https://6b4c-46-39-51-57.ngrok.io/autos/index.php/&scope=user_profile,user_media&response_type=code')
  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input[name='username']"))).send_keys("Ignat")
  

• Using XPATH:

  driver.get('https://api.instagram.com/oauth/authorize?client_id=965975207687609&redirect_uri=https://6b4c-46-39-51-57.ngrok.io/autos/index.php/&scope=user_profile,user_media&response_type=code')
  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@name='username']"))).send_keys("Ignat")
  

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