Troubleshooting “CypressError: Timed out retrying: Expected to find element”

Hari Mahesh

The error message you’re seeing, “CypressError: Timed out retrying: Expected to find element,” is a common error in Cypress. This error typically occurs when Cypress cannot locate a specific HTML element on the web page during a test, even after waiting for a specified period. It is essential to understand why this error occurs, what causes it, and how to resolve it.

Let us break it down step by step:

Understanding the Error Message

• CypressError: This is the type of error thrown by Cypress.
• Timed-out retrying: Cypress retries certain operations, such as finding elements, for a defined amount of time before giving up.
• Expected to find element: This part of the error message indicates that Cypress expected to find a specific HTML element on the web page but failed to do so within the given time frame.

Why Does This Error Occur?

This error occurs for several reasons:

• Element Not Present: The element you are trying to interact with is not present on the web page.
• Timing Issues: The most common cause of this error is related to timing. Web applications are dynamic, and elements on the page may not be immediately available when Cypress attempts to interact with them. Elements may load asynchronously, and Cypress has a built-in mechanism to wait for elements to become available. However, this error is raised if the timeout is exceeded before the element appears.
• Incorrect Selector: If you provide an incorrect CSS selector or XPath expression to locate the element, Cypress won’t be able to find it. Double-check your selector to ensure it’s accurate.
• Flaky Tests: Flaky tests can also lead to this error. Flakiness can occur when tests are not isolated from each other or when the application’s state is not correctly reset between tests.
• Race Conditions: In some cases, there may be race conditions where multiple elements compete to appear on the page, and Cypress might be unable to locate the correct one.

How to Resolve the Error?

To resolve this error, you can take the following steps:

• Check Element Existence: First, ensure that the element you are trying to interact with actually exists on the page and is not hidden, disabled, or loaded asynchronously.
• Adjust Timeout: If the element is expected to load dynamically, you can increase the timeout for Cypress to wait for the element. You can do this by setting a higher timeout in your test using cy.get() or other Cypress commands. For example:

  cy.get('.my-element', { timeout: 10000 }).should('be.visible');

• Correct Selector: Double-check your CSS or XPath selector to ensure it accurately identifies your target element.
• Wait for Elements: Use Cypress’s built-in commands for waiting, such as cy.wait() or cy.contains(), to wait for elements to appear or specific conditions to be met before interacting with them.
• Use Aliases: You can use alias elements to avoid querying the DOM repeatedly. This can help make your tests more efficient and reliable.
• Avoid Flakiness: Ensure your tests are not causing side effects or modifying the application state in a way that affects other tests. Isolate tests and clean up after each test to prevent flakiness.
• Wait for AJAX or Asynchronous Operations: If the element appears after some AJAX or asynchronous operations, use the .wait() command to wait for these operations to complete:

  cy.wait(2000); // Wait for 2 seconds before interacting with the element
  cy.get('.my-element').should('exist');

• Debugging: Use Cypress’s debugging capabilities, like cy.log(), cy.debug(), and cy.pause(), to inspect the application state and debug your test.

Automation Transformation: The Smart Path

When you are done writing the automation test scripts, and then you get numerous synchronization and timed-out errors. This is not a motivating scenario for any tester. These numerous errors are the reason why Cypress is not considered a new-generation automation tool and is almost dead among modern web frameworks. Modern automation tools, like testRigor, utilize AI-powered algorithms to prevent timeout errors and other synchronization issues. Let’s see a few outstanding features of testRigor:

• Automatic Waits: testRigor’s automatic wait handling handles your synchronization issues automatically. You need not manually provide any explicit wait times; hence, it avoids the ‘element not found’ and many other similar errors.
• Cloud-hosted: testRigor is a cloud-hosted automated tool that eliminates all the complexities associated with setting up the tool, creating the environment, and configuring the dependencies. With testRigor, once you have purchased the license, you can simply sign in and start using it, which saves you both time and effort.
• Automatic Test Generation – Utilizing generative AI, testRigor facilitates the automatic creation of test scripts. Provide the test case title or description; test steps are generated automatically in seconds.

• User-friendly Test Script Creation & Maintenance: testRigor enables the drafting of test scripts in simple English, bypassing the need for coding. This design ensures that anyone can create, execute, or update test cases. Even your non-technical team members can participate in test creation and execution with testRigor’s simple, plain English test cases.

  testRigor’s self-healing capabilities automatically update the test script whenever there are changes in UI or element attributes, saving enormous maintenance costs.

• Universal Browser and Platform Compatibility: testRigor facilitates automation testing across multiple browsers, their respective versions, and diverse platforms. testRigor accomplishes this without a hitch.
• Intuitive Element Locators: testRigor doesn’t lean on the often inconsistent XPaths or CSS selectors. Instead, it harnesses a distinct AI-driven method for pinpointing elements. You can define the element either by UI text they see or its location on the screen, such as:

  enter "Kindle" into "Search"
  enter enter
  click "Kindle"
  click "Add To Cart"
  check that page contains "Item Added To Cart"

Discover how testRigor stands as an exemplary replacement for Cypress.

Summing Up

If you have better intelligent options available for test automation, why waste time resolving timed-out and synchronization errors? It is like using an old flip phone when the latest smartphones are on the shelf. Always go for a test automation tool leading the pack and keeping up with the current tech times. testRigor is your go-to in this case; it not only fixes test scripts with its self-healing capabilities but also lets you create tests without writing a line of programming code. Ready to give it a try? Grab a free trial over here.