Utilizing a CSS selector to target a button nested multiple levels deep

Question

Utilizing a CSS selector to target a button nested multiple levels deep

Currently, I am conducting E2E tests on an application that lacks clear identification for the tags. I need to click on buttons nested deeply within the structure, some of which have the same name and properties as others.

The HTML code presents itself similarly to the following:

<div class='.ui .row'>
  <div class='.ui .fluid'>
    <div class='.content'>
      <div>
        <div class='.field'>
          <button>Button</button>
        </div>
      </div>
    </div>
    <div class='.content'>
      <div>
        <div>Some other stuff</div>
        <div class='.field'>
           <button>Button</button>
        </div>
      </div>
    </div>
  </div>
</div>

Due to having two buttons with the same name, I cannot simply use browser.click('button*=Button'). Instead, I am currently using this approach:

browser.click('div > div > div > div > div > button')

For the second button, a different selector is needed like this:

browser.click('div > div > div:nth-child(2) > div > div:nth-child(2) > button')

Although this method works, I have encountered several issues: - The code is not visually appealing and can be confusing for someone new to it - It is prone to breaking with even minor changes in the app's structure, unrelated to the buttons themselves

My query is whether there is a more efficient way to target these buttons under the given conditions.

html css selenium-webdriver css-selectors webdriver-io

Answer 1

Answer №1

If your HTML structure stays the same, you can utilize the fact that the second button is inside a div that is a sibling of another div. For instance:

/* style the first button */
button {
  color: red;
}

/* style the second button */
div + div button {
  color: blue;
}

<div>
  <div>
    <div>
      <div>
        <div>
          <button>Button</button>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>Some other stuff</div>
        <div>
           <button>Button</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

If your HTML structure stays the same, you can utilize the fact that the second button is inside a div that is a sibling of another div. For instance:

/* style the first button */
button {
  color: red;
}

/* style the second button */
div + div button {
  color: blue;
}

<div>
  <div>
    <div>
      <div>
        <div>
          <button>Button</button>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>Some other stuff</div>
        <div>
           <button>Button</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

Answer №2

One way to tackle this is by employing an XPath query

//div[.='Additional information']/following::button

The following button comes after a DIV labeled as "Additional information". Utilize this label to differentiate between the two buttons.

Answer 4

One way to tackle this is by employing an XPath query

//div[.='Additional information']/following::button

The following button comes after a DIV labeled as "Additional information". Utilize this label to differentiate between the two buttons.

Answer 5

Answer №3

According to Selenium documentation, if a browser doesn't support a query, it will utilize Sizzle as a fallback option. This means you can use :contains() to select elements based on the text they contain, for example:

button:contains("Button")`

Furthermore, WebdriverIO has a slightly different syntax for achieving this functionality. Check out their documentation for more information:

browser.getTagName('button=Button'); // captures: "<button>Button</button>"

For additional details, refer to the WebdriverIO documentation

Explore more about selectors in the Selenium documentation

For specific information on using :contains() with Sizzle, check out the Sizzle documentation

Answer 6

According to Selenium documentation, if a browser doesn't support a query, it will utilize Sizzle as a fallback option. This means you can use :contains() to select elements based on the text they contain, for example:

button:contains("Button")`

Furthermore, WebdriverIO has a slightly different syntax for achieving this functionality. Check out their documentation for more information:

browser.getTagName('button=Button'); // captures: "<button>Button</button>"

For additional details, refer to the WebdriverIO documentation

Explore more about selectors in the Selenium documentation

For specific information on using :contains() with Sizzle, check out the Sizzle documentation

Answer 7

Answer №4

Xpath is definitely the way to go!

Have you thought about incorporating indexing?

Here's the Xpath for the first button:

//button[1]

And here's the Xpath for the last button:

//button[last()]

Answer 8

Xpath is definitely the way to go!

Have you thought about incorporating indexing?

Here's the Xpath for the first button:

//button[1]

And here's the Xpath for the last button:

//button[last()]

Answer 9

Answer №5

There are multiple ways to access the element:

Here are a few examples:

// To click on the first button 
$$('button')[0].click();

// To click on the second button 
$$('button')[1].click();

Note: The above method is suitable if there are only two buttons on the page. For more buttons, consider other options.

Alternatively, you can chain selectors as demonstrated in this link

let buttonContainer = $('.fluid');
buttonContainer.$$('button')[0].click();
buttonContainer.$$('button')[1].click();

If you prefer accessing elements based on the .content div, you can use the following:

$('.fluid div.content:nth-child(1) >button').click();
$('.fluid div.content:nth-child(2) >button').click();

The choice of how to access the DOM elements is yours depending on your convenience.

Answer 10

There are multiple ways to access the element:

Here are a few examples:

// To click on the first button 
$$('button')[0].click();

// To click on the second button 
$$('button')[1].click();

Note: The above method is suitable if there are only two buttons on the page. For more buttons, consider other options.

Alternatively, you can chain selectors as demonstrated in this link

let buttonContainer = $('.fluid');
buttonContainer.$$('button')[0].click();
buttonContainer.$$('button')[1].click();

If you prefer accessing elements based on the .content div, you can use the following:

$('.fluid div.content:nth-child(1) >button').click();
$('.fluid div.content:nth-child(2) >button').click();

The choice of how to access the DOM elements is yours depending on your convenience.

Utilizing a CSS selector to target a button nested multiple levels deep

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Troubleshooting Issue with jQuery replaceWith in Loop

Error Encountered: Codeception WebCurlException

Encountering a java.net.unknown host exception while attempting to run Selenium scripts remotely in a grid from Jenkins operating in a Linux environment

What is the best way to position an image in the middle of a Bootstrap 5 Carousel?

Challenges with Setting up reCaptcha

Is it feasible to utilize HTML files to fetch information from a MYSQL database by utilizing PHP on the server?

The navigation bar vanishes when a picture is inserted below it

What is the process for inserting HTML and CSS through the editor on DNN? Can markup be incorporated without the need for modules?

Which software is recommended for converting Sass to CSS on a Linux operating system?

What are the steps to create a basic chrome extension that functions as a countdown clock?

using jquery to trap anchor in unordered list items

Identifying all unused CSS class selectors in the code that do not have any CSS rulesets assigned

What are some strategies to enhance the responsiveness of this JQuery code?

List on the Left Side with Scroll Capability

Adjust the width of xAxis[0] and xAxis[1] in Highcharts to their default values

How can I center one middle position for my inputs and have the span align to the left?

Tips for implementing lazy loading with an owl carousel featuring background images

Is it possible to incorporate a LINK within the CSS GRID layout?

To identify the dynamically inserted and generated div element amidst the other elements on the page

Struggling to display the array after adding a new item with the push method