如何使用 selenium 查找输入类型和提交类型

Question

有一个HTML页面，我想在selenium的帮助下找到两种输入类型的元素并按一个按钮登录python3。问题是我似乎找不到正确执行此操作的方法。

这两个文本和按钮在一个没有 id 或一些标签的表单中，我也是新手。

下面是 HTML 代码，其中包含两个文本字段（电子邮件和密码），我需要使用 selenium WebDriver 和提交按钮。

HTML 代码：

<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>

完整 HTML（URL 已更改）：

<!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>

到目前为止我的代码：

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)

提前致谢！

Answer 1

我刚刚将您的代码从 presence_of_element_located 预期条件更改为 presence_of_element_located，更正了定位器并使更多内容更加清晰。我希望现在这应该有用。

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()

Answer 2

单击 link Login to start working，下一步输入凭据，最后单击提交按钮你可以使用下面的:

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()

Answer 3

我通过执行上述操作找到了解决方案并成功了：

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')

密码字段也可以执行上述操作。

以后可能会对某人有所帮助:)

再次感谢您的宝贵时间！

如何使用 selenium 查找输入类型和提交类型

How to find a input type and submit type with selenium

python

selenium

xpath

python-3.x

webdriverwait