[Question] Is it possible to embed playwright code within cypress framework somehow?

[Songyu-Wang]

Hello,

After some preliminary research, I feel like the playwright framework is superior than cypress. If I am starting a new project now, I would for sure pick playwrite. Unfortunately, we have an existing test suite that contains about 500 test cases (complex, enterprise-level) in cypress. It is very hard to justify abandoning them just because playwright supports some of the cypress limitations.

So I am wondering if there is a way for playwright and cypress to co-control one chrome instance so we can embed some of the playwright code to hack around some cypress limitations as a starting point. Maybe by doing this, we can piecemeal refactor more and more cypress code to playwright and rebirth the test suite with fewer hacks and away from some of the awkward cypress ideology.

Also, if anyone has ideas about how to convert cypress project to playwright, I would be very interested in reading them!

[marko-simic]

Yes, you can run Playwright script file with cy.task method.

/// <reference types="cypress" />
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

const { runPlaywrightCode } = require("../support/playwright-file")

/**
 * @type {Cypress.PluginConfig}
 */
// eslint-disable-next-line no-unused-vars
module.exports = (on, config) => {
  on("task", {
    runPlaywrightCode,
  })

...

Playwright script file

...
exports.runPlaywrightCode = async function payWithPayPal(pObject) {
...

[Songyu-Wang]

Yes, you can run Playwright script file with cy.task method.

/// <reference types="cypress" />
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

const { runPlaywrightCode } = require("../support/playwright-file")

/**
 * @type {Cypress.PluginConfig}
 */
// eslint-disable-next-line no-unused-vars
module.exports = (on, config) => {
  on("task", {
    runPlaywrightCode,
  })

...

Playwright script file

...
exports.runPlaywrightCode = async function payWithPayPal(pObject) {
...

Hello, @marko-simic thanks for your reply, but this will open a new chrome instance which can only be applied in limited ways for only a few workarounds.

[unlikelyzero]

@Songyu-Wang generally speaking, a great pattern to follow when migrating between frameworks is to focus on the following priorities:

1. Divesting from unique capabilities of your current framework (i.e. Cypress's Dashboard). This is important so that you can avoid any associated gotchas in Fix CapsLock everywhere #3 below.
2. Get the two frameworks to report together (i.e. Jenkins HTML Report or Junit on the nightly). This ensures that folks are used to seeing a unified report of coverage AS WELL AS ensuring that you have the necessary reporting capabilities in your second framework.
3. Then have all new features get e2e tests associated with the new e2e framework. This is important as it will be difficult to get the ROI from rewriting the old tests until your team is equally up to speed with the new framework.

[Songyu-Wang]

@unlikelyzero Hello, thanks for your reply. Yep, I am pretty familiar with the general path since migrating from selenium to cypress was a big thing a few years ago. I guess the issue I am having is that I have a hard time to justify the heavy up-front investment to parallelly creating a new framework and do all the reporting stuff like you mentioned. Me having to write 5 workarounds in the past month probably wont cut it. so it would super beneficial if we can somehow plugin some of the functionality of playwright to demo the ROI before this can be considered seriously.

[dgozman]

@Songyu-Wang If you can make cypress start Chromium with --remote-debugging-port=9222 and then use chromium.connectOverCDP() in Playwright, most things should work. Let me know whether this helps or if you have any questions.

[Songyu-Wang]

Hello @dgozman thank you very much! I will for sure try it and report back in the upcoming days.

[Songyu-Wang]

@dgozman,
Thank you so much. What you suggested works. Made a quick cypress plugin for it https://github.com/Songyu-Wang/cypress-plugin-playwright

[Songyu-Wang]

and I am closing the issue

[hangboss1761]

@dgozman,
Thank you so much. What you suggested works. Made a quick cypress plugin for it https://github.com/Songyu-Wang/cypress-plugin-playwright

cool!

[Anshita-Bhasin]

You can also check this video if u want to combine both.