在 Testcafe 中使用 document.getElementsByClassName

Question

我有一个始终具有相同结构的菜单，但 ID 可以从一个安装到另一个安装。唯一保持不变的是标题（在我的例子中 "Plugins"）。我在测试中用 Selector 调用 document.getElementsByClassName 函数：

var slides = Selector(() =>{
    return document.getElementsByClassName("c-p-header-text");
});

菜单元素的每个标题都有 c-p-header-text class。菜单标题元素如下所示：

<div id="ext-comp-1002" class="c-p c-tree c-p-collapsed" style="width: auto;">
     <div class="c-p-header c-unselectable c-accordion-hd" id="ext-gen135" style="cursor: pointer;">
        <div class="c-tool c-tool-toggle" id="ext-gen140">&nbsp;</div>
        <img src="/backEnd/images/s.gif" class="c-p-inline-icon order"><span class="c-p-header-text" id="ext-gen150">Plugins</span>
     </div>

使用起来会很方便await t.click("#ext-gen150")，但是总是这个id不安全

这是我尝试过的：

await t
    .click('#sites__db');
var slides = Selector(() =>{
    return document.getElementsByClassName("c-p-header-text");
});
console.log("[DEBUG]" + slides);
console.log("[DEBUG] found " + slides.length + " elements");
for(var i = 0; i < slides.length; i++)
{
    var txtOfCurrElem = slides.item(i).innerText; 
    console.log("[DEBUG "+ i +"] Text: " + txtOfCurrElem);
}

运行这个测试给我以下输出：

[DEBUG]function __$$clientFunction$$() {
        var testRun = builder.getBoundTestRun() || _testRunTracker2.default.resolveContextTestRun();
        var callsite = (0, _getCallsite.getCallsiteForMethod)(builder.callsiteNames.execution);
        var args = [];

        // OPTIMIZATION: don't leak `arguments` object.
        for (var i = 0; i < arguments.length; i++) {
            args.push(arguments[i]);
        }return builder._executeCommand(args, testRun, callsite);
    }
[DEBUG] found 0 elements

计划是找到元素（带有标题"Plugins"），然后在测试继续时单击它。

Answer 1

在这种情况下您不必使用 document.getElementsByClassName。您可以只使用 CSS class 选择器：
```
var slides = Selector('.c-p-header-text');
```

您应该在处理选择器数组时使用count 属性。 docs. Also, element properties, like exists, count, and DOM node state properties 是 Promified，所以当你不在 t.expect 中使用它们时，你应该使用 await 关键字：

var count = await slides.length;

console.log("[DEBUG] found " + count + " elements");

for(var i = 0; i < count; i++)
{
    var txtOfCurrElem = await slides.nth(i).innerText; 
    console.log("[DEBUG "+ i +"] Text: " + txtOfCurrElem);
}

Answer 2

我找到了我的问题的简单答案。我使用 .withText 选项单击插件元素：

.click(Selector('span').withText("Plugins"))

由于此名称也是唯一的，因此点击的始终是正确的元素。如果我的站点不是 extJS Web 应用程序，我不知道它是否适用于 @AndreyBelym 的解决方案。

在 Testcafe 中使用 document.getElementsByClassName

Using document.getElementsByClassName in Testcafe

testing

automated-tests

e2e-testing

web-testing

testcafe