Skip to content

Complete Playwright migration and remove Cypress - #1691

Draft
tonypzy wants to merge 13 commits into
fossasia:devfrom
tonypzy:chore/complete-playwright-migration
Draft

Complete Playwright migration and remove Cypress#1691
tonypzy wants to merge 13 commits into
fossasia:devfrom
tonypzy:chore/complete-playwright-migration

Conversation

@tonypzy

@tonypzy tonypzy commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

Description

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Code refactor or cleanup (changes to existing code for improved readability or performance)

Checklist:

  • I adapted the version number under py/visdom/VERSION according to Semantic Versioning
  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.

Summary by Sourcery

Migrate end-to-end and visual regression testing from Cypress to Playwright across codebase and CI, removing Cypress tooling and adding Playwright coverage for key panes.

New Features:

  • Add Playwright image pane E2E and interaction tests, including compare-mode and download behavior.
  • Add Playwright tests for the parallel coordinates pane, covering basic rendering and closing behavior.
  • Introduce a dedicated Playwright testing skill document for contributors and internal agents.

Bug Fixes:

  • Improve Playwright environment dropdown helpers to more reliably open, expand, and close environment selectors during tests.
  • Increase demo callback wait time for testing mode to reduce flakiness in callback-driven scenarios.

Enhancements:

  • Standardize npm test scripts around Playwright for functional, polling, visual, and UI-driven runs.
  • Refine Playwright helpers for image interaction (drag, zoom, history, callbacks) and comparison workflows used in tests.
  • Adjust internal agent context and skills to reference Playwright-based testing flows and file locations instead of Cypress.

CI:

  • Remove Cypress-based jobs and artifacts from the GitHub Actions workflow and run all E2E/visual suites via Playwright instead.
  • Update CI artifact naming for Playwright reports to be Python-matrix aware and aligned with the new test scripts.

Documentation:

  • Update CONTRIBUTING, website docs, README, and refactoring guidelines to describe Playwright-based E2E and visual regression workflows, commands, and locations.
  • Revise internal testing context documentation to reflect Playwright usage and commands instead of Cypress.

Tests:

  • Port former Cypress image and parallel coordinates coverage to Playwright specs, including advanced image interactions and history, SVG, callbacks, and compare mode.
  • Document and enforce equivalent WebSocket and polling coverage via Playwright test suites for frontend behavior.

Chores:

  • Remove Cypress configuration, fixtures, support files, and dependencies from the repository and package.json.

Debajeet-1411 and others added 13 commits July 5, 2026 10:33
…e-select-tree to avoid hidden aria-live nodes
1. openEnv (helpers.js): Use getByText with exact: true instead of locator('text=...') to prevent substring matches on hidden child nodes inside collapsed groups.

2. ctrlWheel (image.spec.js): Default clientX and clientY to target element center when undefined, matching Cypress trigger('wheel') behavior.

3. image_callback2 (image.spec.js): Click pane to set focusedPaneID before sending arrow keypresses via page.keyboard so Visdom publishes KeyPress events.

4. compare mode download (image.spec.js): Collect download events via page.on('download') and poll until 2 files are received.
@sourcery-ai

sourcery-ai Bot commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

Reviewer's Guide

Migrates all E2E and visual regression testing from Cypress to Playwright, updates CI workflows and documentation to reflect the new Playwright-based workflows, removes Cypress-specific configuration and dependencies, and adds new Playwright specs and helpers to maintain test coverage and image/pane behavior parity.

Flow diagram for Playwright environment dropdown helpers

flowchart TD
  S[Start_openEnv] --> C1[Check_if_dropdown_visible]
  C1 -->|No| O1[Click_env_selector_with_force]
  O1 --> W1[Wait_for_dropdown_visible]
  C1 -->|Yes| F1[Find_env_tree]
  W1 --> F1

  F1 --> T1[Compute_expectedText_from_env_name]
  T1 --> V1[Wait_for_group_label_visible_using_getByText_exact]
  V1 --> X1[expandAllEnvGroups]
  X1 --> V2[Wait_for_env_name_visible_using_getByText_exact]
  V2 --> CL[Click_env_name_with_force]
  CL --> CD[closeEnvDropdown]
  CD --> E[End]

  subgraph closeEnvDropdown
    C2[Locate_visible_dropdown]
    C2 -->|Visible| C3[Click_env_selector_with_force]
    C3 --> C4[Wait_for_dropdown_hidden]
    C4 --> C5[If_still_visible_press_Escape_and_wait_hidden]
  end
Loading

File-Level Changes

