セクションの定義

ページのセクションを定義すると便利な場合があります。セクションには2つの役割があります

  • ページの下に名前空間のレベルを提供する
  • 要素レベルのネストを提供するため、セクション内で定義された要素はDOM内の親セクションの子孫となる

セクションの宣言

sections プロパティを使用してセクションを作成できます

nightwatch/pages/samplePage.js
module.exports = {
  sections: {
    menu: {
      selector: '#gb',
      elements: {
        mail: {
          selector: 'a[href*="mail"]'
        },
        images: {
          selector: 'a[href*="imghp"]'
        }
      }
    }
  }
};

テストでのセクションの使用

テストでは、次のように使用します

tests/sampleTest.js
describe('sample test with page objects', function() {
  it('Test', function (browser) {
    var google = browser.page.google();
    google.expect.section('@menu').to.be.visible;
    
var menuSection = google.section.menu; menuSection.expect.element('@mail').to.be.visible; menuSection.expect.element('@images').to.be.visible;
menuSection.click('@mail');
browser.end(); }); });

セクションに対するすべてのコマンドとアサーション(expect アサーション以外)は、チェーンのためにそのセクションを返します。必要に応じて、複雑なDOM構造のためにセクションを他のセクションの下にネストできます。

ページオブジェクトセクションのネスト

nightwatch/pages/samplePage.js
module.exports = {
  sections: {
    menu: {
      selector: '#gb',
      elements: {
        mail: {
          selector: 'a[href*="mail"]'
        },
        images: {
          selector: 'a[href*="imghp"]'
        }
      },
      sections: {
        apps: {
          selector: 'div.gb_pc',
          elements: {
            myAccount: {
              selector: '#gb192'
            },
            googlePlus: {
              selector: '#gb119'
            }
          }
        }
      }
    }
  }
};

テストでネストされたセクションを使用するのは簡単です
tests/sampleTest.js
describe('sample test with page objects', function() {
  it('Test', function (browser) {
    var google = browser.page.google();
    google.expect.section('@menu').to.be.visible;
    
var menuSection = google.section.menu; var appSection = menuSection.section.apps; menuSection.click('@appSection');
appSection.expect.element('@myAccount').to.be.visible; appSection.expect.element('@googlePlus').to.be.visible;
browser.end(); }); });