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

Аргументы

имя тип по умолчанию описание
product String Название продукта
team String Имя команды
env String staging Любое окружение, которое вы поддерживаете
type String default Используется для нацеливания на конкретный конфиг внутри configs/team/product/. Ежедневно, еженедельно, в течение дня, как угодно.

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

  • 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.

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

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

Оцените статью
Procodings.ru
Добавить комментарий