Первый Cypress тест

https://t.me/testingNotQA

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

Для этого сегодня мы добавим первый простой тест, а чуть позже заставим его запускаться на CI. Не пугайтесь, это для того, чтобы даже новички, делая карго-культ, наглядно видели результат своих действий. Не стесняйтесь вопросов в чате, учиться удаленно и только через текст не так просто, так что welcome!

Это будет demoblaze.com от BlazeMeter, которые так-то больше занимаются нагрузкой, но нам главное, чтобы было что-то сложнее сайта-визитки.

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

Попробуйте сначала потыкаться в него руками, чтобы понять логику работы.

Feedback пользователю здесь местами реализован через pop-up, и это поможет увидеть некоторые особенности Cypress. Однако, надо так же признать, что в современном мире их уже никто не использует

Сценарий таков: я хочу открыть наш сайт и проверить, что он успешно загрузился, проверив, что у логотипа нужный текст.

Сначала сделаем и запустим, потом подробно распишу каждую часть.

1. В папке cypress/e2e/ создайте файл с расширением *.cy.js, например, demo.cy.js

2. Скопируйте вот этот код в файл:

describe('Demo Tests', () => {
  it('Opens the Home page', () => {
    cy.visit('https://www.demoblaze.com')

    cy.get('#nava')
      .should('contain', 'PRODUCT STORE')
  })
})

3. Сохраните файл и запустите Cypress (из корневой папки вашего проекта):

npx cypress open

4. Найдите ваш тест в панели Specs и запустите

Давайте вернемся к тесту, его коду и тому, что показывает Cypress.

Describe и it

describe('Имя Для Группы Тестов Вашей Фичи', () => {
  it('Имя Первого Теста', () => {
    какие-то шаги
  })

  it('Имя Второго Теста', () => {
    другие шаги
  })
})

Эти ребята пришли из фреймворка по названием Mocha, он весьма распространен, и многие тестовые тулзы его используют, поэтому этот синтаксис будет в них одинаков.

It

Это собственно блок с тестом, вы ему даете имя в соответствии с тестовой идеей. Обычно используется синтаксис от третьего лица вида it('Successfully signs in') или it('Should show an error...').

Describe или Context

Что одно и то же, это вроде имени для тест плана вашей фичи. Он служит для группировки тестов, и если у них есть общие начальные шаги а-ля предусловия (e.g. сначала открыть нужную страницу для поиска, а потом сделать пару тройку тестов на результаты поиска), то их тоже помещают в этот блок, но об этом в другой раз.

Часто в одном файле создают несколько тестов для какой-то одной фичи, например один файл с тремя тестами для поиска, другой с двумя для покупки товара и так далее.

Шаги теста

Все команды Cypress начинаются с ключевого cy и нужного метода, который что-то делает для вас - открывает страницу, кликает на элементе, печатает текст и прочее (мы поговорим о них подробно отдельно).

Поэтому:

cy.visit('https://www.demoblaze.com')

Открывает наш сайт.

Тогда как:

cy.get('#nava')
      .should('contain', 'PRODUCT STORE')

Проверяет, что у логотипа (его селектор это #nava) есть нужный текст: находит элемент на странице, берет текст и сравнивает его с ожидаемым значением.

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

Cypress показывает ваш тестовый файл, имя из Describe (Demo Tests) и имя теста (Opens the Home page). Далее видны наши 2 команды visit и get, а также успешный результат проверки на текст.

Все остальное (Get 200), это запросы, которые сайт (не мы) отправляет на сервер, и об этом тоже в другой раз, сейчас они не важны.

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

Для тех, кто занимается в группе: пришлите ссылку в чат с топиком.

Первый Cypress тест

Report Page