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

Алексей Малейков
Разработчик в HTML Academy
2016
Радости и гадости
регрессионного
тестирования вёрстки

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

Задача
• 12 000 пользователей записались на курс

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

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

Интерактивные задания на сайте

Проверка
• JavaScript

Проверка
• JavaScript
• DOM

Проверка
• JavaScript
• DOM
• Computed style

Серверная проверка
• PhantomJS

• PhantomJS
• WebKit

• PhantomJS
• WebKit
• JavaScript API

• PhantomJS
• WebKit
• JavaScript API
$ phantomjs /path/to/your/script.js params

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.onConsoleMessage = function(msg) {
console.log(msg);
};
page.onAlert = function(msg) {
console.log(msg);
};
…
});

page.viewportSize = {
width: width,
height: height
};
page.render(output);
}
});
Проверка

ImageMagick
Cреднеквадратическое
отклонение (RMSE)

ImageMagick
$ compare -metric RMSE image1.png image2.png diff.png

ImageMagick
13222.7 (0.201766)

ImageMagick
13222.7 (0.201766)
(1-0.201766) * 100 = ~79%

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

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

• Макет
• Образец вёрстки

• Макет
• Проверка пяти блоков
1
2
3
4
5

• Макет
1. Разметка
1
2
3
4
5

• Макет
1. Разметка
2. Сетка
1
2
3
4
5

• Макет
1. Разметка
2. Сетка
3. Оформление
1
2
3
4
5

• Макет
1. Разметка
2. Сетка
• Проверка страницы целиком
1
2
3
4
5

• Макет
1. Разметка
2. Сетка
• Скриншоты (PhantomJS)
1
2
3
4
5

• Макет
1. Разметка
2. Сетка
• Скриншоты (PhantomJS)
• Сравнение (ImageMagick)
1
2
3
4
5

Работа с архивами
– project.zip
— img/
— css/
— index.html

– project.zip
— img/
— css/
— index.html
– Мой Проект.rar
— Мой проект/
— img/
— css/
— стили.css
— project_index.html

– project.zip
— img/
— css/
— index.html
— img/
— css/
— стили.css
• To zip or not to zip

– project.zip
— img/
— css/
— index.html
— img/
— css/
— стили.css
• To zip or not to zip
• Поиск index.html

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

• Не знаем тегов

• Не знаем тегов
• Знаем только общую структуру

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

body > *:nth-child(2) {
box-shadow: inset 0 0 0 6px #000000;
}

}
body > *:not(:nth-child(2)) {
visibility: hidden;
}

}
body > *:not(:nth-child(2)) {
display: none;
}

page.evaluate(function() {
…
});
page.render(output);
}
});
Скриншоты блоков

Проверка разметки
• Получаем чистый HTML

• Вырезаем все стили

• Вырезаем все стили
• Частично проверяем семантику

page.onResourceRequested = function(data, request) {
if ((/.+.css$/gi).test(data['url'])) {
request.abort();
}
};
…
});

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) {
});

});
});
var styles = document.querySelectorAll('style');
[].forEach.call(styles, function(element) {
});
var attrs = document.querySelectorAll('[style]');
[].forEach.call(attrs, function(element) {
element.removeAttribute('style');
});

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

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

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

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

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

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

// первый уровень
body > * {
box-shadow: inset 0 0 0 4px #cccccc; 
}
body > *::before,
body > *::after {
visibility: hidden;
}

// второй уровень
body > * > * {
box-shadow: inset 0 0 0 4px #ff9999; 
}

// второй уровень
body > * > * {
box-shadow: inset 0 0 0 4px #ff9999; 
}
body > * > *::before,
body > * > *::after {
visibility: hidden;
}

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

body > * > * > * {
}
body > * > * > *::before,
body > * > * > *::after {
visibility: hidden;
}

body > * > * > * {
}
body > * > * > *::before,
body > * > * > *::after {
visibility: hidden;
}
// все уровни глубже
body > * > * > * > * {
visibility: hidden;
}

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

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

Результат

Уровень совпадения — 87%

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

В поисках идеала

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

2. Сетка

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

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

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

• SlimerJS 
slimerjs.org

• SlimerJS 
slimerjs.org
• CasperJS 
casperjs.org

• SlimerJS 
slimerjs.org
• CasperJS 
casperjs.org
• PhantomCSS 
github.com/Huddle/PhantomCSS

• SlimerJS 
slimerjs.org
• CasperJS 
casperjs.org
• PhantomCSS 
• BackstopJS 
garris.github.io/BackstopJS/

• SlimerJS 
slimerjs.org
• CasperJS 
casperjs.org
• PhantomCSS 
• BackstopJS 
garris.github.io/BackstopJS/
• Gemini 
gemini-testing.github.io/gemini/

htmlacademy.ruhtmlacademy htmlacademy_ru

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (14)

Similar to Регрессионное тестирование верстки

Similar to Регрессионное тестирование верстки (20)

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