Accessibility 在 UI 测试中的应用

一说到 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="&nbsp;手气不错&nbsp;" aria-label="&nbsp;手气不错&nbsp;" 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…