How to start with Cypress Debugging? (Top 5 Methods)

is a popular end-to-end mechanization tool favored by QAs for its many features. One of those features is its debuggability. The Cypress debugger provides readable mistake messages that help testers debug apace. It even grant debug apply popular developer tools.

This article explores debugging methods in Cypress, include Cypress logs, Cypress log ingredient, and Visual Studio Code IDE.

Why is debugging important?

is a key factor when selecting an. For illustration, if a exam script spans ten lines and results in an fault or failure, it becomes essential to investigate the cause. While trial-and-error can be utilise to pinpoint the topic, it is often time-consuming and ineffective, demand multiple test runs and code adjustments.

A framework with potent debugging capableness significantly speeds up this summons, let testers to identify and fix issues in min rather than hr. Effective debugging tools typically proffer:

• Clear and clear error content
• The ability to break test execution
• The tractableness to modify script values at runtime

With these features, testers can efficiently trace problems and apply accurate reparation, improving both and development speed.

Tools like enhance this further by enabling Cypress tests to run on real devices and browser. It render features like screenshots, picture recordings, and access to essay log to help teams quick identify and fix issues during debugging.

How to debug in Cypress

To start debugging in Cypress, ensure that Cypress is installed. Once set up, you can easily debug your test script, which helps improve test stability, reduce bizarre tests, and guarantee accurate examination results.

1. Debug Cypress tests using the muckle trace

Here is a simple exam script:

describe ('Verify Browser Stack Home Page ', () = & gt; {it ('Verify Browserstack logotype is seeable ', () = & gt; {cy.visit ('https: //www.browserstack.com/ '); cy.get (' # logo ') .should ('be.visible ');}) it ('Click on Product Menu ', () = & gt; {cy.get (' # product-menu-toggle1 ') .click ();})})

In the code above, the selector# product-menu-toggle1 & # 8242;doesn ’ t exist in. So when the book runs, Cypress throws up a clear error message.

Testers can use theView stack traceoption to view the detailed hatful trace, and can even print the stack tincture to the browser console as follows:

Timed out retrying after 4000ms: Expected to notice element: # product-menu-toggle1, but ne'er found it.

Cypress even grant the selection to open the error-containing line in the IDE if one configure the Cypress IDE / File Opener options beforehand.

How to configure Cypress IDE/File Opener Options in Cypress

With Cypress, one can straightaway open file from a stack trace in their IDE. For example, suppose a tester sets the File Opener preference as Optical Studio Code IDE, then from mint track. In that case, they can directly open the file causing the error, and the cursor centering will be on the exact line with the error.

This is useful as testers don & # 8217; t have to research and open file and line with issues.

Setup a File Opener Preference in Cypress

1. Navigate to Cypress & # 8217; s main window.
2. Click on Settings.
3. Expand the “File Opener Preference” Tab.
4. Click on the desired IDE.

This example setOcular Studio Codeas the default IDE for Cypress.

After setting up the preference, click on stack trace, which will take you to the concerned file or line.

