iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

自動化 End-End 測試 Nightwatch.js系列 第 26

自動化 End-End 測試 Nightwatch.js 簡易化 selector

在 E2E 測試撰寫時,前端可以利用 aria-label 或客製化的 testing tag 來方便測試抓取元件

指定 aria-label 可以使一個標籤被標記為特定的字符串,且會替換任何其他原生標記機制

<button
    aria-label="menu"
    class="hamburger">
</button>

這裡僅使用 aria-label
此外,aria-label 另一個用途是使自動閱讀螢幕文字的 Application 可以知道當前物件屬性類別

而 E2E 的部分則可以透過這樣的屬性抓取想要測試的物件:

browser
    .clickDiv('[aria-label="year dropdown"]')
    .clickDiv('[aria-label="month dropdown"]')

而為了簡潔,也可以撰寫一個 pure function

module.exports = type => string => `[aria-${type}="${string}"]`;

隨後即可在其他測試中使用:

const ariaLabel = ariaAttrSelector('label');

browser.clickDiv(ariaLabel('year dropdown'))

上一篇
自動化 End-End 測試 nightwatch-html-reporter
下一篇
自動化 End-End 測試 Nightwatch.js 簡易化 selector
系列文
自動化 End-End 測試 Nightwatch.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言