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

Question

我正在尝试将一个选择器、一个 withText、一个查找和另一个 withText 链接在一起，以查找特定链接。

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

<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 中的“编辑”按钮，其中包含文本“文档”并单击它。

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

Answer 1

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

I would expect that Selector("div").withText("Reviewers") would find the specific div with the text Reviewers inside it

你的例子的要点是“评论者”( Selector('div').withText('Reviewers') )选择器匹配两个 div元素。

为了说明这一点，我在您的示例页面的上下文中进行了以下测试:

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)