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

В этом блоге я рад поделиться своим личным опытом работы с Cypress, средой сквозного тестирования на основе JavaScript, которая произвела революцию в моем подходе к веб-тестированию. Вместе мы исследуем идеи, проблемы и победы, с которыми я столкнулся на своем пути. Присоединяйтесь ко мне, и мы погрузимся в мир Cypress и узнаем бесценные уроки, которые он может предложить. Независимо от того, являетесь ли вы опытным тестировщиком или только начинаете свое приключение в области тестирования, этот блог обещает пролить свет на невероятный потенциал Cypress и на то, как он может улучшить ваши методы веб-тестирования. Давайте отправимся в это путешествие вместе!

Обзор проекта

Ui-Api-Testing-by-Cypress — это простой проект, инициированный мной во время изучения Cypress. Он использует возможности Cypress, среды сквозного тестирования на основе JavaScript, для ускорения процесса тестирования. Cypress имеет различные преимущества для тестирования веб-приложений, что делает его идеальным выбором для моего проекта.

Сердце проекта: файлы комплексного тестирования (e2e):

Ядро этого проекта лежит в файлах сквозного тестирования (e2e). Эти файлы, находящиеся в каталоге cypress/e2e, содержат тестовые сценарии, которые тщательно оценивают функциональность веб-приложений. Давайте подробнее рассмотрим эти тестовые файлы e2e:

1. login.js

Здесь мы узнаем о шаблоне объектной модели страницы (POM) для создания объектной модели дизайна для нашего веб-сайта. Шаблон POM помогает организовать ваш тестовый код, отделяя логику и селекторы, специфичные для конкретной страницы, от тестовых сценариев, что делает ваши тесты более удобными для сопровождения и чтения. Поскольку обычно хорошей идеей является создание класса, содержащего все необходимые вам методы, цель этого файла заключается в следующем:

  • Цель: этот файл посвящен созданию класса, содержащего все необходимые методы для выполнения функций входа в веб-приложение.
  • Шаги: он имитирует взаимодействие пользователя, вводя учетные данные, нажимая кнопку входа и проверяя успешный вход.
  • Утверждения. Здесь тест проверяет API входа в систему, используя метод cy.intercept() для проверки отправки правильного API и подтверждения кода состояния и ответа.

2. myinfo.js

  • Цель: Создать класс, содержащий методы для обновления информации о пользователе в веб-приложении.
  • Шаги: Имитируйте взаимодействие с пользователем, например переход на страницу профиля пользователя. Запрос и обновление пользовательских данных. Обработка соответствующих элементов пользовательского интерфейса для обновления данных.
  • Утверждения: включите утверждения для проверки точности информации о пользователе. Убедитесь, что данные, полученные из API, соответствуют ожидаемым значениям на основе вводимых пользователем данных или настроек.

3. searchpage.cy.js

  • Цель: вот тест, содержащий методы для моделирования и тестирования поисковых функций веб-приложения.
  • Шаги: Смоделируйте взаимодействие пользователя с функцией поиска. Выполняйте поиск и управляйте результатами поиска.
  • Утверждения. Включите утверждения для проверки правильности результатов поиска. Убедитесь, что отображаемые результаты поиска соответствуют вводам и ожиданиям пользователей. В положительном случае он перехватит API поиска, чтобы проверить код состояния и ответ. А в отрицательном случае проверьте, чтобы сообщение об ошибке отображалось правильно.

Вы заметите, что я не создал класс для этого раздела вместо того, чтобы выполнить все необходимые процедуры в наборе тестов.

4. LoginPage.cy.js

  • Цель: создать набор тестов для сценариев входа в систему в веб-приложении.
  • Шаги: выполнить различные тесты входа в систему, используя методы, предоставляемые выделенным классом login.js.
  • Действия: Импортируйте класс thelogin.js для доступа к методам, связанным с входом в систему. Выполните тестовые сценарии входа в систему, охватывающие различные сценарии (например, действительный вход в систему, неверные учетные данные и т. д.). Проверьте результаты входа и ответы на основе выполненных действий.

