Автоматизация тестирования UI — это всегда непростая задача, особенно в условиях активной разработки и постоянного изменения требований. Как мы решали эту проблему в mall.my.com. Как и почему пришли к BDD. Какие инструменты выбрали. И что из этого вышло.

1. BDD для фронтенда
Автоматизация тестирования
Cucumber, Cypress и Jenkins
Яковлев Александр
Frontend-разработчик

2. Ручное
тестирование UI
Behavior-Driven
Development

3. Процесс разработки

4. Ручное тестирование
8
часов
Регрессионное
тестирование
?
часов
Приемочное
тестирование

5. Cypress
JavaScript E2E testing framework.
https://github.com/cypress-io/cypress
https://cypress.io

6. Плюсы Cypress
Time Travel
Real time reload
Отладка в DevTools
Ожидание команд
Spies и stubs
Контроль http запросов

7. Минусы Cypress
Нет множественных вкладок
Нет мобильных событий
Нет поддержки iframe
Только Chrome

8. Наивный подход
describe(‘Filters panel’, () => {
it(‘should have filter products by group id’, () => {
cy.visit(‘/product’)
cy
.get(‘.qaGroupId’)
.type(‘Smartphones’);
cy
.find(‘.qaProducts’)
.should(‘have.length’, 3);
});
});

9. Cypress Tools

10. JQuery
в 2020 году?!

11. Наивный подход
describe(‘Filters panel’, () => {
it(‘should have filter products by group id’, () => {
cy.visit(‘/product’)
cy
.get(‘.qaGroupId’)
.type(‘Smartphones’);
cy
.find(‘.qaProducts’)
.should(‘have.length’, 3);
});
});

12. Page Object
Page Objects
productList
.getProductByName(‘Iphone XS’)
.delete();
filtersPanel
.setFilter(‘color’, ‘red’);
Html Wrapper
cy
.get(‘.qaProductItem’)
.contains(‘Iphone XS’)
.find(‘.qaDeleteBtn’)
.click();

13. Улучшенный вариант
describe(‘Filters panel’, () => {
it(‘should have filter products by group id’, () => {
productsPage.visit();
filtersPanel
.setFilter(‘Group ID’, ‘smartphones’);
productList
.should(‘have.length’, 3);
});
});

14. Двойной цикл разработки

15. BDD
Behavior-driven development - это методология разработки
программного обеспечения, являющаяся ответвлением
от методологии разработки через тестирование
Red Green Refactor

16. Плюсы BDD
Общий язык
Усиление взаимодействия
Быстрый цикл разработки
Живая документация

17. Cucumber
BDD Testing & Collaboration Tool
https://cucumber.io

18. Описание сценариев
#language: ru
@merchant
Функция: Поиск продуктов
Контекст:
Допустим я нахожусь на странице со списком продуктов
@smoke
Сценарий: Сброс поска продуктов по текстовым параметрам
Допустим я ищу продукты по "Group ID" "Some group id"
Когда я удаляю чипсу "Search results for "Some group id"
То на странице отображается список продуктов без примененного
поиска по фильтру "search-by"

19. Step definitions
When('я ищу {word} по фильтру/фильтрам {string} {array}',
function when(_, label, value) {
value.forEach(individualValue =>
this.filtersPanel
.setFilter(label, individualValue)
.then(xhr => cy.wrap(xhr).as('xhr')));
});
Then('на странице отображается список {word} без примененного поиска по
фильтру/фильтрам {string}',
function then(_, filter) {
expect(this.xhr.filters).not.to.have.property(filter);
});

20. QA review

21. Visual regression
Old New Diff

22. CI/CD
Main build
30
spec files
10 files
Report
10 files
10 files

23. Результат
8 1
часов
Регрессионное
тестирование
N N
часов
Приемочное
тестирование

24. a.yackovlev@corp.mail.ru
https://github.com/aleksandryackovlev
Александр Яковлев