Unable to locate and interact with element using CSS Selector in the webdriver

I am having trouble locating the element that contains both "Confirm" and "Cancel" without using Xpath. Can anyone suggest a better approach to find this element? Below is the HTML code snippet:

   <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
   <div class="ui-dialog-buttonset">
   <button class="btn-confirm-dialog ui-button ui-widget ui-state-default ui-corner-all ui-  button-text-only" type="button" role="button" aria-disabled="false">
   <span class="ui-button-text">Confirm</span>
   </button>
   <button class="btn-confirm-dialog ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">
   <span class="ui-button-text">Cancel</span>
   </button>
   </div>

cssselenium-webdrivercss-selectors

Answer №1

It is not possible to target elements based on their text using CSS alone.
For a workaround, consider using the following CSS selectors:
To target confirmation buttons: button span, however keep in mind that this will also match cancel buttons as WebDriver.findElement stops at the first matching element.
To target cancel buttons specifically: button + button span

Answer №2

To enhance your HTML layout, consider placing the link (

<a href="xxx">...</a>
) inside a button tag. This will allow you to easily access the webelement using Selenium's "By Link Text" locator. Discover more here

Answer №3

To Confirm -- css=button.btn-confirm-dialog > span:contains("Confirm") To Cancel -- css=button.btn-confirm-dialog > span:contains("Cancel")

These are the specified CSS selectors for Confirm and Cancel buttons.

Answer №4

I utilized the "nth-child" Property within the cssSelector to accomplish this.

Confirmation: div.ui-dialog-buttonset> button:nth-child(1) >Span

Cancellation: div.ui-dialog-buttonset> button:nth-child(2) >Span

Your insight and contributions are greatly appreciated.

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

Is there a way to set a higher priority over the "!important" rule on my website?

I'm encountering a strange issue with my website. I have been working on this website and am looking to change the color of the main menu hover links from white to orange. Here is the CSS related to that section: .darkheader .navigation > ul > ...

csswordpressthemesoverriding

The thumbnail of the embedded YouTube video appears pixelated and unclear

I've integrated the most recent video from a YouTube channel onto my website. However, the thumbnail of the video is appearing very blurry/low quality. Is there a way to ensure a high-quality thumbnail is displayed? You can see a live demonstration h ...

jqueryhtmlcssyoutubeembed

WebDriver encounters difficulty clicking on a certificate error popup window

Currently, I am using webdriver 2.40.0 in C# to interact with my company's website. The issue arises when I encounter a certificate error page while trying to access certain elements. Specifically, after clicking the override link and entering some in ...

c#javascriptseleniumselenium-webdriver

Ways to select the element based on a specific CSS property value in the inline style

As a novice in the world of Javascript, I am currently attempting to select an element within an array of images where the opacity is set to 1. Could someone please guide me on how to achieve this? I've tried using hasAttribute, but I'm unsure ho ...

javascriptcss

Show submenu upon hovering and make sure it remains visible

Is there a way to keep a submenu displayed and the background color changed even after moving the mouse away from the menu item onto the submenu? This is my HTML: <div class="shoplink"><a>Online Shop</a></div> <div id="shop-men ...

jquerycss

:initial selector malfunctioning in CSS

I was hoping to see the :first selector in action with the example below. Unfortunately, the paragraph did not turn red with a background. Can anyone offer some assistance? p:first{background:red;} <p>This is paragraph 1.</p> <p>This ...

htmlcsscss-selectors

Numerous inline notations in html code

I need help figuring out how to prevent a hyperlink from opening a new tab by commenting out the HTML code. <a href="<!--http://www.google.com=-->" target="_blank" onclick="javascript:alert('Navigation Prevented')">CLICK HERE FOR GOO ...

javascripthtmlcsscomments

Tips for ensuring all buttons are evenly spaced from a surrounding div

Here’s the current setup - .box{ background-color: #e61a39; width: 25%; float:left; margin: 0px; text-align: center; min-height: 380px; } #container{ width: 90%; margin: auto; } <section id="container"> <div class="box"> <img src="http ...

htmlcssresponsive-design

How can I adjust the alignment of my menu items to be centered without using flexbox?

Even though I've searched extensively on how to center text horizontally, none of the suggestions have worked for me. I attempted using margin-left: auto, margin-right: auto, and text-align: center for the class nav-center, but none of them had the de ...

htmlcss

What is the best way to create a responsive sidebar that stays in place?

One feature that stands out on this site is the elegant sidebar: I've figured out how to create a fixed sidebar in css, but I'm struggling with making it stop scrolling at a specific point. I believe making it disappear at a certain width involv ...

htmlcssresponsive-design

Displaying maximum number of items in each row using ngFor

Is there a way to automatically create a new row within the 'td' element after the ngFor directive has generated 10 image repeats? Currently, all the images are displayed in a single td and as more images are added, they start to shrink. <td ...

cssangularhtml-tablerepeat

jQuery slide adjusts the width of the slide as it transitions

The script is running smoothly. Check out the jsFiddle here The issue lies in its width adjustment when sliding (clicking "here"). It seems to be cutting off the width related to a 100px margin-left in #slider. Why does it seem to "jump" and how can this ...

jquerycsshtmluislider

The grid feature in the Bones theme is malfunctioning and causing issues

I am currently using the Bones theme from Themble, which has a grid system in its design. I attempted to apply this grid system to the header of my website in order to transform menu items into icons on mobile devices and display the full menu on desktop s ...

htmlcssgridmenuitem

Do not apply tailwindcss styles to Material-UI

I've been struggling to apply styling from tailwindcss to my MUI button. My setup includes babel and webpack, with the npm run dev script as "webpack --mode development --watch". tailwind.css module.exports = { content: ["./src/**/*.{js, jsx, t ...

javascriptcssreactjsmaterial-uitailwind-css

Identify the current slide or div within a jQuery slideshow

I am currently facing an issue with my slide show that is composed of divs, each containing a picture and some html controls. The problem arises when clicking on a control in a slide other than the first one - it only updates the first slide. The only thin ...

c#jqueryasp.nethtmlcss

Organizing communications in NodeJS messaging application

My latest project involves creating a chat room using NodeJS and socket.io which allows multiple users to connect with unique usernames. Everything is running smoothly, except for one minor issue. I want the messages sent by me to appear in a different co ...

javascriptjqueryhtmlcsschat

ChromeDriver cannot be updated due to the recent release of Chrome for Testing

For my web scraping automation using Selenium and ChromeDriver on a Mac (arm-64), I have encountered issues with the recent Chrome updates. Following Chrome version 115, the JSON endpoints no longer provide ChromeDriver files, but instead offer a zip fil ...

selenium-webdriverselenium-chromedriverchrome-for-testing

Overlapping Issue with Angular Bootstrap Dynamic Dropdown Menu

I'm currently working on creating a dynamic menu using Angular and Bootstrap for Angular. My main issue right now is that the submenus are overlapping each other when displayed on the page. To tackle this problem, I started off by referring to the ex ...

htmlcssangularng-bootstrap

Mastering the Art of Utilizing $(this) in jQuery

$(".item_listing").hover(function(){ $(".overlay_items").display(); },function(){ $(".overlay_items").hide(); } ); This is my jQuery code. I am trying to display the "overlay_items" div when the "item_listing" div is hovered ov ...

javascriptjqueryhtmlcss

Ways to utilize jQuery for selecting IDs that are not part of a specific class

I am currently working with a jQuery script that is designed to target all IDs containing 'Phone'. However, I am facing an issue where I need the selection to ignore those IDs if they are part of a specific class. The current code I have, from m ...

jquerycss-selectors