Радости и гадости регрессионного тестирования вёрстки

Совместно с платформой Открытое образование мы запустили курс, посвященный основам HTML и CSS. Уже на момент регистрации на этот курс записалось более 12 тысяч студентов. Перед нами стояла задача разработать систему, которая будет автоматически проверять итоговые проекты на соответствие заранее подготовленному макету. В качестве основной техники для проверки было выбрано регрессионное тестирование.

О том, от чего мы отталкивались при построении этой системы, как мы разбирали и анализировали проекты. Какие инструменты и технологии мы для этого использовали и почему. Какие подводные камни вылезали и какие возникали проблемы.

Transcript

1. Алексей Малейков Разработчик в HTML Academy 2016 Радости и гадости регрессионного тестирования вёрстки
3. Задача • Курс по основам HTML и CSS
4. Задача • Курс по основам HTML и CSS • 12 000 пользователей записались на курс
5. Задача • Курс по основам HTML и CSS • 12 000 пользователей записались на курс • Автоматизация проверки
6. Найди отличия
7. Регрессионное тестирование
8. Регрессионное тестирование
9. Регрессионное тестирование
10. Интерактивные задания на сайте
15. Проверка • JavaScript
16. Проверка • JavaScript • DOM
17. Проверка • JavaScript • DOM • Computed style
18. Серверная проверка • PhantomJS
19. Серверная проверка • PhantomJS • WebKit
20. Серверная проверка • PhantomJS • WebKit • JavaScript API
21. Серверная проверка • PhantomJS • WebKit • JavaScript API $ phantomjs /path/to/your/script.js params
22. var page = require('webpage').create(); page.open(url, function(status) { if (status === 'success') { … } }); Серверная проверка
23. var page = require('webpage').create(); page.open(url, function(status) { if (status === 'success') { var result = page.evaluate(function() { return HtmlacademyTask.runChecks(); }); console.log(result); } }); Серверная проверка
24. var page = require('webpage').create(); page.onConsoleMessage = function(msg) { console.log(msg); }; page.onAlert = function(msg) { console.log(msg); }; page.open(url, function(status) { … }); Серверная проверка
25. Испытания
29. Испытания
30. var page = require('webpage').create(); page.viewportSize = { width: width, height: height }; page.open(url, function(status) { if (status === 'success') { page.render(output); } }); Проверка
31. ImageMagick
32. ImageMagick Cреднеквадратическое отклонение (RMSE)
33. ImageMagick Cреднеквадратическое отклонение (RMSE) $ compare -metric RMSE image1.png image2.png diff.png
34. ImageMagick Cреднеквадратическое отклонение (RMSE) $ compare -metric RMSE image1.png image2.png diff.png 13222.7 (0.201766)
35. ImageMagick Cреднеквадратическое отклонение (RMSE) $ compare -metric RMSE image1.png image2.png diff.png 13222.7 (0.201766) (1-0.201766) * 100 = ~79%
36. Система проверки вёрстки
37. Принцип работы • Макет
38. Принцип работы • Макет • Образец вёрстки
39. Принцип работы • Макет • Образец вёрстки • Проверка пяти блоков 1 2 3 4 5
40. Принцип работы • Макет • Образец вёрстки • Проверка пяти блоков 1. Разметка 1 2 3 4 5
41. Принцип работы • Макет • Образец вёрстки • Проверка пяти блоков 1. Разметка 2. Сетка 1 2 3 4 5
42. Принцип работы • Макет • Образец вёрстки • Проверка пяти блоков 1. Разметка 2. Сетка 3. Оформление 1 2 3 4 5
43. Принцип работы • Макет • Образец вёрстки • Проверка пяти блоков 1. Разметка 2. Сетка 3. Оформление • Проверка страницы целиком 1 2 3 4 5
44. Принцип работы • Макет • Образец вёрстки • Проверка пяти блоков 1. Разметка 2. Сетка 3. Оформление • Проверка страницы целиком • Скриншоты (PhantomJS) 1 2 3 4 5
45. Принцип работы • Макет • Образец вёрстки • Проверка пяти блоков 1. Разметка 2. Сетка 3. Оформление • Проверка страницы целиком • Скриншоты (PhantomJS) • Сравнение (ImageMagick) 1 2 3 4 5
46. Работа с архивами – project.zip — img/ — css/ — index.html
47. Работа с архивами – project.zip — img/ — css/ — index.html – Мой Проект.rar — Мой проект/ — img/ — css/ — стили.css — project_index.html
48. Работа с архивами – project.zip — img/ — css/ — index.html – Мой Проект.rar — Мой проект/ — img/ — css/ — стили.css — project_index.html • To zip or not to zip
49. Работа с архивами – project.zip — img/ — css/ — index.html – Мой Проект.rar — Мой проект/ — img/ — css/ — стили.css — project_index.html • To zip or not to zip • Поиск index.html
50. Чужая вёрстка
51. Чужая вёрстка • Не знаем классов и идентификаторов
52. Чужая вёрстка • Не знаем классов и идентификаторов • Не знаем тегов
53. Чужая вёрстка • Не знаем классов и идентификаторов • Не знаем тегов • Знаем только общую структуру
54. Чужая вёрстка
55. Чужая вёрстка
56. Чужая вёрстка
57. body > *:nth-child(N) { … } Поиск нужных блоков
58. Поиск нужных блоков body > *:nth-child(2) { box-shadow: inset 0 0 0 6px #000000; }
59. Поиск нужных блоков body > *:nth-child(2) { box-shadow: inset 0 0 0 6px #000000; } body > *:not(:nth-child(2)) { visibility: hidden; }
60. Поиск нужных блоков body > *:nth-child(2) { box-shadow: inset 0 0 0 6px #000000; } body > *:not(:nth-child(2)) { display: none; }
61. var page = require('webpage').create(); page.open(url, function(status) { if (status === 'success') { page.evaluate(function() { … }); page.render(output); } }); Скриншоты блоков
62. 1. Разметка
63. Проверка разметки • Получаем чистый HTML
64. Проверка разметки • Получаем чистый HTML • Вырезаем все стили
65. Проверка разметки • Получаем чистый HTML • Вырезаем все стили • Частично проверяем семантику
66. var page = require('webpage').create(); page.onResourceRequested = function(data, request) { if ((/.+\.css$/gi).test(data['url'])) { request.abort(); } }; page.open(url, function(status) { … }); Проверка разметки
67. page.evaluate(function() { var links = document.querySelectorAll('[rel=stylesheet]'); [].forEach.call(links, function(element) { element.parentNode.removeChild(element); }); }); Проверка разметки
68. page.evaluate(function() { var links = document.querySelectorAll('[rel=stylesheet]'); [].forEach.call(links, function(element) { element.parentNode.removeChild(element); }); }); Проверка разметки var styles = document.querySelectorAll('style'); [].forEach.call(styles, function(element) { element.parentNode.removeChild(element); });
69. page.evaluate(function() { var links = document.querySelectorAll('[rel=stylesheet]'); [].forEach.call(links, function(element) { element.parentNode.removeChild(element); }); }); Проверка разметки var styles = document.querySelectorAll('style'); [].forEach.call(styles, function(element) { element.parentNode.removeChild(element); }); var attrs = document.querySelectorAll('[style]'); [].forEach.call(attrs, function(element) { element.removeAttribute('style'); });
70. Проверка разметки
71. Проверка разметки
72. Особенности разметки
73. Особенности разметки
74. <table> <tr> <td>Название</td> <td>Длительность</td> <td>Описание</td> </tr> <tr> <td>Дневное обучение</td> <td>4 года</td> <td>Наиболее интенсивный вариант обучения, для тех, кто не терпит компромиссов ни в чем</td> </tr> </table> Особенности разметки
75. <table> <thead> <tr> <td>Название</td> <td>Длительность</td> <td>Описание</td> </tr> </thead> <tbody> <tr> <td>Дневное обучение</td> <td>4 года</td> <td>Наиболее интенсивный вариант обучения, для тех, кто не терпит компромиссов ни в чем</td> </tr> </tbody> </table> Особенности разметки
76. Особенности разметки
77. 2. Сетки
78. Поиск сеток • Выделяем структурные блоки
79. Поиск сеток • Выделяем структурные блоки • Скрываем все декоративные элементы
80. // первый уровень body > * { background: #333333; box-shadow: inset 0 0 0 4px #cccccc;
 } Поиск сеток
81. // первый уровень body > * { background: #333333; box-shadow: inset 0 0 0 4px #cccccc;
 } body > *::before, body > *::after { visibility: hidden; } Поиск сеток
82. Поиск сеток // второй уровень body > * > * { background: #660000; box-shadow: inset 0 0 0 4px #ff9999;
 }
