CODEWITHSUNDEEP
testingautomated-testse2e-testingweb-testingtestcafe
strylee
strylee

Reputation: 31

TestCafe: Chaining selectors/functions doesn't seem to work

I'm trying to chain together a Selector, a withText, a find, and another withText in order to find a particular link.

Here's the HTML I'm trying to search through, and I want to select the "Edit" button that's in the div with the text "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>

I'm trying to click this using:

await t.click(Selector("div").withText("Reviewers").find("button").withText("Edit"));

TestCafe ends up finding the "Edit" button that's in the div with the text "Documents" inside and clicking it.

I would expect that Selector("div").withText("Reviewers") would find the specific div with the text Reviewers inside it, and then the .find("button").withText("Edit") would find the only child button (which happens to have the text Edit) inside that. Am I misunderstanding how it should work? Thanks

Upvotes: 3

Views: 1529

Answers (1)

Vladimir A.
Vladimir A.

Reputation: 2212

Your "Edit button" selector (Selector('div').withText('Reviewers').find('button').withText('Edit')) is correct.

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

The main point of your example is that the "Reviewers" (Selector('div').withText('Reviewers')) selector matches two div elements.

To illustrate it I made the following test in the context of your example page:

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);
});

Result

[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)

Upvotes: 4

Related Questions