5. MyinfoPage.cy.js

  • Цель: разработать набор тестов для управления пользовательской информацией в веб-приложении.
  • Шаги: выполнить ряд тестовых случаев, связанных с обновлением и управлением пользовательской информацией, с использованием методов, предоставляемых классом myinfo.js.
  • Действия: Импортируйте класс myinfo.js для доступа к методам управления информацией о пользователях. Выполните тестовые сценарии для обновления пользовательских данных, перейдя на страницу профиля пользователя и взаимодействуя с соответствующими элементами пользовательского интерфейса. Проверьте точность обновлений пользовательской информации и ответов API в соответствии с тестовыми действиями.

Эти файлы являются основой нашей среды тестирования, строго оценивающей функциональность веб-приложений. Мы изучили тонкости ключевых тестовых файлов E2E, таких как login.js и myinfo.js, каждый из которых служит жизненно важной цели в нашем наборе тестов. Хотя мы сделали упор на создание классов для организации методов, важно отметить, что наше путешествие на этом не заканчивается. Мы продолжили просматривать оставшиеся главы этого приключения по тестированию, включая создание наборов тестов для сценариев входа в систему (LoginPage.cy.js) и управления пользовательской информацией (MyinfoPage.cy.js).

Благодаря такой организации и структурированию тестовых файлов и их описаний процесс тестирования становится более модульным, читабельным и удобным в обслуживании. Он также подчеркивает важность инкапсуляции связанных функций в выделенные классы для лучшей организации кода и возможности повторного использования.

Светильники:

Продолжая наше путешествие в сфере тестирования программного обеспечения, мы автоматизировали процессы тестирования, сделав их более эффективными и надежными. Однако нам необходимо ответить на важный вопрос: практично ли по-прежнему вручную вводить тестовые данные каждый раз, когда мы запускаем тесты?

Представьте себе такой сценарий: вы тестируете сложное веб-приложение с различными ролями пользователей, каталогами продуктов и историями транзакций. Ручная настройка этих данных перед каждым запуском теста может быстро стать трудоемкой и подверженной ошибкам задачей. Именно здесь в игру вступает концепция «приспособлений», предлагающая более разумный способ обработки ваших тестовых данных.

Фикстуры также являются основой нашей среды тестирования. Они предоставляют последовательные и воспроизводимые данные для наших испытаний, гарантируя их надежность. Fixtures также сохраняют независимость от тестов, повышают эффективность и масштабируются в соответствии с растущими потребностями в данных нашего приложения. Они обеспечивают контроль версий и служат документацией, повышая общее качество наших усилий по тестированию. По сути, фикстуры — это важнейший инструмент для оптимизации веб-тестирования.

Чтобы настроить тестовые данные, обновите значения в файлах Fixtures, которые обычно находятся в каталоге /cypress/fixtures. Вы можете добавить больше данных в соответствии с вашими требованиями к тестированию.

// Example of configuring login credentials in data.json
{
    "url":"https://opensource-demo.orangehrmlive.com/web/index.php/auth/login",
    "login":{
            "username": "Admin",  //add your new username
            "password": "admin123"  // add your new password
    },
    "diffdata":{
        "nickname":"Bebo",
        "keyword":"Sara.Tencrady"
    }
}

Как использовать эти тесты:

Чтобы эффективно использовать эти тесты, выполните следующие действия:

  1. Клонирование репозитория. Начните с клонирования репозитория Ui-Api-Testing-by-Cypress на свой локальный компьютер.
  2. Установить зависимости: перейдите в папку проекта и установите необходимые зависимости. Выполните это с помощью команды npm install.
  3. Установите Cypress, если вы еще не используете npm install cypress.
  4. Исследуйте и настраивайте: погрузитесь в тестовые файлы E2E, удобно расположенные в каталоге cypress/e2e. AT cypress/e2e/pages здесь мы помещаем наши классы, которые вам понадобятся для каждой страницы и других страниц, cypress/e2e/tests здесь мы помещаем наш набор тестов для каждой страницы, а затем импортируем все необходимые классы. Настраивайте и расширяйте эти тесты в соответствии с конкретными требованиями вашего приложения.
  5. Запуск тестов с помощью Cypress Test Runner: запустите тесты, выполнив npx cypress open. Эта команда открывает Cypress Test Runner, позволяя вам легко выбрать нужные тестовые файлы и наблюдать за тестами в действии.
  6. (Необязательный шаг) Запуск в автономном режиме: Альтернативно вы можете запустить тесты в автономном режиме, используя npx cypress run. Это необязательный шаг для автоматического тестирования без графического интерфейса.
  7. Точно анализируйте результаты: погрузитесь в результаты с помощью Cypress Test Runner. Этот инструмент предоставляет исчерпывающую информацию о статусах прохождения/непрохождения теста, упрощая процесс выявления и устранения любых проблем, которые могут возникнуть.

