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

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

3. Задача
• Курс по основам HTML и CSS

4. Задача
• Курс по основам HTML и CSS
• 12 000 пользователей записались на курс

5. Задача
• Курс по основам HTML и CSS
• 12 000 пользователей записались на курс
• Автоматизация проверки

6. Найди отличия

7. Регрессионное тестирование

8. Регрессионное тестирование

9. Регрессионное тестирование

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) {
…
});
Серверная проверка

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. ImageMagick
РезультатОбразец Сравнение
Совпадение — 91%

37. ImageMagick
Совпадение — 63%
Образец СравнениеРезультат

38. ImageMagick
Совпадение — 76%
Образец СравнениеРезультат

39. ImageMagick
Совпадение — 98%
Образец СравнениеРезультат

40. Система проверки вёрстки

41. Принцип работы
• Макет

42. Принцип работы
• Макет
• Образец вёрстки

43. Принцип работы
• Макет
• Образец вёрстки
• Проверка:
1
2
3
4
5

44. Принцип работы
• Макет
• Образец вёрстки
• Проверка:
1. Разметка
1
2
3
4
5

45. Принцип работы
• Макет
• Образец вёрстки
• Проверка:
1. Разметка
2. Сетка
1
2
3
4
5

46. Принцип работы
• Макет
• Образец вёрстки
• Проверка:
1. Разметка
2. Сетка
3. Оформление
1
2
3
4
5

47. Принцип работы
• Макет
• Образец вёрстки
• Проверка
• Скриншоты (PhantomJS)
1
2
3
4
5

48. Принцип работы
• Макет
• Образец вёрстки
• Проверка
• Скриншоты (PhantomJS)
• Сравнение (ImageMagick)
1
2
3
4
5

49. Чужая вёрстка

50. Чужая вёрстка
• Не знаем классов и идентификаторов

51. Чужая вёрстка
• Не знаем классов и идентификаторов
• Не знаем тегов

52. Чужая вёрстка
• Не знаем классов и идентификаторов
• Не знаем тегов
• Знаем только общую структуру

53. Чужая вёрстка

54. Чужая вёрстка

55. Чужая вёрстка

56. body > *:nth-child(N) {
…
}
Поиск нужных блоков

57. Поиск нужных блоков
body > *:nth-child(2) {
box-shadow: inset 0 0 0 6px #000000;
}

58. Поиск нужных блоков
body > *:nth-child(2) {
box-shadow: inset 0 0 0 6px #000000;
}
body > *:not(:nth-child(2)) {
visibility: hidden;
}

59. Поиск нужных блоков
body > *:nth-child(2) {
box-shadow: inset 0 0 0 6px #000000;
}
body > *:not(:nth-child(2)) {
display: none;
}

60. var page = require('webpage').create();
page.open(url, function(status) {
if (status === 'success') {
page.evaluate(function() {
…
});
page.render(output);
}
});
Скриншоты блоков

61. 1. Разметка

62. var page = require('webpage').create();
page.onResourceRequested = function(data, request) {
if ((/.+.css$/gi).test(data['url'])) {
request.abort();
}
};
page.open(url, function(status) {
…
});
Проверка разметки

63. page.evaluate(function() {
var links = document.querySelectorAll('[rel=stylesheet]');
[].forEach.call(links, function(element) {
element.parentNode.removeChild(element);
});
});
Проверка разметки

64. 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);
});

65. 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');
});

66. Проверка разметки

67. Проверка разметки

68. Особенности разметки

69. Особенности разметки

70. <table>
<tr>
<td>Название</td>
<td>Длительность</td>
<td>Описание</td>
</tr>
<tr>
<td>Дневное обучение</td>
<td>4 года</td>
<td>Наиболее интенсивный вариант обучения, для тех, кто не терпит
компромиссов ни в чем</td>
</tr>
</table>
Особенности разметки

