Logo

菜单

发布于 2026-01-06 0 阅读
0

测试和质量保证

测试和质量保证

介绍

本文将介绍如何测试我们的应用程序和网站是否符合无障碍标准。

“然而，自动化测试并非万能；只有 20% 到 50% 的无障碍问题能够被自动检测出来。例如，我们目前还无法自动比较图片的 alt 属性和内容，而且有些屏幕阅读器测试也需要手动执行。”—— Seren Davies

如您所见，只有 20% 到 50% 的可访问性标准可以通过自动化方式进行测试。因此，自动化测试绝不能完全取代开发过程中的最佳实践，也不能取代在设计和开发阶段通过可用性测试，利用真实用户进行用户测试，并查看真实数据和用户交互。

本文将向您展示如何使用aXe 辅助功能引擎在测试流程的关键领域进行辅助功能测试。

让我们来制作一个非常高级的单页网站：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Greatest website in the world</title>
    <link rel="stylesheet" href="/styles/main.css">
</head>
<body>
    <h1>My awesome product</h1>
    <small>Why didn't anyone make this sooner?</small>
    <img src="https://fillmurray.com/500/500" />
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

styles/main.css

h1 {
    font-size: 3rem;
}

small {
    color: lightgrey;
}
Enter fullscreen mode Exit fullscreen mode

当我们在浏览器中打开 index.html 文件时，我们看到的是一个非常棒的网站，对吧？至少，它目前能够满足我们的需求。

测试

在开始编写测试之前，请确保您已正确安装node.js。

假设你确实需要这样做，让我们npm init -y在当前已切换到我们项目的终端中运行。

现在运行以下命令：

npm install selenium-webdriver axe-webdriverjs chromedriver -D
Enter fullscreen mode Exit fullscreen mode 
npm install express -S
Enter fullscreen mode Exit fullscreen mode

然后我们需要安装要测试的浏览器的二进制文件，这些文件可以在Selenium webdriver 文档中找到。

成功安装所选二进制文件后，打开package.json项目根目录中的文件。

它应该看起来像这样：

{
  "name": "testing",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "axe-webdriverjs": "^2.0.1",
    "selenium-webdriver": "^4.0.0-alpha.1",
    "chromedriver": "^2.41.0"
  },
  "dependencies": {
    "express": "^4.16.3"
  }
}
Enter fullscreen mode Exit fullscreen mode

现在，scripts让我们在该部分添加以下几行：

"scripts": {
  "test": "npm run test:accessibility",
  "test:accessibility": "TEST_URL=localhost:3000 node ./tests/accessibility",
  "start:dev": "PORT=3000 node .",
  "start:prod": "node ."
}
Enter fullscreen mode Exit fullscreen mode

现在我们的代码package.json应该看起来像这样：

{
  "name": "testing",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "npm run test:accessibility",
    "test:accessibility": "TEST_URL=localhost:3000 node ./tests/accessibility",
    "start:dev": "PORT=3000 node .",
    "start:prod": "node ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "axe-webdriverjs": "^2.0.1",
    "selenium-webdriver": "^4.0.0-alpha.1",
    "chromedriver": "^2.41.0"
  },
  "dependencies": {
    "express": "^4.16.3"
  }
}
Enter fullscreen mode Exit fullscreen mode

现在我们将创建服务器：

index.js

const express = require("express");
const app = express();
const port = process.env.PORT || 8080;

app.use("/styles", express.static("styles"));

app.get("/", (request, response, nextRoute) => {
    response.sendFile(`${__dirname}/index.html`);
 });


app.listen(port, () => {
    console.log(`app listening on port: ${port}`)
});
Enter fullscreen mode Exit fullscreen mode

最后，我们可以npm run start:dev在终端中输入内容，然后导航到localhost:3000，应该就能看到我们可爱的网站正常运行了！

好了，现在我们的设置已经完成，让我们进入有趣的部分，编写一个简单的测试来显示我们这个简单的页面包含的所有违规行为。

