Ожидание появления элемента на статической кнопке в TestCafe

У меня на сайте странное поведение TestCafe. У меня есть два флажка на сайте и кнопка, которая переводит меня к следующему шагу, как только я нажимаю на нее. Когда страница загружается, кнопка становится видимой и не подвергается никаким манипуляциям.

Вот разметка кнопки:

<button id="confirmation-submit" type="submit" class="btn btn-success pull-right hidden-xs">
     <span class="glyphicon glyphicon-flag"></span>
     order now
</button>

Вот как выглядит мой код (часть, соответствующая этой проблеме):

const submitOrderBtn = Selector('button[type="submit"].btn-success');
//const submitOrderBtn = Selector('#confirmation-submit');

test('complete order', async t =>{
     await t
          .click(submitOrderBtn)

В хроме он показывает мне эту картинку:

введите здесь описание изображения

Вывод командной строки следующий: введите описание изображения здесь

Кнопка видна все время, и даже когда я просматриваю сайт с помощью инструментов разработчика, кнопка есть, и у нее есть идентификатор (подтверждение-отправка), по которому я хочу, чтобы на нее нажали.

Как я могу обойти эту проблему? На других страницах я могу без проблем использовать функцию .click.


testing automated-tests ui-testing e2e-testing testcafe
person Fabian    schedule 06.12.2017    source источник
comment
К сожалению, без полного исходного кода страницы сложно что-то сказать. Если вас беспокоит конфиденциальность, вы можете отправить ссылку / источник через личные сообщения на нашем форуме: testcafe-обсудить.devexpress .com на меня, Елена Дикарева или Александр Московкин. Если вы не можете поделиться своим кодом, не могли бы вы написать минимально воспроизводимый пример?   -  person Andrey Belym    schedule 07.12.2017
comment
TestCafe будет считать элемент видимым, если его ширина или высота имеют ненулевое значение и не скрыты с помощью свойств CSS, таких как display: hidden и visibility: none. Вы можете проверить это в Computed CSS Properties в DevTools. В вашем случае #confirmation-button может быть невидимой кнопкой, спрятанной где-то в реальном видимом элементе. Кроме того, вы можете попробовать изменить размер окна браузера с помощью resizeWindow действие. Это может помочь, если ваш макет адаптивный или это проблема с прокруткой.   -  person Andrey Belym    schedule 07.12.2017

Ответы (2)


arrow_upward
1
arrow_downward

Как отметил в своем комментарии @Andrey Belym, TestCafe будет считать элемент видимым, если его ширина или высота имеют ненулевое значение и не скрыты с помощью свойств CSS, таких как display: hidden и visibility: none.

Вы можете проверить это в Computed CSS Properties в DevTools. В вашем случае #confirmation-button может быть невидимой кнопкой, спрятанной где-то в реальном видимом элементе.

Кроме того, вы можете попробовать изменить размер окна браузера с помощью resizeWindow действие. Это может помочь, если ваш макет адаптивный или это проблема с прокруткой.

person Alex Skorkin    schedule 02.01.2019

arrow_upward
1
arrow_downward

В качестве обходного пути вы можете попробовать нажать кнопку родительского контейнера:

const submitOrderBtn = Selector('#confirmation-submit');
const confirmSelector = submitOrderBtn.parent();
test('complete order', async t =>{
     await t
          .click(confirmSelector)

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

const submitOrderBtn = Selector('#confirmation-submit');
    const confirmSelector = submitOrderBtn.parent('div');
    test('complete order', async t =>{
         await t
              .click(confirmSelector)
person hdorgeval    schedule 02.01.2019