This project uses Playwright for end-to-end testing across multiple HTML editor integrations. The testing setup supports parallel execution across different editors with configurable environments.

The E2E tests are located in /tests/e2e/ with the following structure:

tests/e2e/
├── .env.example              # Environment configuration template
├── .env                      # (Optional) Local environment configuration; git-ignored
├── playwright.config.ts      # Playwright configuration
├── enums/                    # Shared enums for test logic
├── helpers/                  # Utility/helper functions
├── interfaces/               # Shared TypeScript interfaces
├── page-objects/             # Page object models
│   └── base_editor.ts        # Base editor class
│   └── html/                 # Page object for each editor test page
└── tests/                    # Test specifications
    ├── edit/                # Formula editing tests
    │   ├── edit_corner_cases.spec.ts
    │   ├── edit_hand.spec.ts
    │   ├── edit_via_doble_click.spec.ts
    │   └── edit_via_selection.spec.ts
    ├── editor/              # Editor functionality tests
    │   ├── copy_cut_drop.spec.ts
    │   └── editor.spec.ts
    ├── insert/              # Formula insertion tests
    │   ├── insert_corner_cases.spec.ts
    │   ├── insert_hand.spec.ts
    │   └── insert.spec.ts
    ├── latex/               # LaTeX functionality tests
    │   └── latex.spec.ts
    ├── modal/               # Modal dialog tests
    │   ├── confirmation_dialog.spec.ts
    │   └── toolbar.spec.ts
    └── telemetry/           # Analytics tests
        └── telemetry.spec.ts

The testing framework supports the following HTML editors with their corresponding localhost ports:

You can configure your environment using an optional .env file or by setting variables directly in the CLI command, as explained below.

1. Copy the environment template:

   cp tests/e2e/.env.example tests/e2e/.env

2. Configure your environment:

   # tests/e2e/.env
   
   # Select editors to test (pipe-separated)
   HTML_EDITOR=generic|ckeditor4|ckeditor5
   
   # Environment selection
   USE_STAGING=false
   
   # Branch for staging tests
   TEST_BRANCH=master
   
   # API Keys for commercial editors. Required to deploy the test page.
   CKEDITOR4_API_KEY=
   FROALA_API_KEY=

# Install dependencies
yarn install

# Install Playwright browsers
yarn playwright install --with-deps

The yarn test:e2e script is defined in the main package.json and runs the E2E tests.

Playwright is configured to pre-build and deploy both the package and test site (demos folder) for the configured editors and deploy them in order to run the test. Don't pre-deploy the test page, Playwright will do it by itself.

# Run tests for specific editors
HTML_EDITOR=ckeditor5 yarn test:e2e

# Run tests for multiple editors
HTML_EDITOR=generic|froala yarn test:e2e

# Run all tests for all editors. If no HTML_EDITOR variable is set, all editors are tested
yarn test:e2e

# Run with staging environment
USE_STAGING=true yarn test:e2e

# Run specific browser
yarn test:e2e --project=webkit

# Run in headed mode
yarn test:e2e --headed

# Run specific test file
yarn test:e2e tests/insert/insert.spec.ts

See the official Playwright CLI documentation for more details on available commands and options.

Example workflow:

# Build and test CKEditor5
yarn
HTML_EDITOR=ckeditor5 yarn test:e2e

See (playwright.config.ts).

The E2E tests are automated via GitHub Actions (run-e2e-tests.yml):

• When tests run: On pushes to main, pull requests, and manual workflow dispatch
• Parallelization: Each editor runs in a separate job using matrix strategy for maximum parallel execution
• Reports:
  • Github reports appear in the GitHub Actions Checks tab
  • Failed tests create GitHub Actions annotations with direct links for quick debugging.
  • A single HTML report is generated and attached to the workflow run. Contains results for all Editors.

This project previously used cypress for E2E testing. There might still be some reference to Cypress in the code (e.g.: see test section in the demos project.json files). These must be deleteded.

• Remove cypress refereces in the project.json files
• Remove cypress dashboard secrets in the repository
• Remove old documentation cypress references.