dimanche 9 avril 2017

Testcafe+Nightmare: Why is element not in DOM?

I have the following test:

fixture('Minimal reproduction')
  .page('http://ift.tt/1nUNrq9');


test('Navigate to item-details', async t => {
  await t
    .click('.dropdown-toggle')
    .click('.productData:first-of-type a')
  });

When I run this with testcafe chrome test.js it works as expect.

If I do testcafe nightmare test.js I get the error The element that matches the specified selector is not visible..

I tracked this one down to the fact that apparently the Electron-browser nightmare uses opens up the page with a viewport that causes the desktop-nav to disappear and so .dropdown-toggle is not visible anymore. So I worked around this by adding a manual resize:

fixture('Minimal reproduction')
  .page('http://ift.tt/1nUNrq9');


test('Navigate to item-details', async t => {
  await t
    .resizeWindow(1024, 900)
    .click('.dropdown-toggle')
    .click('.productData:first-of-type a')
  });

So my first question: While this works, is there another way to provide the dimension that testcafe opens up the browser in nightmare-mode?

...but: Now that .dropdown-toggle is back, I expected the test to pass again, just like before.

Unfortunately now I get another error: The specified selector does not match any element in the DOM tree. ...which seems to relate to the second selector. I'm not sure why though.

So my second question: What is the nightmare browser here doing differently? I tried a similar test-case on another page and it seemed to load the page fine just as chrome did.

I also tried a couple of workaround like forcing the browser to wait for some time but nothing worked.

Maybe someone can point me in the right direction here? :)

Aucun commentaire:

Enregistrer un commentaire