Reputation: 31
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
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