Cypress Debugging: Suggestions for Speedy Decision – DZone – Uplaza

Writing code shortly is a priceless talent, however the true mark of a proficient software program developer is the flexibility to successfully debug and resolve errors and bugs. Debugging is a crucial side of the event course of, guaranteeing that software program features as meant and meets consumer wants.

Cypress’s debugging capabilities make it a useful instrument for QA engineers and builders. Its detailed error messages, interactive take a look at runner, integration with developer instruments, and specialised debug instructions permit for fast and environment friendly decision of take a look at failures. Debugging Cypress exams may also help you establish points in your take a look at code and the applying beneath take a look at. Cypress affords a number of strategies and instruments for efficient debugging. On this weblog, we’ll focus on easy methods to debug your Cypress exams utilizing the Cypress debugger and different developer instruments.

Earlier than leaping into the assorted strategies of Cypress debugging, let’s attempt to perceive why debugging is vital.

Why Is Debugging Vital?

Debugging is a crucial side of software program growth, and the standard of debugging instruments obtainable in a framework can considerably affect the event course of. Right here’s a extra detailed take a look at why debugging is so essential and what to contemplate when selecting a framework:

Significance of Debugging

Error Detection

Debugging instruments assist establish the place and why errors happen within the code, permitting builders to pinpoint the precise location of the problem.

Code Correction

As soon as an error is detected, debugging instruments help in understanding the reason for the error, facilitating the event of an answer.

Efficiency Optimization

Debugging shouldn’t be solely about fixing errors but in addition about bettering the efficiency of the code. It helps establish inefficiencies and bottlenecks in this system.

Guaranteeing Performance

Debugging ensures that the software program behaves as anticipated, assembly the desired necessities and offering a easy consumer expertise.

Enhancing Safety

Figuring out and fixing vulnerabilities via debugging can stop potential safety breaches.

Within the subsequent part, you will notice the assorted Cypress debugging strategies.

Strategies of Debugging in Cypress

Debugging in Cypress may be carried out utilizing varied strategies, together with command logs, .pause(), .debug(), cy.log(), console.log(), and the native JavaScript debugger.

An extra technique of debugging the take a look at case in Cypress is by screenshot and video.

Debugging in Cypress includes a number of strategies to assist establish and resolve points in your exams. Right here’s an in depth information on every debugging technique:

Cypress Debugging Utilizing Command Logs

Cypress command logs are mechanically proven within the Cypress Take a look at Runner. it supplies an in depth log of all Cypress instructions executed throughout the take a look at, together with their standing, length, and any related errors.

Utilization

• Run your take a look at within the Cypress Take a look at Runner.
• Observe the command log within the left panel to see every command executed step-by-step.
• Click on on particular person instructions to see extra particulars, together with DOM snapshots earlier than and after the command execution.

Advantages

• Offers a visible timeline of all actions
• Simple to identify the place a take a look at fails

Within the screenshot under, the left panel shows every command executed step-by-step, whereas the proper facet exhibits the corresponding outcomes. This setup permits us to pinpoint the reason for take a look at case failures effectively. For example, within the instance supplied, the take a look at is failing as a result of the UI shows totally different textual content.

Cypress Debugging Utilizing Methodology .pause()

The .pause() technique pauses the take a look at execution at a particular level, permitting you to examine the state of the applying and debug any points.

cy.get(‘.element’).pause().click on();

Advantages

• Helpful for stopping execution at a exact step to examine the DOM
• You may resume the take a look at manually within the Cypress Take a look at Runner by clicking the “Resume” button.

Instance

Within the instance under, we now have put .pause() on the sign-in button after coming into the information within the password area.

/// 
describe("Verify Login/Logout And Tab functionality", () => {
 it("Login and Click on 'Codeless' link Under Automation Section", operate () {
 cy.go to("https://testgrid.io/");
 cy.get('[title="Sign in"]').click on();
 cy.get("#email")
 .clear("jarryliurobert@gmail.com")
 .kind("jarryliurobert@gmail.com");
 cy.get("#password").clear().kind("Test@1234");
 cy.get(".signin-button").click on().pause();
 cy.accommodates("Dashboard");
 cy.get("#tgtestcase").click on();
 cy.accommodates("Lets get you started with codeless");
 cy.get("[data-toggle="dropdown"]").click on();
 cy.accommodates("Logout").click on();
 cy.accommodates("Forgot Password?");
 });
});

