Handling Test Failures in Cypress A Comprehensive Guide

Cypress is a democratic testing fabric that proffer developers an easy and efficient way to compose end-to-end test. However, yet with the good exertion, Cypress betray test scenario can still happen.

This guidebook will explore common reasons behind Cypress test failures and provide practical solutions for troubleshooting and declaration.

Understanding Test Failure in Cypress

Test failures inoccur when the expect outcome doesn ’ t match the genuine behavior of the application. When a exam neglect, Cypress displays a open error content highlighting what went wrong.

The almost common reasons for failures include:

• Issues in the Application Under Test (AUT):A bug or unexpected behavior in the app can cause the exam to fail.
• Flaws in the Test Logic:Incorrect supposal or poorly publish examination causa can also lead to failures.

Maintaining requires attempt, trial can get brittle over time, especially with frequent UI changes. Proper debugging and are essential to continue them reliable and cost-effective.

Common Causes of Test Failure in Cypress

Test failures in Cypressoften stem from unstable trial design, environmental dependencies, or neglecting Cypress-specific best praxis.

Here are the most frequent number:

• Unreliable Element Selectors:Using active or overly generic picker increases the hazard of tests breaking when the UI alteration. Stable, custom-made dimension should be used for targeting component.
• Ignoring Retry Behavior:Cypress auto-retries commands and assertions, but tests that aren ’ t structured to take advantage of this may fail due to timing topic or race conditions.
• Lack of Isolation or Mocking:Relying on existent external services can lead to freaky test. Proper mocking of APIs ensures more stable and consistent exam outcomes.
• Overuse of:Relying heavily on E2E tests can slow down test suites and increase flakiness. A balanced with and is more efficient.
• Skipping CI Checks:Not lam tests on every pull request increases the jeopardy of regressions slipping into production. Veritable CI execution is key to catching matter betimes.

How to force fail a examination in Cypress.io

Whether a missing verification is to blame for your mistaken negative or something else, you now have the option to & # 8220; Force Fail & # 8221; and purposefully identify a test as failing.

Here is one method in Cypress.io for hale a test to fail if a specific condition is met.

If the idiom & # 8220; Sorry! & # 8221; appears on your website, Here you desire the exam to fail.

/// & lt; reference types= '' Cypress '' / & gt; describe (`` These tests are designed to fail if certain standard are met. ``, () = & gt; {beforeEach (() = & gt; {cy.visit (`` '');}); stipulate (`` If 'Sorry! ' is present on page, FAIL ``, () = & gt; {cy.contains (`` Sorry! ``);});});

The test currently passes if the word & # 8220; Sorry! & # 8221; is found. If this criterion is true, how can you betray the examination?

You can just shed a JavaScript Exception to fail the test:

throw new Error (`` trial fail hither '')

