如何从testcafe中找到的多个匹配项中第一次出现该元素

Question

在某些情况下，如果我评估 Selenium xpath/locator，我可以看到多个节点匹配。

示例：//span[@username='xyz']（使用 Selenium 的示例代码）

如果上述相对路径与多个节点匹配（例如：找到 5 个匹配节点。找到下面的匹配节点列表）。

在 selenium 中，我可以使用像： (//span[@username='xyz'])[1] 访问找到的 5 个匹配项中的第一个匹配项。

我们如何使用 TestCafe 实现相同的目标？

Answer 1

import { Selector } from 'testcafe';

fixture `fixture`
    .page('https://devexpress.github.io/testcafe/example/');

const elementByXPath = Selector(xpath => {
    const iterator = document.evaluate(xpath, document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null )
    const items = [];

    let item = iterator.iterateNext();

    while (item) {
        items.push(item);
        item = iterator.iterateNext();
    }

    return items;
});

test('Click by first checkbox', async t => {
    const firstCheckboxSelector = Selector(elementByXPath('//input[@type="checkbox"]'));
    const secondCheckboxSelector = Selector(elementByXPath('//input[@type="checkbox"]')).nth(1);
    
    await t.click(firstCheckboxSelector);
}); 

另请参阅：使用 XPath 选择器