Join us on :

Overlay Modals or Hidden division popups

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 text you may not want to place on the actual page in an effort to preserve a clean look.

In this webste, 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-webdriverio

Hidden division Pop Up

Overlay Modals are also known as hidden division popups. Hidden division pop is nothing but html code which is hidden intially, hidden division pop up also know as dialog or overlay.

Overlay is triggered when application user performs certain taks like clicking a button, submitting form or on page load...


Examples :

  • Calender Popups
  • Contact forms
  • Error and success Messages
hidden-division-modal-selenium-webdriver


Properties of Hidden division Pop up :

  • Cannot be moved here and there
  • We can inspect the overlay
  • This is not javaScript popup
  • We can resize and customize the content of the pop up
  • If content is more then the pop up size, pop shows scroll bar
  • When hidden division pop is opened, pop takes the focus from the application.
  • When pop up is closed, focus automatically goes to 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 View Pop-Up button
3. Application opens a Model
inspect-hidden-popup-selenium-webdriver

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");
    })
})

Output of the above code. webdriverio-hidden-division-popup


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 as hidden division popup

content-hidden-division-popup-selenium-webdriver

Limitations:

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

About Author

Article is written by Pavan (a) KarthiQ. Well, I am serving notice period in an MNC, Bangalore. I thought to enrich every person knowledge a little, I always have a feeling, when we teach something, we will learn more than what you know. Knowledge is the only thing that doubles when you spend it.

I have also created the reporter for Protractor Jasmine. Use for your projects without any hesitation

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions