testing - TestCafe:链接选择器/函数似乎不起作用

我试图将一个 Selector、一个 withText、一个 find 和另一个 withText 链接在一起，以便找到一个特定的链接。

这是我要搜索的 HTML，我想选择 div 中带有文本“审阅者”的“编辑”按钮:

<div class="content">
    <div class="ui edit-segment--header">Documents
        <button type="button" data-testid="edit-segment" class="material link right floated relaxed-top">Edit</button>
    </div>
    <div class="ui segment segment__compact-top">
        <div role="list" class="ui bulleted list">
            <div role="listitem" class="item"><span>Budget</span></div>
            <div role="listitem" class="item"><span>Draw cover sheet</span></div>
            <!-- (a few more...) -->
        </div>
    </div>
</div>
<div class="content">
    <div class="ui edit-segment--header">Rules
        <button type="button" data-testid="edit-segment" class="material link right floated relaxed-top">Edit</button>
    </div>
    <div class="ui segment segment__compact-top">
        <h4 class="ui header">Automatic</h4><span>No rules selected</span>
        <h4 class="ui header">Manual</h4><span>No rules selected</span></div>
</div>
<div class="content">
    <div class="ui edit-segment--header">Reviewers
        <button type="button" data-testid="edit-segment" class="material link right floated relaxed-top">Edit</button>
    </div>
    <div class="ui segment segment__compact-top">
        <div role="list" class="ui list">None</div>
    </div>
</div>

我正在尝试使用以下方法单击它:
await t.click(Selector("div").withText("Reviewers").find("button").withText("Edit"));
TestCafe 最终找到了 div 中的“Edit”按钮，里面有“Documents”文本，然后点击它。

我希望 Selector("div").withText("Reviewers") 会找到其中包含文本 Reviewers 的特定 div，然后 .find("button").withText("Edit") 会找到其中唯一的子按钮(恰好有文本 Edit)。我误解了它应该如何工作吗？谢谢

最佳答案

您的“编辑按钮”选择器 ( Selector('div').withText('Reviewers').find('button').withText('Edit') ) 是正确的。

您的示例的要点是“审阅者”( Selector('div').withText('Reviewers') )[选择器匹配两个 div 元素][1]。
为了说明这一点，我在您的示例页面的上下文中进行了以下测试:
test.js

import { Selector } from 'testcafe';

fixture `fixture`
    .page `http://localhost:8080`;

test('test', async t => {
    const divReviewers = Selector('div').withText('Reviewers').addCustomDOMProperties({
        outerHTML: el => el.outerHTML
    });

    await t
        .expect(divReviewers.count).eql(2);

    console.log('[1] divReviewers.nth(0).outerHTML:\n', await divReviewers.nth(0).outerHTML);
    console.log('[2] divReviewers.nth(1).outerHTML:\n', await divReviewers.nth(1).outerHTML);
});

结果

[1] divReviewers.nth(0).outerHTML:
 <div class="content">
    <div class="ui edit-segment--header">Reviewers
        <button type="button" data-testid="edit-segment" class="material link right floated relaxed-top">Edit</button>
    </div>
    <div class="ui segment segment__compact-top">
        <div role="list" class="ui list">None</div>
    </div>
</div>
[2] divReviewers.nth(1).outerHTML:
 <div class="ui edit-segment--header">Reviewers
        <button type="button" data-testid="edit-segment" class="material link right floated relaxed-top">Edit</button>
    </div>
 √ test


 1 passed (1s)

关于testing - TestCafe:链接选择器/函数似乎不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56860651/