Требуется помощь в определении элемента в testcafe

Question

Я новичок в автоматизации тестирования и кодирования. Я использую testcafe в одном из моих проектов для автоматизации функционального тестирования.

На одной из веб-страниц есть поле, которое принимает только числовые значения и выдает сообщение об ошибке, если вводятся какие-либо буквенно-цифровые значения.

Как часть моей проверки, мне нужно захватить это сообщение об ошибке.

Проблема, с которой я здесь сталкиваюсь, заключается в том, что я не могу определить, какой элемент находится в DOM.

Например, для этого может учитываться имя пользователя gmail и сообщение об ошибке, которое мы получаем при попытке ввести недопустимое сообщение пользователя.

Так выглядит DOM для поля

<div class="flex-content space-100 space-large-reset ">
<label for="uid">Unique ID Number</label>
<input type="password" id="uid" maxlength="9" value="123js" class="abyss-textinput abyss-form-invalid">
<div class="abyss-error-message">Please enter a valid Unique ID Number.</div></div>

Value = "123js" - это неверное значение, которое я ввел, и сгенерировало сообщение об ошибке, указанное в следующей строке.

Заранее спасибо.

Answer 1

Как сказал @Iain_b, вы можете использовать утверждения Selector и ok() для проверки наличия сообщения об ошибке. Вы можете использовать Комбинированный элемент смежного брата , чтобы выбрать тег <div> ошибки. Однако элемент может быть вставлен в дерево DOM после сбоя проверки или находиться там после загрузки страницы и просто становится видимым после сбоя проверки.

Так что для первого случая вы должны использовать что-то вроде:

await t.expect(Selector('#uid + .abyss-error-message').withText('Please enter a valid Unique ID Number').exists).notOk();

await t.typeText('#uid', '@$dfgh');

await t.expect(Selector('#uid + .abyss-error-message').withText('Please enter a valid Unique ID Number').exists).notOk();

и для второго:

await t.expect(Selector('#uid + .abyss-error-message').withText('Please enter a valid Unique ID Number').visible).notOk();

await t.typeText('#uid', '@$dfgh');

await t.expect(Selector('#uid + .abyss-error-message').withText('Please enter a valid Unique ID Number').visible).notOk();

Answer 2

Спасибо за помощь, ребята ..

Мне удалось найти элемент, используя условие, указанное ниже

Selector ('.abyss-error-message').withText('Please enter a valid UID')

Answer 3

Во-первых, я признаюсь, я не авторитет в тест-кафе, просто учусь сам.

Как говорится, у меня есть утверждения, которые работают следующим образом:

await t.expect(Selector('h2').withText('Some text').exists).ok();

В вашем случае, если нет идентификатора / класса, который вы можете использовать для сужения поиска, это может быть довольно неэффективно (в вашем приложении, вероятно, много элементов div / span). Не могли бы вы предоставить некоторую информацию о DOM используется для отображения ошибок?