如何在 Selenium 中使用 Xpath 或 Css 选择器访问 HTML DOM 属性

Question

硒版本 3.141。 Chrome 驱动程序，Windows 10

你好， 目的是提取 HTML DOM 属性的值，特别是从 website 显示的每个图像的 id、href 和 data-download-file-url（选择本网站纯粹是出于教育目的）。虽然存在其他可用于提取所有这些项目的方法，但目前，我使用find_elements_by_xpath 方法。但是，如果有人想提出我不知道的更有效的方法，我欢迎。

从上述网站，目标元素的 Xpath 是

/html/body/main/section[2]/div/div/figure[X]/div

大写X表示上述网站的取值范围为1到50的Image标签。每个数字都属于 showcase__content 类。

我尝试了以下几行

titles_element = browser.find_elements_by_xpath("//div[@class='showcase__content']/a")
# List Comprehension to get the actual repo titles and not the selenium objects.
titles = [x.text for x in titles_element]

但是，titles_element 没有提取 dom 属性。因此titles 产生[]。

我也很想尝试以下方法，但它给了我一个错误

titles_element = browser.find_elements_by_xpath("//figure[1]/div[@class='showcase__content']//@data-download-file-url")

如果有人能阐明这个问题，我真的很感激。

图 1 的 DOM 属性示例。这些属性都是粉红色的。 https://drive.google.com/open?id=190q615C3uXLZUQNI8K4AJYL3Slii1ktO

Answer 1

现在我可以得到<img>标签，并得到图片的url：

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://www.freepik.com/search?dates=any&format=search&page=1&query=Polygonal%20Human&sort=popular")
# result = WebDriverWait(driver,5).until(EC.element_located_to_be_selected(driver.find_elements_by_css_selector("[class='lzy landscape lazyload--done']"))) 
result = driver.find_elements_by_css_selector("[class='lzy landscape lazyload--done']") # the class always be "lzy landscape lazyload--done"
for i in result:
    print(i.get_attribute('src'))

结果：

https://img.freepik.com/free-vector/innovative-medicine-abstract-composition-with-polygonal-wireframe-images-human-hand-carefully-holding-heart-vector-illustration_1284-30757.jpg?size=626&ext=jpg
https://img.freepik.com/free-vector/computer-generated-rendering-hand_41667-189.jpg?size=626&ext=jpg
https://img.freepik.com/free-vector/polygonal-wireframe-business-strategy-composition-with-glittering-images-human-hand-incandescent-lamp-with-text_1284-32265.jpg?size=626&ext=jpg
https://img.freepik.com/free-vector/particles-geometric-art-line-dot-engineering_31941-119.jpg?size=626&ext=jpg
........

或获取展示__链接：

result = driver.find_elements_by_css_selector("[class='showcase__link']")
for i in result:
    print(i.get_attribute('href'),i.get_attribute('id'),i.get_attribute('data-download-file-url'))

Answer 2

试试这个（代码 cmets 中的解释）：

from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()

driver.get("https://www.freepik.com/search?dates=any&format=search&page=1&query=Polygonal%20Human&sort=popular")

sleep(1)

# get the all "a" elements by xpath (class name), so you can use find_elements_by_class_name() instead if you want
titles_element = driver.find_elements_by_xpath("//a[@class='showcase__link']")


# loop through the elements and extract the id, href, and data-download-file-url attributes
for element in titles_element:
    id = element.get_attribute('id')
    href =  element.get_attribute('href')
    file_url= element.get_attribute('data-download-file-url')
    print (id, href, file_url)

输出：

dtl-7200954 https://www.freepik.com/free-vector/innovative-medicine-abstract-composition-with-polygonal-wireframe-images-human-hand-carefully-holding-heart-vector-illustration_7200954.htm#page=1&query=Polygonal%20Human&position=0 https://www.freepik.com/download-file/7200954
dtl-4228610 https://www.freepik.com/premium-vector/particles-geometric-art-line-dot-engineering_4228610.htm#page=1&query=Polygonal%20Human&position=1 https://www.freepik.com/download-file/4228610
dtl-7379608 https://www.freepik.com/free-vector/polygonal-wireframe-business-strategy-composition-with-glittering-images-human-hand-incandescent-lamp-with-text_7379608.htm#page=1&query=Polygonal%20Human&position=2 https://www.freepik.com/download-file/7379608
dtl-7200952 https://www.freepik.com/free-vector/two-luminescent-polygonal-wireframe-human-hands-stretching-towards-each-other_7200952.htm#page=1&query=Polygonal%20Human&position=3 https://www.freepik.com/download-file/7200952
.
.
.