具有相同ID的文本框的TestCafe选择器

在TestCafe中，选择器是用于定位页面元素的强大工具。当需要选择具有相同ID的多个文本框时，由于ID在HTML文档中应该是唯一的，这种情况通常意味着存在错误或不规范的编码实践。然而，如果确实遇到了这样的情况，可以使用属性选择器来选择这些元素。

基础概念

选择器：在TestCafe中，选择器用于指定测试脚本应与页面上的哪些元素交互。选择器可以基于元素的ID、类名、标签名、属性等来定位元素。

类型

TestCafe提供了多种类型的选择器，包括但不限于：

id：通过元素的ID选择元素。
class：通过元素的类名选择元素。
tag：通过元素的标签名选择元素。
css：使用CSS选择器语法选择元素。
xpath：使用XPath表达式选择元素。

应用场景

假设我们有一个HTML页面，其中有多个文本框具有相同的ID（尽管这是不推荐的），我们可以使用以下方法选择它们：

<input type="text" id="username" value="user1">
<input type="text" id="username" value="user2">
<input type="text" id="username" value="user3">

解决方案

由于ID应该是唯一的，我们可以使用属性选择器来选择所有具有相同ID的元素。以下是使用TestCafe的示例代码：

import { Selector } from 'testcafe';

fixture `Select Elements with Same ID`
    .page `http://example.com`;

test('Select all textboxes with the same ID', async t => {
    // 使用属性选择器选择所有具有相同ID的元素
    const textboxes = Selector('[id="username"]');

    // 获取所有匹配的元素
    const elements = await textboxes.count;
    console.log(`Found ${elements} elements with ID 'username'`);

    // 对每个元素执行操作
    for (let i = 0; i < elements; i++) {
        await t.typeText(textboxes.nth(i), `New Value ${i + 1}`);
    }
});