How to identify individual elements with CSS selectors

[Ben]

I want to:

1. Find the first <li> element that contains the specified classes
   
2. Click it
   
3. Verify that it subsequently also has a "checked" class

Take the following command that I've created in a Page object:

selectCar: function(props)
  var selector = 'li';
  selector += (props.indexOf('hybrid') > -1) ? '.hybrid-1' : '.hybrid-0';
  this.click(selector);
  this.api.element('css selector', selector, function(el) {
    browser.elementIdAttribute(el.value.ELEMENT, 'class', function(result) {
      console.log(result);
    });
  });
  return this;
}

Given that my css selector is going to look like, say, "li.hybrid-1" - what, exactly, is click() doing? Is there some logic around that to only fire a click on the first element found? It seems to be doing just that, but this certainly doesn't seem to be the case with assertions: if (instead of the ugly elementIdAttribute stuff above) I then do something like:

browser.expect.element(selector).to.have.attribute('class').which.contains('checked');

... that'll pass if ANY element matching the selector has a "checked" class. Which is wrong. I want to check that the element I clicked has the "checked" class.

Surely... there's a better way than this? Even the way I'm doing it above is assuming that the element found by click() is the same one found by this.api.element('css selector', selector)

I guess ideally I want something to return me a reference to an element - which is what does - but I can't pass that ID into click() or element()... can I?

As you can see.... I'm somewhat new to this, and struggling with some basic concepts. Any pointing in the right direction would be appreciated.

[Andrei Rusu]

expect is also using the first element if multiple are returned by a
selector, as you can see here:
https://github.com/nightwatchjs/nightwatch/blob/master/lib/api/expect.js#L117.

If you have a Selenium element ID you can pass that to elementIdClick,
which is what click is doing -
http://nightwatchjs.org/api#elementIdClick.

> --
> You received this message because you are subscribed to the Google Groups
> "NightwatchJs" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to nightwatchjs...@googlegroups.com.
> To post to this group, send email to nightw...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/nightwatchjs/6676d35b-e533-4b5f-aba6-be23ad64b16c%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

[Ben]

Aha! Ok, thank you.

But once I've started using the Selenium element ID, I can't use that ID anywhere else, right? If I want to work with a specific element that I've got an ID reference to via:

this.api.element('css selector', selector, function(el) {

  var element_id = el.value.ELEMENT;
});

then I can't pass the element_id into, say:

browser.expect.element(element_id).to.have.attribute('class').which.contains('checked');

Is there any way to get "back" from the Selenium protocol commands to the classic or Chai assertions?

[Andrei Rusu]

No, that's not supported at the moment I'm afraid.

> --
> You received this message because you are subscribed to the Google Groups
> "NightwatchJs" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to nightwatchjs...@googlegroups.com.
> To post to this group, send email to nightw...@googlegroups.com.
> To view this discussion on the web visit

> https://groups.google.com/d/msgid/nightwatchjs/fb1db4e1-7a68-4fac-a606-88246f1d29f4%40googlegroups.com.