Хорошего времени суток, господа и дамы. Меня зовут Илья, и если вы занимаетесь автоматизацией на проекте, и ваш проект использует Vercel, то этот мини-гайд для вас.

Рассказ будет очень краткий, потому что как и многое другое, в Vercel интегрировать ваши авто-тесты очень просто и быстро. Но есть два пути.

Используем Github Actions

Оригинальный референс здесь.

Этот способ хорош для того, когда у вас уже есть какая-либо база автоматизированного тестирования и\или вы используете например Selenium или Cypress, например, а не Mocha, Puppeteer или Playwright.

Всё, что вам нужно, это добавить\обновить файл в вашем проекте:

.github/workflows/e2e.yml (выбирайте имя файла, какой хотите, какие тесты будете запускать)

name: E2E Tests

on:
  deployment_status:

jobs:
  e2e-tests:
    runs-on: ubuntu-latest
    if: github.event.deployment_status.state == 'success'
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 18

      - name: Install pnpm
        run: curl -f https://get.pnpm.io/v6.14.js | node - add --global pnpm

      - name: Install dependencies
        run: pnpm install

      - name: Run E2E tests
        run: |
          if [ "${{ env.VERCEL_ENV }}" != "production" ]; then
            my_param="qa"
          else
            my_param=""
          fi
          npx cypress run --config-file "cypress.config.ts" --config specPattern="cypress/e2e" baseUrl=${{ github.event.deployment_status.target_url }} --env nice_param=$my_param allure=true --spec "cypress/e2e/base.cy.js,cypress/e2e/meta.cy.js"
        continue-on-error: true
        id: e2e_tests

      - name: Generate Allure report
        if: always()
        run: pnpm run allure:generate allure-results

      - name: Archive Allure report
        run: zip -r allure-report.zip allure-report

      - name: Upload Allure report
        uses: actions/upload-artifact@v2
        with:
          name: allure-report
          path: allure-report.zip

      - name: Check test status (finally)
        if: ${{ steps.e2e_tests.outcome == 'failure' }}
        run: exit 1

Вместо Cypress, вы, конечно, можете использовать что угодно, например тот же pytest/selenium, а отдать устанавливать окружение, например tox. Или дёргать какой-то сторонний сервис \ вебхук.

Здесь нужно обратить внимание на:

if: github.event.deployment_status.state == 'success'

Тесты будут запущены, если развёртывание произошло успешно (дёрнут соответствующий webhook).

Также, вероятно, вы захотите разделить тесты или их параметры в зависимости что за окружение используется. В моём примере, если у нас не предполагается, что развёртывание будет происходить на production, то добавляем параметр "my_param" к запуску (он где-то внутри будет использован в тестах). Собственно окружение Vercel доступно через переменную env.VERCEL_ENV.

          if [ "${{ env.VERCEL_ENV }}" != "production" ]; then
            my_param=""
          else
            my_param="qa"
          fi

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

${{ github.event.deployment_status.target_url }}

В разные шаги можем добавить разные тесты или отчёты, например, Allure-reports.

В результате запуска, вы увидите результат выполнения тестов в GitHub (если вы конечно, например, не вызвали какой-нибудь сторонний сервис Jenkins или какую-то облачную платформу тестирования).

Детально лог:

И репорт будет сложен в Actions->Run->Summary->Artifacts:

Используем Checks

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

Вы можете написать свой плагин (Integration), который будет проверять ваше развёртывание через Checks API, либо использовать готовый - Checkly:

Checkly использует тесты на Playwright, из коробки минимальные проверки, которые, конечно, вы можете дополнить своими:

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

В заключение

Как видите, добавлять тесты для проектов Vercel очень просто и быстро.

На этом всё. Если этот материал был вам полезен, то не забудьте поставить лайк этому посту, написать комментарий, а так же, если воодушевитесь - поделиться монеткой:

https://www.donationalerts.com/r/rocketsciencegeek

Комментарии (0)