How can one use Selenium's XPath or CSS selectors to retrieve an element based on the text of its inner element or the text of the current element?

Exploring the code below:

<section id="section2" class="MightChange1 MightChange2">
   <div id="dynamicIdxxx" class="dynamic1 dynamic2 dynamic3">
     <div id="againDynamic" ..>
         <div id="someDynamicCanBeRelayed" class="xyz">
         <button id="dynmaicBtnxx" class="Cannot be relayed">
             <span ....>
                  <span id="dynamic23" class="PartOfDoesntChange">
                       <bdi> show INTEGER more details</bdi>

How can we target the span element with the id 'dynamic23' based on the changing text within the bdi tags?

I could approach it like this: //*[@id='section2']//span/bdi[contains(text(),'more fields')]/ancestor::button")

The difficulty arises when the structure changes to:

<span id="dynamic23" class="PartOfDoesntChange">
     <bdi> show INTEGER more details</bdi>

and sometimes without the bdi tag:

<span id="dynamic23" class="PartOfDoesntChange"> show INTEGER more details <span>

One approach is to handle both scenarios in Selenium by using two xpaths with and without bdi, then utilizing logical OR conditions. This way, we can still locate and interact with the desired element.

Are there more effective solutions for handling such cases, perhaps with CSS selectors?

cssseleniumselenium-webdriver

Answer №1

Here is an easy and straightforward solution for you: 

//span[contains(., 'show INTEGER more details')]
. Remember not to change the "." to "text()", as this will limit the matching to only one element.

https://i.sstatic.net/pzgW2.png

Answer №2

If you want to combine results from two queries, you can utilize the UNION operator |. Check out the following code snippet for a demonstration.

//*[@id='section2']//span/bdi[contains(text(),'more fields')]/ancestor::button") | //*[@id='section2']//span[contains(text(),'more details')]/ancestor::button")

Answer №3

If you want to choose the span element that contains the text 

display NUMBER additional information
, you can utilize this xpath query:

//button[@id='dynamicButton']//*[contains(.,'display NUMBER additional information')]//preceding::span[1]

Important: The values may change dynamically, so it's advisable to apply a WebDriverWait for the element as well.

Answer №4

Here is a useful tip:

.//*[contains(., 'display INTEGER additional information')]/ancestor::button[starts-with(@id,'dynamicButton')]

The * (star) at the beginning will locate the tag containing the specified text, whether it's span or bdi. The Ancestor function will find a button with an id that begins with your text and ends with variations of 'int'.

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

Automating the process of reading text labels associated with a toggle switch using Python in Selenium

I'm currently working on a task that involves toggling a switch on/off using Selenium code. However, I'm facing a challenge as I need to locate the toggle switch based on its "text label" instead of its ID or Name. Below is the HTML code for the ...

pythonseleniumselenium-webdriver

Three divs are positioned within the parent element and collectively fill the entire height. The first and last div have varying

I attempted to replicate the design shown in the image below: https://i.sstatic.net/Q7sTI.png Initially, I was successful in achieving this using JavaScript. However, when attempting to recreate the same effect using only CSS without any JavaScript, I en ...

csspositionheight

The Selenium crawler effortlessly launched on a local server, yet encountered continuous issues when attempting to start up on a Linux system, specifically related to org.openqa.selenium.interactions.Coordinates

For a Selenium crawler project using Java, I am able to successfully crawl the information needed on my local machine. However, when attempting to deploy the project to a Linux server and start it up, I encountered an issue. After packaging the project int ...

javaselenium-webdriverweb-crawler

Comparing stalenessOf and invisibilityOf in Selenium using Java

Can you clarify the distinctions between stalenessOf and invisibilityOf? Both check if an element is invisible or not attached to the DOM. I'm having trouble understanding when one should be implemented over the other. wait.until(ExpectedConditions.st ...

javaselenium-webdriver

Is Jquery Mobile's Table lacking responsiveness?

I have implemented a basic table from the jQuery Mobile website on my page. Take a look at the HTML code below: <div data-role="page" id="mainPage"> <div data-role="content> <table data-role="table" id="my-table" da ...

javascriptjqueryhtmlcssjquery-mobile

I'm facing an issue where TailwindCSS fails to stretch my VueJS application to full screen width