tests/accessibility/index.js

const AxeBuilder = require('axe-webdriverjs');
const { Builder } = require('selenium-webdriver');

async function TestPageByUrl(url) {
  const driver = await new Builder()
  .forBrowser('chrome')
  .build();

  try {
      await driver.get(url);

      const { violations } = await AxeBuilder(driver).analyze();

      if(violations.length > 0) {
        console.log(
          JSON.stringify(violations, null, 4)
        );
        process.exitCode = 1;
      }
    } catch(error) {
      throw new Error(error);
    } finally {
      await driver.close();
      await driver.quit();
    }
}

TestPageByUrl(process.env.TEST_URL)
  .catch(console.error);
Enter fullscreen mode Exit fullscreen mode

使用这种方法，我们可以确保测试运行正常时不会出现任何问题，但如果出现违规，脚本driver正确关闭实例后，我们可以干净利落地退出进程。这意味着，在我们的流水线中，如果给定的 URL 中存在任何违规，测试都会明显失败。

使用这种方法，你还可以创建一个包含tests/accessibility/routes.js路由数组的文件，并依次测试每个路由。或者，你还可以更进一步，使用 Selenium 和 Axe 驱动程序 API 添加集成测试和验收测试，以测试整个核心用户流程，但这与本文的讨论范围略有偏离。

正如你所看到的，获取结果非常容易，你可以根据返回的数据做很多事情，例如生成文档或使用 JIRA API 为每个问题创建工单。

除此之外，如果我们停止服务器实例，然后npm run start:dev在终端中重新运行，并在新窗口中运行测试npm run test:accessibility，我们将看到出现了一些问题：让我们来解决这些问题！

修正结果

图片必须有替代文字

让我们修改图片并添加替代文字。

  <img 
    src="https://fillmurray.com/500/500"
    alt="Bill Murray portrait" />
Enter fullscreen mode Exit fullscreen mode

确保前景和背景颜色之间的对比度符合 WCAG 2 AA 对比度阈值。

让我们更改小标签的颜色

small {
  color: #666;
}
Enter fullscreen mode Exit fullscreen mode

确保所有内容都包含在地标区域内

让我们用标签包裹我们的内容main：

<main>
  <h1>My awesome product</h1>
  <small>Why didn't anyone make this sooner?</small>
  <img 
    src="https://fillmurray.com/500/500"
    alt="Bill Murray portrait" />
</main>
Enter fullscreen mode Exit fullscreen mode

现在运行程序后，npm run test:accessibility我们会看到没有显示任何错误，做得好！

GitLab CI 流水线（持续集成流水线）

由于我经常在需要时使用 Gitlab 或 Travis 来构建流水线，根据我的经验，我认为 Gitlab 是最容易设置的，并且下面的 yaml 文件一旦推送到您的 Gitlab 仓库，基本上就可以运行我们上面详细介绍的所有测试。

image: node:9.4.0

cache:
  paths:
    - node_modules/

stages:
  - testAccessibility

TestAccessibility:
  stage: testAccessibility
  tags:
    - node
  before_script: 
    - npm install
  script:
    - npm run test:accessibility
Enter fullscreen mode Exit fullscreen mode

一旦推送完成，gitlab 将运行我们所有的测试，如果我们的流水线通过了，我们就实现了大量的可访问性测试，这将帮助我们通过自动化持续推送尽可能易于访问的内容，非常棒，对吧？

结论

如您所见，完成初始设置后，自动化无障碍测试非常简单，而且非常值得实施。aXe 的使用体验非常直观，我个人认为它是目前市场上最好的解决方案。不妨在您的网站或应用程序上试用一下，看看整体效果如何，并不断迭代改进。相信最终您会收获丰厚的回报：用户满意度更高，更多用户能够参与其中，一切都会因为您的努力而变得更好。

资源

文章来源：https://dev.to/jamesrweb/accessibility-101---testing-and-qa-595o
别找借口，写单元测试
Vim概述