Cypress

CI, паралелізація, звіти

запуск у пайплайні

Як запустити Cypress у GitHub Actions?

Найпростіше — офіційна дія cypress-io/github-action: вона встановлює залежності з кешем, за потреби запускає застосунок, чекає на нього і проганяє тести. Артефакти зі скріншотами завантажують при падінні.

name: e2e
on: [pull_request]

jobs:
  cypress:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: cypress-io/github-action@v6
        with:
          browser: chrome
          start: npm start
          wait-on: 'http://localhost:3000'
        env:
          CYPRESS_USER_PASSWORD: DOLLAR{{ secrets.USER_PASSWORD }}
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: screenshots
          path: cypress/screenshots

На співбесіді: Я використовую офіційну дію cypress-io github-action: вона ставить залежності з кешем, піднімає застосунок, чекає на нього і запускає тести. Секрети передаються з secrets репозиторію, а при падінні скріншоти зберігаються як артефакти. Тести запускаються на кожен pull request.

А в Playwright:

- run: npm ci
- run: npx playwright install --with-deps
- run: npx playwright test
- uses: actions/upload-artifact@v4
  if: always()
  with:
    name: playwright-report
    path: playwright-report

Є й офіційний Docker-образ з браузерами — mcr.microsoft.com/playwright.

Як паралелізувати тести Cypress?

На одній машині Cypress паралельно не запускає: один процес, один браузер, спеки по черзі. Паралелізація — лише між кількома машинами.

Cypress Cloud: cypress run --record --parallel розподіляє спеки між машинами з урахуванням тривалості. Це платний сервіс після безкоштовного ліміту.
Безкоштовно: матриця в CI плюс плагін cypress-split, який ділить спеки між запусками.

Одиниця розподілу — спек-файл, тому великі спеки краще розбивати.

strategy:
  matrix:
    containers: [1, 2, 3, 4]
steps:
  - uses: cypress-io/github-action@v6
    env:
      SPLIT: 4
      SPLIT_INDEX: DOLLAR{{ strategy.job-index }}

На співбесіді: На одній машині Cypress виконує спеки послідовно, тому паралелізація — тільки між кількома машинами. Офіційний шлях — Cypress Cloud з прапорцями record і parallel, але це платно. Безкоштовно можна зробити матрицю в CI і поділити спеки плагіном cypress-split. Одиниця розподілу — спек-файл, тому я тримаю спеки невеликими.

А в Playwright:

Паралелізація безкоштовна і вбудована: воркери на одній машині (за замовчуванням половина ядер CPU) плюс --shard=1/4 між машинами і merge-reports для злиття звітів. Одиниця розподілу — тест, а не файл.

Які звіти, скріншоти й відео дає Cypress?

У cypress run скріншот при падінні робиться автоматично. Відео з Cypress 13 вимкнене за замовчуванням, вмикається через video: true.

Звіти: вбудований spec-репортер у консолі, mochawesome для HTML (з окремим злиттям звітів після запуску), allure-cypress для Allure з історією та трендами, JUnit XML для CI.

// cypress.config.ts
export default defineConfig({
  video: true,
  screenshotOnRunFailure: true,
  reporter: 'mochawesome',
  reporterOptions: {
    reportDir: 'cypress/reports',
    overwrite: false,
    html: false,
    json: true,
  },
});

На співбесіді: При падінні в режимі run скріншот робиться автоматично, а відео треба явно увімкнути, бо з тринадцятої версії воно вимкнене. Для HTML-звітів я використовую mochawesome, а якщо потрібна історія і тренди — Allure через allure-cypress. Для CI-систем є JUnit XML.

А в Playwright:

HTML-звіт із вбудованим Trace Viewer є з коробки. Скріншоти, відео й трейси налаштовуються в use: screenshot, video, trace. Allure — через allure-playwright, JUnit — вбудованим репортером.

Flaky-тести в Cypress і retries

Найчастіші причини: фіксовані cy.wait замість очікування умов, гонки з мережевими запитами, анімації, залежність тестів один від одного й від спільних даних. Також — нестабільні селектори, перерендер елемента після того, як його знайшли, та повільне CI-середовище.

Лікування: чекати на запити через cy.intercept і аліаси, будувати ланцюжки з асершенами, які ретраяться, ізолювати тести й створювати дані через API. Кожен тест має починатися з відомого стану. Для діагностики — відео, скріншоти і Test Replay в Cypress Cloud.

Retries налаштовуються в конфізі: retries: { runMode: 2, openMode: 0 }, де runMode — для cypress run у CI, openMode — для інтерактивного режиму. Можна задати retries і для окремого тесту чи блоку describe. Але ретраї лише маскують проблему, тому flaky-тести треба відстежувати й виправляти першопричину.