Change Details Files
Replace Cypress CI jobs with Playwright-based workflows and align npm test scripts with Playwright configurations.
  • Remove visual-regression and functional Cypress jobs from the GitHub Actions workflow.
  • Rename functional test job to Playwright functional test and reuse Python matrix setup.
  • Switch CI commands from Cypress runs to Playwright runs, including WebSocket, polling, and visual regression suites.
  • Adjust artifact names and commands for Playwright baseline and visual runs.
  • Ensure Playwright uses npm test and new test:polling, test:init, and test:visual scripts.
.github/workflows/process-changes.yml
Standardize Playwright npm scripts and remove Cypress-related dependencies and scripts.
  • Drop Cypress, pixelmatch, pngjs, and Cypress-specific ESLint plugin devDependencies.
  • Add Playwright GUI mode via test:gui script.
  • Rename Playwright-specific scripts (test:pw*, etc.) to generic test, test:polling, test:init, and test:visual commands.
  • Ensure Playwright configs are used for functional and visual runs across npm scripts.
package.json
Update contributor and internal documentation to describe Playwright testing workflows instead of Cypress.
  • Rewrite CONTRIBUTING testing section to describe Playwright UI, CLI, and visual regression flows and commands.
  • Update website docs contributing page to reference Playwright usage and commands.
  • Adjust internal testing context and refactoring docs to mention Playwright for E2E and visual tests.
  • Update AGENTS and skill docs to point to Playwright testing, directory structure, and workflows instead of Cypress.
  • Add a dedicated playwright-testing skill guide and remove the old cypress-testing skill.
CONTRIBUTING.md
website/docs/contributing.md
.agents/context/testing.md
REFACTORING.md
AGENTS.md
.agents/skills/README.md
.agents/skills/adding-pane/SKILL.md
.agents/context/architecture.md
.agents/skills/frontend-pane-lifecycle/SKILL.md
.agents/skills/polling-parity/SKILL.md
.agents/skills/python-client-api/SKILL.md
.agents/skills/release-process/SKILL.md
.agents/skills/playwright-testing/SKILL.md
.agents/skills/cypress-testing/SKILL.md
Enhance Playwright helper utilities for interacting with environment dropdowns and groups to improve test robustness.
  • Limit env group locator to visible switcher elements to avoid interacting with hidden nodes.
  • Implement a more robust closeEnvDropdown that clicks the tree-select control and falls back to Escape if needed, waiting for dropdown to hide.
  • Improve openEnv to reliably open the dropdown, waiting for visible state and retrying on failure.
  • Switch text matching in the tree to getByText with exact matching for both group name and full env name, ensuring elements are visible before clicking.
playwright/support/helpers.js
Increase demo callback wait time for automated tests and clarify testing CLI help text.
  • Introduce TEST_CALLBACK_WAIT_SECONDS constant set to 30 seconds.
  • Use the constant when sleeping for callback actions in testing mode.
  • Update -testing argument help text to emphasize deterministic random seed and the new wait duration.
example/demo.py
Add new Playwright specs to cover image pane behavior and parallel coordinates pane, mirroring previous Cypress coverage.
  • Create image.spec.js with tests for basic image rendering, drag-and-drop movement, reset, zoom (corner and center), combined move+zoom, downloads, history slider, grids, SVG, callbacks, keyboard-driven callbacks, and compare mode behavior including captions and downloads.
  • Create parallel_coordinates.spec.js with tests for basic render and closing behavior of the parallel coordinates pane.
  • Use shared helpers (runDemo, openEnv, closeEnvs) and precise assertions on DOM structure, attributes, and downloads.
playwright/tests/image.spec.js
playwright/tests/parallel_coordinates.spec.js
Remove Cypress configuration, fixtures, and specs as part of the migration.
  • Delete Cypress config file and its fixtures.
  • Remove all Cypress integration specs including basic, pane, image, text, properties, modal, misc, parallel_coordinates, screenshots init/visual, and UploadDashboard.
  • Remove Cypress support files and screenshot config.
  • Ensure gitignore/yarn.lock are updated implicitly by dependency removals.
cypress.config.js
cypress/fixtures/test.json
cypress/integration/UploadDashboard.js
cypress/integration/basic.js
cypress/integration/export.js
cypress/integration/image.js
cypress/integration/misc.js
cypress/integration/modal.js
cypress/integration/pane.js
cypress/integration/parallel_coordinates.js
cypress/integration/properties.js
cypress/integration/screenshots.init.js
cypress/integration/screenshots.js
cypress/integration/text.js
cypress/support/commands.js
cypress/support/index.js
cypress/support/screenshots.config.js

Possibly linked issues

  • #(un-numbered): The PR removes Cypress, adds equivalent Playwright tests, and updates CI, scripts, and docs to finish the migration.

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants