如何通过Selenium，WebDriver和Python在页面中找到jQuery动态加载的元素答案

【问题标题】：How to find an element dynamically loaded by jQuery in page through Selenium, WebDriver and Python如何通过Selenium，WebDriver和Python在页面中找到jQuery动态加载的元素
【发布时间】：2018-07-16 00:11:55
【问题描述】：

我在获取页面中的项目时遇到问题，该项目是在通过 ajax 或 iframe 加载页面后加载的，有什么方法可以创建脚本等到项目出现的条件？

为了说明我的问题，我做了以下测试：

Python：

from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
from selenium.common.exceptions import TimeoutException
browser = webdriver.Firefox()
browser.get("http://localhost/test_time.php")
delay = 10 # seconds
try:
    myElem = WebDriverWait(browser, delay).until(EC.presence_of_element_located((By.ID, 'id_2'))) 
    print ("Elememento encontrado")
except TimeoutException:
    print ('Nao foi dessa vez :(')
    pass

我搜索 id_2，在 JavaScript 加载页面完成 5 秒后显示

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Teste Python</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function sleep(milliseconds) {
            var start = new Date().getTime();
            for (var i = 0; i < 1e7; i++) {
                if ((new Date().getTime() - start) > milliseconds){
                break;
                }
            }
        }
        $( document ).ready(function() {
            console.log('js start');     
            sleep(5000);
            jQuery('<div> DIV 2 </div>', {id: 'id_2', }).appendTo('#content');                      
            console.log('js Done');                 
        });
    </script>    
</head>
<body>
    <div>Main page</div>
    <div id='content'>
        <div id="id_1">DIV 1</div>
    </div>
</body>
</html>

这是我有 2 个 div 的 HTML，如果您搜索 div id_1 它没有发现问题，但 div id_2即使我确定等待时间为 10 秒，但 selenium 找不到页面加载后 5 秒显示。

我想要一盏灯来解决这个问题。

【问题讨论】：

为什么不手动等待一段时间来定位带有div id_2的元素的HTML？
您的 HTML 中没有 div id_2，您确定该元素会在 5 秒后出现吗？
@DebanjanB 因为页面没有具体的加载时间。
@AndreiSuvorkov 查看 javascript，有一个 sleep() 然后用 Jquery 创建一个 div
@Bulfaitelo 我看到了脚本，但我不确定该脚本是否符合您的要求。这就是为什么我要问div id_2 是否真的出现

标签： python jquery selenium selenium-webdriver css-selectors

【解决方案1】：

根据 HTML，您在 <script> 调用中提供了关联的 function：

jQuery('<div> DIV 2 </div>', {id: 'id_2', }).appendTo('#content');

因此，当网页完成加载时，HTML DOM 中将出现一个元素：

('<div> DIV 2 </div>', {id: 'id_2', })

您可以在这里找到关于Do we have any generic funtion to check if page has completely loaded in Selenium的讨论

最后，你可以等待元素的以下任一状态诱导WebDriverWait如下：

presence_of_element_located(locator):

myElement = WebDriverWait(driver, 20).until(expected_conditions.presence_of_element_located((By.CSS_SELECTOR, "div#id_2")))

visibility_of_element_located(locator)

myElement = WebDriverWait(driver, 20).until(expected_conditions.visibility_of_element_located((By.CSS_SELECTOR, "div#id_2")))

【讨论】：

【解决方案2】：

代替：

myElem = WebDriverWait(browser, delay).until(EC.presence_of_element_located((By.ID, 'id_2')))

试试这个：

myElem = WebDriverWait(browser, delay).until(EC.presence_of_element_located((By.XPATH, ".//*[@id='content']/div[2]")))

【讨论】：