Chaining Commands | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Interaction with Web Elements
Instructor: Artem Bondar
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.
Video Transcript
Hey guys, welcome back and let's talk about Cypress chains I think you heard already in my language during the previous lessons phrase like Start a new chain or chaining a Cypress command stuff like this So it is related to the design pattern that Cypress using for its framework It's called fluent interface design and the details about this design pattern that you chain the next command after the previous one Through the dot notation and let's talk about this design pattern a little bit So in Cypress using CY keyword you start a new chain and then using just dot notation You call methods one by one and you can create the infinite chains like that So you can call as many commands as you want It is unlimited and what the rule about that is that every command that is executed for example Cy get when this command is executed it waits for the result of the execution and after the execution it Returned the result to the next command in the chain So when we search for example the element by the input email one When the Cypress found this element it returns the DOM for this element to the next command so the next command can use this DOM element in this example is parent until nbcard and then this method is Executed when it is executed it passed down the result to the next command and so on and so forth And if command was not able to return the result Let's say the input email one found the desired element But nbcard body was not able to find the element as the next step If the result was not able to return test stops here returning you the error message So let's try to run a new test using kind of an infinite chain. I want to show you one example So I'll start with this one. For example that we used before So I take input field Then we go to the parents when we find the button and then let's say after we found the button I want to click on this button. Okay, and then after the click command, I still continue running my chain So let's say that after that. I want to go back to the parents one more time find the form Then after that, let's say I want to find the child element from the form. Let's say it will be So let's for example click on any of this radio buttons So radio buttons and be radio like this So we find and be radio and there are several and be radio so we will find the first one and Then let's say then we will aid assertion that this first radio button should have text and the text is Option 1 Option 1 like this. All right, so let's try to run this test going back to Cyprus running the test and Here we go. You see test pass successfully So we started with input field and we traveled up then we found the button then we made a click on this button Then we traveled up to the form again. Then we found all three radio buttons We found the first one and made a validation that the first radio button has the option one So everything worked Successfully and like I mentioned before you can create the infinite chains like that, but there is a catch So it is generally not recommended to continue the chain after the action command So for example here I change this command after the click Why is it important because after the click command click continue? Returning the result of the previous function so click returns the context of the button So the next command is able to continue From this button go to the parent form, but sometimes click May change the DOM for example you make the click and navigate to a different page or your user interface changing and something like this and When this happens Cyprus may lose the context of the DOM So when you're creating the chain Cyprus remembering all the operations that you perform before and remembers kind of the snapshot of the DOM structure that was before and if after the click you trying to operate within the same context of the same DOM But the actual DOM of the HTML page was changed then you will see the error something like Element was detached from the DOM. Why is it happening? Because Cyprus is relying on the DOM snapshot that it's remembered from the previous chain commands but the actual snapshot of the DOM the actual physical DOM of the new page after the click is Changed and because they don't match Cyprus not able to continue this chain and this breaks. So the rule of thumb is this When you create the chains, you can make it as long as you want But until the action command once you have the action command start a new chain so I break the chain over here and After the click I just create a new chain sciget Input email one and continue the test like this and currently the flow is exactly the same But I have created two independent chains Making sure that Cyprus will be happy about any, you know, DOM changes if that may happen on the click All right, so that's pretty much it about the Cyprus chains Let's quickly summarize that you can create infinite chains in the Cyprus the flow of the data go left to right every command Returns the result that it passed down next to the next command And if you use an action command inside of the chain, it is recommended to start a new chain after that All right, that's it guys and see you in the next lesson