← Back to Blogs
Frontend CI/CD with GitHub Actions, Playwright, and Quality Gates

Frontend CI/CD with GitHub Actions, Playwright, and Quality Gates

How we reduced deployment failures by 25% at Timbu with automated pipelines — lint, typecheck, tests, preview deploys, and E2E gates that protect high-traffic Next.js apps.

Shipping fast without shipping fear

High-traffic frontend apps fail in production for boring reasons: untyped API changes, CSS regressions, flaky manual QA skipped on Friday afternoons.

At Timbu Limited, I implemented CI/CD pipelines via GitHub Actions that reduced deployment failure rates by ~25% on a Next.js + TypeScript stack handling significant payment volume.

At TheFoundersLab, strict ESLint and Prettier configs across repositories kept production bugs down ~35% as the team grew.

This is the pipeline I'd recommend for a senior frontend team today.

Pipeline stages

name: Frontend CI

on:
  pull_request:
  push:
    branches: [main]

jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run lint
      - run: npx tsc --noEmit
      - run: npm run test -- --ci --coverage
      - run: npx playwright install --with-deps chromium
      - run: npx playwright test --project=chromium

Every stage maps to a failure class we actually hit in production.

Pull request preview deployments

Vercel (or Netlify) previews gave designers and PMs a URL per PR. We required:

  • Lighthouse smoke check on preview (soft fail)
  • Visual review for UI-facing changes

This shortened design–dev feedback loops by ~20% on feature work.

Environment parity

Flaky CI often means environment drift:

  • Lock Node version in .nvmrc and CI
  • Use npm ci, not npm install
  • Store Playwright browsers in CI cache
  • Mirror .env.example keys in CI secrets for integration tests

Branch protection rules

On main:

  • Require PR reviews
  • Require status checks: lint, typecheck, unit tests, E2E
  • Disallow force push

Simple rules. Enormous leverage.

Release automation

On merge to main:

  1. Run full test suite
  2. Deploy to staging
  3. Run smoke Playwright against staging
  4. Promote to production with manual approval for payment routes

Automated promotion for low-risk areas; human gate for money paths.

Observability after deploy

CI does not end at green checks. We paired releases with:

  • Sentry for client errors (release tags)
  • Web Vitals dashboards
  • Rollback playbook documented in the repo README

At WealthHat, mentoring juniors on review standards plus CI gates reduced review cycle time ~20% because feedback became predictable.

Key takeaways

  1. Lint + typecheck + tests + E2E — minimum bar for production frontend
  2. Preview deploys catch UX issues unit tests miss
  3. Branch protection turns good intentions into enforced habits
  4. Tie deploy tags to error monitoring for fast rollback decisions
HomeAboutProjectsBlogs