0

when I set up some simple html

<html>
  <head>
    <title>Simple Site</title>
  </head>
  <body>
    <form>
      <label>Name:</label><input type="text"></form><br/>
      <label>Phone:</label><input type="text">
    </form>
    <div>happy</div>
    <div>angry</div> 
    <div>sad</div>
  </body>
</html>

I tried to specify a div by its text but wasn't able to

 div[@text='happy']              #nope
 html body div[@text='angry']    #nope
 html body div:contains('angry') #nope
 html body div[text='angry']     #nope

What am I missing?

TangibleDream
  • 601
  • 8
  • 29
  • Possible duplicate of [How do I find an element that contains specific text in Selenium Webdriver (Python)?](http://stackoverflow.com/questions/12323403/how-do-i-find-an-element-that-contains-specific-text-in-selenium-webdriver-pyth) – Sanka Dec 09 '16 at 05:37
  • Possible duplicate of http://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text – disinfor Dec 09 '16 at 05:38
  • http://stackoverflow.com/questions/30648554/how-to-select-a-web-element-by-text-with-selenium-webdriver-java – Sanka Dec 09 '16 at 05:39
  • 1
    Some versions of Selenium do support :contains(), but I assume you're using Selenium WebDriver, which does not, because :contains() is no longer in the standard. – BoltClock Dec 09 '16 at 05:40
  • So looking at the links, I'm getting that specifing by text, which is a great way to make the selector references robust, is not supported in anyway via css. You'd use xpath which can employ ```div[contains(text(),'angry')]``` – TangibleDream Dec 09 '16 at 05:44
  • 1
    @TangibleDream: Yes - you'll need XPath for this. – BoltClock Dec 09 '16 at 05:53
  • Side question... Top 5 reasons to use :css over :xpath? – TangibleDream Dec 09 '16 at 05:55
  • The only reason to use CSS over XPath is that CSS is much simpler for a majority of use cases. XPath doesn't have a dedicated function for matching class names for example - CSS has class selectors. XPath 2.0 does have id(), but not all browsers implement XPath 2.0 - CSS has the ID selector. On the other hand if you're coming from an XML/XPath background, using XPath is a no-brainer, though you'd still have to cope with the limitations that arise from browsers not implementing XPath 2.0. – BoltClock Dec 09 '16 at 06:09

2 Answers2

1

CSS doesn't have a way to match on text content of elements, but Capybaras find provides a text option to filter by the text content. It takes a string or a regex

angry_div = find(:css, 'div', text: 'angry') # The :css can be omitted if Capybara.default_selector = :css (which it is by default)
Thomas Walpole
  • 48,548
  • 5
  • 64
  • 78
-1

Use below code: 

 div[type='happy']{
   background-color:red;
 }   
<form>
    <label>Name:</label><input type="text"></form><br/>
<label>Phone:</label><input type="text">
</form>
<div type="happy">happy</div>
<div>angry</div>
<div>sad</div>
thangavel .R
  • 466
  • 4
  • 13
  • nice idea, however, I am not in control of how the actual html is written. So I can't punt to searching by type. – TangibleDream Dec 09 '16 at 05:51
  • There is so much wrong with this answer 1) Polluting the markup with invalid attributes 2) The markup is probably not within their control in the first place 3) The question is not about CSS – BoltClock Dec 09 '16 at 05:52