Next.js + Playwright + GitHub Actions Boilerplate

Комплексное Todo приложение с API и E2E тестами с включенными GitHub Actions.

Смотрите репозиторий: https://github.com/burakkantarci/playwright-todo-app

Этот проект представляет собой шаблон для демонстрации использования современных стеков вместе. Стек проекта:

• Next.js Todo App
• Playwright
• Действия GitHub
• Foresight

Мотивация

Рынок технологических стеков расширяется все больше и больше, и увидеть все в действии — самый простой способ убедиться в преимуществах. Я решил создать комбинацию Next.js, Playwright, GitHub Actions и Foresight для создания E2E стека для веб-приложения.

Все внешние инструменты бесплатны; поэтому вам не нужно ничего платить, чтобы попробовать этот стек.

Что будет в результате

• Бессерверное приложение TODO на базе Next.js с Upstash — самый простой способ создания готового к производству веб-приложения.
• Фреймворк для тестирования Playwright, который работает в любом браузере и на любой платформе. Он легкий и простой в освоении. Мы внедрим JUnit, чтобы можно было генерировать отчет о тестировании.
• GitHub Actions для создания конвейера CI. Не нужно объяснять, что такое GitHub, но GitHub Actions имеет 2000 минут бесплатного выполнения CI; поэтому с его помощью легко автоматизировать все ваши программные рабочие процессы.
• Foresight обеспечивает полную видимость и глубокое понимание здоровья и производительности ваших тестов и CI/CD конвейеров. Мы не просто построим стек; мы позаботимся о том, чтобы он работал быстро и эффективно.

Настройка приложения Todo

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

Настройка приложения Next.js является обязательной. Если Next.js настроен в приложении, вы также можете использовать его. Я рекомендую использовать приведенный выше пример, если у вас нет предварительных настроек.

Настройка Playwright

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

• Выберите JavaScript (вы также можете выбрать Typescript)
• Имя вашей папки Tests
• Добавьте рабочий процесс GitHub Actions, чтобы легко запускать тесты на CI.

После завершения установки у вас будет базовая настройка Playwright. Ваш тест будет находиться в папке tests, а простой GitHub Action playwright.yml вы можете увидеть в папке .github.

Следует отметить, что Playwright предоставляет примеры тестов, чтобы вы могли понять, как он работает.

Написание нашего E2E-теста

Мы добавим E2E-тест, который будет добавлять Todo-элемент и завершать его. Эта спецификация поможет нам убедиться, что наши API и взаимодействие с пользователем работают.

Создайте файл add.spec.js в папке tests и вставьте в него следующий код:

// @ts-check
const { test, expect } = require('@playwright/test');

const TODO_ITEMS = [
 'buy some cheese',
 'feed the cat',
 'book a doctors appointment'
];

test.beforeEach(async ({ page }) => {
 await page.goto('https://localhost:3000/');
});

test('add a todo item', async ({ page }) => {

 var todoName = TODO_ITEMS[0];

 // Text input
 await page.locator('#todo').fill(todoName);
 await page.locator('#todo').press('Enter');

 // Make sure the list only has one todo item.
 await expect(page.locator('.Home_card__2SdtB')).toHaveText([
   todoName
 ]);

});

test('complete a todo item', async ({ page }) => {

 var todoName = TODO_ITEMS[0];

 // Text input
 await page.click(`.Home_card__2SdtB:has-text("buy some cheese")`);
  // Make sure the list only has one todo item.
 await expect(page.locator('.Home_card__2SdtB')).not.toHaveText([todoName]);
});

Перейдите в playwright.config.js и отключите параллелизацию. Это поможет нашим тестам работать по очереди.

/* Run tests in files in parallel */
 fullyParallel: false,

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

Перейдите в package.json и добавьте тестовый скрипт

"test": "playwright test"

С помощью этой команды вы сможете запустить тест командой npm run test в терминале и в GitHub Actions.

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

Создание отчета JUnit

JUnit reporter создает XML-отчет в стиле JUnit. Мы будем использовать отчет о тестировании для мониторинга состояния нашего теста. Это необходимо для обеспечения приемлемого уровня качества нашего веб-приложения Todo.

