What is Cypress Studio?

Problem Statement

Solution

Overview

The .click(), .type(), .check(), .uncheck(), and .select() Cypress commands are supported and will generate test code when interacting with the DOM inside of the Cypress Studio.

Steps to integrate Cypress Studio

Step 1

Change in cypress.json file. Add below the line on cypress.json “experimentalStudio”: true

Step 2

/// <reference types=”cypress” />

describe(“Test login funcationlity “, () => {

it(“Open URL”, () => {

cy.visit(“https://www.saucedemo.com/");

});

Step 3:

Step 4:

Step 5:

Two Options (Add Commands to Test, Add New Test) [See Screenshot Below]

— Add Commands to Test (Add Test steps in the existing test case.)

— Add New Test (Add Completely new test case)

Explanation of TWO Options (Add Commands to Test, Add New Test)

Add Commands to Test (Add Test steps in the existing test case)

Click on “Add Commands to Test” Cypress Studio ready to record the steps [Both Screenshot Below]

Enter Username / Password. On the left Side (In Command Log) all the steps are recorded by Cypress Studio

Click on Save commands, for recorded steps code is generated [See screen shot] below

Step 1.2:

Add New Test (Add completely new test case) which “Cypress Studio” do for us)

You can add a new test to any existing describe or context block by clicking “Add New Test”

Click on Add New Test (See Below Screenshot)

Enter URL https://www.saucedemo.com/ and click on Go

Enter Username and Password and click on the Login button. All steps are recorded on the left side (In Command Log).

Click on Save Commands, Enter “test case name” and click on Save Test

Once the above steps are done, view the generated code by Cypress Studio.

We Can see on the left side (In Command Log) new test case (with name ‘Updated Test Case’ is added)

Cypress Studio Added New Test case (it) block under describe or context block

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
QAAutomationlabs.com

|| Cypress.io Ambassador || https://qaautomationlabs.com/blogs || PMI-ACP® |ITIL® || PRINCE2® || Cypress|| Selenium| WebdriverIO |API Automation QATube®