Writing code shortly is a precious talent, however the true mark of a proficient software program developer is the power to successfully debug and resolve errors and bugs. Debugging is a crucial facet of the event course of, guaranteeing that software program features as supposed and meets person wants.
Cypress’s debugging capabilities make it a useful device for QA engineers and builders. Its detailed error messages, interactive check runner, integration with developer instruments, and specialised debug instructions permit for fast and environment friendly decision of check failures. Debugging Cypress checks will help you establish points in your check code and the appliance underneath check. Cypress presents a number of strategies and instruments for efficient debugging. On this weblog, we are going to talk about the way to debug your Cypress checks 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 Necessary?
Debugging is a crucial facet of software program growth, and the standard of debugging instruments obtainable in a framework can considerably influence 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 difficulty.
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 just isn’t solely about fixing errors but additionally about enhancing the efficiency of the code. It helps establish inefficiencies and bottlenecks in this system.
Making certain Performance
Debugging ensures that the software program behaves as anticipated, assembly the desired necessities and offering a clean person expertise.
Enhancing Safety
Figuring out and fixing vulnerabilities by means of 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 might be carried out utilizing varied strategies, together with command logs, .pause(), .debug(), cy.log(), console.log(), and the native JavaScript debugger.
A further methodology of debugging the check case in Cypress is by screenshot and video.
Debugging in Cypress entails a number of strategies to assist establish and resolve points in your checks. Right here’s an in depth information on every debugging methodology:
Cypress Debugging Utilizing Command Logs
Cypress command logs are routinely proven within the Cypress Take a look at Runner. it supplies an in depth log of all Cypress instructions executed throughout the check, together with their standing, period, and any related errors.
Utilization
- Run your check 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 check 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 allows us to pinpoint the reason for check case failures effectively. As an illustration, within the instance offered, the check is failing as a result of the UI shows totally different textual content.
Cypress Debugging Utilizing Methodology .pause()
The .pause() methodology pauses the check execution at a particular level, permitting you to examine the state of the appliance and debug any points.
cy.get(‘.element’).pause().click on();Advantages
- Helpful for stopping execution at a exact step to examine the DOM
- You possibly can resume the check 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 getting into the information within the password subject.
///
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")
.sort("jarryliurobert@gmail.com");
cy.get("#password").clear().sort("Test@1234");
cy.get(".signin-button").click on().pause();
cy.incorporates("Dashboard");
cy.get("#tgtestcase").click on();
cy.incorporates("Lets get you started with codeless");
cy.get("[data-toggle="dropdown"]").click on();
cy.incorporates("Logout").click on();
cy.incorporates("Forgot Password?");
});
});
So after getting into knowledge in electronic mail and password, the check 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 might be chained to any Cypress command to pause the check and open the DevTools. This lets you examine the present state of your software and the check runner.
- NOTE: For the
.debug()command to execute, we now have to maintain the console window of the browser open the place check circumstances are executing.
Within the instance under, we now have put .debug() after getting into knowledge within the password subject.
///
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")
.sort("jarryliurobert@gmail.com");
cy.get("#password").clear().sort("Test@1234")
cy.get(".signin-button").debug().click on();
cy.incorporates("Dashboard");
cy.get("#tgtestcase").click on();
cy.incorporates("Lets get you started with codeless");
cy.get("[data-toggle="dropdown"]").click on();
cy.incorporates("Logout").click on();
cy.incorporates("Forgot Password?");
});
});
The topic variable in Cypress represents the return worth of the Cypress command, which you’ll 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 check runner’s console. That is significantly helpful for debugging functions and for offering context or further details about the check execution.
cy.get('.ingredient').then(($el) => {
cy.log('Factor textual content is:', $el.textual content());
});
Advantages
- Helps in printing customized info to the cypress console log
- Helpful for including context to your checks
Instance
Within the instance under, you may see we’re printing the textual content of the sign-in hyperlink which is obtainable 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").sort("jarryliurobert@gmail.com");
cy.get("#password").clear().sort("Test@1234")
cy.get(".signin-button").debug().click on();
cy.incorporates("Dashboard");
cy.get("#tgtestcase").click on();
cy.incorporates("Lets get you started with codeless automation");
cy.get("[data-toggle="dropdown"]").click on();
cy.incorporates("Logout").click on();
cy.incorporates("Forgot Password?");
});
});
Under is the output of the above code the place you may see that within the command log, logs are printed which might 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 the way to use console.log():
cy.get(‘.element’).then(($el) => {
console.log(‘Element:’, $el);
});Advantages
- Straight outputs messages to the browser’s console
- Helps in debugging extra complicated JavaScript code
Within the code under, you may 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").sort("jarryliurobert@gmail.com");
cy.get("#password").clear().sort("Test@1234")
cy.get(".signin-button").click on();
cy.incorporates("Dashboard");
cy.get("#tgtestcase").click on();
cy.incorporates("Lets get you started with codeless");
cy.get("[data-toggle="dropdown"]").click on();
cy.incorporates("Logout").click on();
cy.incorporates("Forgot Password?");
});
});
Cypress Debugging Utilizing Native debugger
The native JavaScript debugger assertion can be utilized inside Cypress checks 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 native
debuggerinstructions to execute we now have to maintain the supply window of the browser open the place check circumstances are executing.
cy.get('.ingredient').then(($el) => {
debugger;
// examine $el within the console
});
Advantages
- Permits you to set breakpoints to your code: This makes it simpler to step by means of your code line-by-line and observe the precise conduct and state of your software at every step.
- Full entry to the browser’s debugging instruments
Within the code under, you may 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").sort("jarryliurobert@gmail.com");
cy.get("#password").clear().sort("Test@1234")
cy.get(".signin-button").click on();
cy.incorporates("Dashboard");
cy.get("#tgtestcase").click on();
cy.incorporates("Lets get you started with codeless");
cy.get("[data-toggle="dropdown"]").click on();
cy.incorporates("Logout").click on();
cy.incorporates("Forgot Password?");
});
});
Within the screenshot under, the check 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 will benefit from debugging failing checks. This helps you shortly establish points by visualizing the precise state of the appliance on the time of failure.
Now we have to replace the cypress.config.js file to allow screenshots and movies.
Cypress comes with the choice to take screenshots while you run the check circumstances through ‘cypress open’ or ‘cypress run’, even in CI/CD. Now we have to replace the setting screenshotOnRunFailure: true. This setting will seize the screenshot when check circumstances fail.
Video recording is turned off by default however might be enabled by setting the video choice to true in your configuration file. Movies is not going to 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 may see two folders have been created with the names “screenshots” and “videos,” the place we will see the connected screenshot and video that assist in debugging the check circumstances.
Conclusion
Cypress presents a complete set of debugging instruments that may considerably streamline the method of figuring out and resolving points in your check 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 go well with varied debugging wants.