What is the method to adjust the dimensions of the browser's inner window or viewport?

When I execute the following function:

browser.driver.manage().window().setSize(1000, 1000);

The result is that my window size becomes 1000x1000 while the inner window/viewport size changes to 990x918. By inner window size, I am referring to the area of the window that displays content without considering borders or tabs. In this scenario, there are 5px borders on each side and additional 82px occupied by url and tab bars.

I aim to set the inner window size in a way that doesn't require accounting for specific machine configurations where extra toolbars might be present.

Is there a protractor command available for setting the size of the actual inner, content-filled part of the window?


Following the response below, I included the following code snippet in the onPrepare section of my conf file:

protractor.setViewportSize = function(width, height){
    const JS_GET_PADDING = "return {"
       + "w: window.outerWidth - window.innerWidth,"
       + "h: window.outerHeight - window.innerHeight };";

     browser.executeScript(JS_GET_PADDING).then(function(pad){
       browser.manage().window().setSize(width + pad.w, height + pad.h);
     });
};

In my test case, I utilize something like this:

protactor.setViewportSize(1440, 1000);

Answer №1

There doesn't seem to be a built-in method for resizing the viewport to a specific size, but it can be achieved by adjusting the outer size to match the inner size you want:

var webdriver = require('./node_modules/protractor/node_modules/selenium-webdriver');

// Custom method to set the inner size
webdriver.WebDriver.prototype.setViewportSize = function(width, height){
  const JS_GET_PADDING = "return {"
    + "w: window.outerWidth - window.innerWidth,"
    + "h: window.outerHeight - window.innerHeight };";

  var self = this;
  self.executeScript(JS_GET_PADDING).then(function(pad){
    self.manage().window().setSize(width + pad.w, height + pad.h);
  });
};

// Launch the browser
var driver = new webdriver.Builder().withCapabilities({browserName: 'firefox'}).build();

// Set the window inner size to 800 x 600
driver.setViewportSize(800, 600);

// Close the browser after delay
driver.sleep(5000);
driver.quit();

Answer №2

Check out the C# implementation provided by @Florent B.:

    public static void AdjustBrowserViewportSize(RemoteWebDriver driver, int width, int height)
    {            
        var jsGetPadding = @"return [ window.outerWidth - window.innerWidth,window.outerHeight - window.innerHeight ];";
        var paddingArray = driver.ExecuteScript(jsGetPadding) as ReadOnlyCollection<object>; 
        driver.Manage().Window.Size = new Size(width + int.Parse(paddingArray[0].ToString()), height + int.Parse(paddingArray[1].ToString()));
    
    }

Example of how to use this method:

        RemoteWebDriver driver = new EdgeDriver();
        AdjustBrowserViewportSize(driver,800, 800);

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

Developing a large-scale project with compatibility for iPads

Seeking information here. We have a long-standing, sizable product and we're looking to ensure it's compatible with iPads to keep our customers satisfied. The layout appears fine on iPad, but the issue lies with gestures such as scrollable divs. ...

Struggle to link a string together effectively for proper concatenation

