Selector 是 TestCafe 提供的一个工具,用于在测试过程中选择页面上的元素。它可以根据不同的属性、文本内容、CSS 选择器等来选择元素。
以下是 Selector 的一些常见用法:
- 根据元素的标签名选择元素:
Selector('div') // 选择所有的 <div> 元素
- 根据元素的 id 属性选择元素:
Selector('#myElement') // 选择 id 为 "myElement" 的元素
- 根据元素的 class 属性选择元素:
Selector('.myClass') // 选择 class 为 "myClass" 的元素
- 根据元素的属性选择元素:
Selector('[data-info="example"]') // 选择具有 data-info 属性值为 "example" 的元素
- 根据元素的文本内容选择元素:
Selector('p').withText('Hello') // 选择所有包含文本 "Hello" 的 <p> 元素
- 使用 CSS 选择器选择元素:
Selector('.myClass > span') // 选择 class 为 "myClass" 的元素下的所有 <span> 元素
- 结合多个条件选择元素:
Selector('#myElement').withAttribute('data-info', 'example') // 选择 id 为 "myElement" 并且具有 data-info 属性值为 "example" 的元素
- 使用正则表达式匹配元素的文本内容:
Selector('p').withText(/hello/i) // 选择所有文本内容包含 "hello"(不区分大小写)的 <p> 元素
- 根据元素在页面上的位置选择元素:
Selector('li').nth(2) // 选择页面上第三个 <li> 元素(基于零索引)
- 在所选元素的基础上使用过滤器进一步筛选元素:
Selector('input').filter('.required') // 选择所有 <input> 元素中类名为 "required" 的元素
- 选择元素的子元素或后代元素:
Selector('.parentElement').find('span') // 选择 class 为 "parentElement" 的元素下的所有 <span> 元素
- 使用伪类选择元素的状态:
Selector('input:checked') // 选择所有被选中的 <input> 元素
Selector('button:disabled') // 选择所有被禁用的 <button> 元素
- 使用 nthChild 方法选择特定索引位置的子元素:
Selector('.parentElement').child('span').nthChild(2) // 选择 class 为 "parentElement" 的父元素下的第二个 <span> 子元素
- 根据元素的属性值是否存在来选择元素:
Selector('input').withAttribute('disabled') // 选择所有具有 "disabled" 属性的 <input> 元素
- 组合多个选择器来选择符合条件的元素:
Selector('input[type="checkbox"]').withAttribute('checked') // 选择所有被选中的复选框(<input type="checkbox">)元素
- 使用 exists 方法检查元素是否存在:
const elementExists = await Selector('#myElement').exists // 检查 id 为 "myElement" 的元素是否存在
- 使用 count 属性获取匹配选择器的元素数量:
const elementCount = await Selector('.myClass').count // 获取 class 为 "myClass" 的元素的数量
- 使用 withExactText 方法选择精确匹配文本内容的元素:
Selector('h1').withExactText('Welcome') // 选择文本内容完全匹配为 "Welcome" 的 <h1> 元素
- 使用 nextSibling 方法选择下一个同级元素:
Selector('.myClass').nextSibling() // 选择 class 为 "myClass" 的元素的下一个同级元素
- 使用 prevSibling 方法选择上一个同级元素:
Selector('.myClass').prevSibling() // 选择 class 为 "myClass" 的元素的上一个同级元素