Tests failing in nightmare

[gerardus1995]

Is there any reason why test that i got already working in chrome when i test it in nightmare i get "The specified selector does not match any element in the DOM tree."?

[AlexanderMoskovkin]

Hi, it can be some electron-specific thing. So, it's hard to determine the reason without the example. You can try to investigate it deeply (for example write to console outer html of some elements in the test to see what happens)

[gerardus1995]

I just cloned the basic example that testcafe provides us with and tried nightmare browser on it. It fails as well on nightmare but works on chrome. How can i see if theres something wrong with my nightmare or what should i do to fix this? THanks.

[AlexanderMoskovkin]

What the error do you see?

[gerardus1995]

Using locally installed version of TestCafe.
Running tests in:

• Electron 1.6.1 / Mac OS X 10.11.6

A set of examples that illustrate how to use TestCafe API
✓ Text typing basics
✓ Click an array of labels and then check their states
✓ Dealing with text using keyboard
✓ Moving the slider
✓ Dealing with text using selection
✖ Handle native confirmation dialog

1. AssertionError: expected 'Thank you!\nTo learn more about TestCafe,
   please visit:\ndevexpress.github.io/testcafe\n\n' to include 'Peter
   Parker'

   Browser: Electron 1.6.1 / Mac OS X 10.11.6

   64 |
   65 | await t.expect(dialogHistory[0].text).eql('Reset
   information before proceeding?');
   66 |
   67 | await t
   68 | .click(page.submitButton)

   69 | .expect(page.results.innerText).contains('Peter
   Parker');
   70 |});
   71 |
   72 |
   73 |test('Pick option from select', async t => {
   74 | await t

   at
   (/Users/nautal/TestCafe/testcafe/examples/basic/test.js:69:40)
   at step
   (/Users/nautal/TestCafe/testcafe/examples/basic/test.js:1:601)
   at
   (/Users/nautal/TestCafe/testcafe/examples/basic/test.js:1:771)

✓ Pick option from select
✖ Filling a form

1. AssertionError: expected 'Thank you!\nTo learn more about TestCafe,
   please visit:\ndevexpress.github.io/testcafe\n\n' to include 'Bruce
   Wayne'

   Browser: Electron 1.6.1 / Mac OS X 10.11.6

   100 |
   101 | // Let's submit our form
   102 | await t
   103 | .wait(500)
   104 | .click(page.submitButton)

   105 | .expect(page.results.innerText).contains('Bruce
   Wayne');
   106 |});
   107 |

   at
   (/Users/nautal/TestCafe/testcafe/examples/basic/test.js:105:40)
   at step
   (/Users/nautal/TestCafe/testcafe/examples/basic/test.js:1:601)
   at
   (/Users/nautal/TestCafe/testcafe/examples/basic/test.js:1:771)

2/8 failed (28s)

[gerardus1995]

And in chrome i got:
Running tests in:

• Chrome 56.0.2924 / Mac OS X 10.11.6

A set of examples that illustrate how to use TestCafe API
✓ Text typing basics
✓ Click an array of labels and then check their states
✓ Dealing with text using keyboard
✓ Moving the slider
✓ Dealing with text using selection
✓ Handle native confirmation dialog
✓ Pick option from select
✓ Filling a form

8 passed (18s)
Mini-de-Nautal:basic nautal$

[AlexanderMoskovkin]

Thanks for the clarification.
The problem is related to native browser dialogs handling (alert, confirm, promt, beforeunload). We've found that Nightmare performs some modifications with these dialogs in their preload.js script. It breaks TestCafe behavior in some cases. We will find a way to fix it

[gerardus1995]

Okey thanks for the explanation.

[gerardus1995]

And in this case (not the same error than before) what could be the problem?

On nightmare:

Using locally installed version of TestCafe.
Running tests in:

• Electron 1.6.1 / Mac OS X 10.11.6

Getting Started
✖ start client register

1. The specified selector does not match any element in the DOM tree.

   Browser: Electron 1.6.1 / Mac OS X 10.11.6

   16 |
   17 | await t
   18 | .click(Selector('#claim-advertise > div > div >

div.col-lg-7.col-lg-offset-5.col-md-12.col-sm-12.col-xs-12.claim-advertise-text
> div > div > a'));
19 |
20 | await t
> 21 | .click(Selector('#form-owner-register >
div:nth-child(1) > div > button'))
22 | .click(Selector('#form-owner-register >
div:nth-child(1) > div > div > ul > li.selected > a'))
23 | .click(Selector('#form-owner-register >
div:nth-child(2) > div > button'))
24 | .click(Selector('#form-owner-register >
div:nth-child(2) > div > div > ul > li:nth-child(1) > a'))
25 | .click(Selector('button[data-id="idOwnerType"]'))
26 | .click(Selector('#form-owner-register >
div:nth-child(3) > div > div > ul > li.selected > a'))

     at <anonymous> (/Users/nautal/TestCafe/registerOwner.js:21:9)
     at step (/Users/nautal/TestCafe/registerOwner.js:2:367)
     at <anonymous> (/Users/nautal/TestCafe/registerOwner.js:2:537)

1/1 failed (35s)

On chrome:

Using locally installed version of TestCafe.
Running tests in:

• Chrome 56.0.2924 / Mac OS X 10.11.6

Getting Started
✓ start client register

1 passed (33s)

It is a very simple test with only one assertion i dont understand why nightmare doesn't find the selectors.

[AlexanderMoskovkin]

It's too hard to determine the problem without a page example in this case

[gerardus1995]

Okey then let me show you another example where it happens the same to me in this website "https://www.eltiempo.es/" where i get this in chrome:

Using locally installed version of TestCafe.
Running tests in:

• Chrome 56.0.2924 / Mac OS X 10.11.6

Getting Started
✓ check for the weather in barcelona

1 passed (20s)

and this in nightmare:

Using locally installed version of TestCafe.
Running tests in:

• Electron 1.6.1 / Mac OS X 10.11.6

Getting Started
✖ check for the weather in barcelona

1. The element that matches the specified selector is not visible.

   Browser: Electron 1.6.1 / Mac OS X 10.11.6

   6 |    .page `https://www.eltiempo.es/`;
   7 |
   8 |test('check for the weather in barcelona', async t => {
   9 |    var email =
   

   'testcafe'+moment().format('HHMMSS')+'@test.com';
   10 | await t

   11 | .typeText(Selector('#inputSearch'), 'Barcelona')
   12 | .click(Selector('.form_search_submit'));
   13 |
   14 | await t
   15 | .click(Selector('.m_search_results >
   li:nth-child(1)'));
   16 |

   at (/Users/nautal/TestCafe/testNightmare.js:11:9)
   at step (/Users/nautal/TestCafe/testNightmare.js:2:367)
   at (/Users/nautal/TestCafe/testNightmare.js:2:607)
   at (/Users/nautal/TestCafe/testNightmare.js:2:268)
   at test (/Users/nautal/TestCafe/testNightmare.js:23:42)

1/1 failed (10s)

and the test code i'm using is this:

import { Selector } from 'testcafe';
import moment from 'moment';
//test suposing you are in .com website

fixture Getting Started
.page https://www.eltiempo.es/;

test('check for the weather in barcelona', async t => {
var email = 'testcafe'+moment().format('HHMMSS')+'@test.com';
await t
.typeText(Selector('#inputSearch'), 'Barcelona')
.click(Selector('.form_search_submit'));

await t
    .click(Selector('.m_search_results > li:nth-child(1)'));

await t
    .expect(Selector('#page > main > div.section_city > div > section:nth-child(1) > section > ol > li:nth-child(4) > p > span').innerText).eql('Barcelona')
    .click(Selector('#page > header > div.banner_actions > div > div > div.banner_actions_featured > div > div:nth-child(2) > a'));

await t
    .expect(Selector('#page > main > div.section_ski > div > section:nth-child(1) > article > div > p').innerText).eql('Estaciones españolas');

});

Thanks you very much.

[AlexanderMoskovkin]

Thanks for the example, we'll check it

[gerardus1995]

Hey, have you been able to check something or find the issue here? Thanks!

[AlexanderMoskovkin]

Hi @gerardus1995,

I've checked your case. I've tried to run your page with nightmare (without testcafe). By default the page is opened in mobile view, because of the window size:

You can reproduce it if you run the test in the Chrome with not big window size.

In this case the target input is not visible, therefore testcafe can't click it. So you need to increase window size, for example you can do it via resizeWindow action:

await t.resizeWindow(1600, 800);

[gerardus1995]

is there any way to set the window size allways to a certain dimesions so i dont have to put that line everywhere?

[AlexanderMoskovkin]

For now the only way to set the browser size in your case is using the t.resizeWindow command. To avoid code duplication you can do it in the fixture.beforeEach hook (see testcafe documentation).

Meanwhile, Nightmare allows to set the browser size via its constructor options. But it's necessary to add API for this in the plugin.

[gerardus1995]

Thank you very much!

[rahulmr]

This is really cool feature. Like in protractor conf we can specify the window size as chromeOptions args or say in testcafe I can write testcafe 'firefox:headless,chromium:headless --no-sandbox' ./e2e/**/*.js
Is it possible to add something similar may be like testcafe 'nightmare --view-port 1024x680' ./e2e/*.js ?