Chaining Commands | Bondar Academy

Lesson Summary

In this lesson, we explore Cypress chains , which are a fundamental aspect of the Cypress testing framework. The concept is based on the fluent interface design pattern , allowing commands to be chained together using dot notation . Key Concepts of Cypress Chains Chains start with the cy keyword, followed by methods called one after the other. Commands can be chained infinitely, allowing for complex test scenarios. Each command waits for the previous one to complete and returns its result to the next command in the chain. Example of a Cypress Chain For instance, to interact with an input field, find its parent, click a button, and validate a radio button, the chain might look like this: cy.get('input#email') .parents('form') .find('button') .click() .find('input[type="radio"]') .first() .should('have.text', 'Option 1'); Important Considerations After an action command (like click ), it's generally recommended to start a new chain. This is to avoid issues where the DOM may change, leading to errors such as Element was detached from the DOM . Cypress maintains a snapshot of the DOM from the previous commands, which may not match the current DOM after an action. In summary, while you can create long chains in Cypress, it's crucial to break the chain after action commands to ensure stability and reliability in your tests.