Tips for pinpointing a particular input text field in Selenium with a CSS selector that is related to the label text

I've been struggling to find the right CSS selector for a web page with 9 input fields, each with different label names. Despite my efforts on Google, I have not been able to find a solution. Can someone please assist me in identifying the correct CSS selector? While I have managed to do so using XPath, it is important that we use CSS for this project.

Here's an example of what my HTML code looks like:

<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>
cssselenium

Answer №1

Styling the text between elements in CSS can be tricky, but one workaround is to assign different classes to each label and then target the input using the + combinator in CSS.

Code 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>

Answer №2

If you want to style the <input> tag using CSS, you can target it with 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']"

Evaluation

  • Based on the HTML, since the <label> tag only contains innerText, a CSS selector must be constructed using the label name, utilizing the :contains pseudo-class

  • It is important to note that according to a discussion on 

    stackoverflow.com/questions/47883572

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery UI to create a bouncing effect on a CSS sprite image

Want to give your social icons a bounce effect using jQuery UI Bounce? I'm following a template and some jQuery documentation, but having trouble getting it right. It seems like the sprite image for the icons might be causing the issue. Can someone h ...

javascriptjqueryhtmlcsssprite

Exploring the functionality of the PageIndicator for Wearable Technology

Exploring the Page Indicator within a Tizen Wearable Application for Gear S3 Frontier has been an interesting journey. Despite successful implementation with text content, adding controls to each section or incorporating background images has proven challe ...

htmlcssswipetizentizen-web-app

Adjusting the height of a div according to the changing heights of other divs

The sidebar contains a search field, two lists, and a text div. The height of the search field and text div always remains constant, while the heights of the two lists vary dynamically. I am exploring the possibility of using only CSS to make the height o ...

htmlcss

Explore the world of threejs with a sphere adorned with cube bumps

Currently, I am navigating through the internet in search of a solution for my problem. The example I came across is quite impressive, take a look: . My dilemma lies in converting these squares into CSS cubes while ensuring that they do not get cut off by ...

javascriptcssthree.js

Picture emerges from the lineup

My dilemma involves repositioning an image within a row > col-md-6. To address this, I devised two classes - .pos1 and .pos2 .pos1 { position: relative; } .pos2 { position: absolute; right: 0px; } However, when applying these classes, the ...

htmlcsstwitter-bootstrap-3

Impact of Jquery on dropdown menus in forms

Currently, I have a script for validating form information that adds a CSS class of .error (which includes a red border) and applies a shake effect when the input value is less than 1 character. Now, I also need to implement this validation on various sel ...

javascriptjquerycssforms

Find the preceding element of the element that includes a specific link text

Can someone help me figure out how to click on a <td> element that precedes the <td> element with the linkText "Main" using Selenium? The element I'm looking to click is shown in the highlighted area of this image: https://i.sstatic.net/Q ...

javahtmlcssseleniumxpath

What is the best way to implement rounded borders using CSS?

Can we use the latest CSS standards to create rounded borders? Unfortunately, this feature is only available in CSS level 3 and above. ...

cssborder

Tips for automatically scrolling images horizontally in responsive layouts

Recently, I've been working on a website called . On the homepage, my portfolio images are arranged in a grid format using the <li> tag. I'm looking to align them side by side and have them scroll horizontally automatically, preferably with ...

javascriptcssimagescrollresponsive-design

Height set to 100% of the container

Why is my header fixed at the top? My footer remains fixed at the bottom. And there is no need for scrolling. How can the #content fill 100% of the remaining space in the center? body{overflow-y:hidden;} footer { position: fixed; height: 50p ...

htmlcsstwitter-bootstrap

Issue with alignment in the multiselect filter of a React data grid

In React Data Grid, there is a issue where selecting multiple filter options messes up the column headers. Is there a solution to display selected filter options above a line in a dropdown rather than adding them to the column header? The column header siz ...

javascriptcssreactjsreact-data-grid

Exploring the Differences Between Nth-CSS and Jquery

What are the advantages of using the nth function in CSS instead of applying it through jQuery, especially considering its compatibility with IE? Is it better to simply use jQuery from the start and avoid using it in a stylesheet altogether? Hopefully thi ...

jquerycsscss-selectors

Tips for extracting text from a text input field

Let's discuss a scenario involving an HTML text field. <input id="employeeId" class="formInputText" type="text" value="0013" name="employeeId" maxlength="10"/> The goal is to extract the content within the value="" attribute of the text box an ...

javaseleniumselenium-webdriver

Tips for applying a class to two elements when a checkbox is clicked and avoiding duplicated URL strings

Issue with Checkbox Selection In my project, I have implemented two tabbed containers for grid and list view. Each container contains multiple elements called info boxes with checkbox inputs. Whenever a checkbox is checked, the background color of the res ...

jqueryhtmlcss

Inquiries regarding the formatting of HTML tables

image description hereI'm facing an issue with displaying a table in HTML. I've been struggling for three days to find a solution, asked multiple questions without success. Any help would be greatly appreciated. I am trying to use the table tag a ...

htmlcssfrontendthymeleaf

Updating contact list to a database table structure

Currently, my code displays the data in address books, but I would like it to be shown in a table instead. I attempted to use document.write to create the table, but I'm unsure how to populate the table with the data rather than the address book forma ...

javascripthtmlcss

Tips for increasing the spacing between inline elements without resorting to using  

I am facing a challenge of adding space between two input fields without resorting to the use of &nbsp. I attempted to insert {' '} but saw no change in the render. This is how they appear when rendered: return ( <div cl ...

cssreactjs

Guide on adding a line break between two inline-block elements

Struggling to find a way to add a line break between two div elements in this fiddle here. The issue is that I want the elements centered and also have control over line breaks. Using float allows for line breaks with: .article:after { content: ' ...

htmlcss

Unable to click on the password field using a mouse - encountering a problem on a PHP

The link to access the email admin panel is While I am able to click on the username field, I am unable to click on the password field. The only way to place focus on it is by using the tab button on the keyboard. Initially, everything was functioning co ...

htmlcss

Error alert: The $ symbol is not defined

I followed a tutorial to create an auto-advancing slideshow in JavaScript/jQuery and it worked perfectly on jsfiddle. However, when I transferred everything to Dreamweaver, it stopped functioning. I have triple-checked that all the necessary files are link ...

javascriptjqueryhtmlcssslideshow