在使用nightwatch時,所定義的測試function可以取到一個browser物件
這個browser物件可以操作官網上的api
另外在這browser物件下包含了
1.globals:對應到nighwatch 設定檔內的globals區塊
2.page:page下的各個function對應可以取得同檔名的PageObject
例
module.exports = {
'登入測試':function(browser){
const devServer = browser.globals.getServer()
browser
.url(`${devServer}/#login`)
.waitForElementVisible('#loginPage', 5000)
.clearValue('.js_siteField')
.clearValue('.js_pwdField')
.pause(100)
.setValue('.js_pwdField','12345')
.setValue('.js_userField', '')
.pause(100)
.click('.js_loginBtn')
.pause(3000)
.assert.urlEquals(`${devServer}/#home`)
.end()
}
}
二.為何要使用PageObject在對於測試頁面上的dom物件,nightwatch可以使用selector來找到
要操作的dom,使用PageObject可以預先把要操作元素定義好
之後就可以用@id的形式去取得該dom參考
利用定義Page讓設計的流程更清楚
也避免直接綁在特定selector上,之後要修改比較麻煩
例
module.exports = {
url: function(){
let devServer = this.api.globals.getServer()
return `${devServer}/login`
},
elements: {
myel:'#loginPage',
siteField:'.js_siteField',
pwdField:'.js_pwdField',
loginBtn:'.loginBtn'
}
};
三.PageObject要注意的是PageObject內取得的this並不是等同於
寫spec時的browser物件,
this.api才真正是對應到browser 下的api method
四.使用PageObject改寫Spec
1.取得PageObject
例如
browser.page.login()
2.PageObject下的API與browser的api method區別
如果是需要操作的element的,都必須透過PageObject操作
這樣 PageObject下定義的@id才會有作用
例 loginPage.setValue('@pwdField','12345')
若不是屬於element操作的,則回歸到browser上去操作
因為這部分的function,pageObject沒有
或透過 loginPage.api.pause(10000) 也可
例 browser.pause(10000)
例
module.exports = {
'登入測試':function(browser){
const devServer = browser.globals.getServer()
let loginPage = browser.page.login()
loginPage
.waitForElementVisible('@el', 5000)
.clearValue('@siteField')
.clearValue('@pwdField')
browser.pause(100)
loginPage
.setValue('@pwdField','12345')
.setValue('@siteField', '0910000311')
browser.pause(100)
loginPage.click('@loginBtn')
browser.pause(3000)
.assert.urlEquals(`${devServer}/#store/member/pointBanner`)
.end()
}
}
沒有留言:
張貼留言