9

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.

Ken Smith
  • 19,697
  • 13
  • 93
  • 139
  • Does `a#btnEndSession` work? Never used Nightwatch.js but I'm inclined to think it's buggy as well. – BoltClock May 05 '15 at 17:46
  • Great question. Unfortunately, that syntax also fails, in both my test cases above. – Ken Smith May 05 '15 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 May 05 '15 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 Jun 05 '15 at 00: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 Nov 24 '15 at 15:21
  • 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. – tzachs Mar 10 '17 at 16:27
  • Are you in a frame by any chance? – GetBackerZ Aug 14 '18 at 17:39

3 Answers3

8

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

Ken Smith
  • 19,697
  • 13
  • 93
  • 139
  • Are you calling the Java api directly from c#? – SuperUberDuper Nov 16 '15 at 15:12
  • We're using the C# version of Selenium downloadable directly from this page: http://www.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. – Ken Smith Nov 16 '15 at 16:51
1

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]');
  }
};
Juhi Saxena
  • 1,077
  • 11
  • 16
1

Try setting the CSS selector explicitly before your actions:

browser.useCss();

browser.waitForElementVisible('.btn-crm', 10000);
Mladen Radivojevic
  • 11
  • 3