Testcafe Selector 没有在 React Modal 中获取元素

Question

我正在使用 testcafe 来驱动一个网站。我创建了一个页面模型，我可以点击我已经创建的按钮。

但是，我的页面使用 React 创建了一个模态对话框，该对话框只有在我单击按钮后才可见。我可以使用带有document.querySelectorAll('.modal-footer > button')[1] 的浏览器控制台获取元素。

所以在我的页面模型中我使用了Selector('.modal-footer > button').nth(1);，并且我还尝试使用here 中的语法创建一个选择器。 在这两种情况下，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;
      }
    }
  }