Cypress Boilerplate

Github repo

Шаблон для одного или нескольких продуктов.
cypress-boilerplate избавит вас от всех проблем при настройке.

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

Шаблон для одного или нескольких товаров.
cypress-boilerplate избавит вас от всех проблем при настройке.

Добавить новый продукт

product относится к вашему проекту.

Пример

$ npm run add-project

Он попросит вас ввести:

• название команды
• название продукта
• baseUrl

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

Пример с картинки выше создаст следующую структуру и внедрит новые скрипты в package.json.

- configs/
  - foo/
    - bar/
      default.json
- fixtures/
  - foo/
    - bar/
      - routes.js
- integration/
  - foo/
    - bar/
      - default.spec.ts
- support/
  - foo/
    - bar/
      - commands.ts
      - index.ts

Запустите

$ npm run foo-bar-staging

или если вы опустили команду, то команда будет выглядеть следующим образом

$ npm run bar-staging

Вы можете видеть, что генератор внедрил 3 скрипта по умолчанию в package.json

{
  ...
  "scripts": {
    "foo-bar-staging": "cypress run --env team=foo,product=bar,env=staging",
    "foo-bar-release": "cypress run --env team=foo,product=bar,env=release",
    "foo-bar-production": "cypress run --env team=foo,product=bar,env=production",
  }
  ...
}

При запуске он укажет только тестовые файлы в cypress/integration/foo/bar.

Как мы это используем

Выполните все описанные выше шаги:

Добавьте новую команду в скрипты

// package.json
{
  ...
  "scripts": {
    ...
    "test": "npm run foo-bar-staging || npm run posttest"
    ...
  }
  ...
}

Затем просто запустите:

$ npm test

npm test автоматически вызовет команду npm pretest перед выполнением. Она очищает предыдущие отчеты и связанные с ними активы.

Когда тестирование будет завершено, ваши отчеты также будут сгенерированы. Сохраняет командную строку чистой и простой.

Структура объяснена

configs/team/product

Здесь вы можете иметь различные конфигурации cypress для каждого продукта. Какой конфиг будет использоваться, определяется аргументом type при запуске cypress в CLI.

Например, если мы добавим следующую команду в наш package.json

{
  ...
  "foo-bar-staging-daily: cypress open --env team=foo,product=bar,env=staging,type=daily"
  ...
}

и затем запустим ее

$ npm run foo-bar-staging-daily

то configs/foo/bar/daily.json используется и объединяется с ./cypress.json.

Это дает вам дополнительный уровень конфигурации для различных типов тестов, где вам нужно нацелиться только на определенные файлы спецификаций, при этом часть скриптов package.json остается чистой

fixtures/foo/bar/routes.json

Здесь вы можете определить baseUrl для каждого окружения. Смотрите ниже, где вы можете настроить окружения по умолчанию при запуске Hygen.

cypress/integration/foo/bar/

Вот ваши файлы спецификаций, как обычно.

cypress/support/foo/bar/

Здесь находятся команды ваших проектов.

Если у вас несколько проектов, имейте в виду, что вы будете иметь доступ только к командам из team + project, которые вы запустили в CLI.
Это сделано для того, чтобы команды из нескольких продуктов не отменяли друг друга, если они имеют одинаковые имена.

Локальная конфигурация

Создайте файл cypress.local.json внутри ./configs/. Ваш локальный конфиг будет затем объединен с конфигом продуктов и глобальным cypress.json.

Он игнорируется GIT.

Поток проектов

Добавление новых пользовательских команд в package.json

Аргументы

Следуйте соглашению об именовании команд

• team+product+environment+type

Вот несколько примеров команд:

{
  "scripts": {
    "foo-bar-staging": "cypress run --env team=foo,product=bar,env=staging",
    "bar-master-daily": "cypress run --env product=bar,env=master,type=daily",
    "bar-staging-weekly": "cypress run --env product=bar,env=staging,type=weekly"
  }
}

Нет необходимости указывать тестовые файлы. Если тестовые файлы не указаны, они будут установлены автоматически (в зависимости от team и product из CLI).

Hygen часть

Hygen используется для генерации шаблонов и внедрения кода в вашу структуру при выполнении npm run add-project.

Вы можете изменить генератор в ./_templates/project/with-prompt/.

Если вам нужно изменить окружения по умолчанию, они объявляются в этих файлах:

• ./_templates/project/with-prompt/fixtures.ejs.t
• ./_templates/project/with-prompt/package.ejs.t

Reporting

Расположение: cypress/reports/mochawesome.

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

npm run posttest

