Нажатие кнопки на основе текста

Question

Я использую TestCafe для тестирования локально запускаемого приложения без проблем, кроме перечисленных ниже:

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

<a href="internallink" class="btn btn-success">Upload file</a>

Когда тест пытается щелкнуть элемент с помощью

.click(Selector('.btn').withText('Upload file'))

выдается следующая ошибка

   1) The specified selector does not match any element in the DOM tree.

         | Selector('.btn')
       > |   .withText('Upload new file')

Любой намек на то, что может быть не так.

Answer 1

Когда TestCafe выдает это сообщение об ошибке: The specified selector does not match any element in the DOM tree, и я понятия не имею, что происходит, я беру следующий путь:

Я создаю переменную Selector, которая нацелена на элемент, и наведите на него курсор, прежде чем щелкнуть по нему:

const uploadFileButton = Selector('a.btn').withExactText('Upload file');
await t
    .hover(uploadFileButton)
    .click(uploadFileButton);

Обратите внимание, что в приведенном выше коде я пытался быть как можно более конкретным при определении селектора.

Если во время выполнения вы не видите, как курсор TestCafe движется к целевому элементу (это означает, что вы не работаете в режиме без головы), то вы знаете, что селектор неправильный. Это может быть потому, что элемент не смонтирован в DOM, когда TestCafe пытается навести на него курсор. Чтобы подтвердить эту точку, измените код TestCafe на:

const uploadFileButton = Selector('a.btn').withExactText('Upload file');
await t
    .expect(uploadFileButton.exists)
    .ok({timeout: 10000})
    .hover(uploadFileButton)
    .click(uploadFileButton);

Если во время выполнения TestCafe останавливается на строке .ok (), то вы знаете, что селектор определенно ошибочен. В этом случае перейдите к инструментам разработчика и введите в консоли следующую команду:

var el = document.querySelectorAll('a.btn');
el <ENTER>

проверить содержимое элемента el. Если вы найдете целевую кнопку, вам следует проверить свойство innerText и проверить, нет ли правила CSS, которое делает текст заглавным или невидимым.

Answer 2

Я проверил нажатие кнопки на сайте Bootstrap с похожей кнопкой, и она работает как положено.Пожалуйста, смотрите следующий код:

import { Selector } from 'testcafe';

fixture `bootstrap`
.page `https://getbootstrap.com/docs/4.2/components/buttons/`;

test(`click button`, async t => {
    await t.click(Selector('.btn').withText('Success'));
});

Я рекомендую проверить ваш сайт и убедиться, что:

1. Кнопки offsetWidth и offsetHeight больше нуля.
2. Кнопка не имеет таких стилей, как display:none или visibility: hidden.

3. Кнопка содержит тот же текст, что и вы.

   Если это не поможет, было бы замечательно, если бы вы поделились ссылкой на свой проект или веб-сайт, чтобы продемонстрировать проблему.