Перейдите в playwright.config.js и добавьте следующее:

reporter: [ ['junit', { outputFile: 'results.xml' }] ],

Когда вы запустите свои тесты, будет создан файл с именем results.xml, который будет выглядеть следующим образом:

При возникновении ошибки в отчет будут включены журналы ошибок и сообщения.

Настройка наших действий на GitHub

Внесите ваш код в репозиторий GitHub. Начальное действие playwright.yml поможет нам запускать наш тест в каждом коммите и запросе на перенос. Ваша конфигурация должна выглядеть следующим образом:

name: Playwright Tests
on:
 push:
   branches: [ main, master ]
 pull_request:
   branches: [ main, master ]
jobs:
 test:
   timeout-minutes: 60
   runs-on: ubuntu-latest
   steps:
   - uses: actions/checkout@v2
   - uses: actions/setup-node@v2
     with:
       node-version: '14.x'
   - name: Install dependencies
     run: npm ci
   - name: Install Playwright Browsers
     run: npx playwright install --with-deps
   - name: Run Playwright tests
     run: npx playwright test
   - uses: actions/upload-artifact@v2
     if: always()
     with:
       name: playwright-report
       path: playwright-report/
       retention-days: 30

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

GitHub Action работает безупречно, автоматизируя работу, которую вы выполняли вручную. Вам не нужно самостоятельно запускать npm run test; GitHub Actions делает это автоматически, когда вы фиксируете новый код. Однако GitHub Actions не предоставляет достаточно информации о ваших тестах и их производительности. Когда они терпят неудачу, вы должны понять это, найдя их в логе в деталях выполнения рабочего процесса.

Мы будем использовать Foresight для мониторинга наших тестов. Отказ от ответственности, я работаю на Foresight. Он бесплатен для всех проектов с открытым исходным кодом. Для его запуска требуется очень простая конфигурация.

Настройка Foresight

Вы можете использовать это руководство для настройки конфигурации Foresight. Все, что вам нужно сделать, это создать учетную запись, установить приложение Foresight на GitHub и просмотреть репозиторий, который вы инициировали для этого руководства.

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

name: Playwright Tests
on:
 push:
   branches: [ main, master ]
 pull_request:
   branches: [ main, master ]
jobs:
 test:
   timeout-minutes: 60
   runs-on: ubuntu-latest
   steps:
   - uses: actions/checkout@v2
   - uses: actions/setup-node@v2
     with:
       node-version: '14.x'
   - name: Install dependencies
     run: npm ci
   - name: Install Playwright Browsers
     run: npx playwright install --with-deps
   - name: Run Playwright tests
     run: npx playwright test
   - name: Foresight test kit
     if: success() || failure()
     uses: runforesight/foresight-test-kit-action@v1
        with:
       api_key: ${{ secrets.FRS_PROD_API_KEY }}
       test_format: JUNIT
       test_framework: JEST
       test_path: ./results.xml

Как вы можете видеть, мы ввели поля format, framework и path с помощью конфигурации, которую мы создали выше.

Это действие автоматически отправит отчет о тестировании в Foresight, и Foresight проанализирует ваши тесты наиболее удобным для пользователя способом. После обновления YAML ваш рабочий процесс будет запущен автоматически, и вы сможете увидеть результаты выполнения рабочего процесса в Foresight, как показано ниже:

Внешне он очень похож на GitHub Actions; однако он оснащен уникальными функциями, такими как анализ влияния изменений и выделения. В отличие от беспорядочного представления журнала в GitHub, вы можете легко получить доступ к результатам тестирования благодаря чистому дизайну. Вы можете узнать больше о Foresight здесь.

Резюме

Я надеюсь, что этот проект станет для вас пособием для начала работы над проектом Next.js с E2E-покрытием. Это базовое приложение с API, тестами Playwright и GitHub Actions.

С помощью Foresight и Upstash вы сможете усовершенствовать свои процессы и получить преимущества от новейших технологических стеков.