如何从 Selenium 动态生成的页面中获取 HTML 元素？

Question

我正在尝试登录我的帐户 Figure eight

使用 selenium 和 python 但我不能，因为页面中没有任何 HTML 元素，只有这些行存在。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="ie=edge" http-equiv="x-ua-compatible">
    <title>Figure Eight Contributor Portal</title>
    <link href="/favicon.ico" rel="shortcut icon" />
    <link href="//fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet" />
    <link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />
  </head>
  <body>
    <div id="app">
    </div>
    <script src="/1.index.js?eca43d17e540e40a3231" type="text/javascript"></script>
    <script src="/index.js?eca43d17e540e40a3231" type="text/javascript"></script>
  </body>
</html>

令人惊讶的是，当我使用检查元素时，我可以获得 HTML 元素。在 Whosebug 和 google 上搜索类似主题，但找不到任何解决方案。我尝试登录的代码是：

from selenium import webdriver
from selenium.webdriver.support.expected_conditions import presence_of_element_located
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver import Chrome

def sign_in(driver, url):
    driver.get(url)
    WebDriverWait(driver, 60).until(presence_of_element_located(driver.find_element_by_id('Email')))
    username = driver.find_element_by_id("Email")
    password = driver.find_element_by_id("Password")
    username.send_keys("##########")
    password.send_keys("@@@@@@@@@@")
    driver.find_element_by_name("Sign in").click()
    return True, "Success"

url = "https://contributors.figure-eight.work/login"
driver = Chrome()
result, message = sign_in(driver, url)
if result:
    print(message)

Answer 1

所有元素都出现在页面上，您可以通过在 chrome 或 firefox 上检查页面上的任何元素来找到这些元素。

您可以使用代码登录（已为以下代码中的所有元素添加 xpath）：

from selenium import webdriver
from selenium.webdriver.support.expected_conditions import 
presence_of_element_located
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver import Chrome



def sign_in(driver, url):
    driver.get(url)
    WebDriverWait(driver, 60).until(
    presence_of_element_located(
        driver.find_element_by_xpath("//input[@name='email']")))
    username = driver.find_element_by_xpath("//input[@name='email']")
    password = driver.find_element_by_xpath("//input[@name='password']")
    username.send_keys("##########")
    password.send_keys("@@@@@@@@@@")
    driver.find_element_by_xpath("//a[text()='Sign in']").click()
    return True, "Success"

url = "https://contributors.figure-eight.work/login"
driver = Chrome()
result, message = sign_in(driver, url)
if result:
    print(message)

Answer 2

要发送一个字符序列到电子邮件和密码字段你必须诱导WebDriverWait 用于 element_to_be_clickable() 并且您可以使用以下任一项 :

使用CSS_SELECTOR:

driver.get('https://contributors.figure-eight.work/login')
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input[name='email']"))).send_keys("mohammed@awni.com")
driver.find_element_by_css_selector("input[name='password']").send_keys("mohammed@awni.com")
driver.find_element_by_css_selector("div.b-Login__ButtonHolder>a").click()

使用XPATH:

driver.get('https://contributors.figure-eight.work/login')
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@name='email']"))).send_keys("mohammed@awni.com")
driver.find_element_by_xpath("//input[@name='password']").send_keys("mohammed@awni.com")
driver.find_element_by_xpath("//div[@class='b-Login__ButtonHolder']/a").click()

注意：您必须添加以下导入：

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

浏览器快照：

如何从 Selenium 动态生成的页面中获取 HTML 元素？

How to get HTML elements from dynamically generated page in Selenium?

python

xpath

css-selectors

selenium-webdriver

webdriverwait