デバイスの寸法のオーバーライド

概要

インターネットにアクセスするユーザーが使用するデバイスの種類は急速に増加しており、画面サイズが異なるすべてのデバイスでウェブサイトまたはウェブアプリケーションが期待どおりに動作することを確認することがますます重要になっています。

Selenium 4でChrome DevToolsプロトコルサポートが利用可能になったことで、Nightwatchはさまざまな画面寸法でのテストをサポートするようになりました。1つのコマンドだけで、テストで画面寸法の値を上書きできます。さらに、ウェブサイトを読み込むためにモバイルデバイスをエミュレートしたり、ウェブサイトのdevice-scale-factor/device-pixel-ratioを変更したりすることもできます。

`setDeviceDimensions()`コマンドは、Google ChromeやMicrosoft EdgeなどのChromiumベースのブラウザでのみ機能します。

デバイスの寸法のオーバーライド

テストの実行中にデバイスの寸法を上書きすることで、異なる画面サイズのデバイスで実際にテストすることなく、ウェブサイトが異なる画面寸法でどのように読み込まれるかをテストできます。これは、ウェブサイトのレスポンシブ性をテストする際に特に役立ちます。

必要なことは、ウェブサイトに移動する前に、必要なパラメーターを指定してbrowser.setDeviceDimensions()コマンドを呼び出すことだけです。

setDeviceDimensions()は、最初の引数としてオブジェクトを受け取ります。オブジェクトの仕様は次のとおりです。

キー タイプ デフォルト 説明
width 数値 0 ピクセル単位の幅の値の上書き（最小0、最大10000000）。0は上書きを無効にします。
height 数値 0 ピクセル単位の高さの値の上書き（最小0、最大10000000）。0は上書きを無効にします。
deviceScaleFactor
オプション		 数値 0 デバイススケールファクターの値の上書き。0は上書きを無効にします。
mobile
オプション		 ブール値 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);
  });
});