Skip to content

Migrate to Playwright for E2E tests #1852

@Gauravjeetsingh

Description

@Gauravjeetsingh

Migrate E2E tests from Cypress to Playwright to improve performance, reliability, and maintainability.

Current State

The project currently uses Cypress for E2E testing with:

12 test files covering:

  • Navigation (4 tests: index, random-shabads, sundar-gutka, sync)
  • Search (4 tests: full-word-gurmukhi, first-letter-start, first-letter-anywhere, romanized-first-letter-anywhere)
  • Multiview (3 tests: index, search, shabad)
  • Settings (1 test: sources)

Custom Cypress commands:

  • checkGranthIndices - Tests granth index navigation
  • loadAmritKeertanFirstChapter - Loads Amrit Keertan chapters
  • checkSgCard - Validates Sundar Gutka card styling

Phase 1: Setup

  • Install Playwright and dependencies (@playwright/test)
  • Create playwright.config.js with base configuration
  • Set up test directory structure (tests/e2e/)

Phase 2: Migrate Custom Commands

  • Convert checkGranthIndices to Playwright helper function
  • Convert loadAmritKeertanFirstChapter to Playwright helper function
  • Convert checkSgCard to Playwright helper function
  • Create helper for toast notification dismissal
  • Create utilities in tests/e2e/helpers/

Phase 3: Migrate Test Files

  • cypress/integration/navigation/index.spec.js
  • cypress/integration/navigation/random-shabads.spec.js
  • cypress/integration/navigation/sundar-gutka.spec.js
  • cypress/integration/navigation/sync.spec.js
  • cypress/integration/search/full-word-gurmukhi.spec.js
  • cypress/integration/search/first-letter-start.spec.js
  • cypress/integration/search/first-letter-anywhere.spec.js
  • cypress/integration/search/romanized-first-letter-anywhere.spec.js
  • cypress/integration/multiview/index.spec.js
  • cypress/integration/multiview/search.spec.js
  • cypress/integration/multiview/shabad.spec.js
  • cypress/integration/settings/sources.spec.js

Phase 4: Remove cypress:open and cypress:record

  • Remove Cypress dependencies (cypress, eslint-plugin-cypress)
  • Update CI/CD workflows (if applicable)
  • Remove cypress/ directory
  • Remove cypress.json
  • Update documentation
  • Verify all tests pass on multiple browsers

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions