How to Integrate Cypress and Playwright to Access (SSO) Pages

Problem Statement

How can you access a new page, such as Single Sign-On (SSO) pages, within the same main page using Cypress?
In this article, we will review the existing conditions and explore how to use Playwright as a separate file within the Cypress project to get cookies from Playwright and use them in Cypress.

Contents

1- Getting Started
2- Scenario and Conditions
* Using Playwright: A Great Solution
3- Starting the Test
3.1 Get and Return Cookies in Playwright:
3.2 Setting the Cookies in Cypress:
4- Cypress.config
5- Conclusion

1- Getting Started

Cypress and Playwright are two powerful automation testing frameworks. Each has its own strengths and limitations. What if we could use both frameworks to cover their limitations in one project?

Let’s review the scenario, assess the existing conditions, and see how the integration between Cypress and Playwright can help us access a new page within the same main page in Cypress.

2- Scenario and Conditions:

Feature:  Login functionality

Scenario: Login a user to the website via the SSO page
  Given   the user opens the main URL
  When    the user clicks on the Login button
  And     the new page (SSO) opens, and the user completes the personal information
  And     the user clicks on the Enter button
  Then    if the personal information is correct, the login is completed

Conditions:
There are conditions for implementing this scenario using Cypress. Let’s take a quick look at these conditions.

1- cy.origin:
The base URL of the main page is the same as the base URL of the new page. This similarity prevents Cypress from switching between the two pages. Additionally, the new page’s URL includes a dynamically generated path.

2- cy.Invoke:
The target URL of the login button on the main page isn’t displayed; therefore, Cypress cannot access the properties of the new page.

3- Login with APIs:
When the new page is opened, we don’t have access to all requests due to security issues. Additionally, Getting an access token independently can be quite complex, and using this approach as a dependent system could impact the automation process

* Using Playwright: A Great Solution:

Why is Playwright an excellent choice?

Working with Playwright is straightforward and can support this scenario. This means Playwright can navigate to a new page, complete personal information, and then login to the main site.

If we use Playwright alongside Cypress to navigate through the new page, Playwright can get and return cookies, and finally we can set them in Cypress. Wow, we can definitely solve the problem!

3- Starting the Test:

A complete test run involves two main steps:

3.1 Get and Return Cookies in Playwright

3.2 Setting the cookies in Cypress.

3.1 Get and Return Cookies in Playwright:

To provide detailed information, I’ve covered this topic in another article. You can find it by click on the link.

**Note 1:** Playwright codes should be written as a separate file in the ‘support’ folder within your Cypress project.

Note 2:** When using Playwright code within the Cypress project, it is required to make some changes because it is different from running Playwright independently.

Changes:

• Use ‘const’ instead of ‘import’ to define the Playwright library, as the import statement cannot be used outside a module. To export Playwright actions, defining a module is necessary.
• Create an asynchronous function to execute actions related to capturing and returning cookies. To use cookies in Cypress, we need to export this function.
• “module.exports” is used to export an object containing functions or properties.

const playwright = require("playwright");

module.exports = {
  async captureAndSetCookies() {
    const browser = await playwright.chromium.launch({ headless: false });
    try {
      // ... Login codes ...
}

3.2 Setting the Cookies in Cypress:

The overall purpose of this code is to call playwright function and set cookies in Cypress. Let’s break down the code:

/// <reference types="cypress" />

Cypress.Commands.add("captureAndSetCookies", () => {
  return cy.task("captureAndSetCookies").then((cookies) => {

    cookies.forEach((cookie) => {
      cy.setCookie(cookie.name, cookie.value, { log: false });
    });
  });
});
it("Login a user to the website via the SSO page", () => {
  cy.captureAndSetCookies();
  
// ... continue the test ...
});

Cypress.Commands.add("captureAndSetCookies", () => { ... })

Cypress allows you to use built-in functionality and extend it by creating your own reusable commands. This is helpful when you want to reuse the results of a specific functionality across multiple tests.

return cy.task("captureAndSetCookies").then((cookies) => {...

• “cy.task” handling tasks that are outside the scope of the browser automation. It enables communication between your Cypress test code and server-side Node.js code or external tasks.
• “.then” allows you to use the yielded subject in a callback function, enabling asynchronous handling of these cookies

cookies.forEach((cookie) => {
      cy.setCookie(cookie.name, cookie.value, { log: false });
    });

“cy.setCookie” yields a cookie object with properties such as "name" and "value" and sets the cookie in the current browser context. This process is performed for each cookie.

it("Login a user to the website via the SSO page", () => { ... })
cy.captureAndSetCookies(),
cy.visit(dev_baseUrl)
// ... continue the test ...

• “cy.captureAndSetCookies()” is a custom command designed to summarize the actions related to capturing and setting cookies using Playwright.
• This function is initiated at the start of the test, performing the process of capturing and setting cookies. Afterward, the Cypress test continues to define and execute the remaining steps.

4- Cypress.config:

The Cypress configuration file (cypress.config) requires specific modifications. Let’s break down the relevant parts:

const { defineConfig } = require("cypress");
const playwrightProject = require("./cypress/support/playwrightProject");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on("playwrightProject", tasks);
    },
  },
});

const tasks = require("./cypress/support/task");

Imports the ‘playwright’ module from the specified path, which contains a custom task (‘captureAndSetCookies’) for Cypress.

e2e: {
    setupNodeEvents(on, config) {
      on("playwrightProject", tasks);
    },
  },

When the “playwrightProject” event is triggered, it will execute the tasks defined in the ‘tasks’ object.
This event setup is likely used to integrate and handle specific functionalities related to the Playwright project within the Cypress testing environment.

5- Conclusion:

In this article, we’ve covered the integration of a Playwright project within the Cypress project in four parts:

1. Setting up Playwright as a separate file.
2. Using Playwright codes within the Cypress project.
3. Getting cookies from Playwright and Using Them in Cypress.
4. Configuring Cypress settings.

You can explore the code repository related to this article on GitHub:
https://github.com/armanabbassii/Cypress-Playwright

☕️ Happy automating! ☕️