How to Record Cypress Tests? (Detailed Guide)

offers multiple slipway to record user interactions and convert them into automate test scripts, get test conception faster and more approachable, peculiarly for novice.

This guide explores the two ways to record, edit and execute Cypress exam.

When is recording view a Good Option?

If you are new to Cypress and want to explore the tool, so it is a good idea to record a test and generate a code based on the activity you do on the website. You can explore more on the script generated. It will help you to translate how it works.

Record and playback functionality is a widely-used feature in trial automation tools. However, it is essential to consider the appropriate use cases for this characteristic and when it should be avoided, just like any other tool in your toolbox.

See the scenario where recording can be useful:

1. Ease of use:It is easygoing to use and requires minimal technological cognition. It is a great tool for QA engineers or developers unfamiliar with Cypress who want to create tests.
2. Record and Replay:You can record the tryout and replay it again; this can be useful for debug or understanding the test flow.
3. Useful for automation:Recorder allows you to chop-chop make tests for an existing web application without manually writing examination code. This can save time and travail, especially for large and complex coating.
4. Easy Test Maintenance:When the web application changes, Cypress Recorder can rapidly update existing tests by re-recording the interactions and updating the test codification.
5. Improved Test Coverage:Recorder can help you identify areas of the web application that may not be continue by existing tests, allowing you to improve the overall test reportage.

What is Cypress Studio?

Cypress Studiois an experimental feature in Cypress that allows testers to disc and generate examination steps by interacting with the application through the Cypress Test Runner.

It & # 8217; s designed to simplify test conception by captivate user actions, like clicking buttons, entering text, and selecting elements, and automatically converting them into trial code.

How It & # 8217; s Used for Cypress Test Recording:

• Enable Cypress Studioby setting& # 8220; experimentalStudio & # 8221;: true in the cypress.config.js file.
• Launch the Cypress Test Runner and run a test spec.
• In the UI, pawl& # 8220; Add commands to examine & # 8221;to start recording.
• Interact with your application (for exemplar, clink, type).
• Cypress Studio records these steps and adds them to your test script.
• Review and edit the generated commands before saving.

This makes test authoring faster, peculiarly for novice or for construct initial drafts of test cases.

How to Record and Edit Cypress tests using Cypress Studio?

Cypress Studio offers a visual approach to create tests using the Cypress Test Runner by recording user actions on the target application. It is an observational feature and can be enable by updating the pick in the config file (shown in the last section).

• With Cypress Studio, you can quickly record and playback user interaction, making it easy to test complex workflows and create reliable test example.
• It endorse common bidding such as .click (), .type (), .check (), .uncheck (), and .select ().
• It generates test code while interacting within the Cypress Studio DOM.

To use Cypress Studio, add theexperimentalStudioattribute in the configuration file.

For Cypress version 10 and above, Add it incypress.config.js, just like testify below:

How to Record and Run Cypress tests utilize Cypress Studio?

After you are execute with the above configuration.Now, write the test to open a URL.

Run the above test case and discover how to use Cypress Studio.

1. From Spec Runner Screen, hover over a Test Suite Name in the Command Log to reveal an & # 8220;Add New Test& # 8221; button.

2. Click “ Add New Test ” to launch the Cypress Studio. If you are utilize Cypress version 10 and supra, it will ask you to enter url but If you are using Cypress version below 10, it will show Studio Beta Pop-Up Window.

