Cypress для Junior QA. Легкий способ войти в автоматизацию

Приветствую, меня зовут Иван, я инженер по ручному и автоматизированному тестированию. В ремесле более 2х лет! Со мной сегодня Frontend Dev Алексей! Он расскажет все нюансы использования Cypress при написании автотестов.

Контакты я оставляю в конце статьи на свой канал и канал Алексея.

Сегодня мы поделимся навыком тестирования сайтов и веб-приложений с помощью Cypress. Автоматизируем поиск книг по тестированию и добавим их в избранное на сайте Литрес!

Тесты мы будем писать на ?JavaScript.
Статья, где мы пишем на Selenium с помощью ?Java

Cypress — это фреймворк для написания автотестов, который позволяет автоматизировать тестирование веб-приложений. Запуск автотестов происходит в браузере Chrome, советуем установить актуальную версию браузера. В конце этой статьи вы найдете видео-инструкцию по установке всех необходимых компонентов.

Что нам необходимо для установки и запуска автотестов:

1. Браузер Chrome актуальной версии;
2. Редактор кода VS Code;
3. Терминал или Командная строка (PowerShell) по умолчанию есть на macOS и Windows;
4. Доступ к терминалу есть также внутри программы VS Code;
5. Node.js и Cypress мы установим через Терминал (Командную строку).

На ваш компьютер необходимо установить 3 программы (Chrome, VS Code и Node.js)
Остальные установки будут происходить внутри Терминала на вашем компьютере.

В открывшемся Терминале/Командной строке мы создаем директорию (папку) с помощью команды:

mkdir litres-testing //создаем директорию для нашего теста

cd litres-testing //переход в директорию

Перед тем как инициализировать проект, необходимо убедится, что на компьютере установлен Node.js. Можно установить как файл, или установить через терминал: Статья по установке Node.js

node -v // проверка версии node.js на вашем компьютере

После установки Node.js инициализируем проект

npm init //инициализация

npm install cypress -D //устанавливаем Сypress

После установки библиотеки Cypress мы запускаем её с помощью команды:

npx cypress open //открываем Cypress

Далее необходимо запустить VS Code и открыть директорию litres-testing.

В папке e2e создаем файл searchBooks.cy.js

Вставляем код в файл:

describe('template spec', () => {   it('passes', () => {     cy.visit('https://www.litres.ru')      // Вводим данные в поле поиска     cy.get('[data-testid="header__search-input--desktop"]').type('тестирование на JavaScript')      // Нажимаем на кнопку "Найти"     cy.contains('[data-testid="header__search-button--desktop"]', 'Найти').click()      // Кликаем на изображение     cy.get('img[itemprop="image"][alt="Тестирование JavaScript"]').click()      // Проверяем содержание текста по заголовку     cy.contains('h1[itemprop="name"].BookCard-module__book__mainInfo__title_2zz4M', 'Тестирование JavaScript')   }) })

Если у вас в VS Code не настроено автосохранение, то нажимаем комбинацию
Ctr + S или Cmd + S

Возвращаемся обратно в Chrome. Тест запускается автоматически при каждом изменении файла.

? Чтобы перезапустить тест — нажмите на повтор;
? Статус теста в зелёной области;
? Запросы и статусы ответа;
? Справа — отображение фактического результат при запуске автотеста.

При наведении на определенный запрос ? — справа отображается момент данного запроса на странице ?. После запуска вы можете провести поэтапное изучение вашего автотеста.

В папке e2e создаем файл shortCode.cy.js

Это второй файл с тестом, который делает поиск книг и добавляет их в избранное. По итогу добавления отображает список всех добавленных книг на сайте Литрес.
Тест имеет повторяющиеся действия, т.к. на каждую книгу необходимо выполнить одинаковые шаги. Чтобы не создавать копипаст, мы можем оптимизировать его:

const searchAndClickLikeButton = (searchText) => {     cy.get('[data-testid="header__search-input--desktop"]').clear().type(searchText)     cy.contains('[data-testid="header__search-button--desktop"]', 'Найти').click()     cy.get('button.LikeButton-module__likeButton_gtG7W').first().click()   }      describe('template spec', () => {     it('passes', () => {       cy.visit('https://www.litres.ru')          searchAndClickLikeButton('Что такое тестирование')       searchAndClickLikeButton('Как тестируют в Google')       searchAndClickLikeButton('Софт отстой и что с этим делать')       searchAndClickLikeButton('Пиши, сокращай')       searchAndClickLikeButton('Этой кнопке нужен текст')              cy.get('[data-testid="tab-favorite"]').click()     })   })

На скриншоте выше мы можем увидеть файл commands.js в директории support — там хранятся кастомные команды, которые используются в разных автотестах, такие как авторизация пользователя, завершение сессии на веб-странице и т.д.

Простыми словами в файле commands.js хранятся предусловия и постусловия выполнения автотеста, которые вы можете использовать в большинстве своих автотестов.

Такой подход называется принципом инкапсуляции, когда код, отвечающий за определенные действия или проверки, выносится в отдельные функции или команды. Это позволяет повторно использовать код, упрощает его понимание и обеспечивает более легкую поддержку автотестов. Принцип DRY.

Заключение

Сегодня мы познакомились с ещё одним инструментом автоматизации — Cypress. Спасибо Алексею за помощь написания статьи. Мы попытались объяснить более понятно и на забавном тесте, в котором мы ищем книги по тестированию. Это также обогатит вашу библиотеку тестировщика.

Контакты:
Канал Ивана — QAtoDev
Канал Алексея — frontend_tales

Шпаргалка по Cypress:
Установка VS Code и Node.js
Официальная документация Cypress
Кастомные команды Cypress: практикум
Шпаргалка по Cypress
Что такое Cypress? | Видео-Обзор Cypress