Handle Overlay modals on WebdriverIO

Table of content

• Overlay Modals or Hidden division popups
• Hidden division Pop Up

Pop-up overlays are a very common tool to create some kind of interaction with your audience. You can use them to display messages, ask to subscribe to a newsletter, etc.

In layman’s terms, it is a box that pops up, with some degree of opacity, taking center stage and directing your attention to whatever message is contained within the box.

Overlay Modals can also be used as captions for images, explaining in further detail by using the text you may not want to place on the actual page in an effort to preserve a clean look.

On this website, you might have faced this kind of popup while moving around. This is also a modal but it gets triggered based on some actions

Overlay Modals are also known as hidden division popups. Hidden division pop is nothing but HTML code that is hidden initially, hidden division pop up also known as dialog or overlay.

The overlay is triggered when the application user performs certain tasks like clicking a button, submitting the form, or on page load...

Examples :

• Calendar Popups
• Contact forms
• Error and success Messages

Properties of Hidden division Pop up :

• Cannot be moved here and there
• We can inspect the overlay
• This is not a javaScript popup
• We can resize and customize the content of the pop-up
• If the content is more than the pop-up size, pop shows a scroll bar
• When hidden division pop is opened, pop takes the focus from the application.
• When pop up is closed, focus automatically goes to the application
• Hidden division popup could be nested i.e a hidden division pop can have another hidden division pop up
• Hidden division pop can hold other pop-ups/ alerts on it.

Handle Hidden division Pop Up :

1. Navigate to https://chercher.tech/practice/hidden-division-popup
2. Click on the View Pop-Up button
3. Application opens a Model


4. Write xpath for the Name text bar : //input[@type='text']
5. Send text for the Name, using sendKyes in selenium.
6. No Special Operation required to handle hidden division popup.

Complete program for handling hidden division pop up in selenium webdriver

describe('Multiple windows', () => {
    it('Handle multiple windows', () => {
		// navigate to the url
		browser.url("https://chercher.tech/practice/hidden-division-popup");
        //click the element which open popup
        $(".cd-popup-trigger").click()
        // send text to Name field on overlay
        $("//input[@type='text']").setValue("Hidden Division Text");
    })
})

The output of the above code.

Even though pop up content is present but pop is not present on UI until we click a button, for this reason, it is called a hidden division popup

Limitations:

• We cannot perform an operation on the webpage until we close the pop up, if we try to access selenium throws ElementNotClickable exception