在 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'))