However, in your situation, It is recommend to use the .should (& # 8216; not.exist & # 8217;) asseveration alternatively:

cy.contains (`` Sorry, something move wrong '') .should ('not.exist ')

Debugging Failed Tests in Cypress

Debugging miscarry tryout in Cypress involves using various built-in tools like the Cypress Test Runner, console logarithm, and browser DevTools to name and fix number in your trial code. With these tools, you can nail the theme drive of test failures and create the necessary adjustments to ensure your tests are accurate and reliable.

Debugging with the Cypress Test Runner

A user interface for executing examination is phone. Use the undermentioned bidding:

./node_modules/.bin/cypress open

Debugging with Chrome DevTools

Chrome DevTools is a powerful suite of developer tools built into the Google Chrome browser.

While Cypress provides robust in-app debugging, leveraging DevTools enhances visibility into application deportment, DOM state, and network activity.

Cypress integrates seamlessly with DevTools, allowing developer to debug tests using familiar, browser-native tools.

Debugging employ Cypress UI

One of the quickest methods to determine why your examination failed is by utilize the Cypress UI. It aid to see all of the steps, every step your tests made before the issue occurred. Cypress output helpful data to the browser & # 8217; s console when you click on a stride.

For case, in the failing test above, Cypress writes out the existent raiment in the console when the assertion step is clicked.

One of the most important and rewarding skills you should master is how to debug the CypressFail Test. Cypress offer a simple technique for debugging test script. It offers oblige possibilities that you can explore by snap hither.

Debugging using Screenshots & amp; Videos

When Cypress is used in headless mode, whenever a failure occurs, screenshots and videos are taken automatically. Having a screenshot and a video of your failing test is quite handy when bunk your examination in uninterrupted integration, therefore, this is quite good as easily.

Debugging utilize Logging

You can log info from your screen in two practical ways. Using cy.log () or console.log () are two options, severally. Remember that Cypress is essentially JavaScript, thus you may implement all the advantageous debug techniques you use in JS. In the Cypress Command Log, cy.log () will print a content. Additionally, you may use console.log () to write logs to the browser & # 8217; s console.

Debugging using Browser Dev Tools

Since Cypress is a browser-based application, you have accomplished access to all of the data ply by your browser & # 8217; s developer creature. This implies that you may troubleshoot your failing Cypress tests using the like methods and tools you use to troubleshoot problems with your application code.

Irrespective of the method you choose to debug your Cypress tests, you must remember that Cypress testing must be execute on existent browser for exact resultant.

Start running examination on 30+ version of the latest browsers across Windows and macOS with BrowserStack. Use instant, hassle-free parallelization to get fast results without compromising on accuracy. Detect glitch before users do by testing software in real user conditions with BrowserStack.

Frequently Occurring Cypress Test Failures and Solutions

Even well-written Cypress exam can occasionally miscarry due to several factors like time issues, application instability, or improper test structure.

Recognizing common patterns in these failure and knowing how to resolve them can drastically better and trim debugging time.

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

Below are frequent failure scenarios along with practical solutions to handle them effectively.

1. Explicit await

cy.wait () is a command in Cypress that instructs the test runner to pause execution for a specified period of time. It is typically used to synchronize test code with the coating under test or to expect for an element or event to be useable before uphold with the exam.

The cy.wait () command takes a clip parameter, which can be a routine (in millisecond) or a string representing a clip separation. For example, cy.wait (5000) would pause execution for 5 second, while cy.wait (& # 8216; 2 seconds & # 8217;) would pause execution for 2 seconds.

// ❌ incorrect way, do n't use cy.visit ('/ ') cy.wait (10000) cy.get ('button ') .should ('be.visible ')

However, this forces us to just expect for the page to load while running your test. Instead, you can leverage the built-in retry power of Cypress.

cy.visit ('/ ') cy.get ('button ', {timeout: 10000}) .should ('be.visible ')

This way, you won & # 8217; t have to wait more than 10 second this way for the push to display. However, if the button render faster, the trial will move flop on to the adjacent bidding. This will allow you to gain some time.

2. Unreadable selector

First-hand information on the demeanour of your test can be provided via picker. This is why it & # 8217; s critical to do them clear.

Regarding the best selectors to choose from, Cypress has various suggestions. These suggestions & # 8217; primary objective is to provide your testing stability. Use of separate data- * & # 8217; selectors comes first on the list of proposition. You should incorporate these into your application.

Unfortunately, admittance to the program being test isn & # 8217; t always available to testers. As a result, choosing component might be challenge, especially when trying to locate a particular piece. Many citizenry who are in this position select their elements in a number of ways.

One of these proficiency is using XPath. It is challenging to read the syntax of XPath, which is its biggest drawback. You can not really place what element you are selecting from your XPath picker solely. Additionally, they don & # 8217; t actually increase the effectualness of your Cypress tests in any way. Everything that XPath can do, you can accomplish use Cypress commands, and they & # 8217; ll make it easier to read.

❌ selecting elements using xpath // Select an element by text cy.xpath ('// * [text () [contains (., '' My Boards '')]] ') cy.xpath ('//div [contains (@ class, `` list '')] [.//div [contains (@ class, `` card '')]] ') // Filter an component by index cy.xpath (' (//div [contains (@ course, `` board '')]) [1] ') // Select an element after a specific element cy.xpath ('//div [contains (@ class, `` card '')] [preceding: :div [contains (., `` milk '')]] ')

✅ select elements using cypress dictation // Select an element by text cy.contains ('h1 ', 'My Boards ') cy.get ('.card ') .parents ('.list ') // Filter an factor by power cy.get ('.board ') .eq (0) // Select an element after a specific element cy.contains ('.card ', 'milk ') .next ('.card ')

3. Ignoring requests in your app

Let & # 8217; s examine this codification representative:

cy.visit ('/board/1 ') cy.get (' [data-cy=list] ') .should ('not.exist ')

A bit of requests are fired when you open a page. The frontend app will treat and render the reaction to these queries on your page. The [data-cy=list] components in this example are rendered when you get a reaction from the /API/lists endpoint.

The issue with this test, however, is that Cypress is not being instructed to wait for these requests. As a result, still if there are lists present in your application, your test may provide a false positive and passing.

Cypress will not wait for the requests!

In order to define this, you must use the intercept command:

cy.intercept ('GET ', '/api/lists ') .as ('lists ') cy.visit ('/board/1 ') cy.wait (' @ lists ') cy.get (' [data-cy=list] ') .should ('not.exist ')

4. Overlooking DOM re-rendering

To find datum from the database and then furnish it in DOM, modern web apps constantly submit request. You are testing a search bar in the following instance, where each keystroke will induct a new asking. With each response, the page & # 8217; s content will be updated. The goal of this trial is to take a search answer and verify that the first item with the text & # 8220; hunting for critical bugs & # 8221; will appear when the word & # 8220; for & # 8221; is typed. Following is the trial code:

cy.realPress (['Meta ', ' k ']) cy.get (' [data-cy=search-input] ') .type ('for ') cy.get (' [data-cy=result-item] ') .eq (0) .should ('contain.text ', 'search for cognize subject ')

This trial will encounter an & # 8220; element detached from DOM & # 8221; topic. The reason for this is that while you are notwithstanding typing, you will initially get two results, and once you are done, you will only get one result. Just check it!

It & # 8217; s important to keep in psyche that the .should () command will only retry the preceding command, not the entire chain. As a issue, cy.get (& # 8220; [data-cy=result-item] & # 8221;) is not called again. You can erst more add a guarding averment to encipher to countervail this issue. This time, it will first guarantee that you get the proper number of termination before maintain the result & # 8217; s content.

cy.realPress (['Meta ', ' k ']) cy.get (' [data-cy=search-input] ') .type ('for ') cy.get (' [data-cy=result-item] ') .should ('have.length ', 1) .eq (0) .should ('contain.text ', 'search for critical bugs ')

But what if you can not assert the number of results? In short, the solution is to use .should () command with a recall, something like this:

cy.realPress (['Meta ', ' k ']) cy.get (' [data-cy=search-input] ') .type ('for ') cy.get (' [data-cy=result-item] ') .should (particular = & gt; {expect (point [0] .to.have.text ('search for critical bugs '))})

5. Inefficient dictation chains

In Cypress, the chain syntax is rather outstanding. Due to the fact that each command passes data to the one that follows it, your test scenario has a one-way flow. However, there is logic to yet these commands. Commands issued by Cypress may be parent, child, or dual in nature. Therefore, some of the bidding will inevitably begin a new concatenation.

Consider this command chain:

cy.get (' [data-cy= '' create-board ''] ') .click () .get (' [data-cy= '' new-board-input ''] ') .type ('new board {enter} ') .location ('pathname ') .should ('contain ', '/board/ ')

The difficulty of reading such a chain is compounded by the fact that it disregards the parent/child command chaining logic. Every.get () command fundamentally begins a new chain. As a result, .click () .get () chain is illogical. By correctly leveraging chains, your Cypress tests might be more intelligible and less unexpected:

cy.get (' [data-cy= '' create-board ''] ') // parent .click () // child cy.get (' [data-cy= '' new-board-input ''] ') // parent .type ('new board {enter} ') // child cy.location ('pathname ') // parent .should ('contain ', '/board/ ') // child

6. Overusing UI

You ought to use UI as slight as potential when building UI tests. By using this tactic, you may hasten up your testing and sense just as sure-footed about your app—if not more—than ahead. Let & # 8217; s guess your navigation bar has links and looks like this:

& lt; nav & gt; & lt; a href= '' /blog '' & gt; Blog & lt; /a & gt; & lt; a href= '' /about '' & gt; About & lt; /a & gt; & lt; a href= '' /contact '' & gt; Contact & lt; /a & gt; & lt; /nav & gt;

The tryout & # 8217; s aim is to see that all of the links contained within the & lt; nav & gt; element lead to combat-ready websites. Using the .click () bid and then ascertain the opened page & # 8217; s location or content to see if the page is live could be the most logical trend of activeness.

The downside of this strategy is that it takes too long and could mislead you.

You can use the .request () command to verify that the page is live instead of checking your links like this:

cy.get (' a ') .each (link = & gt; {cy.request (page.prop ('href '))})

7. Repeating the same set of activity

It & # 8217; s very frequent to hear that your code should be DRY, or don & # 8217; t repeat yourself. Although this is great instruction for your codification, it look that throughout the test run, it is only slackly followed. An example of a cy.login () command that will carry out the login function before each exam is demo here:

Cypress.Commands.add ('login ', () = & gt; {cy.visit ('/login ') cy.get (' [type=email] ') .type ('filip+example @ gmail.com ') cy.get (' [type=password] ') .type (' i & lt; 3slovak1a! ') cy.get (' [data-cy= '' logged-user ''] ') .should ('be.visible ')})

The power to condense this set of actions into a single command is unquestionably useful. It will unquestionably make code more & # 8220; DRY. & # 8221; However, if you keep using it in your examination, the like set of action will be carried out continuously during examination executing.

You can use Cypress to conjure up a answer to this job. Using the cy.session () command, this serial of step can be cached and reloaded. The data-based SessionAndOrigin: true property in your cypress.config.js file can be utilize to enable this, even if it is presently in an observational stage. The sequence in the custom command can be wrapped habituate the.session () function as follows:

Cypress.Commands.add ('login ', () = & gt; {cy.session ('login ', () = & gt; {cy.get (' [type=email] ') .type ('filip+example @ gmail.com ') cy.get (' [type=password] ') .type (' i & lt; 3slovak1a! ') cy.get (' [data-cy= '' logged-user ''] ') .should ('be.visible ')})})

This will result in the sequence of your usance require running once per specification. However, employ the cypress-data-session plugin will allow you to stash it for the duration of your integral test run.

There are a lot more things you can do this, but caching your steps is probably the most valuable one, as it can easily trim off a match of minutes from the whole test run.

What are Cypress Test Retries?

Cypress test retriesare a built-in feature that automatically re-runs neglect trial several times before label them as neglect. This helps addresss, failure caused by temporary issues like timing, meshwork delay, or DOM not being ready, rather than real bugs.

• Retries apply toneglect tests exclusively, not passed ones.
• The figure of retry endeavor can be configure globally or per test.
• Cypress retries the entire exam cube (it ()), not just single command.
• Retries are useful for do CI runs more stable by reducing false failures.

This lineament improves test reliability and minimizes unnecessary debugging get by transient issues.

Best Practices for Handling Test Failures in Cypress

Test automation can dramatically boost efficiency, but only when implemented thoughtfully. Many failures are preventable with the right practices.

Below are key guidelines to improve stability, cut flakiness, and create debugging faster in Cypress:

1. Define Open Goals for Automation:Not all tests must be automated. Focus automation on scenarios directly contributing to delivering calibre at speed. Set realistic timelines and objectives for automation, ensuring each test adds measurable value.

2. Build Modular and Isolated: Each test should validate entirely one feature or functionality. This approaching makes failures easier to diagnose and prevents dependencies between tests.

3. Ensure Test Independence and Order Flexibility:Design exam that can run in any succession without affecting results. Avoid relying on shared states or test interdependencies to reduce debugging overhead.

4. Use Assertions Strategically: Assertions are critical for verifying examination outcomes. With Cypress, assertions help:

• Improve observability and easiness of failure analysis.
• Validate that elements, state, and data are present or correct.
• Ensure dynamic content behaves as expected under different conditions.

5. Document Tests Clearly:Maintain exact documentation of test steps, objectives, and expect issue. Well-documented test cases help new team members understand logic and reduce ramp-up time.

6. Handle Flakiness with Retries and Timeouts:Use Cypress & # 8217; built-in retries and adjustable timeouts to manage irregular subject like network delays or external service failures.
Implement retrieval scheme for flaky scenarios to continue CI line stable and efficient.

Testing on Real Devices with BrowserStack Automate

Running Cypress examination on real devices is crucial for uncovering issues that don ’ t surface in local or simulated environments. Device-specific behaviour, discrepant browser interpretation, and OS-level quirks can often guide to test failures that are hard to reduplicate on local apparatus.

BrowserStack Automateprovides access to a and browsers, enabling team to run Cypress tests in across.

• Uncover real-world issue: Detect device-specific bugs that emulators and simulators often miss.
• Improved examination dependableness: Validate covering behavior across actual hardware and browsers.
• Faster execution: Run Cypress tests in parallel across multiple devices to reduce test cycle time.
• Seamless consolidation: Automate testing within your existing development workflow.
• Actionable debugging insights: Access logs, screenshots, and video recording for quicker root cause analysis.

Talk to an Expert

Conclusion

Understanding and effectively managing test failures in Cypress is crucial for sustain the reliability of your exam.

By apply better practices, using existent device for testing, and properly analyzing failure, you can significantly ameliorate exam accuracy and speed up your development process.

With Cypress & # 8217; potent feature, addressing failures becomes a streamlined process, ensure smoother releases and better-quality software.

Related Guides