How to '.click' on some css element containing text?

[Kuba Mucha]

Issue thread: https://github.com/nightwatchjs/nightwatch/issues/633

---------------------------

Hello,

Like in title, I'm struggling with this from 2 days already and I couldn't find a solution.

How to .click on some css element containing text?

For example - I'm having 5 .search-results css elements, each of them containing unique text.

This can be done with:
browser.jqueryClick('.search-result-name:contains("Something")')
from custom nightwatch commands. But hey, they don't support Nightwatch.js Page Objects.

----

More informations:

homePage.js -> page object file
mainSearch -> section containing desired object
searchResults -> element (defined with CSS) in section above -> this is equal to 5 elements on website with only one difference - they contain unique texts inside of them - and one of them contains "something" text for example.

So.. I want to click element by CSS containing "something" text, so from 5 elements I'm down to 1.

-----

And here's another example I'm not capable to fix (it's different from this one above):
<div class="select2-result-label"><span class="select2-match"></span>single-select</div>
So.. I'm having 5 '.select2-match' elements and it's names are in divs not in spans. So I want to click on span but take text from entire div. This is crazy.

Also I'm struggling with click on element by it's unique number. For example: I have 5 '.search-results' elements and I want to click on 2nd one. How to accomplish this? I know you can add it's number with [number], for ex. [0], but I'm not quite sure how to do this in Nightwatch.js).

Thanks for all answers.

[Corrinna Rainwater]

You need to use a xpath selector that. Here is an example:

browser

.useXpath()

.waitForElementVisible('//button[text()="Archive"]', 30000, false)

.click('//button[text()="Archive"]')

.useCss()

[Corrinna Rainwater]

I just saw your second question about the number. Yes, you can use a structural pseudo class as selector

http://www.w3.org/wiki/CSS/Selectors#Structural_pseudo-classes

For example div p:nth-child(2){background-color:red;} would select the second p in a div. This might also work for your first case if the order of the elements is always the same.

 

On Wednesday, September 16, 2015 at 1:02:27 AM UTC-7, Kuba Mucha wrote:

[Kuba Mucha]

Thank you Corrina! Helped a lot.

Any idea how to click on CSS containing text? Would be great!

Best regards,

Jacob.

[fr_klonk]

Hi Kuba,

there doesn't seem to be an equivalent for this in css. See here: http://www.opinionatedprogrammer.com/2011/01/css-selecting-text-nodes-as-with-xpath-text/

You do have to use XPath or a structural pseudo class.

--
You received this message because you are subscribed to a topic in the Google Groups "NightwatchJs" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/nightwatchjs/JvA2QLPGVFU/unsubscribe.
To unsubscribe from this group and all its topics, 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/1f1f9b1d-db61-4a4a-920b-972dd88d545e%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[mbixby]

client.selectorForJQueryElement('.something:has(a:contains("Text"))', someUniqueElementSelector => {
  client.click(someUniqueElementSelector);
});

By using this method you don't have to mix Xpath / CSS and you don't have to mix commands accepting selectors vs. WebElements.

However it depends on jQuery and other Javascript on the client.

[mbixby]

It can support page objects if you cherry pick my PR (648):

client.page.home().selectorForJQueryElement('@list:has(a:contains("Text")) @listItem', someUniqueElementSelector => {
  client.click(someUniqueElementSelector);
});