Identifying and handling overlay blockers using Selenium technology

Question

Identifying and handling overlay blockers using Selenium technology

Currently, I am conducting tests on a website that utilizes in-browser pop-ups to display details about objects. These pop-ups are occasionally modal, meaning they render the rest of the screen unusable and activate a gray transparent overlay that covers everything except for the pop-up. It is important for me to verify if this overlay appears as intended.

Unfortunately, I do not have sufficient knowledge regarding how these overlays are implemented to know where to look in the DOM for the specific properties controlling this feature. Therefore, I am seeking guidance from someone more familiar with configuring such overlays to help direct me to the correct location.

While one solution could be simply clicking a button to observe the outcome, I prefer to create a method that can be utilized consistently across the entire testing suite rather than creating separate checks for each scenario.

For those curious, I am coding in Java using Selenium.

css selenium

Answer 1

Answer №1

Although this advice may be considered outdated, it could still prove beneficial to someone in need. I recently tackled a similar issue with our React website and successfully resolved it. Our solution involved utilizing the react-block-ui module to manage the blocking overlays.

The key to identifying a blocked element by an overlay lied in two distinct observations:

The element resided within a specific div structure (referred to as "the overlay") that adhered to a particular naming pattern – in our case, section-overlay-X.
This overlay was distinguished by a class attribute named av-block-ui when active.

If you have access to similar information or resources, then you can apply a similar approach. I devised a couple of utility methods to check if a given WebElement was obstructed by an overlay. If blocked, it would trigger an ElementNotInteractableException.

For those using Java, here's a snippet of the relevant code:

...
By SECTION_OVERLAY_ANCESTOR_LOCATOR = By.xpath("./ancestor::div[contains(@id, 'section-overlay-')][1]");
...

    private WebElement findUnblockedElement(By by) {
    WebElement element = driver.findElement(by);
    if (isBlockedByOverlay(element)) {
        throw new ElementNotInteractableException(String.format("Element [%s] is blocked by overlay", element.getAttribute("id")));
    } else {
        return element;
    }
    }

    private boolean isBlockedByOverlay(WebElement element) {
    List<WebElement> ancestors = element.findElements(SECTION_OVERLAY_ANCESTOR_LOCATOR);
    WebElement overlayAncestor = ancestors.get(0);
    String overlayClass = overlayAncestor.getAttribute("class");
    return !StringUtils.isBlank(overlayClass);
    }

You can review more details about my implementation at: https://bitbucket.org/snippets/v_dev/BAd9dq/findunblockedelement

Answer 2

Although this advice may be considered outdated, it could still prove beneficial to someone in need. I recently tackled a similar issue with our React website and successfully resolved it. Our solution involved utilizing the react-block-ui module to manage the blocking overlays.

The key to identifying a blocked element by an overlay lied in two distinct observations:

The element resided within a specific div structure (referred to as "the overlay") that adhered to a particular naming pattern – in our case, section-overlay-X.
This overlay was distinguished by a class attribute named av-block-ui when active.

If you have access to similar information or resources, then you can apply a similar approach. I devised a couple of utility methods to check if a given WebElement was obstructed by an overlay. If blocked, it would trigger an ElementNotInteractableException.

For those using Java, here's a snippet of the relevant code:

...
By SECTION_OVERLAY_ANCESTOR_LOCATOR = By.xpath("./ancestor::div[contains(@id, 'section-overlay-')][1]");
...

    private WebElement findUnblockedElement(By by) {
    WebElement element = driver.findElement(by);
    if (isBlockedByOverlay(element)) {
        throw new ElementNotInteractableException(String.format("Element [%s] is blocked by overlay", element.getAttribute("id")));
    } else {
        return element;
    }
    }

    private boolean isBlockedByOverlay(WebElement element) {
    List<WebElement> ancestors = element.findElements(SECTION_OVERLAY_ANCESTOR_LOCATOR);
    WebElement overlayAncestor = ancestors.get(0);
    String overlayClass = overlayAncestor.getAttribute("class");
    return !StringUtils.isBlank(overlayClass);
    }

You can review more details about my implementation at: https://bitbucket.org/snippets/v_dev/BAd9dq/findunblockedelement

Answer 3

Answer №2

While this solution may not be universal, I managed to tackle the issue by examining the overflow property of the body element. The specific type of modal I was attempting to navigate inhibited page scrolling when activated.

Answer 4

While this solution may not be universal, I managed to tackle the issue by examining the overflow property of the body element. The specific type of modal I was attempting to navigate inhibited page scrolling when activated.

Answer 5

Answer №3

Although this question is quite old, it still pops up as the first result on Google when searching for a similar issue.

To tackle this problem, I utilized Javascript and implemented the following function every time I needed to check for visible elements:

function checkVisibility(element) {
    const rect = element.getBoundingClientRect();
    // Get the center coordinates of the element
    const x = rect.left + rect.width / 2;
    const y = rect.top + rect.height / 2;
    const topElement = document.elementFromPoint(x, y);
    return !element.isSameNode(topElement);
}

By combining this approach with Selenium's default visibility settings, I successfully interacted only with elements that were not obstructed by overlays.

Answer 6

Although this question is quite old, it still pops up as the first result on Google when searching for a similar issue.

To tackle this problem, I utilized Javascript and implemented the following function every time I needed to check for visible elements:

function checkVisibility(element) {
    const rect = element.getBoundingClientRect();
    // Get the center coordinates of the element
    const x = rect.left + rect.width / 2;
    const y = rect.top + rect.height / 2;
    const topElement = document.elementFromPoint(x, y);
    return !element.isSameNode(topElement);
}

By combining this approach with Selenium's default visibility settings, I successfully interacted only with elements that were not obstructed by overlays.

Identifying and handling overlay blockers using Selenium technology

Answer №1

Answer №2

Answer №3

Similar questions

Error: The Vue bind object property cannot be read because it is undefined in the class binding

Why is it that Lotus Notes is unable to render this HTML code properly?

Impeccable method to safeguard element from external css interference

Eliminate the header top margin in Bootstrap

Utilize the "display: flex" property to position an avatar alongside a comment that is wrapped

Is it achievable to use PHP to automatically scroll to the bottom of a container?

explore the route with the help of jquery scrolling feature

Limit the radius to only apply on big screens using tailwind css

Enhancing visual aesthetics with Vuetify on v-slot label components

Having trouble locating the source of the issue causing the product page to appear too wide on Shopify

Fixing the Overflow Property in CSS

What is the best way to improve the design of this division that includes buttons?

One of the iterations encountered a Selenium TimeoutException error

Using Crawler4j, Jsoup, and JavaScript to retrieve modified attribute values

Encountered difficulties initiating a new session with Selenium WebDriver

Image of outer space enclosed by a circular boundary

Employing JavaScript for fading divs in and out sequentially

How to Create a DataTable Responsive Feature Where All Columns Collapse on Click, Except the Last One?

Finding a button within a child div using Python and Selenium

Webpage unable to scroll