Из доклада вы узнаете как мы на Lenta.ru автоматизировали тестирование компонентов верстки и через slack оповещаем команду об изменениях в верстке.

1. Павел Кондратенко
twitter: @mrgustarus | iam@kondratenko.me
Регрессионное тестирование на
MoscowJS, 25 августа, 2016

4. 1 500 000+ уникальных посетителей ежедневно

5. Технологии
5

6. Проблема
6
После правок нужно тестировать то, что уже
протестировано ранее

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

8. Зачем нужно регрессионное
тестирование?

9. Первый пример
9

10. Второй пример
10
До внесения правок
После внесения правок правок

11. Что такое регрессионное
тестирование?

12. Регрессионное тестирование
12
Вид тестирования направленный на проверку того факта, что
существующая ранее функциональность работает как и прежде.

13. Что используется у нас на
проекте?

14. Тестирование на lenta.ru
14
Unit тестирование компонентов

15. Тестирование на lenta.ru
15
Тестирование компонентов верстки

16. Как это выглядит на нашем
проекте?

17. Нашли место с ошибкой
17
.b-footer__orphus-label
.b-footer__orphus-strong Нашли опечатку? <br/
| Orphus: Ctrl+Enter

18. Исправили ошибку и сделали push
18
.b-footer__orphus-label
.b-footer__orphus-strong Нашли опечатку? <br/>
| Orphus: Ctrl+Enter

19. В slack упало уведомление
19

20. Скриншоты из уведомления
20
До внесения правок
После внесения правок
Результат теста

21. В slack упало уведомление
21

22. Как это реализовано на нашем
проекте?

24. Список билдов в pipelines

25. Схема тестирования верстки
Build frontend-regression #17661

26. Схема тестирования верстки
Build frontend-regression #17661

27. Схема тестирования верстки
Production версия
Build frontend-regression #17661

28. Схема тестирования верстки
Production версия Development версия
Build frontend-regression #17661

29. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661

30. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master

31. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s

32. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта

33. Процесс сборки скриншотов с сайта

34. Процесс сборки скриншотов с сайта

35. Процесс сборки скриншотов с сайта

36. Процесс сборки скриншотов с сайта

37. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта

38. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта
$ git checkout 07e2422ce4e23b --force
4. Получение конкретного коммита

39. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта
$ git checkout 07e2422ce4e23b --force
4. Получение конкретного коммита
5. Сборка и запуск проекта
$ npm run build && rails -s

40. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта
$ git checkout 07e2422ce4e23b --force
4. Получение конкретного коммита
5. Сборка и запуск проекта
$ npm run build && rails -s
6. Сборка скриншотов с сайта

41. Схема тестирования верстки
Production версия Development версия
Build frontend-regression #17661

42. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта
$ git checkout 07e2422ce4e23b --force
4. Получение конкретного коммита
5. Сборка и запуск проекта
$ npm run build && rails -s
6. Сборка скриншотов с сайта

43. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта
$ git checkout 07e2422ce4e23b --force
4. Получение конкретного коммита
5. Сборка и запуск проекта
$ npm run build && rails -s
6. Сборка скриншотов с сайта
7. Сравнение скриншотов и поиск отличий

44. Сравнение блоков
До внесения правок
После внесения правок
Результат теста

45. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта
$ git checkout 07e2422ce4e23b --force
4. Получение конкретного коммита
5. Сборка и запуск проекта
$ npm run build && rails -s
6. Сборка скриншотов с сайта
7. Сравнение скриншотов и поиск отличий

46. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта
$ git checkout 07e2422ce4e23b --force
4. Получение конкретного коммита
5. Сборка и запуск проекта
$ npm run build && rails -s
6. Сборка скриншотов с сайта
7. Сравнение скриншотов и поиск отличий
8. Отправка отчета с картинками в slack

47. Как выглядит отчет в slack

49. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта
$ git checkout 07e2422ce4e23b --force
4. Получение конкретного коммита
5. Сборка и запуск проекта
$ npm run build && rails -s
6. Сборка скриншотов с сайта
7. Сравнение скриншотов и поиск отличий
8. Отправка отчета с картинками в slack

50. Схема тестирования верстки
Production версия
На нашем проекте это ветка master
Development версия
Ваш последний коммит
Build frontend-regression #17661
$ git checkout master --force
1. Получение актуальной версии master
2. Сборка и запуск проекта
$ npm run build && rails -s
3. Сборка скриншотов с сайта
$ git checkout 07e2422ce4e23b --force
4. Получение конкретного коммита
5. Сборка и запуск проекта
$ npm run build && rails -s
6. Сборка скриншотов с сайта
7. Сравнение скриншотов и поиск отличий
8. Отправка отчета с картинками в slack

