Этот блог поможет вам понять, как реализовать ваши тесты e2e с помощью Cypress, а также выполнить непрерывную интеграцию и доставку с CircleCI для ваших тестов.

О Кипарисе

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

- Путешествие во времени

- Возможность отладки

- Автоматическое ожидание

- Скриншоты и видео

- Кроссбраузерное тестирование

И многое другое…

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

Настройка проекта

Приступим к настройке базового проекта Cypress.

- Создайте папку с именем cypress-circleci и инициализируйте проект узла.

$ mkdir cypress-circleci
$ npm init

- Установить кипарис командой

npm install cypress --save

- Откройте кипарисовик из вашего проекта

npx cypress open

- Структура папок будет выглядеть примерно так

circleci-cypress
│
└───fixtures
│ │ sampleData.json
│ │
└───integration
│ │ siteVerify.js
│
└───plugins
│ │ index.js
│
└───screenshots
│ │ img1.pmg
│
└───results
│ │ test
│
└───supports
│ │ commands.js
│ │ index.js
|
└───cypress.json
└───package.json

- Создайте базовый тест для проверки сайта https://dikshitashirodkar.com. И вы можете настроить базовый URL своего сайта внутри cypress.json

{
  "baseUrl": "https://dikshitashirodkar.com/",
  "video": false,
  "reporterOptions": {
    "mochaFile": "cypress/results/tests-[hash].xml",
    "toConsole": true
  }
}

Примечание: по умолчанию cypress предоставляет видеозапись выполненных тестов, здесь мы явно отключили ее с помощью флажка видео. И добавил конфигурации для отчета в формате xml.

В приведенном ниже тестовом файле используется fixtures (используется для хранения и управления тестовыми данными, которые представляют собой не что иное, как файл json).
Простой файл фикстуры с именем sample.json

{
  "imageName": "dikshita",
  "heading": "QA Talking point"
}

Вот базовый тест integration/test.js. Тест содержит:

1. Посетите сайт

2. Убедитесь, что статус ответа сайта - 200

3. Проверьте заголовок блога, чтобы быть «точкой для обсуждения QA»

4. Убедитесь, что значок изображения в блоге является «dikshita»

describe("Verify the website", function() {
  before(function() {
    cy.visit("/")
  })
  beforeEach(function() {
    cy.fixture("sample").then(function(sample) {
      this.sample = sample
    })
  })
  it("verify the status of the site", function() {
    cy.request("/about").should(function(response) {
      expect(response.status).to.eq(200)
    })
  })
  it("verify the heading of the blog", function() {
    cy.get(".head-logo")
      .children("a")
      .should("have.text", this.sample.heading)
  })
  it("verfiy the image icon on the site", function() {
    console.log(this.sample, "printing data")
    cy.get(".profile-img")
      .should("have.attr", "src")
      .and("include", this.sample.imageName)
  })
})

Давайте выполним тесты с помощью команды:

npm run cypress run --browser chrome

Результат будет примерно таким:

Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  tests/verifySite.js                      00:08        3        3        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✔  All specs passed!                        00:08        3        3        -        -        -

Итак, вы успешно настроили и выполнили… 🏅

Запускаем кипарис с CircleCI

CircleCI - это инструмент непрерывной интеграции и развертывания, который помогает командам интегрировать свой код в репозиторий и создавать тесты «n» раз в день. CircleCI использует Orbs, которые являются общедоступными пакетами параметризуемых возобновляемых элементов конфигурации с открытым исходным кодом, включая задания, команды и исполнителей.
CircleCI также предоставляет Orb для тестирования cypress, не тратя время на настройку CircleCI. Он также записывает результаты и предоставляет графический интерфейс.

Перейдем к настройке CircleCI

- Создайте папку .circleci в корневом каталоге вашего проекта
- Добавьте файл в папку .circleci как config.yml

version: 2.1
orbs:
  cypress: cypress-io/cypress@1
executors:
  with-chrome:
    resource_class: small
    docker:
      - image: "cypress/browsers:node14.16.0-chrome90-ff88"
workflows:
  build:
    jobs:
      - cypress/install
      - cypress/run:
          requires:
            - cypress/install
          executor: with-chrome
          browser: chrome
          post-steps:
            - run: ls
            - store_test_results:
                path: cypress/results
            - store_artifacts:
                path: cypress/screenshots

Примечание: поместите свой проект Cypress в систему с контролируемой версией (github или bitbucket). В нашем случае мы бы разместили его на github.

Настройте свою учетную запись CircleCI

1. Вы можете войти на портал CircleCI через gitHub, и у вас будет доступ ко всем вашим репозиториям github на экране списка проектов.

2. Чтобы настроить circleci для вашего проекта концентратора git, выберите Setup project. Затем вам будет предложено выбрать ветку, из которой вы хотите выполнять свои тесты, и она должна содержать config.yml внутри .circleci папки. Или другой вариант - создать новый файл конфигурации.

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

3. По мере настройки проекта конвейер будет запускаться автоматически, и можно будет увидеть прогресс сборки.

4. Успех конвейера будет выглядеть так:

5. Неисправный конвейер будет выглядеть так

6. Мы добавили конфигурацию для хранения результатов тестирования и артефактов в нашем config.yml файле. Следовательно, мы также сможем увидеть детали неудачного теста в разделе теста и ссылку на снимок экрана теста в разделе артефактов.

Это все для этого блога. Надеюсь, вам понравилось. Спасибо за прочтение…!