时间戳

首页 > 解决方案 > TestCafe：链接选择器/函数似乎不起作用

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

问题描述

我试图将一个 Selector、一个 withText、一个 find 和另一个 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")会在其中找到唯一的子按钮（恰好有文本编辑）。我是否误解了它应该如何工作？谢谢

标签： testingautomated-testse2e-testingweb-testingtestcafe

解决方案

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

我希望 Selector("div").withText("Reviewers") 会找到其中包含文本 Reviewers 的特定 div

您的示例的要点是“Reviewers”（Selector('div').withText('Reviewers')）选择器匹配两个div元素。

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

测试.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)

推荐阅读