Protractor: How do I get the current browser width?

Question

I want some helper function code to run based on whether the browser is in "desktop" mode, which is default, or "mobile" mode, which some specs require for mobile only functionality. Height is always 800, but width can be 600 or 1280.

login: function() {
  var self = this;
  var browserSize = browser.manage().window().getSize().then(function(size) {
    // size is still an unresolved promise ;.;
    return size;
  });

  // Go to login page
  browser.get(browser.baseUrl); // Will redirect authed users to the application

  // If not at the login page, logout first
  if (browser.getCurrentUrl() !== browser.baseUrl) {
    if (browserSize.width == 600) {
      self.mobileLogout();
    } else {
      self.desktopLogout();
    }
  }

  self.loginPage.login();
}

How do I either resolve the promise getSize returns or determine the browser width some other way?

Wrap the whole block inside of the .then of the promise? That's what I've done in my tests. — Daniel, Nov 11 '16 at 04:09

score 5 · Answer 1 · answered Nov 15 '16 at 14:48

5

You were so very close! This worked for me just now:

var browserSizeOfMe = browser.driver.manage().window().getSize().then(function(size) {
    console.log(" BROWSER SIZE "+ JSON.stringify(size) );
    return size;
});

answered Nov 15 '16 at 14:48

Dave

3,093
35
32

Side note - this doesn't work on Appium with Android devices (possibly also does not work on iOS but I have not confirmed that). The `browser.driver.manage()` commands fail and the logs say that the command is not supported by Android. – Kyle Pittman May 16 '18 at 15:05

score 2 · Answer 2 · edited May 23 '17 at 11:59

2

You don't have to approach the problem of differentiating mobile and desktop judging by the size of the browser window. Instead, you can access the configured capabilities via getCapabilities(), please see examples at:

Protractor: accessing capabilities

edited May 23 '17 at 11:59

Community

1
1

answered Nov 11 '16 at 03:55

alecxe

462,703
120
1,088
1,195

score 0 · Answer 3 · answered Nov 11 '16 at 04:02

0

you can get the browser width using this script

var width = window.innerWidth || document.body.clientWidth;

but i dont think this answers your problem

answered Nov 11 '16 at 04:02

coriano35

165
1
3
10

score 0 · Accepted Answer · answered Nov 25 '16 at 00:21

There was indeed too many promises going on in this function. I had to nest needing the width and the current url so things would be defined and usable at the correct times.

Roughly the working code:

login: function() {
  var self = this;

  browser.get(browser.baseUrl);

  browser.getCurrentUrl().then(function(url) {
    if(url !== browser.baseUrl) {
      browser.manage().window().getSize().then(function(size) {
        if (size.width == 600) {
          self.mobileLogout();
        } else {
          self.desktopLogout();
        }
      }
    }

    self.loginPage.login();
  }
}

score -1 · Answer 5 · answered Nov 11 '16 at 03:31

-1

It can be done using "viewport", have a look following link

http://www.w3schools.com/css/css_rwd_viewport.asp

answered Nov 11 '16 at 03:31

Janaka Dissanayake

537
4
13

Protractor: How do I get the current browser width?

5 Answers5