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

Я выбрал Cypress по нескольким причинам. Этот пост не является сравнением Selenium и Cypress и не говорит, что лучше. Об этом есть много блогов и статей, и с помощью быстрого поиска в Google вы можете присоединиться к этому обсуждению. Я выбрал Cypress, потому что он больше ориентирован на разработчиков внешнего интерфейса, требует только знания JavaScript и с ним невероятно легко начать работу. Я хотел пройти этот процесс и призвать других разработчиков попробовать. Давайте начнем.

  1. Установка Кипарис. Cypress можно установить через npm, yard или через прямую загрузку. Некоторые функции ограничены прямой загрузкой, поэтому я не буду вдаваться в подробности. Для установки откройте терминал и перейдите в корневую папку вашего проекта.

Следующий запуск…

Or

Как только он будет добавлен в ваш проект, откройте проект в своем любимом редакторе кода. В новой папке кипариса откройте папку интеграции. Внутри находится папка с примерами тестов. Это должно выглядеть примерно так.

2. Теперь, когда Cypress установлен в проекте, давайте откроем его! Вы можете запустить либо:

Это откроет Test Runner. Test Runner — это отдельное окно, которое позволит вам, среди прочего, выбрать, какие тесты вы хотите запустить, или какой браузер. До февраля 2020 года Cypress поддерживал только один браузер — Chrome. Недавно добавлена ​​бета-поддержка Firefox и Microsoft Edge. В правом верхнем углу Test Runner вы можете выбрать из раскрывающегося списка любые браузеры на вашем компьютере, которые Cypress считает совместимыми.

Вот как должен выглядеть Test Runner:

3. Напишите несколько тестов. Хотя вы можете просмотреть все примеры тестов и посмотреть, как они написаны (и это отличный ресурс), почему бы нам просто не начать и не написать свои собственные тесты. Сначала в редакторе кода нам нужно добавить новый тестовый файл. Внутри папки Integration добавьте «your_first_tests.spec.js». Test Runner автоматически обновит и отобразит ваш новый тестовый файл.

Вернувшись в редактор кода, откройте новый файл. Cypress берет много синтаксиса и многословия из тестовых библиотек Mocha и Chai. Быть знакомым с ними полезно, но документы Cypress помогут вам со всем. Вы можете найти их здесь". Теперь напишем тест. Введите следующий код:

Давайте пройдем через это. Первый Начальный тест будет названием теста. Следующее посетите мой сайт — это описание того, что тестируется. Тогда cy.visit() — это команда из Cypress API. Эта команда укажет браузеру перейти по указанному адресу/пути, в данном случае http://localhost:3000. Так что же это за тестирование? Когда этот тест запускается, он указывает браузеру перейти по указанному адресу, и если в этом месте назначения есть страница, тест будет пройден.

4. Запустите тест. Вернувшись к Test Runner, щелкните новый созданный файл. Откроется новое окно браузера того браузера, который был выбран. Это уникальное окно.

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

В первом тесте мы написали, что все, что мы просили, это перейти по адресу и посмотреть, есть ли там страница. Вы можете видеть, что тест пройден (зеленый цвет — это своего рода раздача). Давайте расширим наш тест, чтобы увидеть, есть ли панель навигации.

Просматривая документы API, мы видим, что мы можем видеть, включен ли конкретный элемент. Команда .get() может принимать либо имя компонента, либо имя класса для поиска в DOM соответствующего элемента.

Test Runner постоянно обновляется, и новый аспект «Начального теста» отображается в окне тестового браузера.

И снова весь этот зеленый цвет означает, что тесты проходят. Что я искал по неправильному названию компонента?

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

Когда вы возвращаетесь к тестовому браузеру, при наведении указателя мыши на каждый шаг теста подсвечивается соответствующий элемент DOM.

Слева выделен шаг «Получить». На панели просмотра также выделена панель навигации. Это очень похоже на проверку страницы с помощью инструментов разработчика в Chrome. Может быть очень полезно знать, что ваш тест нацелен на правильные элементы.

Итак, краткое введение в установку Cypress в ваш проект и написание теста. Тестируйте и удачи!