Selenium CSS定位方法详解

MMMDH • 2025-03-12 18:48 • 编程

一、概述

在自动化测试中，页面元素的定位非常重要，而Selenium可以通过多种方式定位页面元素，其中CSS选择器定位方法是最为常用和灵活的一种。

二、基本CSS选择器

在CSS选择器中，基本选择器主要包含标签选择器、类选择器、ID选择器以及子元素选择器等。

1. 标签选择器

标签选择器使用HTML元素的标签名进行选择，如以下示例代码：


<html>
   <head>
      ...
   </head>
   <body>
      <div>
         <p>Hello World!</p>
      </div>
   </body>
</html>

通过查找<p>标签，可以使用如下代码进行定位：


driver.find_element_by_css_selector('p')

2. 类选择器

类选择器使用元素的类名进行选择，用“.类名”表示，如以下示例代码：


<div class="content">
   <p>Hello World!</p>
</div>

通过查找类名为“content”的<div>标签，可以使用如下代码进行定位：


driver.find_element_by_css_selector('.content')

3. ID选择器

ID选择器使用元素的ID属性进行选择，用“#ID名”表示，如以下示例代码：


<div id="content">
   <p>Hello World!</p>
</div>

通过查找ID名为“content”的<div>标签，可以使用如下代码进行定位：


driver.find_element_by_css_selector('#content')

4. 子元素选择器

子元素选择器用“父元素>子元素”表示，可以选择指定父元素下的直接子元素，如以下示例代码：


<div class="parent">
   <div class="child">
      <p>Hello World!</p>
   </div>
</div>

通过查找class名为“parent”的<div>标签下的class名为“child”的<div>标签，可以使用如下代码进行定位：


driver.find_element_by_css_selector('.parent > .child')

三、CSS属性选择器

CSS属性选择器使用HTML元素的属性名称和属性值进行选择，可以根据元素的属性来选择元素。

1. 含有指定属性的元素

可使用“[属性名]”表示，可选择含有指定属性的元素，如以下示例代码：


<div class="content" data-id="123">
   <p>Hello World!</p>
</div>

通过查找含有data-id属性的<div>标签，可以使用如下代码进行定位：


driver.find_element_by_css_selector('[data-id]')

2. 指定属性值的元素

可使用“[属性名=属性值]”表示，可选择属性值为指定值的元素，如以下示例代码：


<div class="content" data-id="123">
   <p>Hello World!</p>
</div>

通过查找data-id属性值为“123”的<div>标签，可以使用如下代码进行定位：


driver.find_element_by_css_selector('[data-id="123"]')

3. 属性值包含指定字符的元素

可使用“[属性名*=字符]”表示，可选择属性值包含指定字符的元素，如以下示例代码：


<div class="content" data-id="123abc">
   <p>Hello World!</p>
</div>

通过查找data-id属性值包含“abc”的<div>标签，可以使用如下代码进行定位：


driver.find_element_by_css_selector('[data-id*="abc"]')

四、CSS伪类选择器

CSS伪类选择器用于选择一些没有标签类名或属性的元素，但这些元素在特定情况下有特殊的状态。

1. :hover伪类选择器

:hover伪类选择器用于鼠标悬浮时的操作，如以下示例代码：


<a href="#">Hover Me</a>

通过查找鼠标悬浮时的<a>标签，可以使用如下代码进行定位：


driver.find_element_by_css_selector('a:hover')

2. :nth-child伪类选择器

:nth-child伪类选择器用于指定元素的子元素在父元素中的排列位置，如以下示例代码：


<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

通过查找第三个<li>标签，可以使用如下代码进行定位：


driver.find_element_by_css_selector('li:nth-child(3)')

五、总结

CSS选择器定位方法是Selenium中最常用、最灵活的定位方式之一。在使用CSS选择器时，需要熟悉基本选择器、属性选择器以及伪类选择器等，并根据实际情况选择合适的选择器进行页面元素的定位。

原创文章，作者：MMMDH，如若转载，请注明出处：https://www.506064.com/n/363882.html