Advanced CSS selectors eg. :contains('John')

[petrvojta]

@beatfactor - I would like to suggest to add support for extended CSS selector for selecting elements with specific text. Similar to JQuery http://api.jquery.com/contains-selector/. It would be usefull for testing worflow. Eg. for testing of creating / updating / deleting records.

browser.click("ul li a:contains('Record')");

or

browser.click("ul li a[text='Record']");

Maybe XPath selectors could handle it?
Thank you!
Btw. Nightwatch.js is cool :-)

[beatfactor]

Thanks, the :contains pseudo-selector is not in the w3c spec so it won't work, but the other example should work.

[petrvojta]

Thank you for your quick answer. Unfortunately it doesn't work. I have to wait for XPATH implementation ther #33. Thanks. P.

[beatfactor]

Just to let you know, this is also discussed on the mailing list and someone had managed to achieve this with xpath: https://groups.google.com/forum/#!topic/nightwatchjs/d0p72Ub9Idg

[petrvojta]

Perfect 👍 I vote for :contains() (it will keeps a simplicity and beauty of Nightwatch.js). later you can add a XPATH support.

[haggyj]

+1 for :contains

[neilrees]

+1 : Finding elements in collections by nth-child is too brittle, :contains() would be 👍

[davidlinse]

👎 i would vote agains :contains() as @beatfactor already mentioned

the :contains pseudo-selector is not in the w3c spec

and go for real XPath support instead..

Just my two cents
~david

[beatfactor]

Without native browser css support, this it won't probably be implemented. I could look into delegating to jQuery (if available) via execute or converting into xpath.

[VanSteve]

+1 for :contains - as this is a very widely used selector that makes for infinitely simpler to read code than the mess of troubleshooting that appears to be required to get the equivalent messier xpath queries working in nightwatch on even a basic level

[janpaul123]

+1 for :contains. Widely used, and CSS is a much more familiar to many web developers than XPath.

[tslater]

+1

[maxgalbu]

If you happen to use jquery in your site, you can use jqueryClick() from my custom commands:

https://github.com/maxgalbu/nightwatch-custom-commands-assertions

[mdarif]

+1

[yidea]

+1

[damassi]

@maxgalbu -- Awesome! Thanks for all of these; very useful.

[jurgob]

+1

[genintho]

👍

[adamwardecki]

+1

[dbuarque]

+1

[panfu]

+1

[xioguru]

+1

[Richard-Bady]

+1

[mrjumpy]

+1

[idMolotov]

+1

[montogeek]

@beatfactor Does Nightwatch support :after and :before?

[yumikohey]

@montogeek I don't think so. They are pseudo in CSS. jQuery doesn't even support to query them.

[montogeek]

@yumikohey Yep, I ended testing the element in a different way

[joaomilho]

+1

[ecuan]

+1

[martinp999]

@beatfactor

+1 :contains

FYI and just to reconfirm - a[text='blah'] does not work in jQuery or Nightwatch.

Looks like I also have to resort to the clunkiness of XPath. :-(

[kristinaluxgroup]

+1

[rchipka]

An alternative would be to convert your CSS selectors to XPath using css2xpath.

An added benefit is that you can use CSS/XPath selector hybrids:

a > #css.example//with/some::child(xpath) ~ .that:contains('css')

which converts to:

.//a/*[@id="css"][contains(concat(" ",normalize-space(@class)," ")," example ")]//with/some::child(xpath)/following-sibling::*[contains(concat(" ",normalize-space(@class)," ")," that ")][contains(normalize-space(),"css")]

It also supports :icontains for case insensitive matching, reverse combinators (!>, ! , !^, !+, !~), :starts-with, :ends-with, :first, :last, :has, :has-(sibling|child|ancestor), etc.

You can use the live css2xpath demo to test your selectors.

For more information on what it can do, you can check out the source or contribute some documentation.

[rchipka]

var c2x = require('css2xpath');
...
browser
  .useXpath()
  .click(c2x(':contains("Log in")'))

[stocarul]

+1