83. Поиск сеток // второй уровень body > * > * { background: #660000; box-shadow: inset 0 0 0 4px #ff9999;
 } body > * > *::before, body > * > *::after { visibility: hidden; }
84. Поиск сеток // третий уровень body > * > * > * { background: #000066; box-shadow: inset 0 0 0 4px #9999ff;
 }
85. Поиск сеток // третий уровень body > * > * > * { background: #000066; box-shadow: inset 0 0 0 4px #9999ff;
 } body > * > * > *::before, body > * > * > *::after { visibility: hidden; }
86. Поиск сеток // третий уровень body > * > * > * { background: #000066; box-shadow: inset 0 0 0 4px #9999ff;
 } body > * > * > *::before, body > * > * > *::after { visibility: hidden; } // все уровни глубже body > * > * > * > * { visibility: hidden; }
87. // убираем весь текст body, body * { color: transparent; } Поиск сеток
88. Поиск сеток
89. Поиск сеток
90. Поиск сеток
91. Поиск сеток
92. 3. Оформление
93. Проверка оформления Оригинал
94. Проверка оформления Результат
95. Проверка оформления Уровень совпадения — 87%
96. Различия в цветах #6451d5 #7232d8
97. Шрифты
98. В поисках идеала
99. Выбор есть, даже когда нет выбора 1. Разметка
100. Выбор есть, даже когда нет выбора 2. Сетка
101. Выбор есть, даже когда нет выбора 3. Оформление
102. Наши требования • 15 из 17 проверок • 95% совпадения 1 2 3 4 5
103. Наши требования • 12 из 17 проверок • 90% совпадения 1 2 3 4 5
104. Результаты • 12 000 записались на курс • 5 700 начали проходить • 1 000 успешно прошли курс • 830 приступили к итоговому испытанию • 520 успешно прошли итоговое испытание • 10 итоговых испытаний на 100%
105. Регрессионное тестирование • SlimerJS
 slimerjs.org
106. Регрессионное тестирование • SlimerJS
 slimerjs.org • CasperJS
 casperjs.org
107. Регрессионное тестирование • SlimerJS
 slimerjs.org • CasperJS
 casperjs.org • PhantomCSS
 github.com/Huddle/PhantomCSS
108. Регрессионное тестирование • SlimerJS
 slimerjs.org • CasperJS
 casperjs.org • PhantomCSS
 github.com/Huddle/PhantomCSS • BackstopJS
 garris.github.io/BackstopJS/
109. Регрессионное тестирование • SlimerJS
 slimerjs.org • CasperJS
 casperjs.org • PhantomCSS
 github.com/Huddle/PhantomCSS • BackstopJS
 garris.github.io/BackstopJS/ • Gemini
 gemini-testing.github.io/gemini/
110. Вопросы?
111. htmlacademy.ru htmlacademy htmlacademy_ru