My components are all contained within a div with classes flex-row, w-screen, and content-center. However, when I switch to reactive/mobile mode on the browser, it only takes up about 2/3 of the screen and doesn't fill up the remaining space. Below i ...

javascripthtmlcssvue.jstailwind-css

CSS - Maximizing One Column's Width While Allocating Percentage Space for Two Columns?

It's been quite some time since I delved into the world of web development and I seem to have forgotten how to tackle this particular issue. Despite hours spent searching online, I've gained knowledge about flex-boxes and other useful tools, but ...

htmlcssflexbox

Automatically navigate to a random link on a webpage with the Selenium Python API

Is there a way to use the Selenium API with Python 2.7 to click on a random link on a specific webpage? Any suggestions would be greatly appreciated. Thank you! ...

pythonseleniumrandomhyperlinkhtml

A guide on incorporating the CSS 'content' property with the 'option' tag

Is it possible to include CSS 'content' in the 'option' tag? For example, I want to display "Name: Volvo". <html> <head> <style> option:before { content: "Name: "; } </style> </head> <body> ...

htmlcss

Guide to updating the button's color when clicked

I need to change the color of an iconic button when it is clicked. The default color is the primary color, but when the button is clicked, it should change to red. This functionality is working correctly. After clicking the button, two hidden buttons shoul ...

htmlcssangulartypescriptangular6

Conceal portion in HTML until revealed

I am attempting to create 3 sections within a single HTML file using the <section id="id"> tag, and I want to be able to open each section by clicking a link in the header with <a href="#id">1</a>, and then close it when another section i ...

javascriptphphtmlcss

Customizing Scrollbar Functionality

Recently, I have been working on customizing scrollbar behavior. However, I have encountered an issue where the scrollbar remains visible even when I am not actively scrolling. This was not the case before applying the below CSS code. My expectation is th ...

cssreactjsmaterial-uiscrollbar

Develop adaptable flex items

I am working with a container element that contains variable child elements whose width I want to scale. To see an example of what I'm trying to achieve, take a look at this simple plunker: https://plnkr.co/edit/ef0AGPsK7FJJyBqgWuMi?p=preview When ...

htmlcssflexboxalignment

What is the best method for choosing a div element using JavaScript and altering its background color?

On my website, I have a pop-up modal with a form that contains 5 divs, each with a picture and description. I came across this JS code on w3schools that allows me to style a selected div. However, when the modal is opened, one of the divs is already pre-se ...

javascripthtmlcss

What is the best way to ensure an image fits perfectly within a div container

I'm attempting to design a straightforward card layout where the image spans the entire width of the container div. My vision is for it to resemble something like the example in the linked image below. https://i.sstatic.net/X5oJD.png I experiment ...

htmlcss

How to set a maximum width in IE8 when using width:100%?

After researching online, I am still unable to get it to work. I have a basic HTML layout that I have been testing across different browsers. Knowing the quirks of IE, I wasn't surprised when the max-width CSS code didn't function as expected. Ho ...

css

Having issues with custom CSS functioning properly on WordPress sites

I have a customized section on my WordPress page with specific CSS and HTML. You can view the code here: Upon hovering over the image, the code is designed to display a semi-transparent background. However, when I implement this code onto my WordPress si ...

htmlcsswordpresshover

A unique feature where a bar emerges from the bottom of the screen, smoothly glides upwards, and then securely fastens to

I'm working on bringing to life a concept that I've been envisioning. The design would feature a long scrolling page with a unique navigation bar behavior. The idea is for the navigation bar to initially start at the bottom of the screen and the ...

javascriptjqueryhtmlcss

The hide and show buttons seem to be missing when utilizing the datatable API

For my current project, I referenced this example: https://datatables.net/extensions/responsive/examples/styling/bootstrap.html Despite trying various datatable API examples, I'm still unable to display the expand/collapse buttons. The required CSS a ...

jqueryhtmlcssdatatable

What is the process for building a grid system similar to Bootstrap's 12-column grid using the new CSS Grid Layout?

Is there a way to implement a 12-column grid system similar to Bootstrap using CSS Grid? I am struggling to understand this new technology and would greatly appreciate it if someone could provide a demo. My goal is to create a simple grid structure resem ...

csstwitter-bootstrapgridflexboxcss-grid