Вы узнаете, что такое кипарис, зачем использовать кипарис и как использовать кипарис для обеспечения качества в вашем следующем проекте vue js или другом проекте JavaScript.

Что такое кипарис

Cypress — это в основном фреймворк для тестирования E2E (end to end), и он действительно хорошо справляется со своей задачей. Cypress — это независимый от фреймворка фреймворк для сквозного тестирования, такой как селен. Cypress создан с заботой о разработчиках, поэтому им очень легко пользоваться. Cypress также предоставляет своим пользователям замечательную документацию. Они поддерживают все, от мощных утверждений до имитации, включая сетевые запросы, условное тестирование красивой панели инструментов и интеграцию с CI.

Заинтересованы? Давайте углубимся в Cypress.

Почему Кипарис

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

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

В экосистеме JavaScript у вас есть доступ к замечательным средам модульного тестирования, таким как jest, они отлично подходят для проверки логики вашего приложения. Но что, если проблема не в логике? Что, если ваш код правильный, и вы только что вызвали неправильный метод в прослушивателе кликов?

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

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

Использование Cypress для тестирования дает разработчику более естественный опыт, больший охват кода с меньшим количеством тестов и более интуитивно понятный API по сравнению с Jest.

Начало работы с Кипарис

Чтобы установить Cypress runner на свой компьютер, следуйте инструкциям, приведенным на странице Начало работы.

Чтобы установить кипарис в ваш проект, запустите

npm install cypress --save-dev
npx cypress open

Через несколько секунд Cypress будет установлен на вашем компьютере и готов к использованию.

Чтобы запустить кипарисовый бегун

Откроется бегун Cypress, и он будет выглядеть примерно так:

Это бегун тестов Cypress. (Из соображений конфиденциальности я удалил верхнюю строку с моим личным почтовым адресом).

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

Под тестами (активными) видны все ваши тесты, да уже есть.

На вкладке Runs вы можете подключить Cypress к своей панели инструментов Cypress.

После подключения к Dashboard вы можете скопировать полученный код в строку CMD. Обязательно используйте npx в качестве префикса!

npx cypress run --record --key <you're key>

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

Как Cypress организует свои тесты

Каталог интеграций

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

Каталог светильников

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

В моей команде мы совмещаем и то, и другое, маленькие тесты всегда издеваются над сетевыми запросами. У нас есть от 2 до 3 тестов, которые являются реальными тестами E2E и используют приложение так же, как реальный пользователь, и запускают полные пользовательские потоки без имитации сетевых запросов. Эти тесты E2E выполняются перед запуском в производство.

Каталог поддержки

Когда вы откроете кипарис, вам понравится этот каталог.

В каталоге commands.js вы можете определить пользовательские команды, такие как доступ только к видимым элементам по их данным cy, как показано ниже.

Cypress.Commands.add("getByDataCy", (selector, ...args) => {
  return cy.get(`[data-cy=${selector}]`, ...args);
});

Это отлично подходит для ускорения тестирования и создания собственной тестовой среды поверх кипариса.

Файл Index.js используется для настройки cypress и загрузки файлов команд. На самом деле больше нечего сказать об этом. Чтобы копнуть глубже, см. документы.

Каталог плагинов

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

Каждому плагину нужен свой файл, и их нужно заново прописать в index.js.

Тестирование вашего приложения с помощью Cypress

Еще одна хорошая вещь с кипарисом заключается в том, что он не зависит от любого JS и UI-фреймворка. Поскольку Cypress напрямую взаимодействует с DOM, вы можете протестировать свое приложение vue js с помощью cypress так же, как тестируете приложение для реагирования с помощью cypress.

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

В качестве примера я хотел показать один из примеров, которые вы получаете после установки cypress. Я решил описать assertions.spec.js, так как утверждение является важной функцией, и cypress проделал большую работу, предоставив для него естественный чистый синтаксис.

Увидеть себя:

context('Assertions', () => {
  beforeEach(() => {
    cy.visit('https://example.cypress.io/commands/assertions')
  })

  describe('Implicit Assertions', () => {
    it('.should() - make an assertion about the current subject', () => {
      // https://on.cypress.io/should
      cy.get('.assertion-table')
        .find('tbody tr:last')
        .should('have.class', 'success')
        .find('td')
        .first()
        // checking the text of the <td> element in various ways
        .should('have.text', 'Column content')
        .should('contain', 'Column content')
        .should('have.html', 'Column content')
        // chai-jquery uses "is()" to check if element matches selector
        .should('match', 'td')
        // to match text content against a regular expression
        // first need to invoke jQuery method text()
        // and then match using regular expression
        .invoke('text')
        .should('match', /column content/i)

      // a better way to check element's text content against a regular expression
      // is to use "cy.contains"
      // https://on.cypress.io/contains
      cy.get('.assertion-table')
        .find('tbody tr:last')
        // finds first <td> element with text content matching regular expression
        .contains('td', /column content/i)
        .should('be.visible')

      // for more information about asserting element's text
      // see https://on.cypress.io/using-cypress-faq#How-do-I-get-an-element’s-text-contents
    })

Вышеупомянутый тест посещает веб-сайт перед каждым тестом.

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

cy.get('.assertion-table')
  .find('tbody tr:last')
  // finds first  element with text content matching regular expression
  .contains('td', /column content/i)
  .should('be.visible')

Тест проверяет, видна ли последняя строка таблицы.

Я думаю, вы понимаете мощную концепцию кипариса, а также утверждения кипариса. Для получения дополнительной информации посетите страницу утверждения кипариса. Для примера посетите страницу с примерами утверждений. И, как вы, наверное, заметили, нам даже не нужно знать структуру, используемую для создания этой таблицы.

Различия только в компонентном тестировании. Здесь также важен фреймворк, поскольку компонентные тесты — это кипарисовая версия написания модульных тестов, как в шутке. Это одна из тем моих следующих статей.

Пример: протестируйте приложение vue js с помощью cypress.

Чтобы увидеть пример тестирования приложения vue с кипарисом, см. Эта ссылка, они протестировали приложение vue Toto с кипарисом и пошли дальше, используя aplitools, чтобы также проверить внешний вид пользовательского интерфейса.

Заключение

Благодаря простому API и отличному взаимодействию со всеми фреймворками JavaScript, cypress — отличный выбор, когда дело доходит до тестирования. Вы можете быстро написать тесты, чтобы проверить функциональность так, как ее видит пользователь. Из-за этого писать тесты также веселее, и вы можете просто использовать консоль браузера для отладки своих тестов Cypress.

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

Если вы хотите узнать больше о Cypress или просто поздороваться, вы можете связаться со мной в разделе «Привет».

Удачного тестирования,

Алекс

Первоначально опубликовано на https://www.the-koi.com.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.