I'm currently working on a project that involves utilizing the Wikipedia API. My goal is to create a link for each list item, but I'm encountering difficulty with proper concatenation. Here's the code snippet I'm using: for (var j=0 ...

How can I determine if a specific button has been clicked in a child window from a different domain?

Is there a method to detect when a specific button is clicked in a cross-domain child window that cannot be modified? Or determine if a POST request is sent to a particular URL from the child window? Below is an example of the HTML code for the button tha ...

How can you achieve the effect of "hovering over an image to automatically start playing a muted video within the image itself"?

[![enter image description here][1]][1]I am working with WordPress and Elementor, and I want to create a hover effect where an image triggers a muted video to play within the image area on mouseover. The video should stop playing when the mouse is not hove ...

Next.js encountering page not found error due to broken link URL

Currently, I am working on implementing a login system in next.js. In the login page, I have included a Link to the Register page using the Link href attribute. However, every time I click on that link, it displays a message saying "404 page not found." Al ...

Choosing and clicking on buttons with Selenium

I am facing an issue with automating the restart of my router using Selenium in Python. Everything is working smoothly except for the final step - finding the restart button and clicking it! I have attempted to locate the button using various methods such ...

The spreading of personalized events

I am expecting my CustomEvent to be propagated from the document to all the DOM elements. However, for some unknown reason, it is not happening. Can you point out what mistake I might be making? <html> <script> function onLoad() { var myDi ...

How come the ".includes" method is not functioning properly with my two-dimensional array?

Introduction: As part of a school project, I am tasked with creating a program that checks answers in a "test" to determine their correctness. This project requires the use of a two-dimensional array and the ".includes" function. Requirements: Mand ...

Ways to determine if it's the current moment using JavaScript's moment

After doing some research, I discovered that in order to determine if an Object is a moment, the method moment.isMoment(obj) needs to be used. However, when attempting to confirm moment().toDate(), it returned false. Is there a way to verify if an Object ...

Creating an alert message in React to notify users of incorrect data being uploaded to an array

Just getting started with React and looking to ensure that the csv data uploaded by users follows the specified standard of “currency, amount, price, timestamp”. If the user uploads data that doesn't meet this standard, an error alert is triggered ...

Guide to customizing the default scrollbar colors in Nextjs

When browsing websites like tailwindcss.com or https://developer.mozilla.org/ in Chrome and Firefox, you may have noticed that they utilize the default scrollbar style but allow users to change its colors through a dark/light mode button. The appearance of ...

What events precede and follow a keydown action in a Textarea field?

I need to prevent users from pressing function keys (F1, F2, etc.), the tab key, and any other characters from being added. The code below is supposed to achieve this on my website but it's not working. document.getElementById("code").addEventList ...

Utilize Node.js and Cheerio to extract data from an HTML table

Having trouble converting an HTML table to JSON. HTML table structure: <div id="content"> <h1>content-information</h1> <table class="testinformation"> <thead> <tr> ...

What is the process for securing a photo to a canvas?

I have included <input type='file' id="image"> in my HTML code. How can I display the uploaded image on my canvas using p5.js? What is the best way to add an event listener to this action and transfer the uploaded file onto the ca ...

When working with Angular, encountering circular dependencies can occur when utilizing providedIn alongside forRoot

Currently, I am in the process of developing an angular library that includes an internal service. The service is defined as follows: I have utilized providedIn to ensure it is tree-shakable and did not opt for providedIn:'root' as it is solely u ...

The Countdown feature is currently only functioning on the initial button and not on any of the other buttons

I could use some assistance. I have a download button with a countdown, but there seems to be an issue with the button's functionality. It only works on the first button, or if the second button is clicked first, it starts the countdown on the first b ...

Is there a way to generate a fresh Mongo collection inside an event handler in Meteor?

I'm currently exploring ways to dynamically add a new collection every time a button is clicked. Here's the HTML snippet I have: html: <template name="tempName"> <button class="submitButton">Submit</button> </template&g ...

The FileReader's onload event handler does not seem to be triggering as expected

In short, my issue revolves around reading a csv file from an android device using JavaScript's FileReader. Although my code was functioning properly a month ago, upon revisiting it recently I discovered that the onload function no longer seems to be ...

Is it possible to apply the onbeforeunload event exclusively for when the site is being redirected to a specific website?

Is there a way to selectively apply onbeforeunload when a site is redirecting to a specific page? ...

What is the best way to deactivate div elements once an overlay has been applied to them?

My goal is to place an overlay on my form to prevent users from accessing the content. Even though I have added an overlay, users can still interact with input fields. How can I prevent that? .overlay { background: rgba(0, 0, 0, .75); text-align: ce ...