Web自动化-04-CSS_Selector

最新推荐文章于 2025-04-26 21:44:20 发布

原创最新推荐文章于 2025-04-26 21:44:20 发布 · 297 阅读

1 ·

CC 4.0 BY-SA版权

python 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了CSS选择器的使用，包括tag_name、id、class_name选择器，以及属性选择器的各种匹配方式，如精确匹配、模糊匹配等。此外，还探讨了组合选择器的应用，如并集选择器、后代选择器、子元素选择器和相邻兄弟选择器，这些在Python-Selenium自动化测试中至关重要。

CSS选择器

CSS 层叠样式样表，定义页面的样式
CSS选择器与前端的语法一致。
id、name、class_name、tag_name在Python-Selenium在底层都是通过css_selector来定位。

使用的HTML文档

<!DOCTYPE html> <!-- 声明这个文档是一个HTML5页面 -->
<html lang="en">
<!-- 表示文档是英文字符源码 -->

<head>
    <meta charset="UTF-8">
    <title>Selenium元素定位</title>
    <style>
        a:hover {
            color: red;
        }
    </style>
</head>

<body>
    <div id="school">
        <div class="teacher"><span>老师1</span></div>
        <div class="teacher"><span>老师2</span></div>
        <div class="teacher"><span>老师3</span></div>
        <div class="student"><span>学生1</span></div>
        <div class="student"><span>学生2</span></div>
        <div class="student"><span>学生3</span></div>
    </div>
    <input type="text" id="searchtext" />
    <div id='container'>
        <div id='layer1'>
            <div id='inner11'>
                <span>内层11</span>
            </div>
            <div id='inner12'>
                <span>内层12</span>
            </div>
        </div>
        <div id='layer2'>
            <div id='inner21'>
                <span>内层21</span>
            </div>
        </div>
    </div>
    <div id='bottom'>
        <div class='footer1'>
            <span class='telephone'>电话：023-67989870</span>
            <span class='date'>发布日期：2020-12-25</span>
        </div>
        <div class='footer2'>
            <span>
                <a href="https://www.woniuxy.com/" target="_blank">蜗牛学院</a>
            </span>
        </div>
    </div>
</body>

</html>

一、CSS的tag_name选择器

from selenium import webdriver
from selenium.webdriver.common.by import By

wd = webdriver.Edge()
wd.get(r'D:\CharmWorkspace\WNTesting\Web自动化_HTML文档\element_select.html')

we = wd.find_element(By.CSS_SELECTOR, """a""")
print(we.get_attribute('innerHTML'))            # innerHTML用来获取元素的文案

二、CSS的id选择器

we = wd.find_element(By.CSS_SELECTOR, """#searchtext""")
print(we.get_attribute('outerHTML'))

三、CSS的class_name选择器

we = wd.find_elements(By.CSS_SELECTOR, """.student""")
for ele in we:
    print(ele.get_attribute('innerHTML'))

四、属性选择器

[属性名]：通过属性名定位，即元素中包含这个属性则定位成功

# 4.1 [属性名]：元素中包含这个属性则定位成功
we = wd.find_elements(By.CSS_SELECTOR, """[id]""")
for ele in we:
    print(ele.get_attribute('outerHTML'))

[属性名=属性值]：指定属性值来定位元素

we = wd.find_element(By.CSS_SELECTOR, """[id=container]""")
print(we.get_attribute('outerHTML'))

print('----------------')

we = wd.find_element(By.CSS_SELECTOR, """[type="text"]""")
print(we.get_attribute('outerHTML'))

[属性名*=属性值]：模糊匹配

we = wd.find_element(By.CSS_SELECTOR, """[type*="ex"]""")
print(we.get_attribute('outerHTML'))

[属性名^=属性值]：以开头匹配

we = wd.find_element(By.CSS_SELECTOR, """[type^="te"]""")
print(we.get_attribute('outerHTML'))

[属性名$=属性值]：以结尾匹配

we = wd.find_element(By.CSS_SELECTOR, """[type$="xt"]""")
print(we.get_attribute('outerHTML'))

五、组合选择器

element1,element2：表示同时查找多个元素，或的意思

we = wd.find_elements(By.CSS_SELECTOR, """#inner11,#inner21,#inner12""")
for ele in we:
    print(ele.get_attribute('outerHTML'))

element1 element2：表示定位element1中所有后代元素element2

we = wd.find_elements(By.CSS_SELECTOR, """#school div""")
print(len(we))

we = wd.find_elements(By.CSS_SELECTOR, """#container span""")
for ele in we:
    print(ele.get_attribute('outerHTML'))

element1 > element2：定位element1的直接子元素element2

we = wd.find_elements(By.CSS_SELECTOR, """#container > div""")
print(we)
for ele in we:
    print(ele.get_attribute('id'))

element1 + element2：表示element1紧跟的element2同级元素

we = wd.find_element(By.CSS_SELECTOR, """#school + div""")
print(we.get_attribute('outerHTML'))

element1 ~ element2：表示 element1的同级元素element2

we = wd.find_elements(By.CSS_SELECTOR, """#school ~ input""")
for ele in we:
    print(ele.get_attribute('outerHTML'))