Navigating and interacting with the Next and Cancel buttons on a PopUp using the Selenium WebDriver

I am facing an issue with a popup window on a webpage where I need to interact with the "Next" and "Cancel" buttons. Despite my efforts to find the CSS selectors, I have been unable to locate and click on these buttons. When I used Firebug to inspect the elements, here is what I found while hovering over the Next and Cancel buttons:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
    <div class="ui-dialog-buttonset">
        <button class="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">Next</span>
        </button>
        <button class="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>
</div>
cssseleniumwebdriverselectorpopupwindow

Answer №1

Find what you need by using xpath along with the button's text

// Click on the next button
driver.findElement(By.xpath("//span[contains(text(), 'Next')]")).click();

// Click on the cancel button    
driver.findElement(By.xpath("//span[contains(text(), 'Cancel')]")).click();

Alternatively, consider utilizing cssSelector

driver.findElement(By.cssSelector(".ui-button-text:contains('Next')")).click();
driver.findElement(By.cssSelector(".ui-button-text:contains('Cancel')")).click();

Answer №2

In the realm of popups, there exist three distinct types: alert, confirm, and prompt. Let's delve into a solution for handling alerts, which should also work with confirms. Give it a try and let me know if it does the trick. If more information is needed, don't hesitate to reach out. I'll be happy to assist you in any way I can. For this scenario, we are working with C#. The key here lies in utilizing the "SwitchTo() method of IWebDriver interface along with the Alert() method of the IAlert interface, which offers Accept and Dismiss options corresponding to OK or Cancel on the popup.

Here's an example code snippet to demonstrate how to handle the popup:

 IAlert alert = Driver.SwitchTo().Alert();   
  alert.Accept();
 //or alert.Dismiss();

Answer №3

If clicking on the span element mentioned in @Guy's answer is not successful, you can attempt the following steps:

// To proceed to the next step, click on the 'Next' button
driver.findElement(By.xpath("//button[contains(., 'Next')]")).click();

// To cancel and exit, click on the 'Cancel' button    
driver.findElement(By.xpath("//button[contains(., 'Cancel')]")).click();

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

Popup windows are struggling to close correctly

