Selenium IDE-定位策略-通过CSS定位(1)

📌 相关文章

📜 Selenium IDE-定位策略-通过CSS定位(1)

📅 最后修改于: 2023-12-03 15:34:54.447000 🧑 作者: Mango

Selenium IDE-定位策略-通过CSS定位

在 Selenium IDE 中，通过 CSS 选择器来定位 Web 元素是一种非常有效的方法。CSS 选择器是一种用于指定要更改样式的 HTML 元素的方法，它使用不同的选择器来选择要应用样式的元素。与使用 xpath 或其他定位策略相比，使用 CSS 选择器的优点是它通常比其他技术更快且更精细。

CSS 选择器

简单选择器

简单选择器基于元素名称、类名、ID 或属性等条件选择 HTML 元素。例如：

元素名称：选择所有的 元素
```
p
```
类名：选择所有带有 class 为 "button" 的元素
```
.button
```
ID：选择带有 ID 为 "logo" 的元素
```
#logo
```
属性：选择带有特定属性的元素
```
[name=username]
```

组合选择器

组合选择器是将多个简单选择器组合在一起的选择器。例如：

后代选择器：选择所有 <ul> 中的 <li>
```
ul li
```
子选择器：选择 <body> 直接子元素中的 <div>
```
body > div
```
相邻兄弟选择器：选择紧接在 元素后的 元素
```
p + strong
```
一般兄弟选择器：选择在 元素后面的所有 元素
```
p ~ strong
```

伪类选择器

伪类选择器是指 CSS 中的一类特殊选择器，它们对选择器的应用和行为产生一定的影响。例如：

:hover：选择鼠标悬停在元素上的元素
```
a:hover
```
:checked：选择被选中的复选框或单选按钮
```
input:checked
```
:nth-of-type(n)：选择第 n 个匹配元素的某个类型
```
p:nth-of-type(3)
```
:not(selector)：选择不符合 selector 的所有元素
```
:not(.green)
```

通过 CSS 定位元素

在 Selenium IDE 中，使用 CSS 选择器来定位元素的一般步骤如下：

使用定位器选择要操作的元素
将定位策略设置为 css selector
输入相应的 CSS 选择器

例如，要使用 CSS 选择器定位 ID 为 "username" 的输入框，选择器应该是 "input#username"。

以下是一个使用 CSS 选择器定位元素的示例测试用例：

# CSS 定位
- 打开百度首页
- 输入搜索词汇 "Selenium IDE" 到搜索框中
- 单击搜索按钮
- 验证搜索结果页面是否包含 "Selenium IDE"

## 步骤
1. 打开 | https://www.baidu.com | 
2. 输入 | id=kw | Selenium IDE
3. 单击 | css=input[type=submit] |
4. 验证元素 | css=h3 > a | 包含文本 "Selenium IDE"

在以上测试用例中，第 3 个步骤使用了 CSS 选择器来定位搜索按钮。注意，如果元素的 CSS 选择器匹配多个元素，则可以使用 :nth-child 或 :nth-of-type 伪类来进一步筛选元素。

总结

CSS 选择器是定位 Web 元素时鲜为人知但非常有用的工具。在 Selenium IDE 中，使用 CSS 选择器定位元素可以让测试用例更精细和有针对性。编写测试用例时，请确保使用最适合您的网页的选择器。