TestCafe visibilityCheck does not wait for element to appear

问题

I am trying to get TestCafe to wait for an element to appear in the dom. Currently I am using { visibilityCheck: true } but it does not seem to do anything and the test will time out and be considered a failure.

Goals:

1. Go to page
2. Wait for searchIconElement to load

Code:

fixture`Library /all`.page(page.libraryScreen).beforeEach(async t => {
  await t.useRole(page.adminUser);
});

test('Search Bar', async t => {
  const searchIcon = Selector('div').withAttribute('class', 'CampaignsPage-fab1');
  const searchIconElement = searchIcon.with({ visibilityCheck: true })();
  const microAppNameInput = Selector('input').withAttribute('placeholder', 'Search');
  const microAppTitle = Selector('div').withAttribute('class', 'SetCard-title ').innerText;
  
  await t
    .click(searchIconElement)
    .typeText(microAppNameInput, testMicroAppTitle)
    .expect(microAppTitle)
    .eql(testMicroAppTitle);
});

回答1:

When a selector is passed to a test action as the target element's identifier, the target element should be visible regardless of the visibilityCheck option. If the target element becomes visible too late, you can try to increase the selector timeout.

回答2:

try adding timeout

const searchIconElement = searchIcon.with({ visibilityCheck: true }).with({ timeout: 10000 });

来源：https://stackoverflow.com/questions/62866992/testcafe-visibilitycheck-does-not-wait-for-element-to-appear