1

There is an HTML page that I would like to find the elements of two input types and press one button to log in with the help of selenium along with python3. The problem is that I can't seem to find a way of doing this correctly.

The two texts and the button are in a form without an id or some tag, also I'm new on this one.

Below there is the HTML code with the two text fields (Email & Password) I need to find with the selenium WebDriver along with the submit button.

HTML CODE:

<form action="https://www.example.com/login" autocomplete="on" method="post" role="form">
<input type="hidden" name="_token" value="asdc">

<div class="form-group">
<input type="email" name="email"                                       class="form-control " placeholder="Email"
value="" autofocus>
</div>

<div class="form-group">
<input type="password" name="password" class="form-control " placeholder="Password">
</div>

<div class="form-group">
<button type="submit" class="btn btn-primary btn-block" style1="height: 41px; font-size: 18px">Sign In</button></div>
</form>

Full HTML (URLS are changed) :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Login</title>

   
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <link rel="shortcut icon" type="image/png" href="https://example.com/favicon.png?"/>

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900"
          rel="stylesheet">

    <!-- Icon fonts -->
    <link href="/fonts/fontawesome-pro/css/all.min.css" rel="stylesheet" type="text/css"/>

    <!-- theme -->
    <link id="theme-link" href="https://example.com/theme.css?&amp;ver=a_230wednesday_10_nov_2021_135539_utc" rel="stylesheet" type="text/css"/>

        <link href="https://example.com/login.css?&amp;ver=a_230wednesday_10_nov_2021_135539_utc" rel="stylesheet" type="text/css"/>


<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag( 'js', new Date() );
    gtag( 'config', "UA-101862321-1" );
</script>
</head>

<body>
    <div class="limiter d-none">
        <div class="container-login100">
            <div class="wrap-login100 align-content-center align-items-center">
                <div class="login100-pic js-tilt" data-tilt>
                    <img src="https://example.com/login-illustration.png?"/>
                </div>
                <div class="login100-form">
                    <div class="text-center mb-3">
                        <img src="https://example.com/logo-login.png?"/>
                    </div>

                    <div class="card-body p-4">
                                                                        <form action="https://www.example.com/login" autocomplete="on" method="post" role="form">
                            <input type="hidden" name="_token" value="Somevalue">
                            <div class="form-group">
                                <input type="email" name="email"
                                       class="form-control " placeholder="Email"
                                       value="" autofocus>


                                                            </div>
                            <div class="form-group">
                                <input type="password" name="password" class="form-control " placeholder="Password">

                                                            </div>
                            <div class="form-group">
                                <label class="custom-control custom-checkbox">
                                    <input id="remember" name="remember" type="checkbox" class="custom-control-input" value="1">
                                    <span class="custom-control-label">Remember me</span>
                                </label>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary btn-block" style1="height: 41px; font-size: 18px">Sign In</button>
                            </div>
                        </form>
                        <div class="d-flex align-items-center form-group">
                            <hr class="flex-grow-1"/>
                            <div class="text-muted px-3">
                                OR CONNECT WITH
                            </div>
                            <hr class="flex-grow-1"/>
                        </div>
                                                    <a href="https://example.com/login/office" class="btn btn-default text-center btn-block">
                                <img src="https://example/office-365.png?&amp;ver=a_230wednesday_10_nov_2021_135539_utc" class="img-fluid"/>
                            </a>
                                                                        <div class="text-right mt-3">
                            <a href="https://www.example.com/password/reset">
                                Forgot Your Password?
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>





    <div class="login-cover-bg">
        <div class="login-box d-flex justify-content-between align-items-center">
            <div class="login100-pic">
                <img src="https://example.com/logo-login.png?"/>
            </div>
            <div class="login100-form">
                <div class="text-center mb-3">
                    <img src="https://example.com/logo-login.png?" class="img-fluid"/>
                </div>
                <div class="card-body p-4">
                                                            <form action="https://www.example.com/login" autocomplete="on" method="post" role="form">
                        <input type="hidden" name="_token" value="somevalue">
                        <div class="form-group">
                            <input type="email" name="email"
                                   class="form-control " placeholder="Email"
                                   value="" autofocus>


                                                    </div>
                        <div class="form-group">
                            <input type="password" name="password" class="form-control " placeholder="Password">

                                                    </div>
                        <div class="form-group">
                            <label class="custom-control custom-checkbox">
                                <input id="remember" name="remember" type="checkbox" class="custom-control-input" value="1">
                                <span class="custom-control-label">Remember me</span>
                            </label>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary btn-block" style1="height: 41px; font-size: 18px">Sign In</button>
                        </div>
                    </form>
                    <div class="d-flex align-items-center form-group">
                        <hr class="flex-grow-1"/>
                        <div class="text-muted px-3">
                            OR CONNECT WITH
                        </div>
                        <hr class="flex-grow-1"/>
                    </div>
                                            <a href="https://www.example.com/login/office" class="btn btn-default text-center btn-block">
                            <img src="office-365.png?&amp;ver=a_230wednesday_10_nov_2021_135539_utc" class="img-fluid"/>
                        </a>
                                                            <div class="text-right mt-3">
                        <a href="https://www.example.com">
                            Forgot Your Password?
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!-- Core scripts From Bootstrap 4.4-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" "></script>

