Так как я единственный разработчик за своим стартапом, Гифон 🎁 Я должен позаботиться обо всех технических вещах от разработки до развертывания. Несмотря на то, что я следил за лучшими практиками и будьте осторожны с случаями Edge, все же я не доверяю коду, который написал, я написал.
Я добавил несколько тестов в CI, чтобы проверить мой веб -сайт перед развертыванием, и они много раз поймали мои ошибки. Круто то, что многие из этих тестов достаточно общие, чтобы применить к любому веб -сайту, поэтому вам также следует рассмотреть вопрос о их использовании!
1. Проверка разметки
Первым легким низко висящим фруктом является проверка HTML (и CSS/SVG). Большинство шаблонов HTML не обеспечивают действительного HTML, поэтому довольно легко выводить документы с помощью несоответствующих тегов, которые могут быть больными! Гифон использует ReactdomServer , что предотвращает несоответствия тегов, но проверка все еще ловила меня много раз о размещении элементов уровня блока (например, , а также отсутствует alt атрибут в
CI Giffon использует html5validator Инструмент командной строки против сервера разработки. Это в основном называет команды следующим образом:
html5validator --html http://localhost:3000/every/page html5validator --css www/css/*.css html5validator --svg --errors-only www/images/*.svg
2. Обнаружение сообщений об ошибках консоли браузера
Второе общее обнаружение ошибок — проверить консоль браузера. Он сообщает о ошибках времени выполнения JS, а также о разбитых ссылках на изображение, а также некоторые недопустимые заголовки HTTP также.
Способ этого сделать Гиффоном — это использовать Веб -драйвер Селена , перемещается на каждую страницу и вызовы Driver.get_log ("Браузер") , утверждает, что нет журнала.
3. Обнаружение горизонтальных полос прокрутки
Большинство веб -сайтов не используют горизонтальные полосы прокрутки. Это раздражает (особенно на мобильном), когда он появляется из -за ошибок макета.
Опять же, CI Giffon использует селен. CI перемещается на каждую страницу и обнаруживает настоящие горизонтальные полосы прокрутки, утверждая, что следующий код возвращает ноль:
driver.execute_script(
"document.scrollingElement.scrollLeft = 1;" +
"return document.scrollingElement.scrollLeft;"
)
4. Проверка орфографии
Кто не делает опечатки? Это может не быть критическим, но наличие опечаток на вашем веб -сайте дает плохое впечатление посетителям.
CI Giffon использует Библиотека орфографии NPM Анкет Giffon имеет свои текстовые строки пользовательского интерфейса, когда я внедряю поддержку с несколькими языками, поэтому мне легко обратить внимание на все строки и звонить Spellchecker.checksling (str) .
Если у вас нет изолированных строк, вы можете сохранить вывод HTML в качестве файла и использовать старый добрый aspell CLI, чтобы перечислить все слова с ошибками следующим образом:
cat path/to/my.html | aspell --mode=html list
Вы запускаете аналогичные тесты в своих трубопроводах CI? Дайте мне знать, если у вас есть хорошие, чтобы поделиться!
Оригинал: «https://dev.to/andyli/nice-tests-to-run-in-ci-before-deploying-any-website-14o2»