So after coming into knowledge in electronic mail and password, the take a look at execution is paused. The code will run solely the primary 4 instructions and pause earlier than working the fifth command.

Cypress debugging Utilizing .debug() Methodology

The Cypress debugging operate .debug() is helpful for debugging and may be chained to any Cypress command to pause the take a look at and open the DevTools. This lets you examine the present state of your utility and the take a look at runner.

• NOTE: For the .debug() command to execute, we now have to maintain the console window of the browser open the place take a look at circumstances are executing.

Within the instance under, we now have put .debug() after coming into knowledge within the password area.

/// 
describe("Verify Login/Logout And Tab functionality", () => {
 it("Login and Click on 'Codeless' link Under Automation Section", operate () {
 cy.go to("https://testgrid.io/");
 cy.get('[title="Sign in"]').click on();
 cy.get("#email")
 .clear("jarryliurobert@gmail.com")
 .kind("jarryliurobert@gmail.com");
 cy.get("#password").clear().kind("Test@1234")
 cy.get(".signin-button").debug().click on();
 cy.accommodates("Dashboard");
 cy.get("#tgtestcase").click on();
 cy.accommodates("Lets get you started with codeless");
 cy.get("[data-toggle="dropdown"]").click on();
 cy.accommodates("Logout").click on();
 cy.accommodates("Forgot Password?");
 });
});

The topic variable in Cypress represents the return worth of the Cypress command, which you’ll be able to work together with within the browser’s console throughout debugging. After we run the command topic.textual content(), it will give us the textual content content material contained in the sign-in button.

Cypress Debugging Utilizing cy.log()

The cy.log() operate in Cypress lets you print messages to the Cypress take a look at runner’s console. That is significantly helpful for debugging functions and for offering context or extra details about the take a look at execution.

cy.get('.component').then(($el) => {
 cy.log('Ingredient textual content is:', $el.textual content());
});

Advantages

• Helps in printing customized info to the cypress console log
• Helpful for including context to your exams

Instance

Within the instance under, you possibly can see we’re printing the textual content of the sign-in hyperlink which is accessible on the house web page after opening the URL https://testgrid.io/.

/// 
describe("Verify Login/Logout And Tab functionality", () => {
 it("Login and Click on 'Codeless' link Under Automation Section", operate () {
 cy.go to("https://testgrid.io/");
 cy.get('[title="Sign in"]').then($signin => {
 cy.log("The Value is",$signin.textual content())
 })
 cy.get('[title="Sign in"]').click on();
 cy.get("#email").clear("jarryliurobert@gmail.com").kind("jarryliurobert@gmail.com");
 
 cy.get("#password").clear().kind("Test@1234")
 cy.get(".signin-button").debug().click on();
 cy.accommodates("Dashboard");
 cy.get("#tgtestcase").click on();
 cy.accommodates("Lets get you started with codeless automation");
 cy.get("[data-toggle="dropdown"]").click on();
 cy.accommodates("Logout").click on();
 cy.accommodates("Forgot Password?");
 });
});

Under is the output of the above code the place you possibly can see that within the command log, logs are printed which can be actually useful in debugging.

Cypress Debugging Utilizing console.log()

In Cypress, console.log() can be utilized to print messages to the browser’s console for debugging functions.

Right here is an instance of easy methods to use console.log():

cy.get(‘.element’).then(($el) => {
console.log(‘Element:’, $el);
});

Advantages

• Instantly outputs messages to the browser’s console
• Helps in debugging extra complicated JavaScript code

Within the code under, you possibly can see we’re printing the textual content of the sign-in hyperlink on the house web page within the console window.

