Рубрики
Uncategorized

Как запустить тесты браузера через Cypress в вашем трубопроводе CI/CD с AWS Codebuild

Запустите тесты браузера в вашем трубопроводе CI/CD без селена. Tagged с AWS, WebDev, DevOps, тестирование.

Недавно я запустил свой собственный блог Анкет Во время этого процесса я заинтересовался тем, как я могу автоматизировать тестирование качества моего нового блога. Я не хотел тяжелой рамки. Я не хотел глубоких тестов, потому что функциональность в моем блоге не очень словеса.

Основной вещью, которую я хотел проверить, был мобильный вид моего блога в сравнении с планшетом/настольным представлением. Я часто совершаю ошибку, изменяя класс CSS или элемент HTML и каким -то образом сломал мобильный макет, о котором я не думал.

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

  • Я хотел, чтобы это было легким, в идеале единым NPM Установка было бы идеальным.
  • Это должно было быть легко интегрировать в мой AWS Codepipelie CI/CD Pipeline Анкет
  • Настройка теста, утверждения и структура компонентов должны быть разумными.

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

Введите сцену справа: Cypress.io

Впервые я наткнулся на кипариса через твит от Кента Доддса в прошлом году.

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

Модульные тесты являются фантастическими, и они являются обязательным для фронтальных и направленных услуг. Но если мы вспоминаем тестирующую пирамиду от Мартина Фаулера.

Мы видим, что модульные тесты являются самой большой каплей. Они должны быть быстрыми и недорогими.

Но другие капли, обслуживание и пользовательский интерфейс также важны.

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

На мой взгляд, именно здесь в игру вступает Кипарис.

Я могу написать свои модульные тесты, используя любую структуру, что мне больше всего удобно, будь то NUNIT, MOCHA, PYUNIT и т. Д. Но для таких услуг, как мой блог на основе React, мне нужно добавить тесты пользовательского интерфейса или тесты на конечный к конечному, которые тестируют функциональные возможности или то, как все отображается.

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

Начать работу с кипарисом очень просто. Мы можем просто установить его как зависимость DEV в нашем проекте.

$ npm install cypress --save-dev

После установки мы можем создать несколько новых каталогов и нашего первого тестового прибора.

$ mkdir cypress/integration/blog-verify
$ touch landing.spec.js

Для моей страницы в блоге я собираюсь написать следующий тест Cypress внутри Landing.spec.js Анкет

/// 

context('Landing', () => {
    beforeEach(() => {
        cy.visit('https://blog.kylegalbraith.com')
    })

    it('center header on small screens', () => {
        cy.get('.container > div')
            .should('have.css', 'text-align')
            .and('match', /left/);

        cy.viewport('iphone-6+');

        cy.get('.container > div')
            .should('have.css', 'text-align')
            .and('match', /center/);
    });
});

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

Тогда в тесте Центральный заголовок на маленьком экране Я использую библиотеку Cypress с Chai, подобными утверждениям, чтобы проверить мои результаты. Во -первых, я проверяю, что CSS моего заголовка установлен на Текст-альбом: слева; с браузером нормального размера. Затем я установил ширину браузера на мобильный вид, Cy.Viewport ('iPhone-6+'); Чтобы проверить изменения текста в Центр Анкет

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

Теперь, чтобы запустить тест, мы можем выполнить Cypress из нашего node_modules папка.

$ node_modules/.bin/cypress run
Running: blog-verify/landing.spec.js...                                                

  Landing
    √ center header on small screens (4524ms)


  1 passing (7s)

  ┌───────────────────────────────────────────┐
  │ Tests:        1                           │
  │ Passing:      1                           │
  │ Failing:      0                           │
  │ Pending:      0                           │
  │ Skipped:      0                           │
  │ Screenshots:  0                           │
  │ Video:        true                        │
  │ Duration:     7 seconds                   │
  │ Spec Ran:     blog-verify/landing.spec.js │
  └───────────────────────────────────────────┘

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

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

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

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

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

Включение кипариса в AWS Codepipeline и Codebuild

Если вы помните из предыдущего сообщения в блоге, Я разработал модуль Terraform, который обеспечивает проекты GIT Repo, AWS Codepipeline и AWS Codebuild чтобы я мог иметь весь конвейер CI/CD в конце концов для всех моих новых проектов. Для моего блога я использовал этот модуль, чтобы я мог постоянно развернуть свой блог с любыми новыми коммитами в Мастер Анкет

Чтобы запустить эти новые тесты, мне просто нужно обновить buildspec.yml Файл в моем репозитории. Этот файл YAML — это то, что сообщает AWS CodeBuild, как создавать, тестировать и развернуть мой статический веб -сайт.

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

