在部署任何网站之前在CI中运行的测试很好
由于我是我创业公司背后唯一的开发人员,Giffon?,我要处理从开发到部署的所有技术问题。虽然我一直在遵循最佳实践并且对边缘情况要小心,但我仍然不相信我写的代码非常多。
我在CI中添加了一些测试以在部署之前检查我的网站,并且他们多次犯了我的错误。很酷的是,许多测试都是通用的,足以适用于任何网站,所以你也应该考虑使用它们
1.标记验证
第一个简单易懂的结果是HTML(和CSS / SVG)验证。大多数HTML模板不强制使用有效的HTML,因此输出标记不匹配的文档非常容易,这可能很难发现 Giffon使用ReactDOMServer来防止标签不匹配,但验证仍然让我多次关注块级元素(例如
- )in
,也失踪了 alt
属性
。
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网络驱动程序,导航到每个页面并调用 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管道中运行类似的测试吗?如果您有任何好的分享,请告诉我