一说到 Accessibility 或 A11y 或 可拜访性 或 无妨碍拜访，或许你就会想到这是针对有阅读妨碍的用户的技术，但其实 Accessibility 的目标是让所有人（无论是一般人仍是有妨碍的朋友）都能在网站上便捷获取信息。
本文描绘了怎么将 Accessibility 运用在 UI 测验中，然后提升测验的安稳性以及对测验的决心。
传统的 UI 测验
不管是组件测验仍是端到端（End To End）测验，咱们一般都会要先挑选到元素，然后再进行操作和验证。传统的挑选元素的战略有：
| 定位器 | HTML |
|---|---|
| class 名称 | <button class="btn btn-primary">按钮</button> |
| css 挑选器 | <div class="btn-group"><button class="btn btn-primary">Primary</button></div> |
| id 特点 | <div id="my-btn">按钮</div> |
| name 特点 | <input name="account"> |
| tag 名称 | <div>按钮</div> |
| xpath | /html/body/div[1]/div[3]/input |
| … | … |
假如你编写过 UI 测验，肯定会知道上面很多方法都是不安稳的，会随着代码的重构更改而改变，然后导致测验代码失利，可是这种失利是无意义的。例如：
<button class="btn btn-primary">按钮</button>
变为
<button class="btn btn-secondary">按钮</button>
此刻经过 css 挑选器来获取元素就会失利，可是按钮对应的功能并没有改变。
更靠近用户的 UI 测验
为了能让测验代码变得易保护和安稳，咱们不妨测验从用户的角度来考虑，一个用户如安在页面上找到对应的元素呢？
以 Google 主页为例，用户怎么找到输入框和查找按钮呢？
用户一般会根据其外观，文字，以及交互来判断元素的类别。例如，输入框是矩形框，鼠标移上去会高亮边框，鼠标变成指针形状，点击获取焦点会能够承受输入内容；再如按钮是矩形框，内有文字，鼠标移上去会高亮布景，鼠标指针变成手型。
那怎么经过代码的方法来模仿用户查找和挑选元素呢？咱们需求 WAI-ARIA。
WAI-ARIA
WAI-ARIA 是 A11y 运用规范，运用好这些技术细则，任何人都能够方便能轻松拜访咱们的运用。以下是规范里的两个主要特征：人物（Roles）和状况与特点（States and Properties）。
例如输入框的代码：
<input class="gLFyf gsfi" jsaction="paste:puy29d;" maxlength="2048" name="q" type="text" aria-autocomplete="both" aria-haspopup="false" autocapitalize="off" autocomplete="off" autocorrect="off" autofocus="" role="combobox" spellcheck="false" title="Google 查找" value="" aria-label="查找" data-ved="0ahUKEwiTmfO_v4z7AhW6mFYBHbZHAkwQ39UDCAQ">
和按钮的代码：
<input class="RNmpXc" value=" 手气不错 " aria-label=" 手气不错 " name="btnI" type="submit" jsaction="trigger.kWlxhc" data-ved="0ahUKEwiTmfO_v4z7AhW6mFYBHbZHAkwQ19QECBE">
基于人物（combobox） 和 特点（aria-label），再结合 Testing Library 结构，咱们能够运用其供给的 API：
getByRole('combobox', { name: /查找/i })
来查找到输入框元素。
类似按钮也能够经过：
getByRole('button', { name: /google 查找/i })
来挑选按钮元素。
咱们能够看到基于人物和特点的查询元素方法是比较安稳的，一起也更靠近用户在页面查找元素的方法。
更多示例
1. 挑选标签页（Tab）中已选中的元素
UI 图：
ITEM ONE 项现已被选中。
UI 暗示代码：
这时咱们能够运用 aria-selected 来标识被选中元素。
<div role="tablist">
<button role="tab" aria-selected="true">ITEM ONE</button>
<button role="tab" aria-selected="false">ITEM TWO</button>
<button role="tab" aria-selected="false">ITEM THREE</button>
</div>
挑选元素：
getByRole('tab', { selected: true })
2. 挑选下拉框勾选的项
UI图：
Van Henry 项被勾选了。
这时咱们能够运用 aria-checked 来标识已勾选的元素。
UI 暗示代码：
<ul role="listbox">
<li role="option" aria-checked="false">Oliver Hansen</li>
<li role="option" aria-checked="true">Van Henry</li>
<li role="option" aria-checked="false">April Tucker</li>
<li role="option" aria-checked="false">Ralph Hubbard</li>
</ul>
挑选元素：
getByRole('option', { checked: true })
3. 侧边栏中的选中链接
UI 图：
Dashboard 链接被挑选。
UI 暗示代码：
这时咱们能够运用 aria-current 来标识被选中元素：
<nav>
<a href="current/page" aria-current="true">Dashboard</a>
<a href="another/page1">User</a>
<a href="another/page2">Product</a>
<a href="another/page3">Blog</a>
</nav>
挑选元素：
getByRole('link', { current: true })
4. 挑选开关（Toggle）按钮中已选中的元素
UI 图：
UI 暗示代码：
这时咱们能够运用 aria-pressed 来标识被选中元素：
<div role="group">
<button aria-pressed="true">左对齐</button>
<button>右对齐</button>
<button>居中</button>
</nav>
挑选元素：
getByRole('button', { pressed: true })
5.挑选折叠面板打开的项
UI 图：
UI 暗示代码：
这时咱们能够运用 aria-expanded 来标识被打开的元素：
<ul>
<li>
<a aria-expanded="true" href="..."
>Accordion 1</a
>
<ul>
<li><a href="#">Submenu Item 1</a></li>
<li><a href="#">Submenu Item 1</a></li>
</ul>
</li>
<li><a href="#">Accordion 2</a></li>
</ul>
挑选元素
getByRole('link', { expanded: true })
总结
经过结合 Accessibility 和 UI 测验的例子，咱们不难发现这是一种愈加安稳、更靠近用户运用方法的方式来编写测验代码，一起咱们也反思咱们运用的可拜访是否合理，可谓是一箭双雕。
Testing-Library 作为组件测验的事实上的规范，而且MUI 和 Antd 都在运用其作为组件测验依靠，它遵循以下原则：
测验代码与页面和组件被运用的方法越挨近，测验代码能保证质量的决心就也大。
Testing-Library 鼓舞你避免测验组件的细节，例如内部状况，内部方法，声明周期函数等。
Testing-Library 一起支撑 React, Angular, and Vue 等盛行 UI 结构。
更多的示例和详细的 API 运用能够参考：
Testing-Library 官方文档 和 Testing-Library 中文文档
想要了解更多关于人物（Roles）和状况特点：
www.w3.org/TR/2014/REC…
www.w3.org/TR/2014/REC…
资料参考：
developer.mozilla.org/en-US/docs/…
developer.mozilla.org/en-US/docs/…
/post/684490…
