Exploring elements using dynamic xpaths in selenium

When working with Selenium WebDriver, I am facing difficulties selecting the 

<input class="cs-autocomplete-input" tabindex="">
element due to its fluid ID. This is because there are multiple items with the same class name on the web page, making it challenging to pinpoint the specific element. Is there a way to effectively locate elements like this despite their dynamic IDs? Using 
By.className("cs-autocomplete-input")
doesn't work in this case.

<div class="content">
    <div id="fluid-id-bhlpjo3p-1026">
        <input type="button" class="csc-repeatable-add-bhlpjo3p-1022 cs-repeatable-add" value="+">
        <ul class="cs-repeatable">
            <li class="csc-repeatable-repeat-bhlpjo3p-1022 clearfix cs-repeatable-repeat show">
                <input type="radio" class="csc-repeatable-primary-bhlpjo3p-1022 show cs-repeatable-primary" name="primary-fields.sponsors" value="true">
                <input type="text" class="csc-exhibition-sponsor cs-repeatable-content" id="repeat::.csc-exhibition-sponsor" name="repeat::.csc-exhibition-sponsor" style="display: none;">
                <input class="cs-autocomplete-input" tabindex="">
                <a href="#" class="cs-autocomplete-closebutton" title="Cancel edit, and return this field to the most recent authority value" style="display: none;"></a>
                <input type="button" value="" class="csc-repeatable-delete-bhlpjo3p-1022 cs-repeatable-delete" disabled="">
            </li>
        </ul>
    </div>

For reference, the xpath of this div is 

//*[@id="primaryTab"]/div/div[3]/div[1]/div[2]/div[2]/div[1]/div/div[2]

htmlcssselenium

Answer №1

If you're looking for a solution, consider trying the following snippet of code:

browser.findElement(By.id("primaryTag")).findElement(By.cssSelector(".cs-autocomplete-input[tabindex='']"))

Take a look at how the CSS is implemented below.

#someId .my-input[tabindex=''] {
  background: red;
}

/* Additional styles for better readability — please disregard */
input {
  display: block;
  margin-bottom: 1em;
  padding: 0.5em 1em;
}
<div id="someId">
  <input class="my-input" tabindex="3" type="text" value='not me' />
  <input class="my-input" tabindex="3" type="text" value='not me' />
  <input class="my-input" tabindex="" type="text" value=' me' />
  <input class="my-input" tabindex="3" type="text" value='not me' />
  <input class="my-input" tabindex="" type="text" value='me' />
</div>

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

Display only a loading image with a see-through background after submitting the page

After submitting the page, I would like to display a loading image in the middle of the page with a transparent background. The current styling code I have used is as follows: #loading { position: fixed; top: 50%; left: 50%; z-index: 1104; ...

javascripthtmlcsscss-position

Issues with forms displaying as raw text within Laravel 5

I recently entered the realm of Laravel. While following a tutorial on OpenClassrooms, I encountered some challenges as the tutorial was for Laravel 4 and I am using Laravel 5. After struggling to adapt my controllers and resolve namespace dependency erro ...

phphtmlformslaraveltext

CSV file displaying incorrect data due to xPath expression issue

I have written a code to extract data for the values "Exam Code," "Exam Name," and "Total Question." However, I am encountering an issue where the "Exam Code" column in the CSV file is populating with the same value as "Exam Name" instead of the correct ...

pythonseleniumweb-scraping

Can HTML be rendered within classes?

In the admin section of a website, I am working with multiple CRUD tables that require displaying success, information, or error messages when certain actions are performed, like deleting a record. This is a common practice that involves wrapping messages ...

phphtmlclass

The appearance of the pop-up mask is displayed at lightning speed

