Maybe will get and error after close about dialog app is working with full features

Not able to close modal dialog using dialogRef.close() #7550

Comments

VishalChorghe commented Oct 5, 2017

I am opening Modal popup in Angular 4 using Material. whereas it is opening properly but I am not able to close it using dialogRef.close(). I am opening AdminComponent as a popup by clicking on button which is present on Home.Component.html.

Admin.Component.ts-
`import from ‘@angular/material’;
import from ‘@angular/material’;

Admin.Component.html-

Cancel

The text was updated successfully, but these errors were encountered:

julianobrasil commented Oct 5, 2017 •

This should work out of the box. There must be some configuration problem with your code. You can also use the matDialogClose to set the button to close the dialog (I’m using the currently recommended — in beta.11 — mat instead of md prefix ):

Deltids commented Oct 5, 2017

Having the opposite problem here. I can close with dialogRef.close(), but not with the directive md-dialog-close. Pressing «Yes» closes the dialog, but pressing «No» doesnt.

willshowell commented Oct 5, 2017

@Deltids try mdDialogClose or matDialogClose

VishalChorghe commented Oct 6, 2017 •

@julianobrasil tried using matDialogClose, still not working.
I replaced all md prefix with mat.
Following is my Home.Component from where I am opening AdminComponent as a popup.

Home.Component.ts —
`export class HomeComponent implements OnInit <
dialogRef: MdDialogRef;
constructor(private emergencycontacts: EMTServiceService, private router: Router, public dialog: MdDialog)

