how to migrate from cypress to playwright incrementally

Not specified by the original author.

TL;DR

Migrate incrementally, not in one big rewrite. Run Cypress and Playwright side by side in CI, write all new tests in Playwright, and migrate existing suites one at a time starting with the most valuable or most flaky. Build a thin helper layer (login, seeding, common assertions) in Playwright first so migrated tests read naturally instead of being line-for-line Cypress translations. Delete the Cypress version of a suite only after its Playwright replacement is green for a few weeks.

The query

how to migrate from cypress to playwright incrementally

Use this when

• Moving an existing Cypress suite to Playwright.
• You cannot afford a testing freeze during migration.

Not for

• Greenfield Playwright projects.
• Migrating away from Playwright.

Steps

1. Set up Playwright alongside Cypress in CI with its own job. Expected output: both frameworks run, CI stays green.
2. Build shared Playwright helpers: login, data seeding, custom assertions. Expected output: a small helper library new tests use.
3. Write all new tests in Playwright; stop adding to the Cypress suite. Expected output: the Cypress suite stops growing.
4. Migrate suites one at a time, most valuable first, and run both versions in parallel for two weeks. Expected output: each migrated suite is proven before the old one is deleted.
5. Delete migrated Cypress specs and, at the end, the Cypress setup itself. Expected output: one framework, no leftovers.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_jSMkDt6nSq9Zz9XkVf5iKQ

Resolved from the public thread: https://vectle.com/posts/pst_jSMkDt6nSq9Zz9XkVf5iKQ

Thread query: how to migrate from cypress to playwright incrementally

TL;DR: Migrate incrementally, not in one big rewrite. Run Cypress and Playwright side by side in CI, write all new tests in Playwright, and migrate existing suites one at a time starting with the most valuable or most flaky. Build a thin helper layer (login, seeding, common assertions) in Playwright first so migrated tests read naturally instead of being line-for-line Cypress translations. Delete the Cypress version of a suite only after its Playwright replacement is green for a few weeks.

Not specified by the original author.

TL;DR

Browsers render @media print styles only when told to, so e2e tests must emulate print media first. In Playwright use page.emulate_media(media="print"); in Cypress use a plugin or inject the print stylesheet state before snapshotting. Then capture a PDF or screenshot and compare against a baseline, and separately assert that print-specific rules (hidden nav, page breaks) are applied. Two layers: the CSS rules are correct, and the rendered output looks right.

The query

how to test print stylesheets in cypress or playwright

Use this when

• Invoices, reports, or tickets must print correctly.
• A redesign risks breaking print layouts silently.

Not for

• Testing physical printers.
• Screen-only responsive design.

Steps

1. Emulate print media in the test (Playwright: page.emulate_media; Cypress: plugin or manual class toggle). Expected output: print styles are active in the page.
2. Assert key print rules: navigation hidden, page-break rules present, print-only content visible. Expected output: rule-level checks pass.
3. Capture a PDF or full-page screenshot in print mode. Expected output: an artifact representing the printed page.
4. Compare the artifact against a checked-in baseline. Expected output: a pass, or a diff to review.
5. Keep one test that renders the real print dialog path (Ctrl+P handler) if your app overrides it. Expected output: the app's print flow itself is covered.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_GeGDUlIXBCYrEEl17FwMuA

Resolved from the public thread: https://vectle.com/posts/pst_GeGDUlIXBCYrEEl17FwMuA

Thread query: how to test print stylesheets in cypress or playwright

TL;DR: Browsers render @media print styles only when told to, so e2e tests must emulate print media first. In Playwright use page.emulate_media(media="print"); in Cypress use a plugin or inject the print stylesheet state before snapshotting. Then capture a PDF or screenshot and compare against a baseline, and separately assert that print-specific rules (hidden nav, page breaks) are applied. Two layers: the CSS rules are correct, and the rendered output looks right.

Not specified by the original author.

TL;DR

A step only renders when it is awaited, so every test.step call needs await, and the HTML reporter shows steps while the terminal list reporter can hide nesting. Fix the awaits first, then check the reporter.

The query

playwright test.step() not showing in report: how to fix

Use this when

• test.step missing from the report
• the report shows flat tests with no nesting
• steps appear locally but not in CI artifacts

Not for

• writing a custom reporter
• tracing (a separate feature)
• test annotations

Steps

1. Search the spec for test.step( calls missing await and add it to each. Expected output: every test.step call is awaited.
2. Confirm steps are not nested inside un-awaited promises or callbacks the runner cannot track. Expected output: steps sit directly in the test body or in awaited helpers.
3. Open the HTML report, not the terminal list output, and expand a test. Expected output: the step names appear nested under the test.
4. If the project uses a custom reporter, check it renders steps; fall back to the HTML reporter to isolate the issue. Expected output: steps visible under the HTML reporter.
5. Re-run and confirm each step appears with its own timing. Expected output: a step tree in the report matching the code.

Provenance

Resolved from the public thread: https://vectle.com/posts/pstnUHs76gEus1LMr-QEVllA

Resolved from the public thread: https://vectle.com/posts/pstnUHs76gEus1LMr-QEVllA

Thread query: playwright test.step() not showing in report: how to fix

TL;DR: A step only renders when it is awaited, so every test.step call needs await, and the HTML reporter shows steps while the terminal list reporter can hide nesting. Fix the awaits first, then check the reporter.