在部署任何网站之前在 CI 中运行的良好测试

还有其他吗？

由于我是Giffon 🎁创业公司的唯一开发者，我必须处理从开发到部署的所有技术事务。虽然我一直遵循最佳实践，并对极端情况保持谨慎，但我仍然不太信任自己编写的代码。

我在 CI 中添加了一些测试来在部署之前检查我的网站，它们多次发现了我的错误。更棒的是，这些测试中的许多都足够通用，适用于任何网站，所以你也应该考虑使用它们！

1. 标记验证

第一个容易实现的简单方法是 HTML（以及 CSS/SVG）验证。大多数 HTML 模板并不强制使用有效的 HTML，因此输出的文档很容易出现标签不匹配的情况，这很难发现！Giffon 使用了ReactDOMServer，它可以防止标签不匹配，但验证仍然多次让我犯了<ul>在 中放入块级元素（例如 ）<p>以及alt中缺少属性的错误<img>。

Giffon 的 CI 使用html5validator命令行工具来验证开发服务器。它的基本调用命令如下：

html5validator --html http://localhost:3000/every/page
html5validator --css www/css/*.css
html5validator --svg --errors-only www/images/*.svg

2. 检测浏览器控制台错误消息

第二个通用错误检测是检查浏览器控制台。它会报告 JS 运行时错误、损坏的图像引用以及一些无效的 HTTP 响应头。

Giffon 的做法是使用Selenium web driver，导航到每个页面并调用driver.get_log("browser")，断言没有日志。

3. 检测水平滚动条

大多数网站不使用水平滚动条。由于布局错误，出现水平滚动条会很烦人（尤其是在移动设备上）。

同样，Giffon 的 CI 使用了 Selenium。CI 会导航到每个页面，并通过断言以下代码返回零来检测水平滚动条的存在：

driver.execute_script(
    "document.scrollingElement.scrollLeft = 1;" +
    "return document.scrollingElement.scrollLeft;"
)

4.拼写检查

谁没犯过拼写错误呢？拼写错误可能不是什么大问题，但网站上出现拼写错误确实会给访客留下不好的印象。

Giffon 的 CI 使用拼写检查器 npm 库。当我实现多语言支持时，Giffon 将其 UI 文本字符串隔离，因此我可以轻松地遍历所有字符串并调用SpellChecker.checkSpelling(str)。

如果您没有隔离字符串，您可以将 html 输出保存为文件，并使用旧的aspell cli 列出所有拼写错误的单词，如下所示：

cat path/to/my.html | aspell --mode=html list

还有其他吗？

你在 CI 管道中运行过类似的测试吗？如果你有什么好的测试可以分享，请告诉我！