<\/span><\/h3>\n\n\n\nThe first step in managing flaky tests is to debug them locally. This allows you to catch issues before they reach your CI pipeline. To ensure that your local environment mirrors your CI\/CD setup, run Cypress with the following command:<\/p>\n\n\n\n
npx cypress open<\/code><\/code><\/pre>\n\n\n\nThe Cypress app will display a command log on the left, showing each test block and the commands executed within them. The right side will show the application under test, and you can inspect the browser’s Developer Tools.<\/p>\n\n\n\n
Since flaky tests may pass or fail without changes, run each test several times to identify the issue. If a test fails, Cypress will provide detailed error information, including the error name, message, code frame, stack trace, and even a link to the relevant documentation.<\/p>\n\n\n\n
<\/span>Enable Event Logging and Debugging<\/span><\/h3>\n\n\n\nFor deeper insights, enable event logging by executing the following command in your browser’s console:<\/p>\n\n\n\n
localStorage.debug = 'cypress:*'<\/code><\/code><\/pre>\n\n\n\nThis will display verbose logs in the console. You can also add the debug()<\/code> method to the failing test instruction to pause execution and inspect the system state:<\/p>\n\n\n\nit('successfully loads', () => {\n cy.visit('http:\/\/localhost:5000')\n cy.get('.submit-button').click().debug()\n})<\/code><\/code><\/pre>\n\n\n\nAlternatively, the pause()<\/code> method can be used to pause test execution and manually inspect the DOM and network activity:<\/p>\n\n\n\nit('successfully loads', () => {\n cy.visit('http:\/\/localhost:5000')\n cy.pause()\n cy.get('.submit-button').click()\n})<\/code><\/pre>\n\n\n\nOnce you have debugged the test locally and ensured it works reliably, run it again in the CI\/CD pipeline with:<\/p>\n\n\n\n
npx cypress run<\/code><\/code><\/pre>\n\n\n\nCypress will automatically capture screenshots when a failure occurs, and you can configure videos to record test runs for further inspection.<\/p>\n\n\n\n
<\/span>Use Custom HTML Attributes for Element Selection<\/span><\/h3>\n\n\n\nSelecting elements dynamically in modern applications can lead to flaky tests. Rather than relying on HTML tags, classes, or text content (which might change), it\u2019s recommended to use custom data-*<\/code> attributes for selecting elements in your tests.<\/p>\n\n\n\nFor example:<\/p>\n\n\n\n
<button data-cy=\"subscribe-btn\">Subscribe<\/button><\/code><\/code><\/pre>\n\n\n\nUsing cy.get('[data-cy=\"subscribe-btn\"]')<\/code> is more resilient to changes in your application’s structure than using something like cy.get('.btn')<\/code> or cy.contains('Subscribe')<\/code>.<\/p>\n\n\n\n<\/span>Configure Automatic Test Retries<\/span><\/h3>\n\n\n\nCypress does not retry tests by default when they fail. However, enabling retries can help identify flaky behavior by running tests multiple times. You can configure retries in your cypress.config.js<\/code> file:<\/p>\n\n\n\nconst { defineConfig } = require('cypress')\n\nmodule.exports = defineConfig({\n retries: {\n runMode: 2, \/\/ Retry tests up to 2 times during `cypress run`\n openMode: 1 \/\/ Retry tests once during `cypress open`\n }\n})\n<\/code><\/code><\/pre>\n\n\n\nYou can also configure retries for individual tests or test suites:<\/p>\n\n\n\n
describe('User sign-up and login', () => {\n it('allows user to login', { retries: { runMode: 2, openMode: 1 } }, () => {\n \/\/ test logic here\n })\n})\n<\/code><\/code><\/pre>\n\n\n\nRetries can help reduce the impact of flaky tests, but the key is to identify the root cause of the flakiness and address it.<\/p>\n\n\n\n
<\/span>Avoid Fixed-Time Waits<\/span><\/h3>\n\n\n\nUsing cy.wait()<\/code> with arbitrary time delays (e.g., cy.wait(5000)<\/code>) is a common anti-pattern that can lead to flaky tests. Waiting for fixed amounts of time does not guarantee that the application will be ready for interaction. Instead, use Cypress commands with built-in waiting mechanisms, such as cy.get()<\/code>, which waits for an element to appear in the DOM.<\/p>\n\n\n\ncy.get('[data-cy=\"product\"]').should('have.length', 20)\n<\/code><\/code><\/pre>\n\n\n\nThis ensures that Cypress waits for the element to be visible before performing the assertion, eliminating the need for arbitrary delays.<\/p>\n\n\n\n
<\/span>Configure Timeouts Properly<\/span><\/h3>\n\n\n\nCypress offers several timeout settings to control how long the framework should wait for commands to complete. You can configure these timeouts globally in cypress.config.js<\/code>:<\/p>\n\n\n\nconst { defineConfig } = require('cypress')\n\nmodule.exports = defineConfig({\n defaultCommandTimeout: 10000, \/\/ 10 seconds\n pageLoadTimeout: 120000, \/\/ 2 minutes\n})<\/code><\/pre>\n\n\n\nProperly configuring timeouts prevents flaky tests caused by slow loading or slow network responses.<\/p>\n\n\n\n
<\/span>Limit Conditional Testing<\/span><\/h3>\n\n\n\nConditional testing, where you check the state of the DOM and take action based on it (e.g., “If X, do Y”), can be problematic in dynamic web applications. Since the DOM is mutable and changes during test execution, relying on conditions can lead to instability.<\/p>\n\n\n\n
Instead, use deterministic approaches that ensure the DOM is in a predictable state before running tests.<\/p>\n\n\n\n
<\/span>Monitor Flaky Tests with Cypress Cloud<\/span><\/h3>\n\n\n\nCypress Cloud offers advanced flaky test management features, including flake detection, automatic flagging of flaky tests, analytics, and alerts. These features help you monitor the status of flaky tests and prioritize fixing them. However, these features are only available in the enterprise version of Cypress Cloud.<\/p>\n\n\n\n
<\/span>Selenium and Playwright: Automation Testing for Flaky Tests<\/span><\/h2>\n\n\n\nWhile Cypress<\/strong> is a popular choice for end-to-end testing, Selenium<\/strong> and Playwright<\/strong> are also widely used tools that can be leveraged to handle flaky tests. Here’s how they contribute to preventing flaky tests:<\/p>\n\n\n\n<\/span>Selenium<\/span><\/h3>\n\n\n\n