selenium----CSS表达式选择元素

news2024/9/20 22:32:05

前面我们学习了根据 id、class属性、tag名选择元素。

如果我们要选择的元素没有id、class 属性，或者有些我们不想选择的元素也有相同的 id、class属性值，怎么办呢？这时候我们通常可以通过 CSS selector 语法选择元素。

选择元素

通过 CSS Selector 选择单个元素的方法是

find_element(By.CSS_SELECTOR, CSS Selector参数)

选择所有元素的方法是

find_elements(By.CSS_SELECTOR, CSS Selector参数)

根据tag、id、class选择元素

elements = wd.find_elements(By.CSS_SELECTOR, 'div')

等价于之前学习过的

elements = wd.find_elements(By.TAG_NAME, 'div')

根据id属性选择元素的语法是在id号前面加上一个井号： #id值

element = wd.find_element(By.CSS_SELECTOR, '#searchtext')

选择子元素和后代元素

HTML中，元素内部可以 包含其他元素，比如下面的 HTML片段

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

id 为 container 的div元素包含了 id 为 layer1 和 layer2 的两个div元素。这是他的直接子元素。而id=inner11这种属于是后代元素，就是说，与最上面的元素不管隔了几层，都属于后代元素。

选择子元素

如果 元素2 是 元素1 的直接子元素， CSS Selector 选择子元素的语法是这样的

元素1 > 元素2

给浏览器传过去之后，就告诉浏览器找到元素2

选择后代元素

如果 元素2 是 元素1 的后代元素， CSS Selector 选择后代元素的语法是这样的

元素1   元素2

中间有一个空格。

选择其他属性

<a href="http://www.miitbeian.gov.cn">苏ICP备88885574号</a>

css 选择器支持通过任何属性来选择元素，语法是用一个方括号 [] 。

比如要选择上面的a元素，就可以使用 [href="http://www.miitbeian.gov.cn"] 。

这个表达式的意思是，选择属性href值为 http://www.miitbeian.gov.cn 的元素。

# 根据属性选择元素
element = wd.find_element(By.CSS_SELECTOR, '[href="http://www.miitbeian.gov.cn"]')

# 根据属性选择元素
element = wd.find_element(By.CSS_SELECTOR, '[href]')

验证CSS Selector

怎么验证 CSS Selector 的语法是否正确选择了我们要选择的元素呢？

写出Python代码，运行看看，能否操作成功.

在测试网站中点击ctrl+F，然后出现搜索框，上面写上你需要找到的元素，如果你的写法是错误的，就不会有高亮地方提示，说明，你的写法是错的，就不用再去python里面执行了，这时候你就再在这个搜索框里把这个元素写对就好了。

比如说我上面一开始写#footer1 span,找不到元素，所以我后面改成了.footer1 span。

其他选择元素写法

如果要选择两种，比如说我要选择植物和动物：.plant,.animal。中间用逗号隔开。

根据次序选择子元素-父元素的第n个子节点

    <body>  
       <div id='t1'>
           <h3> 唐诗 </h3>
           <span>李白</span>
           <p>静夜思</p>
           <span>杜甫</span>
           <p>春夜喜雨</p>              
       </div>      

       <div id='t2'>
           <h3> 宋词 </h3>
           <span>苏轼</span>
           <p>赤壁怀古</p>
           <p>明月几时有</p>
           <p>江城子·乙卯正月二十日夜记梦</p>
           <p>蝶恋花·春景</p>
           <span>辛弃疾</span>
           <p>京口北固亭怀古</p>
           <p>青玉案·元夕</p>
           <p>西江月·夜行黄沙道中</p>
       </div>             

    </body>

我们可以指定选择的元素 是父元素的第几个子节点

使用 nth-child

比如，我们要选择唐诗和宋词的第一个作者，也就是说选择的是第2个子元素，并且是span类型所以这样可以这样写 span:nth-child(2) ，如果你不加节点类型限制，直接这样写 :nth-child(2)就是选择所有位置为第2个的所有元素，不管是什么类型。