【WebDriver】selenium使用CSS定位页面元素

最新推荐文章于 2025-06-24 00:35:55 发布

灵枢_

最新推荐文章于 2025-06-24 00:35:55 发布

阅读量2.8w

点赞数 15

CC 4.0 BY-SA版权

分类专栏：自动化测试自动化测试文章标签：自动化测试 css selenium

本文链接：https://blog.youkuaiyun.com/galen2016/article/details/71106900

自动化测试同时被 2 个专栏收录

58 篇文章

订阅专栏

自动化测试

44 篇文章

订阅专栏

本文介绍了如何使用WebDriver和Selenium通过CSS选择器来定位网页元素，详细讲解了CSS定位的基本概念、实例以及与XPath定位的比较。CSS定位以其简洁、灵活和速度优势被推荐使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、CSS简介

CSS 指层叠样式表 (Cascading Style Sheets)

CSS 选择器参考手册：http://www.w3school.com.cn/cssref/css_selectors.asp

二、定位实例

1、以如下html定位为例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> css locate </title>
 </head>
 <body>
  <div class="formdiv">
    <form name="fnfn">
        <input name="username" type="text"></input>
        <input name="password" type="text"></input>
        <input name="continue" type="button"></input>
        <input name="cancel" type="button"></input>
        <input value="SYS123456" name="vid" type="text">
        <input value="ks10cf6d6" name="cid" type="text">
    </form>
    <div class="subdiv">
        <a href="http://www.baidu.com" id="baiduUrl">baidu</a>
        <ul id="recordlist">
            <p>Heading</p>
            <li>Cat</li>
            <li>Dog</li>
            <li>Car</li>
            <li>Goat</li>
        </ul>
    </div>
  </div>
 </body>
</html>

2、CSS匹配实例：

cssSelector	匹配
css=div	<div class="formdiv">
css=div.formdiv	<div class="formdiv">
css=#recordlist css=ul#recordlist	<ul id="recordlist">
css=div.subdiv p	<p>Heading</p>
css=div.subdiv>ul>p	<p>Heading</p>
css=form+div	<div class="subdiv">
css=p+li	<li>Cat</li>
css=p~li	<li>Cat</li> 得到4个li中的第一个
css=form>input[name=username]	<input name="username" type="text"></input>
css=input[name$=id][value^=SYS]	<input value="SYS123456" name="vid" type="text">
css=input[value*='SYS']	<input value="SYS123456" name="vid" type="text">
css=a:link	<a href="http://www.baidu.com">baidu</a>
css=input:first-child	<input name="username" type="text"></input>
css=input:last-child	<input value="ks10cf6d6" name="cid" type="text">
css=li:nth-child(2)	<li>Cat</li> 因为这个li是ul下的第二个元素，所以是child（2）
css=:root	<html>

csdn表格不显示边框，所以截个图好看点：

三、XPATH和CSS定位比较

还是以上面的html为例：

定位方式	XPath	CSS
标签	//div	div
By id	//div[@id='recordlist']	div#recordlist
By class	//div[@class='subdiv'] //div[contains(@class,'subdiv')]	div.subdiv
By 属性	//input[@name='username']	input[name=username] input[name^=user] input[name$=name] input[name*=erna]
定位子元素	//ul[@id='recordlist']/* //ul/p	ul#recordlist>* ul#recordlist>p
定位后代元素	//div[@class='subdiv']//p	div p
By index	//li[4] 定位第四个li	li:nth-child(5)
By content	//li[contains(text(),'Goa')]	li contains('Goa') 该方法已经废弃
根据子元素回溯定位父元素	//*[./a[@id='baiduUrl']] //div[.//p[text()='Heading']] 匹配到：<div class="subdiv">	？
根据兄弟元素定位	//ul[preceding-sibling::a[@id='baiduUrl']] //ul[preceding-sibling::a[//div[@class='subdiv']/a]] 都匹配到：<ul id="recordlist">	a+ul a#baiduUrl+ul 匹配到：<ul id="recordlist">