Nightwatch101 #16:簡單測試範例

Nightwatch.js

前面談了這麼多東西,我們終於要拚起來玩玩看了。

綜合使用前面篇章所提到的內容,我們來做個範例,重點如下。

♡(´∀ `)人(´∀ `)♡

本系列文章皆使用這個專案,可以拉下來玩玩;有什麼問題都可以提出 issue


範例

露天拍賣的 桌機版購物車 終於上線了,為了慶賀這個 已知用火 的網站擁有如此嶄新的功能,本文範例就來跟大家展示這全新的購物流程吧 XDDD

露天拍賣 桌機版 購物車

這個範例會做以下事情

簡單來說,就是登入 -> 購買商品 -> 確定要買的項目 -> 結帳。

購物車

測試程式的架構如下,這裡會有:鉤子 before(登入)、主要測試程式碼(買東西、進入購物車和結帳)和鉤子 after(登出)。

module.exports = {
  before: function (browser) {
    // 登入
  },
  after: function (browser) {
    // 登出
  },
  'Go Shopping!': (browser) => {
    // 主要測試程式碼(買東西、進入購物車和結帳)
  },
};

依序解析範例程式碼。

鉤子:before

這裡主要是做登入的動作。

流程示意圖。

登入

範例程式碼。

before : function(browser) {
  // 登入
  browser
    .getCookie('login_status_code', result => {
      // 使用 cookie 檢視是否登入露天拍賣,若沒有登入就登入,若已登入則直接進入 Test Case「Go Shopping!」
      if(!result) {
        browser
          .url('https://member.ruten.com.tw/user/login.htm')
          .waitForElementVisible('body') // 使用 <body> 是否可見來確定畫面載入完成
          .clearValue('#userid') // 清空帳號欄位
          .setValue('#userid', 'nightwatch100') // 輸入帳號「nightwatch100」
          .clearValue('#userpass') // 清空密碼欄位
          .setValue('#userpass', 'nightwatch100') // 輸入密碼「nightwatch100」
          .click('.rt-button-submit') // 點擊送出按鈕
          .waitForElementVisible('body') // 登入成功會回到首頁,使用 <body> 是否可見來確定畫面載入完成
          .getTitle(title => {
            browser.assert.equal(title, '露天拍賣-台灣 NO.1 拍賣網站'); // 確認首頁標題是否為「露天拍賣-台灣 NO.1 拍賣網站」
          })
          .waitForElementVisible('#header_user_nick') // 確認左上角是否可見登入帳號
      }
    })
}

Test Case:Go Shopping!

這裡主要做買東西、進入購物車和結帳。

流程示意圖。

Test Case:Go Shopping!

範例程式碼。

'Go Shopping!': browser => {
  browser
    .url('http://goods.ruten.com.tw/item/show?21751464218102') // 商品頁
    .waitForElementVisible('body') // 使用 <body> 是否可見來確定畫面載入完成
    .useXpath() // 切換使用 Xpath 定位網頁元素
    .click('//*[@id="goods-spec-setting"]/div/div[1]/div[1]/div/ul/li[1]/button') // 選規格紅
    .click('//*[@id="goods-spec-setting"]/div/div[1]/div[2]/div/ul/li[2]/button') // 選規格 M
    .click('//*[@id="goods-spec-setting"]/div/div[2]/div/div/div[1]/button[2]') // 商品數量加 1
    .useCss() // 切換回到使用 CSS Selector 定位網頁元素
    .waitForElementVisible('.item-purchase-action')
    .click('.item-purchase-action') // 點擊按鈕「馬上購買」將商品加入購物車
    .waitForElementVisible('body') // 購物車
    .waitForElementVisible('.list-cart-submit')
    .isVisible('.list-cart-submit')
    .click('.list-cart-submit') // 點擊按鈕「確定購買」
    .waitForElementVisible('body') // 結帳頁
    .waitForElementVisible('#deliver_way_rd_F2F')
    .click('#deliver_way_rd_F2F') // 選擇運送方式為「面交取貨付款」
    .clearValue('#username') // 清空收件者姓名欄位
    .setValue('#username', '露小露') // 鍵入「露小露」
    .clearValue('#mobile') // 清空手機號碼欄位
    .setValue('#mobile', '0912345678') // 鍵入「0912345678」
    .pause(5000) // 暫停 5 秒
}

鉤子:after

最後是做登出的動作。

流程示意圖。

登出

範例程式碼。

after : function(browser) {
  // 登出
  browser
    .click('.rt-logo') // 點擊左上角的 logo 回首頁
    .waitForElementVisible('body') // 來到首頁,使用 <body> 是否可見來確定畫面載入完成
    .getTitle(title => {
      browser.assert.equal(title, '露天拍賣-台灣 NO.1 拍賣網站'); // 確認首頁標題是否為「露天拍賣-台灣 NO.1 拍賣網站」
    })
    .click('#header_logout_link') // 點擊登出按鈕
    .end() // 結束 session,關閉瀏覽器
}

點此看完整範例程式碼。

執行測試。

nightwatch test/e2e/mybid/testShoppingCart.js

看測試結果。

簡單測試範例

Wow!我們好棒棒,測試項目都通過了呢!

Wow!我們好棒棒,測試項目都通過了呢!

看測試報告。

簡單測試範例-測試報告

總結

在這裡,我們能夠…

下一篇來看 Nightwatch Test Runner。


2018 鐵人賽網址


Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium 鐵人賽 2018鐵人賽 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文