Exploring CSS Selectors: Finding Distinct Values Within Child Elements

I am currently in the process of developing selenium tests for a web application. The challenge I am facing is that the application utilizes dynamically generated forms, resulting in a plethora of non-unique elements to navigate through (#ids are limited or at a high level). These forms can also change based on configuration settings (making nth-child unreliable as the order of elements may vary).

Within these forms, there are specific fields that possess unique class names. However, these fields are nested within non-unique elements. I am looking for a solution to locate these elements based on their distinctive values (which are not #ids), ensuring that Selenium can find them regardless of their position within the form. Currently, I am unsure how to achieve this.

To better illustrate the scenario:

<Some non-unqiue Div>
  <child>
    <child>
      <unique value 1>
<Some non-unqiue Div>
  <child>
    <child>
     <unique value 2>
<Some non-unqiue Div>
  <child>
    <child>
      <unique value I WANT THIS ONE>
<Some non-unqiue Div>
  <child>
    <child>
      <unique value 4>

As depicted above, the element I am interested in has a distinct value that I need to match. Using nth-child(3) to navigate to its parent elements is not viable given the fluidity of their order. In some cases, the desired element may be positioned as nth-child(2).

Therefore, a potential selector for the scenario could resemble the following:

Some.nth-child(3) > child > child > [unique*=\"I WANT THIS ONE\"]

However, if the top parent changes to nth-child(2) in a different scenario, this approach would no longer be effective.

Is there a CSS selector technique that I can utilize to consistently locate this element by its unique value, irrespective of its parents' varying positions within the list?

Thank you in advance!

Answer №1

Based on my understanding of the issue, the following are the selectors you need to use:

'element/id/class:contains("THIS IS WHAT I NEED")'

or for input type:

'element/id/class[value="THIS IS WHAT I NEED"]'

For instance:

'input[value="THIS IS WHAT I NEED"]'

Or for an element with innerHTML:

'div:contains("THIS IS WHAT I NEED")'

Or a combination of both:

'input[value="THIS IS WHAT I NEED"], div:contains("THIS IS WHAT I NEED")'

Will this be helpful for your purposes?

Answer №2

Wow, I just had a major breakthrough in my understanding of CSS selectors. For the longest time, I've been using ">" to separate elements in my selectors, thinking that was the correct syntax. But I recently learned that ">" is specifically for selecting direct children of the previous element!

Instead of using ">", if you use a space in your selector, it will search the entire tree beneath that element for the value you are looking for. As someone who is self-taught in automation, I can't believe I didn't know about this sooner.

I just tested out a selector like "#myId [value="my value"]" using a space instead of ">" and it successfully searched the whole tree and targeted my desired element accurately.

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

Resolving CSS glitches that mysteriously vanish in Internet Explorer versions 8 and 9

My website was created using WordPress, with various plugins added to enhance its functionality. However, I have encountered an issue when viewing the site in Internet Explorer 8 & 9. The visual effects of the plugins seem to lose all CSS styling in IE bro ...

Element imitating the edge of the screen extending to the edge of the container

Looking to customize a website design (utilizing bootstrap 4) with a gradient line that starts from the title and stretches all the way to the left edge of the container. While I have managed to set this up, the full gradient effect is not visible. To addr ...

Ways to arrange two divs side by side and ensure that the content remains within the respective divs

Although I have searched for a similar solution, I haven't found an exact scenario that matches my current issue. Here is the problem: I have a div on the right (with a fixed width), and the entire left side is occupied by another div. While I can pos ...

What is the method for connecting the text to its parent element in SVG?

I have put together a demo at https://codepen.io/anon/pen/rzLEQX, but I am trying to figure out how to ensure that the text is contained within the 'g' container with the id of "g12". Do I need to use variables x and y for this? <g id="g12" ...

Animating back with a jQuery if statement

Is there a way to implement an if statement that triggers an animation when the right image reaches +400px, and then animates back to -400px upon hovering over the image? $('#left img').mouseenter(function() { $('#right img').animate ...

I'm having trouble pinpointing the source of the borders surrounding my divs

As I work on creating a print css for a Drupal page that was developed using Artisteer, I am facing the challenge of eliminating borders from the printed version. Despite my thorough search through the HTML and CSS files, I have only identified two instanc ...

Creating a visually appealing Django filter form with custom styling in HTML

Currently, this is how my django filter form appears: https://i.sstatic.net/JQWFG.png Below is the html code I am using: <form action="" method="get" class="form-inline"> {{myfilter.form|bootstrap}} <but ...

The concept of CSS inheritance and its impact on web design

Suppose I have a Table and I define a class or id in my stylesheet to give it a grey background. If I apply this ID or Class, will the tr and td elements automatically inherit these properties? Or do I need to specifically declare them for each tag? Simi ...

Scrape data from websites where the main URL remains constant but the information in the table varies

If you take a look at this link, you'll notice that when the next page is selected, the table on the website gets reloaded with new content without any change in the URL. Even after inspecting the developer tools > Network > XHR, it's diffi ...

Personalize your hr tag

https://i.stack.imgur.com/9lumC.png Is there a way to create an hr line that looks exactly like the image above? I attempted using clip-path: polygon(0 20%, 0 100%, 100% 100%, 100% 0%, 5% 0) but it didn't work .divider { color:#1D0000; ...

Tips for detecting when a button is being hovered over

Is there a specific JavaScript property that can be used to determine if a button is being hovered over? I need this functionality for performing a task when the mouse is already hovering over the button. I know about the onMouseOver event, but I haven&ap ...

What is the functionality behind a free hosting website?

Is anyone familiar with websites like Hostinghood, where users can create a subdomain and upload HTML, CSS, etc.? I'm curious about how they operate and how I can create a similar site. This is my first question here, so please respond instead of disl ...

Rotating elements in CSS using the transform property with rotateX and rotateY values

I've created a transformation effect using CSS, and now I'm looking to start with a specific rotation (rotateX(15deg) rotateY(180deg)) and then animate it back to its original position. Is there a way to achieve this reversal effect and how can i ...

Setting the height of a div using HTML and CSS

Can someone please assist me with my html/css code? I am having trouble making the height of my divbody match the height of divwrapper. Currently, the height of divbody is only 10 (with padding valued at 5px). Here is the code snippet, thank you! <h ...

What steps can I take to stop full-width images from stretching to fit the entire body size when placed within a flex container?

I'm having trouble with my layout - specifically, I have one container with four columns. It looks fine when I manually set the image sizes in each column, but I want to use percentage widths for more flexibility. However, when I do this, the images e ...

The watermark feature in HTML may not appear when printed on every page

I'm facing an issue with adding a watermark style. The watermark displays only on the first page when attempting to print in Chrome. It works perfectly in Firefox and IE. <style type="text/css"> #watermark { color: #d0d0d0; font-size: 90pt; ...

Show a hyperlink within dynamically retrieved HTML content

As I generate a list of strings dynamically, I am displaying it in Angular using ngFor. However, some of the strings contain hyperlinks which are not being distinguished properly when displayed - they appear as normal text. I want to differentiate these ...

Guide on using CSS to position text around an image

I need to figure out a way to wrap text around an image positioned in the bottom left corner of a CSS table. Since the amount of text may vary each time I use it, I am wondering if there is a solution for this and how I can achieve it? ...

Is there a way to center a div vertically without specifying the screen height?

Trying to create a slider that aligns both horizontally and vertically can be a tricky task. To achieve this alignment, I have implemented the use of display: flex; within the following code: body { display: flex; flex-direction: column; justify-c ...

Issue with a Bootstrap panel displaying incorrect border formatting

I am currently working with Angular UI Bootstrap and facing an issue with an accordion component. Everything works perfectly fine in the development environment with the full version of the Bootstrap Cerulean file. However, when I minify the CSS file for p ...