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

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

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

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

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

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

План действий по установке Cypress

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

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

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

Установка происходит с помощью ⚫️ Терминала или 🔵 Терминала в VS Code на вашем компьютере по следующим командам:

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

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

Выбираем E2E Testing

Выбираем Chrome (отображается версия, установленная на вашем компьютере)

Chrome запускает вкладку litres-testing (название проекта) и тестовый визит по умолчанию

Далее необходимо запустить 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()
    })
  })

Как выглядят наши тесты в редакторе кода VS

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

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

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

Заключение

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

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

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