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