セクションの定義
ページのセクションを定義すると便利な場合があります。セクションには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();
});
});