Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
"Непрерывная интеграция или "Кто всё сломал?", Виктор Русакович, MoscowJS 23
Next

0

Share

Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, MoscowJs 33

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, MoscowJs 33

  1. 1. Павел Кондратенко twitter: @mrgustarus | iam@kondratenko.me Регрессионное тестирование на MoscowJS, 25 августа, 2016
  2. 2. 1 500 000+ уникальных посетителей ежедневно
  3. 3. Технологии 5
  4. 4. Проблема 6 После правок нужно тестировать то, что уже протестировано ранее
  5. 5. Решение 7 Регрессионное тестирование
  6. 6. Зачем нужно регрессионное тестирование?
  7. 7. Первый пример 9
  8. 8. Второй пример 10 До внесения правок После внесения правок правок
  9. 9. Что такое регрессионное тестирование?
  10. 10. Регрессионное тестирование 12 Вид тестирования направленный на проверку того факта, что существующая ранее функциональность работает как и прежде.
  11. 11. Что используется у нас на проекте?
  12. 12. Тестирование на lenta.ru 14 Unit тестирование компонентов
  13. 13. Тестирование на lenta.ru 15 Тестирование компонентов верстки
  14. 14. Как это выглядит на нашем проекте?
  15. 15. Нашли место с ошибкой 17 .b-footer__orphus-label
 .b-footer__orphus-strong Нашли опечатку? <br/
 | Orphus: Ctrl+Enter
  16. 16. Исправили ошибку и сделали push 18 .b-footer__orphus-label
 .b-footer__orphus-strong Нашли опечатку? <br/>
 | Orphus: Ctrl+Enter
  17. 17. В slack упало уведомление 19
  18. 18. Скриншоты из уведомления 20 До внесения правок После внесения правок Результат теста
  19. 19. В slack упало уведомление 21
  20. 20. Как это реализовано на нашем проекте?
  21. 21. Список билдов в pipelines
  22. 22. Схема тестирования верстки Build frontend-regression #17661
  23. 23. Схема тестирования верстки Build frontend-regression #17661
  24. 24. Схема тестирования верстки Production версия Build frontend-regression #17661
  25. 25. Схема тестирования верстки Production версия Development версия Build frontend-regression #17661
  26. 26. Схема тестирования верстки Production версия На нашем проекте это ветка master Development версия Ваш последний коммит Build frontend-regression #17661
  27. 27. Схема тестирования верстки Production версия На нашем проекте это ветка master Development версия Ваш последний коммит Build frontend-regression #17661 $ git checkout master --force 1. Получение актуальной версии master
  28. 28. Схема тестирования верстки Production версия На нашем проекте это ветка master Development версия Ваш последний коммит Build frontend-regression #17661 $ git checkout master --force 1. Получение актуальной версии master 2. Сборка и запуск проекта $ npm run build && rails -s
  29. 29. Схема тестирования верстки Production версия На нашем проекте это ветка master Development версия Ваш последний коммит Build frontend-regression #17661 $ git checkout master --force 1. Получение актуальной версии master 2. Сборка и запуск проекта $ npm run build && rails -s 3. Сборка скриншотов с сайта
  30. 30. Процесс сборки скриншотов с сайта
  31. 31. Процесс сборки скриншотов с сайта
  32. 32. Процесс сборки скриншотов с сайта
  33. 33. Процесс сборки скриншотов с сайта
  34. 34. Схема тестирования верстки Production версия На нашем проекте это ветка master Development версия Ваш последний коммит Build frontend-regression #17661 $ git checkout master --force 1. Получение актуальной версии master 2. Сборка и запуск проекта $ npm run build && rails -s 3. Сборка скриншотов с сайта
  35. 35. Схема тестирования верстки 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. Получение конкретного коммита
  36. 36. Схема тестирования верстки 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
  37. 37. Схема тестирования верстки 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. Сборка скриншотов с сайта
  38. 38. Схема тестирования верстки Production версия Development версия Build frontend-regression #17661
  39. 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 6. Сборка скриншотов с сайта
  40. 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. Сборка скриншотов с сайта 7. Сравнение скриншотов и поиск отличий
  41. 41. Сравнение блоков До внесения правок После внесения правок Результат теста
  42. 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. Сборка скриншотов с сайта 7. Сравнение скриншотов и поиск отличий
  43. 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. Сравнение скриншотов и поиск отличий 8. Отправка отчета с картинками в slack
  44. 44. Как выглядит отчет в slack
  45. 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. Сравнение скриншотов и поиск отличий 8. Отправка отчета с картинками в slack
  46. 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. 47. На этапе доработки
  48. 48. Проблемы внедрения
  49. 49. Проблема #1 - BackstopJS из коробки не для команды 53 Как предлагают сделать создатели BackstopJS
  50. 50. Проблема #1 - BackstopJS из коробки не для команды 54 Как предлагают сделать создатели BackstopJS 1. Вы делаете эталонные скриншоты на своей машине.
  51. 51. Проблема #1 - BackstopJS из коробки не для команды 55 Как предлагают сделать создатели BackstopJS 2. Делаете commit и отправляете их в репозитарий. 1. Вы делаете эталонные скриншоты на своей машине.
  52. 52. Проблема #1 - BackstopJS из коробки не для команды 56 Как предлагают сделать создатели BackstopJS Как есть на самом деле 2. Делаете commit и отправляете их в репозитарий. 1. Вы делаете эталонные скриншоты на своей машине.
  53. 53. Проблема #1 - BackstopJS из коробки не для команды 57 Как предлагают сделать создатели BackstopJS Как есть на самом деле 2. Делаете commit и отправляете их в репозитарий. 1. Вы делаете эталонные скриншоты на своей машине. 3. Другой разработчик сливает себе скриншоты.
  54. 54. 4. Запускает тесты и они падают, так как у него windows, а у вас unix и сайт рисуется по-разному. Проблема #1 - BackstopJS из коробки не для команды 58 Как предлагают сделать создатели BackstopJS Как есть на самом деле 2. Делаете commit и отправляете их в репозитарий. 1. Вы делаете эталонные скриншоты на своей машине. 3. Другой разработчик сливает себе скриншоты.
  55. 55. 59 Как предлагают сделать создатели BackstopJS Как есть на самом деле
  56. 56. Проблема #2 - Автоматизация тестирования 60 Помните этот слайд?
  57. 57. Проблема #2 - Автоматизация тестирования 61 Помните этот слайд? Вот это все без скрипта - вручную
  58. 58. Проблема #3 - Удобство для команды 62
  59. 59. Проблема #3 - Удобство для команды 63 1. Сообщение должно быть сжатым и информативным.
  60. 60. Проблема #3 - Удобство для команды 64 2. Нужно облако для картинок или доступ к серверу через web. 1. Сообщение должно быть сжатым и информативным.
  61. 61. Минусы и плюсы
  62. 62. Минусы 66
  63. 63. Минусы 67 1. Потратил много времени - две или три недели.
  64. 64. Минусы 68 2. Несколько раз переписывал функционал. 1. Потратил много времени - две или три недели.
  65. 65. Минусы 69 3. Реальная польза только на ранее реализованном функционале. 2. Несколько раз переписывал функционал. 1. Потратил много времени - две или три недели.
  66. 66. Минусы 70 3. Реальная польза только на ранее реализованном функционале. 2. Несколько раз переписывал функционал. 1. Потратил много времени - две или три недели. Все минусы - на этапе внедрения.
  67. 67. Плюсы 71
  68. 68. Плюсы 72 1. Уже выявили несколько косяков до релиза.
  69. 69. Плюсы 73 2. Появилась возможность проверить за собой без QA. 1. Уже выявили несколько косяков до релиза.
  70. 70. Плюсы 74 3. Все делается в автоматическом режиме, не нужно следить. 2. Появилась возможность проверить за собой без QA. 1. Уже выявили несколько косяков до релиза.
  71. 71. Плюсы 75 3. Все делается в автоматическом режиме, не нужно следить. 2. Появилась возможность проверить за собой без QA. 1. Уже выявили несколько косяков до релиза. 4. Повысилось качество работы разработчиков.
  72. 72. Плюсы 76 3. Все делается в автоматическом режиме, не нужно следить. 2. Появилась возможность проверить за собой без QA. 1. Уже выявили несколько косяков до релиза. 4. Повысилось качество работы разработчиков. Все плюсы - после внедрения.
  73. 73. Резюме
  74. 74. Регрессионное тестирование 78 Starter kit
  75. 75. Регрессионное тестирование 79 1. Установить BackstopJS и зависимости. +
  76. 76. Регрессионное тестирование 80 2. Указать url страниц.
  77. 77. Регрессионное тестирование 81 3. Указать селекторы блоков для тестирования.
  78. 78. Регрессионное тестирование 82 Готово!
  79. 79. T H I S I S T H E E N D
  80. 80. Материалы из презентации и контакты 84 Контакты, ссылки по теме и сама презентация Адрес для любых вопросов и предложений Профиль linkedin https://ru.linkedin.com/in/kondratenkopa iam@kondratenko.me http://goo.gl/UNeQV2

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

Views

Total views

514

On Slideshare

0

From embeds

0

Number of embeds

18

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×