Testcafe Selector не получает элемент в React Modal

Question

Я использую testcafe для управления веб-сайтом.Я создал модель страницы и могу нажать на уже созданные кнопки.

Однако моя страница использует React для создания модального диалога, который отображается только после нажатия кнопки.Я могу получить элемент с помощью консоли браузера с помощью document.querySelectorAll('.modal-footer > button')[1].

Так что в моей модели страницы я использовал Selector('.modal-footer > button').nth(1);, и я также попытался создать селектор с использованием синтаксиса в здесь .В обоих случаях testcafe не может найти элемент, и я в итоге получил ошибку TypeError: Cannot read property 'createElement' of null.

Вот мой код:

// page model
import { Selector } from 'testcafe';

export class PageModel {
  constructor () {
    ... // a bunch of buttons
    this.modalButton = Selector('.modal-footer > button').nth(1);
  }
}

и мой тест

// test script
import { PageModel } from 'page_model'

const pagemodel = new PageModel();

fixture ...

test('My Test', async t => {
  await t.click(pagemodel.abutton);
  await t.click(pagemodel.openDialog); // the modal dialog opens

  await t.click(pagemodel.modalButton) // <-- Here's where I get the error
});

Использование оператора If, который нажимает на кнопку, только если кнопка видима (if (modalButton.exists)), кажется, работает.Но я все равно получаю сообщение об ошибке, когда эта кнопка исчезает после нажатия кнопки.

Есть предложения?

Answer 1

Я смог решить с помощью блока try-catch. Я думаю, что в браузере есть некоторые условия гонки, которые приводят к провалу теста.

const max_retries = 3
let count = 0;
  while (count < max_retries) {
    try {
      await t
        .click(pagemodel.modalButton);
      break;
    }
    catch (e) {
      console.error('An error occurred, trying again...');
      count++;
      if (count === retries) {
        throw e;
      }
    }
  }