Question

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

但是，我的页面使用React创建了一个Modal对话框，该对话框只有在单击按钮后才可见。我可以使用带有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 (modalButton.exists)）时才单击按钮的If语句似乎起作用。但是，单击后该按钮消失时，我仍然会收到错误消息。

有什么建议吗？

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;
      }
    }
  }

Testcafe选择器未在React Modal中获得元素

1 个答案: