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.

Kieserite

Does a#btnEndSession work? Never used Nightwatch.js but I'm inclined to think it's buggy as well. – Keister

Great question. Unfortunately, that syntax also fails, in both my test cases above. – Kieserite

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. – Keister

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. – Kieserite

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 :) – Ingamar

I'm using version 0.9.12 and have the same problem. For me this works with the chrome driver but fails with the firefox (gecko) driver. – Pythian

Are you in a frame by any chance? – Junto

Answer 1

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

Kieserite

Are you calling the Java api directly from c#? – Meier

We're using the C# version of Selenium downloadable directly from this page: seleniumhq.org/download. Not sure how it's implemented behind the scenes, but I don't think it's just C# bindings calling down to Java: I get the impression that it's a native C# implementation. Works very well. – Kieserite

Answer 2

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

Robinia

Answer 3

Try setting the CSS selector explicitly before your actions:

browser.useCss();

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

Rowlock