javascript - 你如何设置浏览器内窗口/视口(viewport)大小？

Question

如果我调用函数:

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

它将我的窗口大小设置为 1000x1000 并将我的内部窗口/视口(viewport)大小设置为 990x918。对于内部窗口大小，我指的是实际包含内容的窗口部分，例如不包括窗口边框或选项卡。在这种情况下，我在每一侧都有一个 5px 的边框，然后是我想要考虑的 82px 的 url 和标签栏。

我想设置内部窗口大小，这样我就不需要特别考虑运行测试的机器，例如，如果它碰巧有一个额外的工具栏。

是否有 Protractor 命令用于设置窗口实际内部内容填充部分的大小？

---

根据下面的答案，我将其添加到我的 conf 的 onPrepare 部分:

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

在测试中，我调用类似的东西:

protactor.setViewportSize(1440, 1000);

Answer 1

我认为没有任何内置方法可以将视口(viewport)大小调整为给定大小。但是，可以通过设置与目标内部尺寸匹配的外部尺寸来完成:

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

// extension 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);
  });
};

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

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

// quit
driver.sleep(5000);
driver.quit();