Exploring elements using dynamic xpaths in selenium

Question

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]

html css selenium

Answer 1

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>

Answer 2

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>

Exploring elements using dynamic xpaths in selenium

Answer №1

Similar questions

How can I show the localStorage value in an HTML5 template using Angular2?

Adding Text Above a Material Icon in Angular: A Guide

Adding HTML content inside an iFrame at a specific cursor position in Internet Explorer

Tips for downloading an Excel file without triggering a pesky pop-up window in Windows

What is the best way to duplicate a CSS shape across a horizontal axis?

Ignored are the white spaces within a pre tag

Invoke the session on a different page and incorporate it into your JavaScript code

Creating a javascript function to update content on click

Experiencing a problem with cucumber and selenium wherein the driver consistently turns null in a straightforward test scenario

Verify the entered information in the input field and showcase it in the display box after pressing the ENTER key

Make sure that the webpage does not display any content until the stylesheet has been fully loaded by

"Upload a video file and use JavaScript to extract and save the first frame as an image

Steps for setting up Windows7 to run Selenium with Firefox for Test-Driven Development (TDD) using Python

The element cannot be located by Selenium using either the ID or xpath

Looking to reduce the size of a logo image within a container as you scroll down a webpage?

The out directory is lacking Styled JSX integration for Next.js

Personalized form outlines

What is the best way to ensure that the input search bar, microphone icon, and two small boxes adapt to different screen

Scrapy with integrated Selenium is experiencing difficulties

How come padding-bottom isn't effective in increasing the position of an element?