We're using Nightwatch to automate some of our UI testing. Some of the current tests are rather brittle, mostly having to do with weird CSS selectors, and I'm trying to simplify them. But some of the simple CSS selectors that I would expect to work are, well, not.

I'm trying to find this deeply nested <a> tag:

<a class="btn btn-quote btn-crm" href="/crm/" id="btnEndSession" style="display: inline-block;">End Session</a>

Here's a bit of code that's working:

.waitForElementVisible('#quoteSummary > div > div > div > div > a:nth-child(2)', 1000)
.click('#quoteSummary > div > div > div > div > a:nth-child(2)')

But that's a nasty CSS selector, and I'd like to replace it with this:

.waitForElementVisible('#btnEndSession', 1000)
.click('#btnEndSession')

As the <a> element I'm interested in does in fact have the id of btnEndSession, it seems like that should work. But it doesn't: nightwatch errors out with one of its "Timed out while waiting for element <#btnEndSession> to be visible for 10000 milliseconds" messages.

I've also tried:

.waitForElementVisible('.btn-crm', 10000)
.waitForElementVisible('a[id=btnEndSession]', 10000)
.waitForElementVisible('a#btnEndSession', 10000)

But those don't work either. Any idea why these simpler selectors aren't picking the element up?

EDIT:

OK, weirdly enough, this worked:

.waitForElementVisible('a.btn-crm', 1000)

However, in the same test, looking for this element:

<select class="custom-form-control crm-result-visit select-hidden" id="crm-result-visit" name="crmResultVisit">
    <option value=" ">Select</option>
    <option value="Not Home">Not Home</option>
</select>

All of these different selectors fail to find the element:

.waitForElementVisible('select.crm-result-visit', 10000)
.waitForElementVisible('select#crm-result-visit', 10000)
.waitForElementVisible('#crm-result-visit', 10000)
.waitForElementVisible('.crm-result-visit', 10000)
.waitForElementVisible('select[id=crm-result-visit]', 10000)

I'm sort of reluctantly driven to the conclusion that the CSS selector support in nightwatch is pretty buggy.

FWIW, we're using version 0.6.7 of nightwatch.

We're using Nightwatch to automate some of our UI testing. Some of the current tests are rather brittle, mostly having to do with weird CSS selectors, and I'm trying to simplify them. But some of the simple CSS selectors that I would expect to work are, well, not.

I'm trying to find this deeply nested <a> tag:

<a class="btn btn-quote btn-crm" href="/crm/" id="btnEndSession" style="display: inline-block;">End Session</a>

Here's a bit of code that's working:

.waitForElementVisible('#quoteSummary > div > div > div > div > a:nth-child(2)', 1000)
.click('#quoteSummary > div > div > div > div > a:nth-child(2)')

But that's a nasty CSS selector, and I'd like to replace it with this:

.waitForElementVisible('#btnEndSession', 1000)
.click('#btnEndSession')

As the <a> element I'm interested in does in fact have the id of btnEndSession, it seems like that should work. But it doesn't: nightwatch errors out with one of its "Timed out while waiting for element <#btnEndSession> to be visible for 10000 milliseconds" messages.

I've also tried:

.waitForElementVisible('.btn-crm', 10000)
.waitForElementVisible('a[id=btnEndSession]', 10000)
.waitForElementVisible('a#btnEndSession', 10000)

But those don't work either. Any idea why these simpler selectors aren't picking the element up?

EDIT:

OK, weirdly enough, this worked:

.waitForElementVisible('a.btn-crm', 1000)

However, in the same test, looking for this element:

<select class="custom-form-control crm-result-visit select-hidden" id="crm-result-visit" name="crmResultVisit">
    <option value=" ">Select</option>
    <option value="Not Home">Not Home</option>
</select>

All of these different selectors fail to find the element:

.waitForElementVisible('select.crm-result-visit', 10000)
.waitForElementVisible('select#crm-result-visit', 10000)
.waitForElementVisible('#crm-result-visit', 10000)
.waitForElementVisible('.crm-result-visit', 10000)
.waitForElementVisible('select[id=crm-result-visit]', 10000)

I'm sort of reluctantly driven to the conclusion that the CSS selector support in nightwatch is pretty buggy.

FWIW, we're using version 0.6.7 of nightwatch.

• javascript
• css-selectors
• nightwatch.js

• Does a#btnEndSession work? Never used Nightwatch.js but I'm inclined to think it's buggy as well. – BoltClock Commented May 5, 2015 at 17:46
• Great question. Unfortunately, that syntax also fails, in both my test cases above. – Ken Smith Commented May 5, 2015 at 17:49
• What makes this so intriguing is the nature of the error message - it suggests that the CSS selector parser is parsing the selectors just fine, it's what it's doing with the selectors/elements that's off. – BoltClock Commented May 5, 2015 at 17:53
• For what its worth, we eventually abandoned Nightwatch: too many issues like this, with no resolution. We started using Selenium directly through its C# bindings, and that works much better. – Ken Smith Commented Jun 5, 2015 at 0:40
• 3 Just thought I'd chime in - Nightwatch has come a long way since 0.6.x and I have no troubles at call using id or class selectors in the above mentioned ways. Well worth checking out if looking into TA :) – GrayedFox Commented Nov 24, 2015 at 15:21

3 Answers 3

For what it's worth, we ended up abandoning Nightwatch, and going straight to Selenium (C#, in our case), which didn't seem to have these problems, and integrated better into the rest of our environment. Not a great answer, but I don't have this problem anymore :-).

I have just started using NightWatch JS , I am using nightwatch v0.6.7 . Following code is working fine for me

  module.exports = { 
  '1. test' : function (browser) {
    browser
      .url('<your url>')
      .waitForElementVisible('select[id=crm-result-visit]',1000)
      .click('select[id=crm-result-visit]');
  }
};

Try setting the CSS selector explicitly before your actions:

browser.useCss();

browser.waitForElementVisible('.btn-crm', 10000);