version: 0.2
phases:
  install:
    commands:
      - echo "install cypress dependencies..."
      - npm install -g gatsby-cli
      - npm install -g purgecss
  pre_build:
    commands:
      - echo "pre_build step"
  build:
    commands:
      - cd src
      - cd new-gatsby-blog
      - npm install
      - npm run-script build
      - aws s3 cp public/ "s3://blog.kylegalbraith.com/" --recursive --cache-control 'public, max-age=2628000'
      - aws cloudfront create-invalidation --distribution-id E3SMHPICHT13MG --paths '/*'
  post_build:
    commands:
      - echo "post_build step"

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

Вот buildspec.yml Файл после внесения этих изменений.

version: 0.2
phases:
  install:
    commands:
      - echo "install cypress dependencies..."
      - npm install -g gatsby-cli
      - npm install -g purgecss
      - apt-get update
      - apt-get install -y libgtk2.0-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 xvfb
  pre_build:
    commands:
      - echo "pre_build step"
  build:
    commands:
      - cd src
      - cd new-gatsby-blog
      - npm install
      - npm run-script build
      - aws s3 cp public/ "s3://blog.kylegalbraith.com/" --recursive --cache-control 'public, max-age=2628000'
      - aws cloudfront create-invalidation --distribution-id E3SMHPICHT13MG --paths '/*'
      - node_modules/.bin/cypress run
  post_build:
    commands:
      - echo "post_build step"

Заметьте здесь, внутри установить шаг мы бежим:

apt-get install -y libgtk2.0-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 xvfb

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

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

node_modules/.bin/cypress run

Теперь, когда я проверяю изменения, моя кода AWS CodePipeline будет запускается.

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

  Running: blog-verify/landing.spec.js...                              (2 of 2) 


  Landing

    ✓ center header on small screens (697ms)


  1 passing (2s)


  (Results)

  ┌───────────────────────────────────────────┐
  │ Tests:        1                           │
  │ Passing:      1                           │
  │ Failing:      0                           │
  │ Pending:      0                           │
  │ Skipped:      0                           │
  │ Screenshots:  0                           │
  │ Video:        true                        │
  │ Duration:     2 seconds                   │
  │ Spec Ran:     blog-verify/landing.spec.js │
  └───────────────────────────────────────────┘


  (Video)

  - Started processing:   Compressing to 32 CRF
  - Finished processing:  /codebuild/output/src459391942/src/src/new-gatsby-blog/cypress/videos/blog-verify/landing.spec.js.mp4 (1 second)


================================================================================

  (Run Finished)


      Spec                                    Tests  Pass…  Fail…  Pend…  Skip… 
  ┌────────────────────────────────────────────────────────────────────────────┐
  │ ✔ blog-verify/individual_post.…   00:02      1      1      -      -      - │
  ├────────────────────────────────────────────────────────────────────────────┤
  │ ✔ blog-verify/landing.spec.js     00:02      1      1      -      -      - │
  └────────────────────────────────────────────────────────────────────────────┘
    All specs passed!                 00:05      2      2      -      -      -  

[?25h
[Container] 2018/08/12 00:59:08 Phase complete: BUILD Success: true
[Container] 2018/08/12 00:59:08 Phase context status code:  Message: 
[Container] 2018/08/12 00:59:08 Entering phase POST_BUILD
[Container] 2018/08/12 00:59:08 Running command echo "post_build step - run cypress"
post_build step - run cypress

[Container] 2018/08/12 00:59:08 Phase complete: POST_BUILD Success: true

Вы можете видеть, что мы получаем подробную разбивку нашего тестового выполнения. Мы можем даже скопировать видеофайлы из нашего Codebuild Run, если хотим. Очень круто!

Вывод

В этом посте мы говорили о том, почему важны конец или интеграционные тесты. Никто не говорит, что вы должны пройти все в тестах интеграции/пользовательского интерфейса, но вы должны, по крайней мере, покрыть основные функции для вашего применения с ними. Они не Замена для отличных модульных тестов, но они являются Отличный дополнение.

Мы только поцарапали поверхность того, что может предложить Cypress. Я намерен исследовать его дальше, чтобы проверить больше моих сложных приложений. Надеемся, что это дало вам введение в тестирование пользовательского интерфейса и продемонстрировало, как его можно легко включить в ваш трубопровод CI/CD.

Как всегда, если у вас есть какие -либо вопросы, пожалуйста, не стесняйтесь оставить мне комментарий ниже или обратиться ко мне Twitter Анкет

Вы голодны, чтобы узнать больше о веб -сервисах Amazon?

Хотите узнать больше о AWS? Недавно я выпустил электронную книгу и видео, который прорезает море информации. Он фокусируется на хостинге, защите и развертывании статических веб -сайтов на AWS. Цель состоит в том, чтобы изучить услуги, связанные с этой проблемой, поскольку вы их используете. Если вы хотели выучить AWS, но вы не уверены, с чего начать, проверьте мой курс .

Оригинал: «https://dev.to/kylegalbraith/how-to-run-browser-tests-via-cypress-in-your-cicd-pipeline-with-aws-codebuild-7ej»

Читайте ещё по теме: