Разработали и внедрили систему автоматического тестирования ВСЕХ(!) сайтов с помощью Nightwatch.js и Selenium. Задачи об ошибках ставятся в корпоративную систему управления проектами. Одна задача равна одному типу теста. В тексте задачи разработчик видит список ссылок на страницы, где данный тест провалился.
Автором выступил наш старший разработчик — Егор Лебедев, который по результатам разработки был переаттестован в Ведущего.
Этапы реализации
- Программирование краулера, строящего полную карту сайта.
- Программирование системы выполнения произвольного количества тестов по загруженной в браузер странице.
- Программирование системы, строящей отчеты с ошибками.
- Внедрение, получившегося продукта, в работу(для этого использовались результаты из наших предыдущих крупных инфраструктурных задач: внедрение CI и надстройки над багтрекером).
- Написание ряда общих тестов.
Примеры тестов
- Битые ссылки на сайте
- Тест тэга < / >
- Не у всех < > присутствует атрибут title
- Не у всех < > заполнен title
- Не у всех < > присутствует атрибут href
- Не у всех < > заполнен href
- Сообщить об ошибке
- Отсутствует ссылка "Сообщить об ошибке"
- В ссылке "Сообщить об ошибке" нет параметра email
- В ссылке "Сообщить об ошибке" нет параметра email_required
- Ошибки в консоли
- Тест Doctype
- Не соответствует формату <!DOCTYPE html>
- Отсутствует или есть некорректные символы перед <!DOCTYPE html>
- Favicon
- Отсутсвует favicon
- Отсутсвует favicon 16x16
- Отсутсвует favicon 32x32
- Отсутствует favicon для ios safari
- Отсутствует favicon для ios safari 180x180
- Отсутствует mask icon для safari
- Отсутствует цвет у mask icon для safari
- Отсутствует theme-color
- Отсутствует ms TileColor
- Отсутствует web app manifest для android
- Отсутствует icon для android 192x192
- Отсутствует icon для android 512x512
- Неверный формат site.webmanifest
- Неполное содержимое site.webmanifest, отсутсвуют icons
- Неверный формат browserconfig.xml
- Отсутствует файл msconfig
- Отсутствует файл android manifest
- Битая ссылка на файл внутри манифеста
- Присутствует тег <font>
- <h1> не указан", "<h1> пуст", "<h1> встречается больше чем 1 раз
- Горизонтальный скролл
- Наличие горизонтального скролла при ширине 1024
- Наличие горизонтального скролла при ширине 812
- Наличие горизонтального скролла при ширине 1280
- Наличие горизонтального скролла при ширине 1080
- Наличие горизонтального скролла при ширине 760
- Наличие горизонтального скролла при ширине 667
- Тест тега <img>
-
- Не у всех <img> присутствует атрибут alt
- Не у всех <img> заполнен атрибут alt
- Не у всех <img> присутствует атрибут src
- Не у всех <img> заполнен атрибут src
- Инлайновые стили
- Присутствует атрибут style
- Ссылки на главную страницу
- Ссылок на главную меньше 2 шт. Отсутствуют ссылки в хэдере или футере
- Отсутствует хотя бы 1 ссылка в логотипе
- Проверка наличия tel: и mailto: в телефонных номерах и email
- Есть элементы с номером телефона без tel: в ссылке
- Есть элементы с email адресом без mailto: в ссылке
- Тест meta [name=description
- meta [name=description не задан
- meta [name=description пуст
- Тест meta [name=viewport
- meta [name=viewport не задан
- meta [name=viewport пуст
- meta [name=viewport не правильное значение масштаба области просмотра
- meta [name=viewport неправильное значение масштабирования
- страницыmeta [name=viewport не правильное значение горизонтальной области просмотра
- meta [name=viewport не правильное значение вертикальной области просмотра
- meta [name=viewport значение вертикальной области просмотра не в диапазоне
- meta [name=viewport значение горизонтальной области просмотра не в диапазоне
- Стандарт публикации - логическая вложенность заголовков
- Ошибка вложенности заголовков в паре <h1> <h3>
- Ошибка вложенности заголовков в паре <h1> <h4>
- Ошибка вложенности заголовков в паре <h1> <h5>
- Ошибка вложенности заголовков в паре <h1> <h6>
- Ошибка вложенности заголовков в паре <h2> <h4>
- Ошибка вложенности заголовков в паре <h2> <h5>
- Ошибка вложенности заголовков в паре <h2> <h6>
- Ошибка вложенности заголовков в паре <h3> <h5>
- Ошибка вложенности заголовков в паре <h3> <h6>
- Ошибка вложенности заголовков в паре <h4> <h6>
- Opengraph tags
- Тэг meta property="og:title" присутствует в количестве больше одного
- Тэг meta property="og:description" присутствует в количестве больше одного
- Тэг meta property="og:image" присутствует в количестве больше одного
- Тэг meta property="og:image:width" присутствует в количестве больше одного
- Тэг meta property="og:image:height" присутствует в количестве больше одного
- Тэг meta property="og:type" присутствует в количестве больше одного
- Тэг meta property="og:url" присутствует в количестве больше одного
- Тэг meta property="og:locale" присутствует в количестве больше одного
- Тэг meta property="og:title" отсутствует
- Тэг meta property="og:description" отсутствует
- Тэг meta property="og:image" отсутствует
- Тэг meta property="og:image:width" отсутствует
- Тэг meta property="og:image:height" отсутствует
- Тэг meta property="og:type" отсутствует
- Тэг meta property="og:url" отсутствует
- Тэг meta property="og:locale" отсутствует
- В теге meta property="og:title" отсутствует атрибут content
- В теге meta property="og:description" отсутствует атрибут content
- В теге meta property="og:image" отсутствует атрибут content
- В теге meta property="og:image:width" отсутствует атрибут content
- В теге meta property="og:image:height" отсутствует атрибут content
- В теге meta property="og:type" отсутствует атрибут content
- В теге meta property="og:url" отсутствует атрибут content
- В теге meta property="og:locale" отсутствует атрибут content
- В теге meta property="og:title" атрибут content пустой
- В теге meta property="og:description" атрибут content пустой
- В теге meta property="og:image" атрибут content пустой
- В теге meta property="og:image:width" атрибут content пустой
- В теге meta property="og:image:height" атрибут content пустой
- В теге meta property="og:type" атрибут content пустой
- В теге meta property="og:url" атрибут content пустой
- В теге meta property="og:locale" атрибут content пустой'
- Тэг meta содержит Cetera Wireframes
- Тэг meta ссылается на Cetera Wireframes
- Стандарт публикации - абсолютные ссылки
- Абсолютный путь в атрибуте "href"
- Абсолютный путь в атрибуте "src"
- Абсолютный путь в атрибуте "action"
- В атрибутах присутствует ссылка на beta
- Стандарт публикации - Foundation .responsive-embed
- Тег <iframe> не обёрнут в div.responsive-embed
- Тег <object> не обёрнут в div.responsive-embed
- Тег <embed> не обёрнут в div.responsive-embed
- Стандарт публикации - html символы в title и meta
- Присутствуют HTML символы в meta_description
- Присутствуют HTML символы в meta_keywords
- Присутствуют HTML символы в title
- Стандарты публикации- типографика
- Обнаружен Soft Hyphen (SHY) символ
- Отсутствуют пробельные символы возле тире
- Дефис окружен пробельными символами
- Кавычки не соответствуют стандарту
- Наличие троеточий ... не в один символ: …
- Наличие пробела перед знаком препинания
- Символы +- должны быть объединены в знак ±
- Степень не обрамлена в тег <sup>
- Дроби не заменены специальными символами. Пример: ¼
- Дроби не заменены специальными символами (обратный слэш). Пример: ¼
- Не заменены символы: TM -> ™
- Не заменены символы: (R) -> ®
- Не заменены символы: (C) -> ©
- Стрелка -> не заменена на специальный символ →
- Стрелка <- не заменена на специальный символ ←
- Стрелка <-> не заменена на специальный символ ⇆
- Присутствуют лишние пробелы между словами или цифрами
- Название страницы
- <title> пуст
- W3C
- Не пройдена валидация w3c
В итоге мы получили систему, которая автоматически по некоторому расписанию ходит на ВСЕ (ЭТО КЛЮЧЕВОЕ СЛОВО В СТАТЬЕ, КЛЮЧЕВОЕ ДОСТИЖЕНИЕ ЭТОГО ПРОЕКТА) обслуживаемые нами сайты и тестирует их. Система позволяет писать специфичные тесты под каждый обслуживаемый сайт. От идеи до реализации прошло около года, срок активной разработки — 2-3 месяца.
В планах по дальнейшему развитию написание большего количества тестов.