/// 
describe("Verify Login/Logout And Tab functionality", () => {
 it("Login and Click on 'Codeless' link Under Automation Section", operate () {
 cy.go to("https://testgrid.io/");
 cy.get('[title="Sign in"]').then($signin => {
 console.log("Text of Sign-in button →> ",$signin.textual content())
 })
 cy.get('[title="Sign in"]').click on();
 cy.get("#email").clear("jarryliurobert@gmail.com").kind("jarryliurobert@gmail.com");
 
 cy.get("#password").clear().kind("Test@1234")
 cy.get(".signin-button").click on();
 cy.accommodates("Dashboard");
 cy.get("#tgtestcase").click on();
 cy.accommodates("Lets get you started with codeless");
 cy.get("[data-toggle="dropdown"]").click on();
 cy.accommodates("Logout").click on();
 cy.accommodates("Forgot Password?");
 });
});

Cypress Debugging Utilizing Native debugger

The native JavaScript debugger assertion can be utilized inside Cypress exams to set a breakpoint within the code. When the debugger assertion is reached, execution will pause and the browser’s developer instruments will open.

• NOTE: For nativedebugger instructions to execute we now have to maintain the supply window of the browser open the place take a look at circumstances are executing.

cy.get('.component').then(($el) => {
 debugger;
 // examine $el within the console
});

Advantages

• Means that you can set breakpoints to your code: This makes it simpler to step via your code line-by-line and observe the precise habits and state of your utility at every step.
• Full entry to the browser’s debugging instruments

Within the code under, you possibly can see we now have put a local debugger after opening the URL https://testgrid.io/.

/// 
describe("Verify Login/Logout And Tab functionality", () => {
 it("Login and Click on 'Codeless' link Under Automation Section", operate () {
 cy.go to("https://testgrid.io/");
 cy.get('[title="Sign in"]').then($signin => {
 debugger;
 console.log("Text of Sign-in button →> ",$signin.textual content())
 })
 cy.get('[title="Sign in"]').click on();
 cy.get("#email").clear("jarryliurobert@gmail.com").kind("jarryliurobert@gmail.com");
 
 cy.get("#password").clear().kind("Test@1234")
 cy.get(".signin-button").click on();
 cy.accommodates("Dashboard");
 cy.get("#tgtestcase").click on();
 cy.accommodates("Lets get you started with codeless");
 cy.get("[data-toggle="dropdown"]").click on();
 cy.accommodates("Logout").click on();
 cy.accommodates("Forgot Password?");
 });
});

Within the screenshot under, the take a look at run will pause as quickly because it encounters the debugger key phrase. We will both transfer to the following line by clicking on step over or resume the script by clicking on the primary icon within the highlighted space.

Cypress Debugging Utilizing Screenshot and Video

By capturing screenshots and movies, we are able to benefit from debugging failing exams. This helps you shortly establish points by visualizing the precise state of the applying on the time of failure.

We’ve got to replace the cypress.config.js file to allow screenshots and movies.

Cypress comes with the choice to take screenshots whenever you run the take a look at circumstances by way of ‘cypress open’ or ‘cypress run’, even in CI/CD. We’ve got to replace the setting screenshotOnRunFailure: true. This setting will seize the screenshot when take a look at circumstances fail.

Video recording is turned off by default however may be enabled by setting the video choice to true in your configuration file. Movies won’t be recorded whereas Cypress is open.

const { defineConfig } = require("cypress");
module.exports = defineConfig({
 "screenshotsFolder": "cypress/screenshots",
 "screenshotOnRunFailure": true,
 "video": true,
 "trashAssetsBeforeRun": true,
 "videosFolder": "cypress/videos",
 "videoCompression": 32,
 e2e: {
 
 experimentalStudio:true,
 setupNodeEvents(on, config) {
 // implement node occasion listeners right here
 },
 },
});

Within the screenshot under, you possibly can see two folders have been created with the names “screenshots” and “videos,” the place we are able to see the hooked up screenshot and video that assist in debugging the take a look at circumstances.

Conclusion

Cypress affords a complete set of debugging instruments that may considerably streamline the method of figuring out and resolving points in your take a look at circumstances. Whether or not you’re leveraging command logs for an in depth step-by-step account, utilizing .pause() to halt execution, using .debug() for in-depth inspection, or using cy.log() and console.log() for customized messages, Cypress supplies versatile strategies to swimsuit varied debugging wants.