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")将在其中找到带有文本审阅者的特定div，然后.find("button").withText("Edit")将在其中找到唯一的子按钮（恰好具有文本Edit）。我是否误解了它应该如何工作？谢谢

Answer 1

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

我希望Selector（“ div”）。withText（“ Reviewers”）会找到其中包含文本审阅者的特定div

您的示例的重点是“审阅者”（Selector('div').withText('Reviewers')）selector matches two div elements。

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

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)

TestCafe：链接选择器/功能似乎不起作用

1 个答案: