How to target a specific input text field in Selenium using CSS selector based on the label name

Question

I have a web page having about 9 input fields having differnt label names and I GOOGLED a lot to get the answer but was not successful. Please help me with the CSS selector, with xpath i'm able to arrive at the solution but not with CSS and we have to use CSS in our project.

My sample html looks something like this:

<div class="no match found for this class name">
  <div class="no match found for this class name too">
    <label>1st label Name </label>
    <div class="7 matching nodes found for this class name">
      <input class="3 matching nodes found for this class name" type="text" value="dynamic int value">
    </div>
  </div>
</div>

Your label does not have a name. It has an inner text..which is not selectable by CSS. — Paulie_D, Jan 23 '18 at 13:12
you can try this css div[class*="no match found for this class name too"] label — Ankur Singh, Jan 23 '18 at 13:18
Possible Duplicate: https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text — Pete, Jan 23 '18 at 13:30
@AnkurSingh: Thanks, this helps me identify the label but drill down further to the respective input field is being a challenge!!! Will try and post my code if it works! Thanks again. — Savitha B.S, Jan 23 '18 at 13:36

Bhuwan · Answer 1 · 2018-01-23T13:44:08.280

0

You can't select the text between the elements in css...However you can pass a different class for every label and then select the input with + css selector.

Stack Snippet

label[class="label1"]+div>input {
  background: red;
}

label[class="label2"]+div>input {
  background: blue;
}

<div class="no match found for this class name">
  <div class="no match found for this class name too">
    <label class="label1">1st label Name</label>
    <div class="7 matching nodes found for this class name">
      <input class="3 matching nodes found for this class name" type="text" value="dynamic int value">
    </div>
  </div>
  <div class="no match found for this class name too">
    <label class="label2">2nd label Name</label>
    <div class="7 matching nodes found for this class name">
      <input class="3 matching nodes found for this class name" type="text" value="dynamic int value">
    </div>
  </div>
</div>

edited Jan 23 '18 at 13:44

answered Jan 23 '18 at 13:17

Bhuwan

16,525
5
34
57

I would use a data attribute as I don't think name is a valid attribute for a label – Pete Jan 23 '18 at 13:21
@Pete no other attribute available – Savitha B.S Jan 23 '18 at 13:24
@Bhuwan nope no name given to the label, direct text within the tags – Savitha B.S Jan 23 '18 at 13:26
@SavithaB.S You can't select the text within the elements using css....you can use a class instead...See updated answer above.. – Bhuwan Jan 23 '18 at 13:46

score 0 · Answer 2 · answered Jan 24 '18 at 10:29

To target the following <input> tag with CSS you can use the following line of code :

"div.no_match_found_for_this_class_name > div.no_match_found_for_this_class_name_too label:contains('1st label Name') div:nth-child(1) > input.3_matching_nodes_found_for_this_class_name[type='text']"

Analysis

As per the HTML as the <label> tag have only innerText and you have to construct a CSS selector based on the label name so we have to use :contains pseudo-class

Note that as per the QA stackoverflow.com/questions/47883572

The :contains pseudo-class isn't in the current CSS Spec and is not supported by either Firefox or Chrome.

How to target a specific input text field in Selenium using CSS selector based on the label name

2 Answers2

Analysis