Разработка веб-сайтов через тестирование через E2E

Большинство разработчиков веб-сайтов, которые приходят в отрасль, не придают должного значения тестированию. Тестирование вашего приложения автоматизирует вашу работу, чтобы проверить, работает ли каждый компонент должным образом. Тестировать отдельные функции легко; однако тестирование веб-сайта может быть сложной задачей. Cypress — это инструмент, который большинство разработчиков используют для сквозного тестирования веб-сайтов. Независимо от того, используете ли вы React, Vue, Angular, Svelte или любой другой фреймворк, Cypress поможет вам протестировать любой веб-сайт, который вы создаете.

Монтаж

Установить Cypress очень просто. Запустите команду в корневом каталоге вашего проекта:

npm install -d cypress

Это добавит Cypress к вашим зависимостям разработчика. Обратите внимание, что установка займет некоторое время, поэтому не прерывайте установку, пока она не будет полностью завершена.

Открывая свое кипарисовое окно

Cypress устанавливает необходимые компоненты и окна для выполнения тестов. Запустите команду:

npx cypress open

чтобы начать работу с окном Cypress. Вас встретит это окно

E2E-тестирование можно продолжать; давайте нажмем на это. Поскольку Cypress в вашем проекте еще не настроен, они добавят файлы конфигурации для вас.

Теперь вы должны выбрать браузер, в котором вы хотите протестировать свой сайт. Мне лично нравится Microsoft Edge, и я буду продолжать в том же духе.

Вы с легкостью запустили Cypress. Теперь вы должны иметь возможность просматривать панель инструментов.

Файлы спецификаций Cypress

Файлы спецификаций — это файлы, которые Cypress идентифицирует для запуска тестов. Чтобы создать свой первый тестовый файл, выберите «Создать новую пустую спецификацию». Все файлы спецификаций должны находиться в папке cypress/e2e/. Назовем тестовый файл как first.cy.js. При нажатии Enter пару раз начинает загружаться первый тест:

Создавайте свои тесты

Вернемся к нашему коду, и вы должны увидеть папку cypress/e2e. Здесь вы также найдете файл first.cy.js с исходным кодом. Давайте удалим это и добавим свое.

  1. describe предназначен для документирования группы тестов, присутствующих внутри.
  2. it — это то место, где вам нужно написать тестовый код.

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

Вернитесь в браузер и запустите файл спецификации. Вы должны увидеть, что тест проходит!

Добавьте более сложные тесты

Тесты — это не что иное, как утверждение значений, которые должны быть правдой.

Для Cypress каждая команда является утверждением. Посещение самого URL является утверждением.

Утверждение текстов

Давайте проверим, виден ли заголовок.

Большой! Оба наших теста проходят успешно.

Щелчок по элементам и утверждение имен классов

Заключение

Тестирование — неотъемлемая часть разработки проекта. Сквозное тестирование веб-сайтов значительно продвинулось за последние годы. Как видно из этой статьи, тестировать веб-сайты так же просто, как писать на английском языке. Есть еще много команд, которые можно открыть для себя с помощью Cypress. На автоматизированные веб-сайты интересно смотреть, NGL!

Надеюсь, вам понравилось читать мою статью и вы узнали что-то новое. Спасибо! ✌️

Want to connect?
My GitHub Profile
My Portfolio Website