在部署任何網站之前在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管道中運行類似的測試嗎？如果您有任何好的分享，請告訴我