Navigating focus to an overlay using Selenium

I am facing an issue with an overlay displaying terms on top of the main window. The scrollbars are not behaving as expected:

https://i.sstatic.net/nzaUa.png

The new window does not register as a separate 'window' or tab, so traditional methods like driver.switchTo().frame(iframe); do not work. Here are the approaches I have attempted:

1) Clicking on the element (referring to the overlay fragment holding the content). No effect.

2) Trying to change focus using the following script:

jse.executeScript("var ov = document.getElementsByClassName('overlay__content'); window.setTimeout(function () { ov[0].focus(); }, 0); ");

3) Attempting to click and then switch to the active element:

_driver.getWebDriver().switchTo().activeElement();

None of these methods have been successful. My aim is to switch to the new window and take a full-screen screenshot using ashot. While this process works flawlessly with iframes, I am unsure how to proceed in this scenario. Any use of scrollBy(0,10) only causes scrolling in the main window.

javascriptjavaselenium

Answer №1

If you want to enable scrolling within the overlay div, you can create a JavaScriptExecutor method like the one shown below:

public void scrollInsideOverlay(WebElement insideDiv, int pixelsToScroll) {
    JavascriptExecutor js = (JavascriptExecutor) webDriver;
    js.executeScript("arguments[0].scrollTop = arguments[1];", insideDiv, pixelsToScroll);
}

The parameter "insideDiv" should refer to the specific div element within the overlay.

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

Is there a way to combine arrays with varying input values?

I am facing an issue where I have multiple text fields with the same name and class but with different values, each accompanied by a button. I am using Javascript to extract the value from each field by clicking on its respective button. I am able to store ...

javascriptphpjqueryarrayscodeigniter-3

What steps do I need to follow to utilize LiveReload with an AngularJS templateURL?

Is there a way to trigger the reload of templateURL when using LiveReload and Grunt? angular.module('meshApp', [ 'ngSanitize', 'ngRoute' ]) .config(function ($routeProvider) { $routeProvider .when('/&apos ...

javascriptnode.jsangularjspuglivereload

Error in Next.js: react-dom.development.js?ac89:14906 - Hook call is invalid. Hooks should only be used within a function component's body

Here is the code snippet I am working with: <div onClick={(e) => handleClick()}>Join Us</div> This is the handleClick function in my code: const handleClick = () => { console.log(Lang.getLocale()) }; And this is the Lang class metho ...

javascriptreactjsnext.js

Inject the type into the dependency container

I am managing multiple databases without relying on ORM tools. Here, I will demonstrate an example using Postgres and MSSQL databases with UserQueries. https://i.sstatic.net/GFs5D.png Within my codebase, I have an interface called IDataBase which is impl ...

javascriptnode.jstypescriptdependency-injectioninversifyjs

I need help figuring out the proper way to establish an indexing path in cosmos db using the nodejs sdk

I'm currently facing a challenge with setting up the indexing policy for one of my cosmosdb containers. Within my cosmosdb, I have a container that stores information about user sessions. Using the node sdk, I am defining the containers, partition key ...

javascriptnode.jsazureindexingazure-cosmosdb

Tips for blocking the insertion of "Emoji & Symbols" into an input field

Currently, I am utilizing Vue JS, but I am willing to consider vanilla JS suggestions as well since they both serve the same purpose. My objective is to block default emojis from being inserted into a text field through either the IOS keyboard or the (CMD ...

javascripthtmlvue.jseventsemoji

Encountering difficulties accessing XML file on server via anchor tag

I have an XML file on the server that I am attempting to open in a browser when the user clicks on a link. Below is how I have set up the link, but it is not opening the file: Code: <a title="View XML" href="file://///90.0.0.15/docmgmtandpub/PublishD ...

javascripthtmlfileanchor

Maximizing the Efficiency of jQuery and Javascript Frameworks

Currently, I am working on a project that involves utilizing a JavaScript framework (jQuery) in conjunction with various plugins (validation, jquery-ui, datepicker, facebox, and more) to enhance the functionality of a modern web application. However, I ha ...

javascriptjqueryoptimizationlatencyjavascript-framework

Guide on darkening the surrounding div of an alert to give it a modal-like effect

I want to display an alert to the user in a visually appealing way. To achieve this, I am utilizing Bootstrap's alert class. Here is how I am showing the user a div: <div class="alert alert-warning alert-dismissible" role="alert"> Some text ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best method for transferring HTML tables to Excel with multiple tabs?

I have created a code that exports an HTML table into an Excel file. However, I now need to export multiple HTML tables into different tabs within a single Excel file. Here is the current code: Currently, when I click "Export To Excel," the Excel file is d ...

javascriptphpjqueryhtmlajax

Regular Expression in JavaScript: Find all matches except those within [[ ]] brackets

My <textarea> contains a list of names with spaces between them, so I created a function to replace the spaces with new lines. However, I now need to ensure that two or more spaces between names are considered part of the same element. For example: ...

javascriptregex

Customize the asset path location in Webpack

I am currently working on a Vue application that utilizes Webpack for code minimization. Is there a method to dissect the chunks and adjust the base path from which webpack retrieves the assets? For example, by default webpack fetches assets from "/js" o ...

javascriptvue.jsvue-cli

Is it feasible to have multiple versions of React coexisting in a monorepo?

I have a monorepo set up with npm workspaces: ├─ lib │ └─ Foo └─ src ├─ App └─ Web I am looking to upgrade the Web package to React 18 while keeping App on React 17 My current dependencies are as follows: ├─ lib │ └ ...

javascriptreactjsnpmnpm-workspaces

Designing a dropdown menu within displaytag

I am currently utilizing displaytag to present tabular data, but I aspire to design a user interface akin to "kayak.com" where clicking on a row reveals additional details without refreshing the page. Here is an example scenario before clicking the Detail ...

javajavascriptajaxdisplaytag

An effective method for creating responsive layouts for custom-shaped HTML elements in a board game

Can anyone guide me on aligning spaces responsively on a board in HTML using Angular 1.x? I've tried using vw/vh's and %s, but consistency breaks on different view sizes. Any straightforward suggestions to address this issue? Avoiding multiple c ...

javascripthtmlangularjscss-transforms2d-games

Obtaining a series of months - Java

Looking to create a tab layout featuring a range of months? Need to include the last 12 months as well as the next 12 months? Familiar with obtaining the next 12 months, but unsure how to also retrieve the previous months? Considering using the joda time ...

javaandroidjava-time

Converting Three JS from 3D to 2D dimensions

I am looking to convert the world space coordinates of a sphere into screen space coordinates in order to determine the screen space boundaries, which I then plan to use for overlaying a div element. It would be great if this function could also provide t ...

javascriptthree.js

How can I assign a prop to a component within the root layout in Next.js version 13, especially when the root layout is required to be a server-side component at all times?

I need assistance with a project I'm working on. My goal is to create a SongPlayer component in Next.js version 13 that plays music and is positioned at the bottom of the window, similar to Spotify's player. However, my SongPlayer component requi ...

javascriptreactjsnext.jsreact-hooksyoutube-api

Three.js: Plane visibility fluctuates with time

I've been working on a Three.js project where I created a rotating plane. However, I encountered an issue where the plane doesn't display half of the time. To better illustrate this problem, I have created a demonstration in this fiddle. ...

javascriptthree.js

Efficiently navigating a JSON document

In my Java chat bot project, I have implemented a matrix as a knowledge base for responses: String[][] knowledgeBase={ {"hi","hello","howdy","hey"},//input 1; if the user inputs any of these, {"hi","hello","hey"},//output 1; randomly choose be ...

javajsoninputmatrixio