iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 1
0
Modern Web

Nightwatch.js 實務入門經驗分享系列 第 4

[Nightwatch 新手紀實] 測試表單

這兩個月寫前端 E2E 測試,以前端的角度來說,覺得表單測試是寫起來 cp 值最高的部分了 ~~ !
在接口不單一的前端裡,表單算是接口比較單一的部分。而需求更動的幅度來說,各種表單,就算是行銷頁的表單好了,行銷與 Art 更改的幅度也比較低。
而測試情境也是很實在有效益的,表單正確送出、行銷代碼的正確性都會影響後續業績。算是寫起來爽度最高、使用需求最高的測試。

表單輸入測試

表單輸入主要就 waitForElementPresent 後 click 或 setValue,這兩個功能。

  • waitForElementPresent
    有時候 selector, radio 或 checkbox 的選項是需要 call Api 、等 Api 吐的,這時要先 waitForElementPresent 等選項出現:
this
  .waitForElementPresent('@demand1', 20000)  
  // 發現當 test case 一多,一起跑的時候,會比較卡,所以秒數設多一點 20000
  • setValue
    Input text 和 selector 都用 setValue
this
  .setValue('@name', `測試 - ${new Date().getMonth() + 1}/${new Date().getDate()}`)
  // 要讓測試有明顯區別,可以在姓名欄位加上今天的日期
  • click
    Input radio 和 checkbox 則用 click
this
  .click('@demand1')

表單驗證測試

表單驗證則抓錯誤提示 css selector 有沒有出現:

/** 
 * 操作流程:
 * 檢查 -> 所有選項取消選取 
 * 點擊確認 btn 
 * 檢查 -> 是否跳出警告視窗?文字內容正確嗎? 
 */
this
  .click('@submitBtn')
  .waitForElementVisible('@errorAlert', 20000)
  .assert.elementPresent('@errorAlert')
  .assert.containsText('@errorAlert', '請選擇一項')

驗證碼

驗證碼的部分,在規劃測試時有兩種方式:

  1. 請 Api 人員那邊固定測試區的驗證碼後,就打那隻過去:這邊用在表單送出後還需要測試導頁正不正確、或是測試 url 上的行銷代碼 query。

  2. 亂打驗證碼送出,測『前端送出去的值』正不正確就好:當測試的情境一多,表單送出後所有的測試人員都會收到信、pm 需要後台的測試資料時,在測試區打真的驗證碼送出去,反而讓大家不方便。在 Api 已經有寫測試之下,前端就可以只測到送出的值正不正確就好。

browser.execute(function() {
  // XMLHttpRequest.prototype.realSend 改寫這個 prototype
  XMLHttpRequest.prototype.realSend = XMLHttpRequest.prototype.send
  XMLHttpRequest.prototype.send = function(value) {         
    let formData = JSON.parse(value)                
    formData.captcha = { // Api 人員那邊固定測試區的驗證碼      
        "key" : "CAPTCHA",        
        "val" : "12345"        
    }        
    this.realSend(JSON.stringify(formData));    
  }
}, [], ()=> {    
    callbackFn()
})

後記:

https://www.npmjs.com/package/nightwatch-xhr 這個新的套件支援 nightwatch xhr


上一篇
[Nightwatch 新手紀實] 好想用 es6!Babel
系列文
Nightwatch.js 實務入門經驗分享4
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言