覆盖设备尺寸

概述

用户访问互联网的设备种类正在迅速增加，因此确保您的网站或 Web 应用程序在所有具有不同屏幕尺寸的设备上都能按预期工作变得越来越重要。

随着 Chrome DevTools 协议支持 现在可以在 Selenium 4 中使用，Nightwatch 支持在不同屏幕尺寸上进行测试。您只需使用一个命令即可在测试中覆盖屏幕尺寸的值。除此之外，您还可以模拟移动设备以加载您的网站，以及更改网站的设备比例因子/设备像素比例。

`setDeviceDimensions()` 命令仅适用于基于 Chromium 的浏览器，如 Google Chrome 和 Microsoft Edge。

覆盖设备尺寸

在运行测试时覆盖设备尺寸使您能够测试您的网站在不同屏幕尺寸上的加载方式，而无需在具有不同屏幕尺寸的设备上实际测试它们。这在测试您的网站响应能力时特别有用。

您只需在导航到您的网站之前使用所需的参数调用 `browser.setDeviceDimensions()` 命令。

`setDeviceDimensions()` 接受一个对象作为其第一个参数。对象的规范如下

键 类型 默认值 描述
宽度 数字 0 覆盖以像素为单位的宽度值（最小值 0，最大值 10000000）。0 禁用覆盖。
高度 数字 0 覆盖以像素为单位的高度值（最小值 0，最大值 10000000）。0 禁用覆盖。
deviceScaleFactor
可选		 数字 0 覆盖设备比例因子值。0 禁用覆盖。
移动
可选		 布尔值 false 是否模拟移动设备。这包括视口元标签、覆盖滚动条、文本自动调整大小等。

示例

tests/modify-device-dimensions.js 
describe('modify device dimensions', function() {
  it('modifies the device dimensions', function() {
    browser
      .setDeviceDimensions({
        width: 400,
        height: 600,
        deviceScaleFactor: 50,
        mobile: true
      })
      .navigateTo('https://www.google.com')
      .pause(1000);
  });
});

重置设备尺寸

要将设备尺寸重置回原始尺寸，您可以再次调用 `browser.setDeviceDimensions()` 命令，但这次不带任何参数。

示例

tests/modify-and-reset-device-dimensions.js 
describe('modify device dimensions', function() {
  it('modifies the device dimensions and then resets it', function() {
    browser
      .setDeviceDimensions({
        width: 400,
        height: 600,
        deviceScaleFactor: 50,
        mobile: true
      })
      .navigateTo('https://www.google.com')
      .pause(1000)
      .setDeviceDimensions()  // resets the device dimensions
      .navigateTo('https://www.google.com')
      .pause(1000);
  });
});