DEV Community

Cover image for Selenium Behind: Taking the Leap Into the Cypress World Part-II
Atul Sharma
Atul Sharma

Posted on

Selenium Behind: Taking the Leap Into the Cypress World Part-II

Here is the link of the Part-I, if you've landed directly here.

Many are curious about Part-I of this dev blog that only features content (I agree but that's the bare minimum theoretical background one must have to start) and no code and it echoes in every Developer's mind, Isn't it? Mine too.

β€œTalk is cheap. Show me the code.” ― Linus Torvalds

so, Let's continue the rest of the concepts needed to work with Cypress

  • Subject Management in Cypress

In Cypress, commands do not return their subjects, instead yield them. Cypress commands are asynchronous and get queued for execution at a later time. During execution, subjects are yielded from one command to the next and a lot of helpful Cypress code runs between each command to ensure everything is in order.
Okay, you've written code in Selenium like this below:-

Subject Management in Cypress

It's going to work like charm. Sorry, Did you forget?? In Cypress, commands do not return their subjects, instead yield them.
Now, a million dollar question- How can user interact with subject directly? My only reply will be this:

"Patience is not just about waiting for something; it's about how you wait, or your attitude while waiting." - Joyce Meyer

As advised in the above quote, talking about how or your attitude while waiting. Do you know that Cypress wait command can wait for a specific request to respond?

Alrighty folks, let's park this subject for now, tackle this some other article & continue our thrilling ride through the fundamentals of Cypress.

  • Context switching b/w Cypress & jQuery [.then() & .wrap()]

After going above Point, we know that commands do not return their subjects then, user can interact with subject directly with command -then(). Whatever is returned from the callback function becomes the new subject and will flow into the following command and Cypress will wait for that to resolve before continuing forward through the chain of commands.

Cypress .then command

Before using .then(), user is in Cypress context and can use the Cypress commands as its disposal. See below, find() command of Cypress is used & tooltip is confirming the same.

 Before .then() command

After using .then() command, user comes into jQuery context leaving the Cypress context. See below, find() command of jQuery is used, tooltip is showing the same and work with your Subject, as desired.

After .then() command

Oh No!! We're stuck again in the jQuery context and someone tell me how to get out of this context switch to Cypress context??

It's my pleasure to remind you the same quote by "Joyce Meyer" about Patience.

Now, Cypress has built .wrap command to switch to Cypress context, so that user can start leveraging the Cypress commands. See below, jQuery object is wrapped with Cypress .wrap command, regular Cypress commands can be used again to carry on the tests. Observe the tooltip and it's showing up that Cypress find() command is being used now.

After .wrap command

Catch you in the next article coming next week. Feel free to comment on this.

Please refer to my online portfolios:

Top comments (0)

Classic DEV Post:

Concepts behind modern frameworks

Many beginners ask "which framework should I learn?" and "How much JS or TS do I need to learn before a framework?" - countless opinionated articles go into promoting the advantages of the author's preferred framework or library, instead of demonstrating the readers the concepts behind them to allow for an informed decision.