Check out the demo here Here is the HTML code: <div class="x"> </div> <input class="clickMe" type="button" value="ClickMe"></input> This is the JS code: $(".clickMe").click( function() { ...

javascriptjqueryhtmlcss

Tips for customizing the CSS of a child component that has been imported from a different module in Angular 2

I have been using agm-snazzy-window from amg-snazzy-window There is a mention that I can modify the css class, but when I try to do so, it doesn't seem to work. Here is an example: map-component.html <agm-snazzy-info-window [closeWhenOthersOp ...

cssangularsass

Some PDF files appear as blank when shown using a Base64 encoded string

I am attempting to display a PDF file on a web page using its base64 encoding. Below is the ReactJS code I am using: <object style={{ width: '100%', height:'842pt' }} type="application/pdf" data={`data:application/pdf;base ...

javascripthtmlreactjsgoogle-chromepdf

Troubleshooting a problem with the Bootstrap dropdown menu

Can anyone assist with an issue regarding Bootstrap 4.4.1? I am facing a problem where two consecutive dropdown links+menus are not displaying correctly. The second dropdown menu is showing the content of the previous link instead of its own, even though t ...

cssbootstrap-4

Sending numerous HTML forms using a sole submit button through AJAX

On my website, I have a page named publish.php where users can input details for each image they upload. Each image has its own form, but only one form is displayed at a time in a tabbed layout when the user clicks on the corresponding thumbnail. I want to ...

javascripthtmlajaxformspost

Tips for ensuring that hover:after contents do not impact the positioning of the next element

I have created a photo list section on my webpage. <div id="main_post_photo"> <% for(var q=0;q<resolve.length;q++){ if(resolve[q].images.length>=1){%> <a href='/post/<%= resolve[q]._ ...

htmlcss

Creating a Parent Container to Maintain the Height of the Tallest Offspring

I've been searching online for solutions, but so far I haven't found one that meets all the requirements. <div class="parent"> <div class="child1">I am 60px tall and always visible; my parent is 100px tall</div> <div ...

javascriptjquerycss

What is the best way to include a swf video in a list of hyperlinks?

My current code displays an image inside a box, and I am looking to replace the image with either a swf video or .AVI video. I have the object video code to play a swf video, but I need the video to be played within the box where the image is currently l ...

javascripthtmlflashswfobject

Stop the scrolling behavior from passing from one element to the window

I am facing an issue with a modal box window that contains an iframe. Inside the iframe, there is a scrollable div element. Whenever I try to scroll the inner div of the iframe and it reaches either the top or bottom limit, the browser window itself start ...

javascriptjqueryhtmleventsscroll

What is the best way to align text in the center of a button?

When creating custom buttons in CSS using <button>, I noticed that the text appears to be centered both horizontally and vertically across all browsers without the need for padding, text-align, or other properties. Simply adjusting the width and heig ...

htmlcss

Tips for implementing an HTML dropdown menu for two select elements

Having an issue with the HTML select element. I am trying to create a dropdown select that displays two different prices based on location. For example, when selecting country (Australia) and city (Canberra or Sydney), I want to display prices for 30 days ...

jqueryhtmlselect

Issue identified in the latest update

After upgrading my Arch Linux system, the Python packages were updated to the 3rd branch. However, I am now encountering issues running selenium-python bindings. Even when trying with an older version of Python, I receive the following error: from sel ...

pythonselenium

Unable to extract TD information located beneath the TH data using Xpath

I am struggling to figure out why I can't extract the text from the td element located under the th. Even though using //th(contains(text(), "Text I Need Is After This")) successfully captures the desired line, I still can't access the text with ...

xpathselenium

Encountering an issue with grunt protractor

Recently, I set up Java for Grunt using the following command: npm install grunt-run-java --save-dev Then, I included grunt.loadNpmTasks('grunt-run-java'); in my Grunt file. However, when attempting to run Grunt Protractor, an error was thrown: ...

javanode.jsseleniumgruntjsprotractor

Deactivate a div based on a Razor variable in ASP.NET MVC4

Is there a secure method to disable a div based on a Razor variable in ASP.NET MVC 4.0? I attempted using a CSS class, but it was easily bypassed with developer tools. .disableddiv { pointer-events: none; opacity: 0.4; } Any advice on how to effectively ...

jquerycssasp.netasp.net-mvcserver-side-validation

How to pass data between components in Angular using @Input, @Output, and EventEmitter

After selecting a team from an array in one component, I am having trouble passing that selected team to another component. While I can log the selected team in the same component, I'm unable to access it in the other component. My goal is to use the ...

htmlcssangularbootstrap-4