在 E2E 測試撰寫時，除了可以利用 aria-label 外，使用客製化的 testing tag 來抓取測試元件是更好的方式

aria-label

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

為了避免 aria-label 替換的問題，可以使用客製化的 testing tag，如：data-qa

Slack

<button class="c-button-unstyled p-top_nav__button p-top_nav__history_menu" aria-label="顯示歷程" data-qa="top-nav-history-menu" delay="150" aria-haspopup="menu" aria-expanded="false" data-sk="tooltip_parent" type="button"><i class="c-icon c-icon--clock-o" type="clock-o" aria-hidden="true"></i></button>

上面這段截自 slack 的上面的 Navbar

如此 E2E 就可以使用 data-qa 來抓取

browser.click('[data-qa=top-nav-history-menu]')

或是寫成一個 pure function

// dataqa.js

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

// test.spec.js

const dataQa = dataAttrSelector('qa');
browser.click(dataQA('top-nav-history-menu'))