For example, in the code above,cy.get (& # 8216; # product-menu-toggle1 & # 8217;) .click ();throws an fault. So the file causing the number can be opened directly in the IDE from Cypress.

2. Debug Cypress Tests apply the Debugger

Cypress provides options to use thenative debuggerkeyword in trial. Just put the debugger keyword at the juncture in which examination execution should intermit.

describe ('Verify Browser Stack Home Page ', () = & gt; {it ('Verify Browserstack logotype is seeable ', () = & gt; {cy.visit ('https: //www.browserstack.com/ '); cy.get (' # logo ') .should ('be.visible ');}) it ('Click on Sign In ', () = & gt; {cy.get (' a [title= '' Sign In ''] ') .then (($ selectedElement) = & gt; {debugger; $ selectedElement.get (0) .click ()})})})

In the above example thedebuggeris deploy in the 2nd it(). When the test runs, it will hesitate as soon as it encounters the debugger keyword.

At this point, quizzer can easily voyage to different tabs in developer tools like console, Elements, etc. to scrutinise or check what is happening at that part of the script.

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

//debugger might not work in expected way it ('Click on Sign In ', () = & gt; {cy.get (' a [title= '' Sign In ''] ') .click () debugger;})

3. Debug Cypress Tests using console logs

With Cypress, testers can print logarithm on the browser console and the Cypress window console. They can even print the stack trace to the browser console.

There are two shipway to use console logs in Cypress:

1. cy.log() command
2. console.log ()by configuring cypress tasks

1. Using Cypress cy.log ()

cy.log()is exclusively provided by Cypress. It facilitate publish a message to the Cypress Command Log. It is quite useful to print a message or value after execution of a particular line of codification.

Code Snippet

describe ('Verify Browser Stack Home Page ', () = & gt; {it ('Verify Browserstack logotype is seeable ', () = & gt; {cy.visit ('https: //www.browserstack.com/ '); cy.get (' # logo ') .should ('be.visible '); cy.log (`` Navigated to habitation page '')})})

In the above example,cy.log()is expend to print the messageNavigated to the home pageafter execution of above code, Cypress prints the message in the Cypress bid log. One can too click on the log to print the substance in the browser console.

2. Using console.log () in Cypress

As witness earlier,cy.log() mark the message Cypress window first. Only when the user chink on that will it publish the substance on the console. So, if executing tryout on headless, testers will findconsole.log ()real useful as they can see the printed message on the bidding line.

However, Cypress doesn ’ t directly support the use ofconsole.log (). But it can be done as shown below.

console.log ()helper print the substance in the browser console. If users leverage headless mode,console.log ()prints the message in the bid line.

Follow the steps below to useconsole.log ()in a Cypress script (the one employ above):

1. Navigate to the cypress/plugins folder.
2. Open index.jsfile inside plugins folder.
3. Add a task to log messages as done below.

//index.js module.exports = (on, config) = & gt; {on ('task ', {log (message) {console.log (message) return void},})}

4. Now use thetask login the script.

//inside test script ex: first-test.js describe ('Verify Browser Stack Home Page ', () = & gt; {it ('Verify Browserstack logo is seeable ', () = & gt; {cy.visit ('https: //www.browserstack.com/ '); cy.task (`` log '', '' This is console log: Navigated to home page '')})})

Considering the example above, this script uses:

cy.task (`` log '', '' Navigated to home page '')

console.log ()can be use with both brainless mode (command-line) and headful mode tryout. In the case of headless mode, the message will be publish in the command line. In headful mode the message will be printed in the Cypress command window.

Below is a snap of the headless mode execution of Cypress withconsole.log ()

4. Debug Cypress with .debug () option

Cypress provides a knock-down utility bidding to debug test handwriting called.debug(). This command sets the debugger and logs what the late command yields..debug()can be chain with cy or off another command. It yields the same study it was given from the previous command.

Note: One must receive their Developer Tools unfastened for .debug () to hit the breakpoint.

Code Snippet

describe ('Verify Browser Stack Home Page ', () = & gt; {it ('Verify Browserstack logo is visible ', () = & gt; {cy.visit ('https: //www.browserstack.com/ '); cy.get (`` a [title='Sign In '] '') .first () .debug () .click ()})})

The exemplar above uses.debug()  in this line

cy.get (`` a [title='Sign In '] '') .first () .debug () .click ()

Considering this,.debug() is placed after getting an element and before clicking on that element, so Cypress pauses execution after getting the element. Once the book hit debug point, it quit executing and testers can perform desired operations on developer puppet to name or purpose issues.

5. Cypress debug trial with .pause () alternative

The .pause()command stopscy biddingfrom running and allows interaction with the application under test. Testers can then & # 8220; resume & # 8221; escape all commands or choose to step through the & # 8220; next & # 8221; commands from the Command Log.

Difference between Cypress .pause () command and .debug () command

The following point highlight the key differences between the Cypress.pause() and .debug()dictation, illustrate when and how each should be used during the debugging procedure.

• .pause()will stop test executing to inspect the web application, the DOM, the net, but.debug()will quit only when the developer tools are unfastened.
• The .pause() command does not provide any debugging information..debug()supply debugging info when Cypress hit the.debug() command.
• Using the .pause() command can halt the performance and continue step by pace using thenextselection but.debug() doesn ’ t provide this function.

Code Snippet

describe ('Verify Browser Stack Home Page ', () = & gt; {it ('Verify Browserstack logo is seeable ', () = & gt; {cy.visit ('https: //www.browserstack.com/ ') .pause (); cy.get (`` a [title='Sign In '] '') .first () .click ()})})

Consider the code snippet above. The.pause()bid is applied in the line:

cy.visit ('https: //www.browserstack.com/ ') .pause ();

So when Cypress navigate to the page it hits the.pause()command and stops execution. At this point, one can analyze the rendered DOM or perform trust action use browser developer tools. Once the analysis is completed, they can precisely hit the Next push to see the adjacent step or the Resume button to keep executing.

Talk to an Expert

Debug Cypress Tests with Visual Studio Code IDE

Debugging Cypress tests using Visual Studio Code was potential earliest but with the latest version of Cypress, there is no direct way to do so. Even with the latest version of Cypress, a workaround was possible usingDebugger for Chrome& # 8211; a Visual Studio Code Extension andcross-envnpm package. However, theDebugger for ChromeExtension for Visual Studio Code isdeprecatedand the cross-env npm package has move intomaintenance way.

So if testers try to configure Visual Studio Code and Cypress to debug tests, using an superannuated package and extension might make Cypress to acquit unexpectedly. Hence, this is not a recommended pick for debugging. In short, there is no unmediated way to use Optical Studio Code for debug Cypress tests.

Conclusion

Effectual debugging is crucial for see the dependableness of Cypress tests and streamline the growing summons. By utilize the various debugging technique, such as mickle touch, the debugger, console logs, and commands like .pause () and .debug (), testers can chop-chop identify and resolve matter. Each method has its own strengths, and knowing when to use them can significantly reduce debugging time and exertion.

For teams looking to elevate their Cypress try experience, offer powerful features that go beyond basic debugging. It enables quiz on real device and browser, ensure that tests are performed in.

BrowserStack provides features such as screenshots on failure, elaborated picture recordings of test executing, go debug with remote access, meshwork logs, and even mobile-specific insights.

Additionally, its cloud-based platform allows for execution, drastically hotfoot up examination cycles. With BrowserStack, examine becomes faster, more reliable, and easier to scale across different environment.

Related Guides