51. На этапе доработки

52. Проблемы внедрения

53. Проблема #1 - BackstopJS из коробки не для команды
53
Как предлагают сделать создатели BackstopJS

54. Проблема #1 - BackstopJS из коробки не для команды
54
Как предлагают сделать создатели BackstopJS
1. Вы делаете эталонные скриншоты на своей машине.

55. Проблема #1 - BackstopJS из коробки не для команды
55
Как предлагают сделать создатели BackstopJS
2. Делаете commit и отправляете их в репозитарий.
1. Вы делаете эталонные скриншоты на своей машине.

56. Проблема #1 - BackstopJS из коробки не для команды
56
Как предлагают сделать создатели BackstopJS
Как есть на самом деле
2. Делаете commit и отправляете их в репозитарий.
1. Вы делаете эталонные скриншоты на своей машине.

57. Проблема #1 - BackstopJS из коробки не для команды
57
Как предлагают сделать создатели BackstopJS
Как есть на самом деле
2. Делаете commit и отправляете их в репозитарий.
1. Вы делаете эталонные скриншоты на своей машине.
3. Другой разработчик сливает себе скриншоты.

58. 4. Запускает тесты и они падают, так как у него windows,
а у вас unix и сайт рисуется по-разному.
Проблема #1 - BackstopJS из коробки не для команды
58
Как предлагают сделать создатели BackstopJS
Как есть на самом деле
2. Делаете commit и отправляете их в репозитарий.
1. Вы делаете эталонные скриншоты на своей машине.
3. Другой разработчик сливает себе скриншоты.

59. 59
Как предлагают сделать создатели BackstopJS
Как есть на самом деле

60. Проблема #2 - Автоматизация тестирования
60
Помните этот слайд?

61. Проблема #2 - Автоматизация тестирования
61
Помните этот слайд?
Вот это все без скрипта - вручную

62. Проблема #3 - Удобство для команды
62

63. Проблема #3 - Удобство для команды
63
1. Сообщение должно быть сжатым и информативным.

64. Проблема #3 - Удобство для команды
64
2. Нужно облако для картинок или доступ к серверу через web.
1. Сообщение должно быть сжатым и информативным.

65. Минусы и плюсы

66. Минусы
66

67. Минусы
67
1. Потратил много времени - две или три недели.

68. Минусы
68
2. Несколько раз переписывал функционал.
1. Потратил много времени - две или три недели.

69. Минусы
69
3. Реальная польза только на ранее реализованном функционале.
2. Несколько раз переписывал функционал.
1. Потратил много времени - две или три недели.

70. Минусы
70
3. Реальная польза только на ранее реализованном функционале.
2. Несколько раз переписывал функционал.
1. Потратил много времени - две или три недели.
Все минусы - на этапе внедрения.

71. Плюсы
71

72. Плюсы
72
1. Уже выявили несколько косяков до релиза.

73. Плюсы
73
2. Появилась возможность проверить за собой без QA.
1. Уже выявили несколько косяков до релиза.

74. Плюсы
74
3. Все делается в автоматическом режиме, не нужно следить.
2. Появилась возможность проверить за собой без QA.
1. Уже выявили несколько косяков до релиза.

75. Плюсы
75
3. Все делается в автоматическом режиме, не нужно следить.
2. Появилась возможность проверить за собой без QA.
1. Уже выявили несколько косяков до релиза.
4. Повысилось качество работы разработчиков.

76. Плюсы
76
3. Все делается в автоматическом режиме, не нужно следить.
2. Появилась возможность проверить за собой без QA.
1. Уже выявили несколько косяков до релиза.
4. Повысилось качество работы разработчиков.
Все плюсы - после внедрения.

77. Резюме

78. Регрессионное тестирование
78
Starter kit

79. Регрессионное тестирование
79
1. Установить BackstopJS и зависимости.
+

80. Регрессионное тестирование
80
2. Указать url страниц.

81. Регрессионное тестирование
81
3. Указать селекторы блоков для тестирования.

82. Регрессионное тестирование
82
Готово!

83. T H I S I S T H E E N D

84. Материалы из презентации и контакты
84
Контакты, ссылки по теме
и сама презентация
Адрес для любых вопросов
и предложений
Профиль linkedin https://ru.linkedin.com/in/kondratenkopa
iam@kondratenko.me
http://goo.gl/UNeQV2