Обязательно очистите предыдущие отчеты перед запуском тестов с помощью команды:

npm run pretest

Build & Delpoy

Отчеты развертываются на your-reporting.domain.com

Обязательно задайте правила для запуска сборки и развертывания:

• Pull request to main branch
• Push to main branch

Действия и страницы Github

.github/workflows/build-report.yml включен.

Для запуска тестов используется команда “npm run test”, поэтому убедитесь, что вы включили ее или настроили под свои нужды.

Пример:

{
  "test": "npm run your-product-staging || npm run posttest"
}

После запуска posttest, он развернет отчеты в cypress/reports/mochawesome на вашей странице github, которую вы настроили.

Пользовательский домен

Если у вас есть пользовательский домен, настройте его в ./CNAME.

Создайте файл с именем CNAME или Github автоматически создаст его, когда вы введете свой домен для страниц Github в настройках вашего репозитория.

Пример

// ./CNAME
your-reporting.domain.com

После запуска тестов этот файл будет автоматически скопирован в местоположение отчета.

О том, как настроить Github pages в настройках репозитория, читайте в документации Github pages.

Что внутри?

Вот список плагинов и библиотек, которые поставляются вместе с этим шаблоном:

cypress-if

Репозиторий Github

Пример использования:

Проверяет существование элемента и закрывает диалог, если он существует.

cy.get('dialog#survey').if('visible').contains('button', 'Close').click()

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

Красивее

Сохраняет чистоту кода и единый стиль для всех, кто работает над проектом.
Убедитесь, что у вас установлено расширение prettier в VSCode, чтобы оно работало.

Измените конфигурацию в ./.prettierrc.

FakerJS

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

import { faker } from '@faker-js/faker'

const randomName = faker.name.fullName() // Rowan Nikolaus
const randomEmail = faker.internet.email() // Kassandra.Haley@erich.biz

cypress-iframe

См. документацию.

Вы можете использовать команды, как описано здесь

cypress-lighthouse

Посмотрите, как его реализовать и использовать

Пример использования:

it('loads fast enough', () => {
  cy.visit('/')
  cy.lighthouse()
})

cypress-localstorage-commands

См. документацию.

Пример использования:

beforeEach(() => {
  cy.restoreLocalStorage()
  cy.visit('/')
})

afterEach(() => {
  cy.saveLocalStorage()
})

cypress-testing-library

См. документацию.

Пример использования:

cy.findByRole('button', { name: /Jackie Chan/i }).click()
cy.findByRole('button', { name: /Button Text/i }).should('exist')
cy.findByRole('button', { name: /Non-existing Button Text/i }).should('not.exist')
cy.findByLabelText(/Label text/i, { timeout: 7000 }).should('exist')

// findByRole _inside_ a form element
cy.get('form')
  .findByRole('button', { name: /Button Text/i })
  .should('exist')
cy.findByRole('dialog').within(() => {
  cy.findByRole('button', { name: /confirm/i })
})

momentjs

См. документацию.

Пример использования:

moment().format('MMMM Do YYYY, h:mm:ss a') // September 15th 2022, 4:15:18 am
moment().format('dddd') // Thursday
moment().format('MMM Do YY') // Sep 15th 22
moment().format('YYYY [escaped] YYYY') // 2022 escaped 2022
moment().format()

Преимущества использования этого шаблонного проекта

Не нужно настраивать проект

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

Подходит для новичков и прост в использовании

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

Вы можете иметь 2 уровня разделения

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

С этим шаблоном вам не придется этого делать. Вы можете создать столько команд и продуктов, сколько захотите, с большим уровнем разделения.
Когда любая команда запускает свои проекты, только ее команды и код будут загружены в программу Cypress test runner.

Вам не нужно беспокоиться о том, что имена ваших команд будут переопределять другие команды или продукты, более того, вы даже можете совместно использовать глобальные команды в ./cypress/support/commands.ts.

Резюме

• Проект динамически настраивается на основе четырех вышеуказанных аргументов
• Если вы укажете baseURL или testFiles в конфигах, они не будут перезаписаны.
• Мы не можем представить себе работу без этого шаблона, и надеемся, что вы будете чувствовать то же самое 🙂

🤝 Вклад

Вклад, проблемы и запросы функций приветствуются.

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

Покажите свою поддержку

Пожалуйста, ⭐️ опубликуйте этот репозиторий, если этот проект помог вам!

Лицензия 📝

Этот проект имеет лицензию MIT.

Надеюсь, это поможет и сэкономит ваше время в следующих проектах!

Спасибо за прочтение и не стесняйтесь добавлять предложения ниже 🙂