Having an issue with multiple popups not closing properly when clicking another link. The popups keep stacking up even though the close function has been specified in the code. $(document).ready(function() {//$('a.poplight[href^=#]').click(funct ...

javascriptjqueryhtmlcsspopup

How to Implement ASP.NET Authorization While Allowing Access to .css Files?

<authentication mode="Forms"> <forms loginUrl="Login.aspx"/> </authentication> <authorization> <deny users="?"/> </authorization> Currently, I am utilizing forms authentication. However, when I incorporate t ...

asp.netcssweb-config

Having difficulty executing the Switch Browser Command on Robot Framework

I am facing an issue in my test scenario where I need to open two browsers and switch to the first browser that was opened. However, the command to switch browsers is not functioning as expected. Although no errors are generated, the browser does not actua ...

seleniumrobotframework

Child element's CSS is failing to apply, while the parent element's styling is functioning correctly

I have developed a small quiz application where, after answering questions, I display a progress bar. The issue I am facing is with the styling of the progress bar. I have set up two div elements for this purpose - one as the parent element (id = "progress ...

htmlcss

What is the process for running selenium-based tests/scripts for an enterprise project or application?

One fundamental question that arises is how Selenium scripts are executed in an enterprise/project/application. These scripts are typically written in Java using locators and various tests are created. The tests are organized through TestNG and can be run ...

mavenseleniumjenkinscucumbertestng

Ever thought about harnessing the power of SassDoc to create detailed documentation for your sass

After experimenting with sassdoc for documenting our sass mixins and functions, I realized that there doesn't seem to be a straightforward way to generate documentation for our sass variables. Specifically, I am looking for a solution that can output ...

cssnode.jsnpmsassgulp

Discovering incorrect input through Selenium with Python

Currently, I am tackling Selenium and working on navigating captchas. My current approach involves manually inputting the captchas. The ideal scenario is being able to automatically submit the captcha after manual input, leading us to the next page if corr ...

pythonselenium

Automating the EPA Air Markets Program Data (AMPD) - Using Python to API, scrape, or automate a browser?

My task involves regularly querying and downloading CSV files from a specific website: I am looking to automate this process and while I know the EPA offers an API for developers, it does not cover the data set I need. I also didn't find much helpful ...

pythonseleniumweb-scraping

Has the Blueprint CSS framework become obsolete?

Is the Blueprint CSS framework still being actively maintained? The last version was released over a year ago and there have been no recent commits in the Github repository. ...

cssblueprint-css

Leveraging semantic markup alongside a CSS framework

Are there any CSS/styling frameworks out there that can work with semantic markup while keeping file sizes relatively small? It seems like a classic case of the "three options, pick two" dilemma. Let me break it down. I want: A visual styling framewor ...

htmlcsssasscss-frameworks

Guide on centering an unfamiliar element in the viewport using HTML, CSS, and JavaScript

In the process of developing my VueJS project, I have successfully implemented a series of cards on the page. However, I am now facing a challenge - when a user selects one of these cards, I want it to move to the center of the screen while maintaining its ...

javascripthtmlcssdom

How to set element height based on screen height rather than browser height

How can I set the height of a div container to be 60% of the screen height, but ensure it maintains that height even when the browser window is resized? Setting the height as 60% in CSS works initially, but the div shrinks proportionately when the window s ...

csspositionheight

Creating a combined select element in HTML: A step-by-step guide

I'm currently working on a website and I am trying to figure out how to combine two select elements together. Essentially, what I want is to have one select option nested inside another. The user should be able to choose multiple options in the child ...

phphtmlcssselectelement

How can I position one DIV relative to another DIV?

Can a DIV be positioned relative to another DIV? My guess is that it involves nesting it inside the reference DIV and utilizing position: relative. However, I'm struggling with how to achieve this without impacting the content of the reference DIV. An ...

htmlcss

Image not draggable to current mouse position in Mozilla, Chrome, and JQuery

I'm currently working on a webpage that involves dragging and dropping an image into another element. Everything works smoothly on Chrome, with the image draggable across the entire screen. However, on Firefox, there seems to be a problem. While the ...

javascriptjquerycssgoogle-chromemozilla

How can I improve my current code for linking 3 text elements to specific divs when hovered? The code below is functioning, but I'm looking for a more efficient script

Learning jQuery can be a slow process for beginners, but with practice and dedication, it gets easier. I have 3 text elements in separate divs that I want to trigger the addClass function on another div when hovered over. Although my current code works, ...

jqueryhtmlcssaddclass

A table featuring an HTML select element that allows users to choose from preset options or manually enter

My goal is to incorporate a select box where users can either choose from a set list of options or input their own custom value. The select element is nested within a table. Unfortunately, using datalist is not a viable solution for me in this case. I have ...

javascriptjquerycsshtml-table

Crafting an interactive saturation effect for mouseover interactions in a circular design

I'm looking to create a unique hover effect for my images. I have both a desaturated version and a full color version of the same image. My idea is to have mousing over the desaturated image reveal a circle spotlighting the color version underneath, a ...

javascriptjquerycssanimationmouseover

Emphasizing the content of the text file with the inclusion of span tags

I am relatively new to working with angular js and javascript. I have a document or text file that looks something like this: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dumm ...

javascriptjqueryhtmlcssangularjs

Discovering the final row in a dataset and selecting the Add button can be achieved by following the recommendations provided by individuals. While most tend to click on the second row, the ultimate goal is

I have a table that dynamically adds rows based on input from another screen. My question is how to identify the number of rows added and always click on the add button in the last row. Here's my code: I've created a List of WebElements represen ...

javaselenium