Nightwatch. Click on element with text

Question

I have a problem, can`t click on web element having some unique text. I have this structure:

<div class="wg-wagon-type__item"  data-reactid="10"
  <div class="wg-wagon-type__title" data-reactid="11">Text</div>

I try this

.click('.wg-wagon-type__title:contains("Text")')

But I have an error

ERROR: Unable to locate element: ".wg-wagon-type__item .wg-wagon-type__title:contain("Text")" using: css selector

How can I correct click on this element?

Answer 1

Is there any reason why you can't simply target the class wg-wagon-type__title?

.click('.wg-wagon-type__title')

Unfortunately there isn't a CSS selector that matches on the text of an element. However, nightwatch has the capability to run javascript on the browser via 'api.execute' and that allows you to do string matching.

Alternatively, you could use an xpath selector and use that to match the text

.click("//div[contains(@class, 'wg-wagon-type__title') and text()='Text']")