TestCafe: цепочка селекторов / функций не работает - PullRequest
Новая
       21

TestCafe: цепочка селекторов / функций не работает

2 голосов
/ 03 июля 2019

Я пытаюсь связать воедино Selector, withText, find и другой withText, чтобы найти конкретную ссылку.

Вот HTML-код, который я пытаюсь найти, и я хочу выбрать кнопку «Изменить», которая находится в div с текстом «Рецензенты»: 

<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 с текстом Reviewers внутри него, а затем .find("button").withText("Edit") найдет единственную дочернюю кнопку (которая имеет текст Edit) внутри нее.Я неправильно понимаю, как это должно работать?Спасибо

1 Ответ

2 голосов
/ 03 июля 2019

Ваш селектор "Кнопка редактирования" (Selector('div').withText('Reviewers').find('button').withText('Edit')) правильный.

Я бы ожидал, что Selector ("div"). WithText ("Reviewers") найдет конкретный div сtext Reviewers внутри него

Суть вашего примера в том, что селектор "Reviewers" (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)
...