Selenium cannot find element by name or id (Python)

Question

I am trying to automate logging into a website using selenium, but I am getting "no such element message" error. Here is my code, with the link to the website included:

from selenium import webdriver
import time
import datetime

driver = webdriver.Chrome("C:\\Users\\Family\\Downloads\\chromedriver_win32\\chromedriver.exe")
driver.get("https://login.microsoftonline.com/c4d72b4d-8155-4a90-9155-7705148c41ca/saml2?SAMLRequest=jdE9a8MwEAbgvdD%2fYLRbkh3ZVoQdCO0SSJek7dClnJVzYrClVCeX%2fvw6DaEdu90HLzzc1espntwOPyakmGweG0YwDuHav3eqqFSHOZRQKZAZdJDpDjToKisXiCx5xUC9dw3LuWTJhmjCjaMILs4jmWepVKnMnrPCyNIscq601pVUbyxZE2GIc%2fbBO5pGDHsMn73Fl922YacYz2SEiAdqOQ4IwfXu6F2E0HtuQRzyQQxnAbNeDP7YO3Fxby8Vn3cs%2bRoHRw2bgjMeqCfjYEQy0Zr9%2bmlrZq45Bx%2b99QNb3d8lSf2DD%2f8Jwo3OVjdokdlSVrZKUS10quTSphrLIi00drrVebksWh7RzYch3ob%2beIp0Bovc%2bvGXXosrYgbV4u9nVt8%3d&RelayState=%2fd2l%2fhome&sso_reload=true")

login_button = driver.find_element_by_id("i0116")
login_button.send_keys("sajjad.jessa@student.tdsb.on.ca")

And here is the element I am trying to access with my code:

 <input type="email" name="loginfmt" id="i0116" maxlength="113" lang="en" class="form-control ltr_override input ext-input text-box ext-text-box" aria-required="true" data-bind=" externalCss: { 'input': true, 'text-box': true, 'has-error': usernameTextbox.error }, ariaLabel: tenantBranding.UserIdLabel || str['CT_PWD_STR_Username_AriaLabel'], ariaDescribedBy: 'loginHeader' + (pageDescription &amp;&amp; .svr?fHideLoginDesc: ' loginDescription', ''): textInput. usernameTextbox,value: hasFocusEx. usernameTextbox,focused: placeholder, $placeholderText" aria-label="Enter your TDSB email address here, then click Next" aria-describedby="loginHeader" placeholder="Enter your TDSB email address here, then click Next">

From other answers I understand that you have to use driver.find_element_by_css_selector() and driver.switch_to.frame(), but if you look at the full hypertext of the website, the first frame to go into is a "div" tag without any attributes. It is however the only "div" tag alongside two "script" tags. I need the correct code to go into the frame, or another method to automate logging in.

Answer 1

The most of the large websites now uses dynamic layout. You should look for the parents with static css selector, and then do something like that:

.parent_css_selector > div:nth-child(1) > div:nth-child(3) > img > input

Token '>' is supposed to look only for direct childs, token ':nth-child' asserts to the child number in parent.

Example:

<div class="parent_css_selector">
    <div id="random_id_12312313">
        <div id="unneccesary_123123"></div>
        <div id="random_id_341234">
            <form id="random_id_345545">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span>
                    <input id="neccesary_13843942"></input>
                </span>
            </form>
        </div>
    </div>
</div>

You can use this selector to access the input:

.parent_css_selector > div > div:nth-child(2) > form > span:nth-child(5) > input

Answer 2

It seems synchronization Issue. Induce WebDriverWait() and wait for element_to_be_clickable()

login_button =WebDriverWait(driver,20).until(EC.element_to_be_clickable((By.ID,"i0116")))
login_button.send_keys("sajjad.jessa@student.tdsb.on.ca")

You need to import following libraries.

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

---

login_button =WebDriverWait(driver,20).until(EC.element_to_be_clickable((By.NAME,"loginfmt")))