3. Click on Get Started. Next, it will ask you to enter the url. Now, participate the URL (Example:” https: //bstackdemo.com/ ”) and pawl on Continue Button.

4. After clicking on the continue, Cypress Studio starts recording and whatever action you perform on the application, it gets recorded and gets transubstantiate into Cypress code.

5.Perform some actions:Click on “ Add to hale ” for the product “ iPhone 12 ”

When you do any action on the page, you can observe the command get added mechanically on the left screen (Runner blind.)

6. Once, you are done performing actions, detent onSave Commandson the left panel

7. After clicking Continue, It will ask you to enter name for the test. Enter the gens and now, you will see new Test added in Test Runner.

8. Now, go to your Cypress examination case in IDE and you will see, there is test case added in spec file with all the actions you performed on the web page. There is a comment also added above the test case to inform you that this test example is created expendCypress Studio.

Following the above stairs, you cans easily add a new trial case using Cypress Studio.

How to update Existing Test using Cypress Studio?

In the above section, you learnt how to add a new trial case. But, what if you want to update any survive test case.Don ’ t trouble, you can update a test case as well employCypress Studio.

Below is step-by-step procedure to update exist test case using Cypress Studio:

1. Run your Cypress tryout case. Hover over a Test Case Name in the Command Log to reveal an & # 8220;Add Commands To Test& # 8221; button.

To adda new test cause, you need to hover over atest suitename but in order toupdatea examination case, you demand to hover over atest case..

2. Click on “Add Commands To Test” to update the existing test case. After you click on Add Commands to test, it will launch the Cypress Studio. And, there, you can perform activeness on the web page.

Understand with an example.

Continuing with the last exam example, execute below activeness on therecorder-test(test name)

For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

1. Click on Checkout
2. Select username from dropown
3. Prize password from dropdown
4. Click on Login

The above screenshot is from the web application where you take username, password and clicked on login. On the left side, there is section ofSTUDIO COMMANDSwhich will be visible.

These are the new steps which are update in your existing test case. Once, you save the test, it will be re-run on the Test Runner with the updated step which you performed on the web application.

3. Click on Save Commands to save the change. Once, you click on Save Commands. It gets save to the existing examination instance and your test would be executed again with the updated steps

4. Go rearwards to you Cypress test suit in IDE, you will observe the examination case got updated with the new commands

Following the above approach, you can update your existing examination cases utilise Cypress Studio. Apart from adding and updating a test lawsuit, you can also add Assertion in examination case using Cypress Studio.

What is Chrome Dev Tools Recorder Panel?

Chrome DevTools Recorder Panelis a built-in tool in the Chrome browser that allows you to tape user interactions on a webpage—such as clicks, navigation, and form inputs, and export them as test scripts. It is utilitarian for quick generating Cypress tryout without manual coding, especially for simple workflows.

How it & # 8217; s used in Cypress Test Recording:

• Unfastened Chrome, right-click anywhere on the page, and selectInspectto open DevTools.
• Go to the Recordertab and clickStart recording.
• Perform user actions on the webpage (for instance, click push, fill forms).
• Stop the transcription once it & # 8217; s perform.
• Click Exportand choose theCypressformat (or use a converter if involve).
• Copy the exported script and paste it into your Cypress test file for execution.

How to record and update tests use Chrome Dev Tools Recorder jury?

The & # 8220;Recorder& # 8221; venire in Chrome DevTools allows you to record user interactions with a web page and save them as a sequence of events that can be replay. This lineament is useful for debugging and performance analysis, because it permit you to see how a page conduct over time, identify slow-loading elements, and isolate specific number.

With Recorder panel, you can perform both the actions & # 8211; adding and updating a new tryout event.

How to enter new Tests using Chrome Dev Tools Recorder panel?

See footstep by step, how to show a test using Chrome Dev Tools Recorder panel.

1. Open Chrome Browser. Enter the url of your web application (Example: ”https: //bstackdemo.com/”) and open the Dev Tools.

2. Once, you open the Chrome Dev Tools, you can see Recorder tab. Click onStart new recording button.

3. Enter the recording name as per your choice (Example: Add to cart). Selector Attribute is optional. So, you can leave it as empty.

4. Click on Start a new tape button to start the recording of the activeness you execute on the web application.

5. The panel will establish “Recording” and you can see the progress of the recording on the Recorder tab.

6. Perform action on the site:

Understand with an example. Perform below actions on the page.

1. Click on Add to cart for product iPhone 12
2. Click on Add to cart for one more product iPhone 12 Mini
3. Click on Checkout
4. Quality username from dropdown
5. Select password from dropdown
6. Click on login

While you do the action on the page, you can observe the Recorder will have steps added in Recorder panel.

7. Once you are done with all the actions, click onEnd transcriptionin Recorder panel.After, you end the recording. You can replay the transcription by click on Replay push and control the progress of it in Recorder Panel.

You can replay and check the test case recording on the web-application.So, this is how you can record a test cause utilize the Dev ToolsRecorder Panel.

How to cut Tests use Dev Tools Recorder Panel?

Apart from create a new test case, you can also update the existing test case utilize Recorder panel. In order to edit any tryout, there should already be a test recorded in Recorder panel.

1. Continuing with the last test case, where I recorded a exam case already expend recorder panel.Now, If you want to edit any test. Just chink on that step of the test case and It will be expand.

2. Now, click on selector and perform the actions on the web-application. So, your old activeness would be overwrite by new action.

Try to understand with an example:

• Expand the Click action from Recorder panel.
• Click the Select button
• Select add to cart for another ware (iPhone11) on the web coating

3. Click on Replay. This time, It will also add iPhone11 to the handcart.

4. You can besides edit it manually by chatter on the selector value, if you want to modify the locator value.

Apart from update the value, you can also add or withdraw a selector by clicking on+ and –icon next to the selector. In case, by fault if you clicked on a element which was not component of testing. You can easily take that choice by clicking on (–) icon, present next to selector.

This way, you can edit any existing recorded test causa in Recorder panel

How to export the Recorder panel test case and run it in Cypress?

In last subdivision, you acquire how to add and edit the tryout case usingRecorderpanel. Now, see how to save this test case and run it employ Cypress in your local machine.

Pre-Requisite:To export JSON files from the Chrome DevTools Recorder, your Chrome adaptation must be 101 or higher

1. Record a user-interation on your website use Cypress Chrome Recorder (follow the terminal subdivision to record a tryout).

On the like Recorder tab where you contribute the recording, click on Export icon.

2. After snap on Export, you will see 3 option. Select “Export as JSON file”

3. After choose the Export option. Save the file.

4. Go to Cypress project on your scheme. Open end in IDE and run the below command:

npm install -g @ cypress/chrome-recorder

Pro-Tip:If you get permission issue, you can run it use the command

sudo npm install -g @ cypress/chrome-recorder

Explanation:

The commandnpm install -g @ cypress/chrome-recorderinstalls the Cypress Chrome Recorder as a spherical package for Node.js via the npm packet manager. The-g flag specifies to establish the software globally, do it available for use across your system.

After installing the package, you can spell the recorded trial case in our Cypress Project. To do the same, run the following command in the teminal.

npx @ cypress/chrome-recorder ~/location of folder/ {file-Name} .json

Example :My test case name isAdd-to-cart.jsonand it is saved in Documents booklet. So, for this cause, the dictation would be

npx @ cypress/chrome-recorder ~/Documents/Add-to-cart.json

Implementation:

Now, you would be capable to see the test case added ine2e/Integrationpamphlet depending on the Cypress versions you are using (e2e= & gt; If Cypress version is 10 and above and integration= & gt; if Cypress version is below 10)

You can now run the above test event using Terminal and it will give you the same solution which you saw while recording.

Disadvantages of Cypress Record and Playback of exam

Here are the keydisadvantages of using Cypress record-and-playback(through Cypress Studio or DevTools Recorder) for test mechanization:

• Limited Flexibility: Recorded hand often manage uncomplicated user flows well but struggle with active or complex examination scenario (for example, conditional logic, loops, or reclaimable functions).
• Fragile Tests: Recorded selectors may be unstable or overly specific, leading to frequent test failure when the UI changes slightly.
• Hard to Maintain: Updating recorded step manually can become time-consuming as your app evolves, particularly in large trial suites.
• Lacks Modularity: Record-and-playback puppet don ’ t promote reusable components or test design best practices like Page Object Models.
• Not Ideal for CI/CD: Recorded tests often require refinement before they can be reliably desegregate into continuous integration grapevine.
• No Support for Advanced Features: Features like API stubbing, usance commands, and conditional testing often need to be manually coded and can & # 8217; t be record.

Why run Cypress tests on Existent Devices?

Running Cypress tests on real device ensures your web application behaves systematically across genuine exploiter environs. Emulators and can & # 8217; t always replicate real-world conditions like device-specific render issues, touch interactions, network variance, and OS-level behavior.

Testing on existent devices helps you:

• Catch bugs specific to mobile browsers or screen sizes
• Validate responsive design and roving gestures
• Ensure performance and layout truth on actual hardware
• Gain confidence that your app delivers a consistent experience to end-users

lets you run Cypress tests on a all-encompassing range of real device and browsers host in the cloud. With no setup required, you can test across,, Edge, and peregrine browsers, ensuring and responsive performance. Automate supports execution, integration, and real-time debugging with video recordings and logs, helping you scale your testing effortlessly.

Conclusion

Test transcription in Cypress provide a powerful and effective way for testers/developers to automate their examination process. It proffer a user-friendly interface, which makes it easy to create and maintain test scripts, as well as its ability to handle modern web applications. By utilizing test recording in Cypress, organizations can salve time and resources, while meliorate the overall quality of their applications.

Related Guides