openDialog() <
this.dialogRef = this.dialog.open(AdminComponent);
this.dialogRef.afterClosed().subscribe((result) => <
console.log(result);

ghost commented Nov 3, 2017 •

@VishalChorghe Did you import MatDialogModule or MdDialogModule in relevant xxx.Module.ts?

jelbourn commented Nov 4, 2017

@VishalChorghe are you able to provide a reproduction?

mackelito commented Nov 14, 2017 •

Can confirm that we have the same issue
Also tried ‘this.dialog.closeAll()’ before opening the second dialog but ‘this.dialog.openDialogs’ confirms that first one is still open

krisparis commented Nov 17, 2017 •

I have the same issue.
Could you tell me if I missed something and if any workaround exist?

I inserted below parts of my code to describe my problems.

In my AppModule, I imported MatDialogModule, declared my dialog components
and added my dialog content component to the array of entryComponents.

Calling dialogRef.close() or clicking outside the dialog does not close it.
The only I found to close it was to open the Chrome console and then move the console top edge using my mouse.
However MatDialog.closeAll() does work for me.
But trying to reference the MatDialof

I put below the code of the following classes:
dialog container component
dialog content component

I put my dialog container component template inside my app component lie written below

Below is the dialog content template. I tried to use

Dialog Container class
`

Dialog Content class

willshowell commented Nov 17, 2017

@krisparis can you try this in ErrorDialogContainerComponent ?

krisparis commented Nov 17, 2017 •

@willshowell
Thanks a lot! It now works well!
The dialog now disappears when I click on my close button or when I click outside the dialog.

So, just to know,
was I doing something wrong ?
Or was it maybe because I was trying to open a dialog from inside a subscribe() method ?

willshowell commented Nov 17, 2017

@krisparis It is related to your ErrorEventService . I’m assuming you’re implementing ErrorHandler there or elsewhere, and handleError is called by angular outsize the zone. There have been similar issues with dialogs and snackbars. AFAIK you’re not doing anything wrong, but you should be aware that any UI effects from handleError need to re-enter the zone.

@VishalChorghe @mackelito could your issues be related to this as well?

krisparis commented Nov 17, 2017 •

Yes, I did almost that.
Actually I have a class AppErrorHandler that extends ErrorHandler .
I inserted the code at the bottom of this post.

And in my AppModule , I added the line below into my providers array ,

krisparis commented Nov 17, 2017

For the sake of trying, I temporarly removed my ErrorHandler subclass from my app and the use of the ngZone instance from my dialog container class (so back to my original code).
I now handle the error at its origin like shown at the bottom of this post.

In that case also, the dialog disappears after a click on the close button or outside the dialog.

you should be aware that any UI effects from handleError need to re-enter the zone.

• So do you think it’s better for now to handle my errors locally without a custom ErrorHandler?
  • until it gets fixed in a future release
• Or is it better to keep using the ErrorHandler and the Ngzone as you shown in the previous post?
  • even if my app might have to use other dialog components for different use cases

willshowell commented Nov 17, 2017

@krisparis I think everything on Angular and Angular Material’s end is working as intended, so I wouldn’t await a fix (maybe a docs improvement here at best).

Every use case is different — I think the expected use of the ErrorHandler is to facilitate logging or extra ajax calls or similar, which don’t need to operate within the angular zone. You’ve chosen to bring the error callback into your components (material dialog), so you should do so inside the zone. If you are using errorEventService.changeEmitted$ exclusively for UI updates, I would suggest this:

But also I have only a moderate understanding of how zones work and should be utilized so take it with a grain of salt 😄

jelbourn commented Nov 17, 2017

Closing this since it’s not directly related to Angular Material.

fredmaggiowski commented Nov 30, 2017 •

I’m having a similar problem but the NgZone solution doesn’t work.

I’ve a simple dialog that shows a message and a QRCode and has an «OK» button to close it just for user experience.

The problem is that there’s no way to close the dialog, nothing works: clicks outside, pressing ESC key or pressing the OK button are useless.

TokenComponent
where openDialog is fired on a simple FAB click.

Then I have this modal:

Lorem ipsum dolor sit amet

The modal gets opened but I can’t find a way to close it.

I’ve tried creating a simple StackBlitz and I realised that it actually works: https://stackblitz.com/edit/test-dialog-closing

I’m honestly confused but I think it could be related to this issue since the symptoms are similar.

Note: the close button in the example is using [mat-dialog-close] , I’ve also tried matDialogClose and a custom function that calls this.dialogRef.close() which is the one used in the stackblitz.

A difference between the stackblitz and my local project is that the dialog component and the «container» component are in two separate files but I guess everything is properly included since I can see the dialog properly rendered.

PS: I’m a super newbie with Angular 5 and Material 2, I started my first project two days ago after a few years working with Angular 1 and no background of material design.

PPS: Do not scan the QRCode, I copy-pasted the first result from google search of «qrcode», I do not know that’s inside 😞

fredmaggiowski commented Dec 1, 2017

I’ve found out that this problem was related to an error occurring on another component..

In particular I have a TypeError during the rendering of a MatTable in the same page. This error causes the Dialog not to work properly once opened.

If you want to investigate this weird behaviour of Dialog when an error occurs I can provide further information.

Источник

[GetX] Dialog

Let’s see how to show Dialog with GetX in Flutter.

Contents

Outline

In this blog post, I will introduce how to use GetX to show Dialog in Flutter. You can see full source code of this blog post on the link below.

Blog series

This blog post is made in the series about how to use GetX in Flutter. If you want to see the other features of the GetX, please check out the following blog posts.

GetX installation

To check how to use GetX in Flutter, execute the command below to create a new Flutter project.

And then, execute the command below to install the GetX package.

Next, let’s see how to use GetX to show Dialog .

Open Dialog

You can use the Get.dialog function to show Dialog with GetX like the below.

To check this, open the lib/main.dart file and modify it like the below.

When you execute the above code, you will see the following screen.

And then, when you press the Open button, Get.dialog is called like the below.

After that, you can see the dialog like the below.

Close Dialog

To close the opened Dialog , you can use the Get.back function.

In the example, the Get.back() function is called when the close button is pressed like the below.

Check Dialog

In GetX, you can use the below code to check the Dialog is opened or not.

To check this, modify the openDialog() function like the below.

When you execute the above code, you can see the true is printed after 1 second.

Completed

Done! we’ve seen how to use GetX to show the Dialog in Flutter. Also, we’ve seen how to close the dialog and how to check the dialog is opened or not.

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku .
Deku created the applications with Flutter.

If you have interested, please try to download them for free.

Источник

Angular 13 Material Dialog Example – Positions, Fullscreen, Events Tutorial

In this Angular material tutorial, you will learn how to implement Dialog modal with an extensively used scenario tutorial with easy to go tutorial.

This Angular post is compatible with Angular 4 upto latest versions, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular 12 and Angular 13

You will get to know how to position a Dialog or display a fullscreen modal popup. Explore various events and popup hooks including after opened or closed callbacks. Passing data dynamically to the modal and getting back the data to the parent component.

You will start with a new Angular 13 project, afterwords we will add the Material library to use its Dialog API module. Consequently, we will explore various use0cased with elaborated examples and demos to put you more to work instead of looking anywhere else.

Why Dialog or Modal UI Component?

We know Dialog AKA Modal got its popularity from the Bootstrap component, which floats over your content to catch all user attention at once. it can be used for any purpose from filling out important details using an intensive form to show a simple confirm Yes, No dialogue box.

With Material, you can have customized Modal with Header, Body, Footer panes or simply a paneless diolog. It can have an in-view template based or fully component-based Dialog modal. You can easily customize styles and control how data with go through it.

Let’s get our hands dirty!

How to Add Material Dialog in Angular App?

This is how you can open the Angular Material dialog.

Following are quick steps, including various types of Dialog and details about event hook handling to control data follow by passing in/ out of Dialog or Modal popup container:

Step 1 – Create Angular App

Step 2 – Install Material Library

Step 3 – Import Dialog Module

Step 4 – Dialog using Template

Step 5 – Dialog using Component

Step 7 – AfterOpened and AfterClosed Dialog Events

Step 8 – Full Screen Dialog Modal

Step 9 – Confirm Dialog with YES, NO Buttons

Step 10 – Dialog with Header, Body and Footer Panel

Step 1 – Create Angular App

To enable the ng command in the terminal window, make sure to instal the angular cli tool. If you already have, you can update it as well.

Afterwards, you can hit the following command to create a new angular project with the name provided:

Move inside the application folder

Step 2 – Install Material Library

Thereafter creating and moving the terminal to the application folder, we will install the Material library by executing the ng add command. This makes the installation of the material library very easy, you can choose options while installation as shown below:

This will update the «styles» property array inside the angular.json file, which you can change anytime.

Step 3 – Import Dialog Module

The Material library provides huge set of usable API’s for its various modules and components. So we need to import only those modules, that we’re going to use in our application. This keeps out app more optimized and size-efficient.

Open the app.module.ts file to import the MatDialogModule under the imports array:

Step 4 – Dialog using Template, Pass and Get Data

Now we are all set to start using the simplest implementation of our Dialog popup using a template. We’ll also pass dynamic data into the Template of dialog to create a list out of it.

In the app.component.html add folloiwng template HTML

The ng-template with ref variable #dialogRef will contain the template HTMl to show inside the Dialog we’re going to generate. The let-mydata (or any name you like) directive will contain the data we will pass into the open method.

Next, open the app.component.ts file and add the following content in it:

The @ViewChild with TemplateRef helps to get template context that we are passing into the open method. On top, we are passing the data property with any data set you wan to pass into the modal dynamically. This is how to send data to a TemplateRef MatDialog.

Step 5 – Dialog using Component

Templates can be used for quick implementation of less complex modals, but for keeping things cool, we need to have a separate components which will take care of our Dialog content and its data communication. let’s check how to pass data to and forth between parent and component popup modal.

Creating a new component named MyDialogComponent by executing below command:

It will create a new component, update the my-dialog.component.ts file:

The fromPage and fromDialog variables are handling data to pass inside the Modal and sending back to parent using close() method.

Update the my-dialog.component.html file to show the list of item passed dynamically:

Finally update the App Component HTML to have a button and its method in the class:

We’re passing the component it self to open in the dialog, instead of template ref.

Step 7 – AfterOpened and AfterClosed Dialog Events

The Dialog provides three useful Hooks that can be used to manage dialog data render.

• afterOpened(): Triggered After Dialog is Opened.
• beforeClosed(): Triggered Before Dialog is Opened.
• afterClosed(): Triggered After Dialog is Closed.

These can be subscribed to the dialog open instance as shown below

Step 8 – Full Screen Dialog Modal

By default, the dialogs are displayed at the centre of the screen with max-width of 80%. But here you will learn how to make them full screen by adding few configuration settings with modified width, height and custom CSS class.

The .fullscreen-dialog class you can add in the styles.css/scss file at project root or remove view encapsulation and directly add in the my-dialog.component.css/scss file.

Step 9 – Confirm Dialog with YES, NO Buttons

Here’s a quick look at how to modify a dialogue to show Yes, No or any custom button with their respective callback methods to trigger any required action. You can do it using a template or dedicated component.

HTML Template in my-dialog.component.html for dialogue modal will have the following”

Add the following methods in my-dialog.component.ts file:

The AppModule class will have the following open method:

Step 10 – Dialog with Header, Body and Footer Panel

The MatDialogModule provides other mat tag directives to create Header, Body and Footer components for the Dialog modal.

Step 11 – Positioning Material Dialog on Page

The position property can be used to place the dialog at top, bottom, left or right location of the page.

Conclusion

We have completed the Material Dialog tutorial, with various useful use-cases and examples. We discussed how to use a template or component and pass dynamic data in the dialog modal popup. Also, we looked into various callback hooks to control various custom actions.

Using the custom CSS style and class we modified the dialog width to display in the fullscreen mode. Hope you like the tutorial and it was helpful and handy for quick development suggestions.

Источник

today I met the similar problem after I upgraded the react-native from 0.33 to 0.37. I want to show an Alert dialog after close the Modal, but Modal doesn’t disappear, even after I close the Alert dialog and use cmd + R to reload the app. only in iOS, and it works fine by react-native 0.33.

the code likes following:

  renderModal() {
    return (
      <Modal
        animationType = 'fade'
        transparent={true}
        visible={this.state.isProcessing}
        onRequestClose={()=>{}}>
        <View style={styles.modalContainer}>
          <LoadingSpiner size='large' color='white' styleAttr='Normal'/>
        </View>
      </Modal>
    )
  }

  _pressNext() {
    // display a Modal with a spinner
    this.setState({isProcessing: true}}

    // network request
    // ...
  }

  componentWillReceiveProps(nextProps) {
      // ...

      // to hide the Modal with a spinner
      this.setState({isProcessing: false})
      Alert.alert('title', 'Something has done!', [
        { text: 'Got it', onPress: () => {} }
      ])
    }
  }

then I try to use setTimeout to work around it, the code likes following:

  componentWillReceiveProps(nextProps) {
      // ...

      // to hide the Modal with a spinner
      this.setState({isProcessing: false})
      setTimeout( () => {
        // this log will output
        console.log("show alert")
        // but Alert doesn't display
        // sometimes it will display occasionally
        Alert.alert("title", "msg")   
      }, 200)
  }

then the Modal will disappear, but, the Alert dialog can’t display!!!

I also tried run setTimeout in setState callback, like this:

  this.setState({isProcessing: false}, () => {
    setTimeout( () => {
      Alert.alert("title", "msg")
    }, 200)
  }

but the same result, Alert dialog doesn’t pop up yet.

finally, I decide to hide Modal after I close the Alert dialog, and that works! code likes following:

Alert.alert("title", "msg", [
  { text: "OK", onPress: () => { this.setState({ isProcessing: false } }    
])

Websites nowadays are frequently implementing the usage of pop-ups, alerts, or modal dialog boxes for various use cases like accepting cookies, asking for permissions, entering data, warning alerts, etc. Although there are a few valid use cases for these, unnecessary popups might look annoying and need to be handled.

You must have encountered these in your day-to-day web interactions on different websites like Amazon or Walmart on the first visit prompting for SignUp, on various food websites like McD, Swiggy to provide the location, or a payment gateway modal to complete payment.

With this increased usage, it is now expected of an automation tester that they are aware of their handling via automation. The main reason is that most of these popups, which at times are multiple, appear on the homepage for the website under test and need to be handled/closed till the parent page is accessible to interact with and the actual test flow can begin.

So if you have not got a chance to work on these or automate them so far, this blog is the right one for you. In this blog, we will learn how to handle modal dialog box in Selenium WebDriver Java with practical examples.

This blog would cover handling Bootstrap dialog boxes, pop-up windows/tabs, and alerts. I will be starting with the basics of pop-ups, post which I will demonstrate how to handle modal dialog box in Selenium WebDriver Java. So let’s get started.

How to handle Modal Dialog Box in Selenium WebDriver Java?

In this Selenium Java tutorial, we will learn what is a modal dialog box and demonstrate the handling of a modal dialog box in Selenium Java.

What is a Modal Dialog Box?

A Modal Dialog Box (also referred to as Bootstrap Modal Window) is built in Bootstrap Framework, due to which it gets displayed on top of your current page. Due to this, modal boxes need to be interacted with first before moving to the current webpage.

For starters, The Bootstrap Framework is a very popular, free, and open-source CSS framework that is highly used in web page development, especially for responsive and mobile-first web pages. It contains HTML, CSS, and JavaScript. To learn more about the Bootstrap framework, you can deep dive into CSS Grid vs. Bootstrap comparison.

A modal dialog box written with Bootstrap is formed with three key components, namely,

• Trigger element, which triggers the modal window to be shown on the webpage. It can be any link on the webpage or any button, etc.
• Modal, which is like a holding area for the actual modal window code that will come up when the trigger element is interacted with.
• Modal content, is the actual code and the content with which the window is formed and displayed as per the implementation.

So while automating any modal window, we first fetch the modal using our web driver and then identify the modal content inside it to perform actions.

Demonstration: Handling Modal Dialog Box in Selenium WebDriver Java

Having developed a basic understanding of the modal dialog box, it’s time to implement it and see how it works in real-time.

Before that you can also refer to our video to learn how to handle a modal dialog box in Selenium WebDriver Java.

Please note that for all the examples in this blog, we will be using this same project setup for all the examples in this blog and keep adding more test class files as we proceed. So do the setup carefully on your machine for implementation purposes.

Step 1. Choose the IDE on which you want to do the setup. In this blog, Eclipse IDE is being used. You can follow the same steps if any other IDE has opted. In case you are using IntelliJ, you can go through the article on building and executing Selenium Projects.

Step 2. Create a Maven Project in Eclipse and name it as Dialog_Boxes_With_Selenium_Java.

Step 3. Update the pom.xml file to have Selenium (as it will be a web automation project using Selenium WebDriver) and TestNG (to create test flow and execute test cases using Annotations) dependencies.

Filename : pom.xml

Step 4. Now inside the src package, add a package and name it as test. This will contain all the test classes which will be created in this blog.

Step 5. Inside the test package add a Java class file and name it as BaseClass.java. This file will have the basic driver functions like, initialize driver, quit driver, etc.

In this blog on how to handle modal dialog box in Selenium WebDriver Java, we will be using the TestNG testing framework for test execution. Reason being, it is widely supported with Selenium Java testing and provides an easy way to write and manage test automation scripts with the usage of annotations.

Filename : BaseClass.java

Code Walkthrough

We have created BaseClass.java as the first file, which will have the code to initiate the browser session for Selenium automation and handle the code for browser setup and closing it after test completion. This will be inherited to our test classes, thus preventing redundancy for such code and providing an abstraction of driver code from every other class user.

Step 1. Inside the BaseClass, we will be adding two functions, one to initialize the driver and create an instance of it and another to close it once the test cases are executed.

We will be executing the code on a Selenium Cloud Grid using an instance of Selenium RemoteWebDriver.

The reason is, along with the advantages of Selenium Grid, like executing multiple cases across various browsers and OS, a Cloud Grid also offers speed and scalability, which makes executions faster and more reliable.

An example of one such Selenium Cloud Grid is LambdaTest, which facilitates cross browser testing across an online browser farm of 3000+ real browsers and operating systems on the cloud. Automation testing tools like LambdaTest provide an interactive reporting dashboard for results analysis along with all the benefits of cloud testing.

Here’s a glimpse of LambdaTest cloud Selenium Grid:

You can also Subscribe to the LambdaTest YouTube Channel and stay updated with the latest tutorials around automated browser testing, Cypress testing, CI/CD, and more.

Step 2. Next would be to add the LambdaTest username and access key for your account to be used to run the script. You can find these details in the LambdaTest Profile Section.

Step 3. After that, add the first method in this file as setUp(), which would be used to set initial capabilities for the browser and launch the grid with the given credentials.

You can see we have set some capabilities for the Chrome browser to be used for our test case. As we are using the LambdaTest platform here for remote execution, we can take advantage of its Selenium Desired Capabilities Generator to generate such values for a number of browser and operating systems combinations by selecting them as required.

Step 4. Just like the setUp() method would create the driver instance to be used for executing the script, it is a good practice to quit the current browser instance as soon as the case is completed. To facilitate the same, add the next method as closeDriver() to quit the driver instance. This would have @AfterMethod annotation in TestNG as the method with this annotation will be called after every test method has completed execution.

This completes the setup for our base implementation. Let’s move to the next section to implement and see how modal dialog box automation works.

Modal Dialog Box Automation Example

For this blog purpose, we will be automating the following flow:

1. Navigate to https://www.lambdatest.com/selenium-playground/bootstrap-modal-demo.
2. Click on Launch Model under Single Modal Example.
3. Fetch the modal container web element.
4. Fetch the modal content web elements using the container element.
5. Verify and interact with the modal dialog window.

Filename : TestModalDialogBox.java

GitHub

Code Walkthrough

Step 1. First lines of code in the testcase are to navigate to the URL on which we will have our modal dialog box to automate.

Step 2. After the page has loaded, we click on the button to launch the dialog box. As we learnt, this is the trigger element which makes the dialog box appear.

For this we use the XPath element locator to fetch the element using its tag and attribute key-value.

Step 3. After clicking the button, we wait for the modal box to be visible. For this, we have used explicit waits, as per which the WebDriver waits for a certain condition to occur before proceeding to execute the further code. To know more about explicit waits, you can go through this article on types of Waits in Selenium.

To use these waits in your test automation script, the following imports are done:

Step 4. After this, an object of WebDriverWait class is instantiated using the WebDriver reference and maximum time to wait for before raising an exception. The time is in seconds.

Using this wait object, we implement some “ExpectedConditions” function to be fulfilled. There are certain predefined conditions for it in Selenium, of which we have used visibilityOfElementLocated(), which means to wait until the given WebElement is visible.

Step 5. Once the modal dialog box opens up, we fetch the WebElement of the modal container as we will be interacting with the elements inside the modal dialog box container.

Step 6. Next, we fetch the modal dialog box WebElements to perform actions on their content. One important thing to note here is the way how the WebElement for the model content is fetched.

For this, in place of the driver, the WebElement identifier for the modal container is used, and the identifying XPath for the element starts with “.//,” which signifies that the corresponding element to be found is inside this element, i.e., inside the modal dialog box.

The following code showcases this implementation of how elements would be identified and how we can assert on it or click the button. To learn more about assertions you can go through our earlier blog on How To Use Assertions In TestNG With Selenium or watch this video to learn what are TestNG assertions, the different types of TestNG assertions, and how you can use them while performing Selenium automation testing with TestNG.

Test Execution

Having understood the code implementation, lets execute the code using TestNG. Once successfully executed, you can see the following output on the IDE.

Since we executed the code on a remote grid using LambdaTest, execution logs are also available on the LambdaTest Dashboard, including video, steps of the automation script, and network and console logs.

You can see your executed test cases under Recent Tests on the Dashboard.

To see the detailed execution for your case, click on the test case, and you can see the details like the following:

You can also navigate to the LambdaTest Analytics Dashboard to see test performance metrics. From the Test Summary section, you will see the total number of tests passed or failed, including completed and pending tests. You can also see the snapshot of consistent tests from the Test Overview section.

How to handle Alerts using Selenium Java?

In this section of the blog on how to handle modal box in Selenium WebDriver Java, we will learn what are alerts and how to handle alerts in Windows using Selenium Java

What are Alerts?

Alerts in web development usually refer to a message or notification that lets the user know about information, namely:

• Asking for access permissions.
• Highlighting mandatory fields on a form.
• Display warning messages or help information.

Unlike modal dialog boxes, Selenium offers some special functions to deal with alerts. This is because it is a very tricky and time-consuming task for testers to automate alerts using regular methods. A few of these predefined methods are

• Click Accept Button of the alert Dismiss/Cancel an Alert Box

driver.switchTo().alert().dismiss();

• Click Accept on Alert Box

driver.switchTo().alert().accept();

• Fetch static data from Alert Box

driver.switchTo().alert().getText();

• Send data to input fields on Alert Box

driver.switchTo().alert().sendKeys(«Text»);

sendKeys() function is used to enter data to the input fields on any web page in Selenium automation. SendKeys in Selenium performs the same action here by entering data to any input field on the alert.

Demonstration: Handling Alerts Window using Selenium Java

For this blog on how to handle modal dialog box in Selenium Java, we will be automating the following flow:

1. Navigate to https://www.lambdatest.com/selenium-playground/javascript-alert-box-demo.
2. Click on Click Me button under Java Script Alert Box.
3. Verify the alert body content as Please Enter Your Name.
4. Enter some data in the alert input box.
5. Click OK to accept the alert.

Filename : TestAlerts.java

GitHub

Code Walkthrough

Step 1. This code also starts with the first step as navigating to the target page where the actual automation script would be executed.

Step 2. Once the page is loaded, we click the button to get the alert on which alert functions can be implemented and verified.

Step 3. Just like for the modal dialog box, for alert as well, explicit wait is being implemented. Imports and object creation remain same for this case as well with only difference being on ExpectedConditions. For supporting alerts, just like there are predefined functions in Selenium, alertIsPresent() is used in this case.

Step 4. After the alert is visible, we start with implementing alert().getText() to fetch the content on the alert and asserting it.

But before we can do so, we need to make sure that the driver instance focus has been switched to the alert from the main window. For this purpose, the switchTo() function is used in Selenium automation testing. This function is used whenever we are working with multiple windows like new tab, alerts, pop ups, etc. in web automation.

Since in this test script, we need to switch to alert in this test script to interact with it, switchTo().alert() is used. We will learn more about how to switch between parent/child windows in the popups section.

Step 5. Here we are using the Assert class of TestNG to compare the content using the assertEquals() function. In this function, we will pass the expected content, which is the string and the actual content, which is the body content of the alert that is fetched on the previous step. If both matches, assert is passed; else, it fails with an error that is expected and actual data do not equal.

Step 6. Next, we verify the alert().sendKeys() function by entering some data in the input field.

Step 7. The last step of this test scenario is to accept the alert for which the predefined method that Selenium provides is being used.

Depending upon the use case, you can also implement the function to dismiss/cancel the alert. For this following method Selenium method can be used

Test Execution

As mentioned for the modal dialog box in the previous section, we can similarly execute the alerts test case from IDE and see the output like below on successful execution on the IDE and the LambdaTest dashboard for the automation cases.

How to handle Popups using Selenium Java?

In this section of the blog on how to handle modal box in Selenium WebDriver Java, we will learn what are popups and how to handle popups using Selenium Java.

What are Popups?

Pop-up refers to a new window or tab that pops up or gets opened as a result of some interaction on the webpage. It can come up in a number of conditions and as per implementation.

In Selenium automation, the driver always focuses on the currently active window and interacts with it. So whenever we are working with pop-ups in Selenium, some additional methods are used to shift the driver’s focus to the newly opened window and then back to the main window.

• Get handles of all the windows that are open at that instance.

driver.getWindowHandles();

• Get the current window handle on which the driver is focused.

driver.getWindowHandle();

• Switch to the main parent window.

driver.switchTo().defaultContent();

• Switch to any specific window using its handle.

driver.switchTo().window(handleId);

handleId here refers to the ids of the window which we can fetch using the getWindowHandle() or getWindowHandles() function of the WebDriver.

Demonstration: Handling Popups using Selenium Java

For this blog purpose, we will be automating the following flow:

1. Navigate to https://www.lambdatest.com/selenium-playground/window-popup-modal-demo.
2. Click on Follow On Twitter under Single Window Popup.
3. Switch to a new popup window.
4. Assert Follow button on it is present.
5. Switch back to the main window.
6. Assert Follow On Twitter is displayed.

Filename: TestPopups.java

GitHub

Code Walkthrough

You can find two special imports in this test class, namely

These are done to support the usage of Set type Data Structure and Iterator, the function to traverse through the Set. More details about these are with the corresponding code where these are used.

Step 1. For writing the automation test case for handling pop-ups, after navigating to the required webpage, first, we get and save the handle of the main window. This is done as once there is a new popup window, we need to have some way to differentiate between the handle of the current window and the newly opened window.

Step 2. After storing this, the next step would be to click on the link text or button, in this case, on the current/main window, to get the new popup window.

Step 3. Now, as per the test scenario expectation, we should have two windows on the screen. To verify the same, use the getWindowHandles() method to get identifiers (or window handles) of the respective Windows.

This method returns the list of handles of all the Windows, which to understand are the ids of different Windows that can be used to identify them. This entire list is stored in a Set type of data structure for easy accessibility.

As the number of window handles is stored in the Set type variable, we can use the size() method to fetch the total number of handles in that and assert as per expectation which is 2 here.

Step 4. Next step would be to switch to the new pop up window. For this, we traverse through the list of window handles and compare it with the main window handle value, which we stored in the first step.

For traversal through the Set containing all window handles, we are using Iterator. As the name suggests, it means to visit repeatedly until some point. So here, we keep on iterating the set for the next values till we reach the last value.

Step 5. Once we get a non-matching value, we switch to the new popped-up window and use the Explicit Wait like discussed before to wait for the new popped-up window using the visibilityOfElementLocated() function and raise an Assert to verify the switch is successful.

Step 6. The last step is to switch back to the main window using its already stored handle and assert some element on it to verify that the driver focus has been shifted again to the main window.

Test Execution

In a similar way as discussed above, after execution, we will get the result on IDE as follows:

And we can see the detailed execution logs on LamdaTest Dashboard by navigating to the test details and can see the data like:

If you’re a Java developer looking to improve your skills, the following certification from LambdaTest can help:

This Selenium Java 101 certification is for beginning to intermediate level Java developers who want to refresh their knowledge of the programming language and learn more about the Selenium automation testing.

Here’s a short glimpse of the Selenium Java 101 certification from LambdaTest:

By now you must have got a fair understanding about popups and alerts and how you can handle modal dialog box in Selenium WebDriver Java over a cloud grid like LambdaTest. However, if you want to leverage the best features of the cloud setup with faster execution (as good as the speed of a local setup), you can try HyperExecute – a blazing fast next gen testing cloud, which is upto 70% faster than any traditional Selenium cloud setup.

Conclusion

With this blog on how to handle modal dialog box in Selenium WebDriver Java, we have learned the implementation and working for all of these in detail covering all the aspects and functions that you might encounter and would need while working with these. I hope, by now, you would be confident enough to automate any kind of modal dialog box, alerts, or popups that come up in your automation scripts. So go ahead and get started with Selenium Java automation testing to handle these with ease.

Happy Automating !!