覆寫裝置尺寸

總覽

使用者存取網際網路的裝置種類正在快速增加，因此確保您的網站或 Web 應用程式在所有不同螢幕尺寸的裝置上都能如預期運作變得更加重要。

由於 Selenium 4 現在提供 Chrome DevTools 通訊協定支援，Nightwatch 支援在不同螢幕尺寸上進行測試。您只需一個指令即可覆寫測試中螢幕尺寸的值。除此之外，您還可以模擬行動裝置載入您的網站，並變更您網站的裝置縮放比例/裝置像素比。

setDeviceDimensions() 指令僅適用於以 Chromium 為基礎的瀏覽器，例如 Google Chrome 和 Microsoft Edge。

覆寫裝置尺寸

在執行測試時覆寫裝置尺寸，可讓您測試您的網站如何在不同的螢幕尺寸上載入，而無需實際在具有不同螢幕尺寸的裝置上進行測試。這在測試網站的響應能力時特別有用。

您只需在導覽至您的網站之前，使用必要的參數呼叫 browser.setDeviceDimensions() 指令即可。

setDeviceDimensions() 接受一個物件作為其第一個引數。物件的規格如下

鍵 類型 預設值 描述
width 數字 0 以像素為單位的覆寫寬度值 (最小值 0，最大值 10000000)。0 會停用覆寫。
height 數字 0 以像素為單位的覆寫高度值 (最小值 0，最大值 10000000)。0 會停用覆寫。
deviceScaleFactor
選用		 數字 0 覆寫裝置縮放比例值。0 會停用覆寫。
mobile
選用		 布林值 false 是否模擬行動裝置。這包括 viewport meta 標籤、覆蓋捲軸、文字自動調整大小等等。

範例

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