Выполнив эти шаги, вы сможете использовать весь потенциал этих тестов, обеспечивая надежный и эффективный процесс тестирования для ваших веб-приложений.

Составление отчетов:

Теперь, когда мы провели наш тест, как вы думаете, мы на этом закончили? Нет, пришло время сообщить о наших результатах.

Cypress поддерживает несколько репортеров, таких как spec, dot, list, min и т. д. Эти репортеры выводят результаты теста на консоль или терминал в текстовом формате. Однако, если вы хотите просмотреть результаты теста в более наглядном и интерактивном виде, вы можете использовать генератор отчетов HTML. Средство создания отчетов HTML создает веб-страницу, на которой результаты испытаний отображаются в графическом и удобном для пользователя виде.

Одним из самых популярных и широко используемых HTML-репортеров для Cypress является cypress-mochawesome-reporter. Этот репортер основан на mochawesome-reporter, который является репортером для Mocha, среды тестирования, которую Cypress использует внутри себя. cypress-mochawesome-reporter генерирует HTML-отчет для каждого файла спецификации (файла, содержащего один или несколько тестов) в вашем проекте Cypress. Он также объединяет все отдельные отчеты HTML в один отчет HTML, который показывает результаты всех ваших тестов в одном месте.

Чтобы установить cypress-mochawesome-reporter в ваш проект Cypress, вам необходимо выполнить следующие шаги:

  1. Установите cypress-mochawesome-reporter в качестве зависимости разработчика в своем проекте, используя npm или Yarn:
npm install --save-dev cypress-mochawesome-reporter
# or
yarn add --dev cypress-mochawesome-reporter

2. Добавьте cypress-mochawesome-reporter в качестве репортера в файл конфигурации Cypress cypress.config.jsили с помощью параметров командной строки:

{
  "reporter": "cypress-mochawesome-reporter",
  "reporterOptions": {
    // optional reporter options
  }
}

or

cypress run --reporter cypress-mochawesome-reporter --reporter-options <options>

3. Запустите тесты Cypress с помощью команды cypress run. При этом будет создан отчет HTML для каждого файла спецификации в папке cypress/results и объединенный отчет HTML в папке cypress/reports.

Установив и используя cypress-mochawesome-reporter, вы можете создавать и просматривать HTML-отчеты для ваших тестов Cypress. Вы также можете настроить свои HTML-отчеты, используя различные параметры репортера. Для получения более подробной информации о том, как использовать и настраивать cypress-mochawesome-reporter, вы можете перейти к его документации.

В заключение

Надеюсь, вам понравилось читать эту запись в блоге о моем проекте автоматизации тестирования с использованием Cypress. Cypress — мощный и простой в использовании инструмент для комплексного тестирования веб-приложений. Он позволяет вам писать и запускать тесты, имитирующие взаимодействие пользователя с вашим веб-приложением. Он также поддерживает несколько репортеров, таких как cypress-mochawesome-reporter, которые помогут вам создавать и просматривать HTML-отчеты о результатах ваших тестов.

В этом сообщении блога я поделился с вами тем, как я использовал Cypress для тестирования функциональности и пользовательского опыта моего веб-приложения. Я также показал вам, как я установил и настроил cypress-mochawesome-reporter для создания и просмотра HTML-отчетов для моих тестов. Надеюсь, вы узнали что-то новое и полезное из этого поста в блоге.

Если у вас есть какие-либо вопросы или отзывы, пожалуйста, оставьте комментарий ниже. Я хотел бы услышать ваше мнение и перенять ваш опыт. Спасибо за чтение и удачного тестирования!