71. <table>
<thead>
<tr>
<td>Название</td>
<td>Длительность</td>
<td>Описание</td>
</tr>
</thead>
<tbody>
<tr>
<td>Дневное обучение</td>
<td>4 года</td>
<td>Наиболее интенсивный вариант обучения, для тех, кто не
терпит компромиссов ни в чем</td>
</tr>
</tbody>
</table>
Особенности разметки

72. Особенности разметки

73. 2. Сетки

74. • Выделяем структурные блоки
Поиск сеток

75. • Выделяем структурные блоки
• Скрываем все декоративные элементы
Поиск сеток

76. // первый уровень
body > * {
background: #333333;
box-shadow: inset 0 0 0 4px #cccccc;
}
Поиск сеток

77. // первый уровень
body > * {
background: #333333;
box-shadow: inset 0 0 0 4px #cccccc;
}
body > *::before,
body > *::after {
visibility: hidden;
}
Поиск сеток

78. // второй уровень
body > * > * {
background: #660000;
box-shadow: inset 0 0 0 4px #ff9999;
}
Поиск сеток

79. // второй уровень
body > * > * {
background: #660000;
box-shadow: inset 0 0 0 4px #ff9999;
}
body > * > *::before,
body > * > *::after {
visibility: hidden;
}
Поиск сеток

80. // третий уровень
body > * > * > * {
background: #000066;
box-shadow: inset 0 0 0 4px #9999ff;
}
Поиск сеток

81. // третий уровень
body > * > * > * {
background: #000066;
box-shadow: inset 0 0 0 4px #9999ff;
}
body > * > * > *::before,
body > * > * > *::after {
visibility: hidden;
}
Поиск сеток

82. // третий уровень
body > * > * > * {
background: #000066;
box-shadow: inset 0 0 0 4px #9999ff;
}
body > * > * > *::before,
body > * > * > *::after {
visibility: hidden;
}
// все уровни глубже
body > * > * > * > * {
visibility: hidden;
}
Поиск сеток

83. // убираем весь текст
body, body * {
color: transparent;
}
Поиск сеток

84. Поиск сеток

85. Поиск сеток

86. Поиск сеток

87. Поиск сеток

88. 3. Оформление

89. Проверка оформления
Оригинал

90. Проверка оформления
Результат

91. Проверка оформления
Уровень совпадения — 87%

92. Различия в цветах
#6451d5 #7232d8

93. Шрифты

94. Шрифты

95. Шрифты
Уровень совпадения — 87%

96. В поисках идеальной вёрстки

97. Выбор есть, даже когда нет выбора
1. Разметка

98. Выбор есть, даже когда нет выбора
2. Сетка

99. Выбор есть, даже когда нет выбора
3. Оформление

100. Наши требования
• 15 из 17 проверок
• 95% совпадения
1
2
3
4
5

101. Наши требования
• 12 из 17 проверок
• 90% совпадения
1
2
3
4
5

102. Результаты
• 12 000 записались на курс
• 5 700 начали проходить
• 1 000 успешно прошли курс
• 830 приступили к итоговому испытанию
• 520 успешно прошли итоговое испытание
• 10 итоговых испытаний на 100%

103. Регрессионное тестирование
• SlimerJS
slimerjs.org

104. Регрессионное тестирование
• SlimerJS
slimerjs.org
• GraphicsMagick
graphicsmagick.org

105. Регрессионное тестирование
• CasperJS
casperjs.org

106. Регрессионное тестирование
• CasperJS
casperjs.org
• PhantomCSS
github.com/Huddle/PhantomCSS

107. Регрессионное тестирование
• CasperJS
casperjs.org
• PhantomCSS
github.com/Huddle/PhantomCSS
• BackstopJS
garris.github.io/BackstopJS/

108. Регрессионное тестирование
• CasperJS
casperjs.org
• PhantomCSS
github.com/Huddle/PhantomCSS
• BackstopJS
garris.github.io/BackstopJS/
• Gemini
gemini-testing.github.io/gemini/

109. Вопросы?

110. htmlacademy.ruhtmlacademy htmlacademy_ru