</body>
</html>

My code so far:

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


PATH = "C:\Program Files (x86)\chromedriver.exe"

driver = webdriver.Chrome(PATH)
  

driver.get("http://example.com/")


try:
    element = WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.LINK_TEXT, "Login to start working"))
    )
    element.click()

    element = WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.XPATH, "//input[@placeholder='Password']"))
    )
    element.click()
    element.send_keys('random@random.com')
    element.send_keys(Keys.ENTER)

    element = WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.ID, "Submit"))
    )
    element.click()

    
except Exception as exc:
    driver.quit()
    print(exc)

Thank you in advance!

w2learnguy
  • 75
  • 8
  • What about `//form[contains(@action, '/login')] //input[@name = 'email']` - `//form[contains(@action, '/login')] //input[@name = 'password']` - `//form[contains(@action, '/login')] //button[@type= 'submit']` ? – KunLun Nov 10 '21 at 21:33

3 Answers3

2

I just changed your code from presence_of_element_located expected conditions to presence_of_element_located, corrected the locators and make some more things clearer. I hope now this should work.

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


PATH = "C:\Program Files (x86)\chromedriver.exe"

driver = webdriver.Chrome(PATH)
  

driver.get("http://example.com/")


email_input = WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.XPATH, "//input[@name='email']")))
email_input.click()
email_input.send_keys("your_email_value")

password_input = WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.XPATH, "//input[@name='password']")))
password_input.click()
password_input.send_keys("your_password_value")

WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.XPATH, "//button[@type='submit']"))).click()
Prophet
  • 32,350
  • 22
  • 54
  • 79
  • Nothing really changed. I run it , it goes to the login page , but after 10s it quits with : "Message: " – w2learnguy Nov 10 '21 at 21:54
  • What is the message? Can you share the link to that page? – Prophet Nov 10 '21 at 21:56
  • It does not show any message only the one i pasted and can't really share the page. I pasted above the HTML code. – w2learnguy Nov 10 '21 at 21:57
  • Are you sure there is no ifame there? – Prophet Nov 10 '21 at 21:59
  • Yes , it is isnide the and a
    , no iframe.     – w2learnguy Nov 10 '21 at 22:03
  • I removed the `try-except` to see the actual exception. – Prophet Nov 10 '21 at 22:04
  • It hangs on the sign in page with the below error messages: line 19, in email_input = WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.XPATH, "//input[@name='email']"))) and line 89, in until raise TimeoutException(message, screen, stacktrace) selenium.common.exceptions.TimeoutException: Message: – w2learnguy Nov 10 '21 at 22:11
  • That means that Selenium fails to locate these elements. If there is no iframe there maybe you are opening a new tab? If so you need to switch to it. maybe something else. Your question is missing essential details... – Prophet Nov 10 '21 at 22:58
  • It does not open an new tab, you simply navigate from homepage to loginpage. And for some reason Selenium cant find those 3 elements :/ – w2learnguy Nov 11 '21 at 08:24
  • Well, I can't help without relevant details, I'm sorry. You don't share your code, don't share the page link.... – Prophet Nov 11 '21 at 08:31
  • 1
    @Prophet OP have shared the relevant HTML and possibly the url/webpage isn't a public url. Hence OP may not be in a position to share the url. Generally, pestering for page link/url is considered fawned over as per SO standards. – undetected Selenium Nov 11 '21 at 17:55
  • 2
    @DebanjanB I understand that url/webpage can be not private. But I see I can't help OP based on the provided information only, need more details. – Prophet Nov 11 '21 at 18:04
  • 2
    @Prophet Agreed, neither OP nor we can help in constructing a canonical answer to this question. Hopefully the existing answers will be beneficial to the future readers in some other way. – undetected Selenium Nov 11 '21 at 18:06
  • @Prophet , please check the full html i shared , if this help let me know please , if not i can't share anything else :/ – w2learnguy Nov 11 '21 at 19:17
  • Unfortunately I see no additionally helping information there. Can you provide ALL your code just without the site link, credentials etc? – Prophet Nov 11 '21 at 20:40
0

To click on the link Login to start working, next key in the credentials and finally to click on the Submit button you can use the following Locator Strategies:

driver.get("http://example.com/")
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.LINK_TEXT, "Login to start working"))).click()
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div.form-group > input.form-control[name='email']"))).send_keys("random@random.com")
driver.find_element(By.CSS_SELECTOR, "div.form-group > input.form-control[name='password']").send_keys("random_password")
driver.find_element(By.XPATH, "//div[@class='form-group']/button[@class='btn btn-primary btn-block' and text()='Sign In']").click()
undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
0

I found a solution by doing the above and worked:

self.driver.find_element(By.XPATH, "//div[@class='login-box d-flex justify-content-between "
                                       "align-items-center']//input[@placeholder='Email']").send_keys(
        'randommail@mail.com')

The above can be done as well for the password field.

It might help somone in the future :)

Thank you again for your time !

w2learnguy
  • 75
  • 8