Тестирование CSS-регрессий с Gemini — Сергей Татаринцев
4 likes•737 views
Документ описывает тестирование CSS-регрессий с использованием инструмента Gemini, разработанного для автоматизации процесса тестирования верстки в различных браузерах. В нем обсуждаются проблемы ручного тестирования, преимущества автоматизации и детали работы с Gemini, включая создание тестовых наборов и управление состояниями элементов. Также приведены ссылки на существующие инструменты и руководство по тестированию различных состояний веб-компонентов.
Тестирование CSS-регрессий с Gemini — Сергей Татаринцев
- 1. Тестирование CSS-регрессий с gemini Сергей Татаринцев, Яндекс Я.Cубботник в Киеве, 22 ноября
- 2. О чем рассказ Зачем тестировать верстку? Как это делать? Какие есть инструменты для этого? Почему мы сделали свой? Как им пользоваться? Как считать покрытие? 2
- 4. Библиотеки 4 библиотеки 62 блока Более 15 браузеров в поддержке Преимущественно ручное тестирование 4
- 5. Тестировать вручную — долго и ненадежно 5
- 6. 6
- 8. Регрессии в СSS – ??? 8
- 9. 9
- 10. Писать обычные тесты? 10 getComputedCss(block).borderWidth.should.be('2px')
- 12. Чего хочется? 12
- 13. Тестировать в разных браузерах 13
- 14. Браузер, в котором мы 14
- 15. Все остальные 15
- 17. Страница 17
- 18. Много страниц 18
- 19. Поломка ✘ 19
- 20. Все плохо ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ 20
- 21. Плохо не все ✘ ✓ ✓ ✓ 21
- 23. Нельзя тестировать ничего Нельзя тестировать 23
- 24. Что-то протестировать Нельзя тестировать 24 Можно тестировать Можно тестировать Можно тестировать
- 25. Тестирование в различных состояниях 25
- 26. Просто ссылка Ссылка Ссылка Ссылка Ссылка 26
- 27. Эталонные скриншоты хранить в репозитории 27
- 28. Это быстрее 28
- 29. git checkout long-time-ago 29
- 30. 30
- 32. DPXDT github.com/bslatkin/dpxdt Не нужен код тестов Нужен эталонный URL Скриншоты всей страницы В начальном состоянии 32
- 33. casper.js + phantom.css github.com/Huddle/PhantomCSS Снимает фрагменты Тестирование различных состояний Только в phantom.js 33
- 34. Huxley github.com/facebook/huxley Не нужен код тестов Тестирование различных состояний Скриншот всей страницы Один браузер 34
- 35. Сравнение dpxdt phantom.css Huxley Разные браузеры ✘ ✘ ✘ Сравнение фрагментов ✘ ✘ Скриншоты в репозитории ✘ Различные состояния ✘ JavaScript ✘ ✘ 35
- 36. WebDriverCSS Выпущен одновременно с нашим инструментом Нет «умного» diff Нет подсчета покрытия Нет GUI Не учитывает outline и box-shadow Есть возможность исключить область 36
- 37. gemini Наш opensource инструмент для 37
- 38. Состоит из 38
- 39. Diff изображений 39 rgb(127, 127, 255) rgb(125, 125, 255)
- 40. Diff изображений 40 Одинаковые картинки
- 41. Для работы с 41 github.com/bem/png-img github.com/SevInf/looks-same
- 42. Работа с gemini 42
- 43. Схема работы Тестовый набор Состояние 1 Действия Состояние 2 Действия Состояние N Действия 43
- 44. Текстовое поле plain focused Нажать левую кнопку text Ввести текст 44
- 45. Создание набора var gemini = require('gemini'); gemini.suite('input', function(suite) { }); 45
- 48. Захват начального состояния suite.capture('plain'); 48
- 49. Состояние с действиями suite.capture('focus', function(actions) { }); 49
- 50. Действия suite.capture('focus', function(actions) { actions.click('.text-field'); }); 50
- 51. find suite.capture('text', function(actions, find) { actions.sendKeys(find(‘.text-field’), 'Hi!'); }); 51
- 52. before suite.before(function(actions, find) { this.field = find('.text-field'); }); 52
- 53. Финальный вариант var gemini = require('gemini'); gemini.suite('text-field', function() { suite.setUrl('/some/url') .setCaptureElements('.text-field') .before(function(actions, find) { this.field = find('.text-field'); }) .capture('plain') .capture('focus', function(actions, find) { actions.click(this.field); }) .capture('text', function(actions, find) { actions.sendKeys(this.field, 'Hi!'); }); }); 53
- 54. Демо 54
- 55. Кнопка 55
- 56. CSS Кнопки button { background: linear-gradient(...); border: 3px solid #cccccc; line-height: 31px; font-size: 15px; outline: 0; } button:hover { border-color: #999999; } button:active { background: linear-gradient(...); border-color: #999999; } 56
- 57. gather 57
- 58. Правка button { background: linear-gradient(...); border: 3px solid #cccccc; border: 0; box-shadow: 0 0 0 3px solid #cccccc; line-height: 31px; font-size: 15px; outline: 0; } button:hover { border-color: #999999; } button:active { background: linear-gradient(...); border-color: #999999; } 58
- 59. test 59
- 60. html-отчет 60
- 61. Исправление button:hover { box-shadow: 0 0 0 3px solid #999999; } button:active { background: linear-gradient(...); box-shadow: 0 0 0 3px solid #999999; } 61
- 62. test (снова) 62
- 64. GUI 64
- 66. Покрытие кода 66
- 67. CSS .first { … } .second { … } .third { … } 67
- 68. Пример 68 First Second Third
- 69. Пример 69 First Second Third
- 70. Пример 70 First Second Third
- 71. Отчет .first { … } 71 .second { … } .third { … }
- 72. Где взять? ru.bem.info/tools/testing/gemini/ github.com/bem/gemini 72
- 73. Сергей Татаринцев Яндекс @SevInf SevInf [email protected] 73