Nightwatch can't locate element via css id or class selectors

Question

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.

Answer 1

Try setting the CSS selector explicitly before your actions:

browser.useCss();

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

Answer 2

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 :-).

Answer 3

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]');
  }
};