Учебник: Автоматизированные тесты Lighthouse с помощью GitHub Actions

Вы работаете над веб-проектом в GitHub и хотите знать Lighthouse KPIs вашего проекта после каждого git push? Вот как.

Наша цель — сделать так, чтобы результаты Lighthouse выглядели следующим образом:

1. Используйте GitHub Actions для сборки вашего кода

Мы хотели бы вычислять показатели Lighthouse KPIs на основе веб-сайта, который фактически создается и развертывается. GitHub Actions[https://github.com/features/actions] — это отличное средство для выполнения этих шагов прямо на git push.

Давайте рассмотрим это репо в качестве примера. Проект содержит небольшой демонстрационный сайт Vuepress.

Папка .github/workflows содержит .yaml, который описывает рабочий процесс GitHub Actions. Давайте пройдемся по этому файлу.

Убедитесь, что ваш рабочий процесс срабатывает на Git Push, запустив документ с помощью кнопки

on:
  - push

Затем установите зависимости, необходимые для вашей сборки, на GitHub Actions VM и выполните шаги сборки

      - name: Setup Node
        if: ${{ steps.project.outputs.deployment-enabled == 'true' }}
        uses: actions/setup-node@v1
        with:
          node-version: v16.x

      - name: Build Node assets
        if: ${{ steps.project.outputs.deployment-enabled == 'true' }}
        run: |
          npm ci
          npm run build

2. Разверните сборку и сохраните URL

Следующий шаг — развернуть результаты сборки где-нибудь. В моем примере проекта я использую IONOS Deploy Now в качестве цели развертывания. Примечание: Deploy Now не только предоставляет вам инфраструктуру, но и помогает настроить сборку. Это особенно полезно, если вы незнакомы с синтаксисом GitHub Actions.

Если вы используете Deploy Now, шаг Deploy to IONOS рабочего процесса, как и сказано, развернет ваш сайт на серверах IONOS и предоставит URL.

3. Запустите тест Lighthouse

Давайте используем этот замечательный GitHub Action для запуска теста Lighthouse, добавив его в рабочий процесс.

      - name: Audit URL using Lighthouse
        uses: treosh/lighthouse-ci-action@v9
        id: lighthouse
        with:
          urls: |
            https://example.com/
          temporaryPublicStorage: true # upload lighthouse report to the temporary storage

Если вы используете Deploy Now, вы можете заменить https://example.com/ на ${{ steps.project.outputs.site-url }} для ссылки на URL, на который был развернут ваш сайт.

4. Сгенерируйте красивый вывод

GitHub недавно анонсировал хорошую функцию под названием Job Summaries. Она позволяет генерировать визуальный отчет о состоянии в пользовательском интерфейсе GitHub сразу после выполнения каждого рабочего процесса.

Как вы можете видеть на изображении выше, я украсил его некоторой дополнительной информацией. Ключевой момент — вставить правильную ссылку на различные KPI, например ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.performance }}, чтобы иметь возможность распечатать их.

      - name: Job successful feedback
        if: ${{ success() }}
        run: |
          echo '### Successfully published to Deploy Now :white_check_mark:' >> $GITHUB_STEP_SUMMARY
          echo "Changes went live under: ${{ steps.project.outputs.site-url }}" >> $GITHUB_STEP_SUMMARY
          echo "Triggered by **${{ github.actor }}** ∙ deployed from **${{ github.ref_name    }}**" >> $GITHUB_STEP_SUMMARY
          echo ' ' >> $GITHUB_STEP_SUMMARY
          echo "**Lighthouse results:**" >> $GITHUB_STEP_SUMMARY
          echo "Performance: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.performance }}" >> $GITHUB_STEP_SUMMARY
          echo "Accessibility: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.accessibility }}" >> $GITHUB_STEP_SUMMARY
          echo "Best-practices: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.best-practices }}" >> $GITHUB_STEP_SUMMARY
          echo "SEO: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.seo }}" >> $GITHUB_STEP_SUMMARY
          echo "PWA: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.pwa }}" >> $GITHUB_STEP_SUMMARY
          echo ' ' >> $GITHUB_STEP_SUMMARY
          echo "[Visit documentation](https://docs.ionos.space/)" >> $GITHUB_STEP_SUMMARY
          echo "[Log in to Deploy Now](https://ionos.space/)" >> $GITHUB_STEP_SUMMARY

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

     - name: Job failed feedback
        if: ${{ failure() }}
        run: |
          echo '### Publishing to Deploy Now was not successful :cross:' >> $GITHUB_STEP_SUMMARY
          echo "Unfortunately, the deployment failed." >> $GITHUB_STEP_SUMMARY
          echo "Find help to debug this [here](https://docs.ionos.space/)." >> $GITHUB_STEP_SUMMARY

И это уже все! Наслаждайтесь развертыванием в репозитории и проверяйте свои KPI Lighthouse после каждого развертывания. А если хотите, посетите Deploy Now.

А что насчет вас? Имеет ли эта реализация смысл для вас?