And the nominees for “Best Cypress Helper” are: Utility Function, Custom Command, Custom Query, Task, and External Plugin

And the Oscar goes to…

---

ACT 1: EXPOSITION

 

On quite a few events, colleagues have come to me with a query that appears to resonate amongst many Cypress customers: Which strategy is greatest for reusing actions or assertions when writing exams? Ought to they go for a JavaScript Utility Perform, a Customized Command, maybe a Customized Question, and even one of many so-called Duties? What about an Exterior Plugin?

This question isn’t distinctive to my circle; it’s a subject that even on occasion surfaces within the Cypress.io Discord group. The myriad of strategies accessible in Cypress could be overwhelming, however this versatility can be what makes this software so highly effective.

 

Should you’re studying this weblog publish within the hope of discovering a definitive reply as to which Cypress helper deserves the “Oscar,” then this is likely to be the purpose the place you select to cease studying and test again in my subsequent entry. In spite of everything, in relation to film tastes, nothing is written in stone.

Nonetheless, in the event you’re open to exploring some suggestions and understanding when one technique is likely to be extra advantageous than one other, then I imagine you’re be in the proper place.

I had the concept that presenting a sneak peek of every Cypress Helper on a ‘single display’ may simply make it easier to resolve which one to ‘watch’ the complete characteristic movie primarily based in your temper or wants on any given day.

My hope is that by the tip of this publish, you should have a stronger set of methods to reinforce your Cypress toolkit for on a regular basis use. So get the popcorn prepared and benefit from the previews.

---

ACT 2: CONFRONTATION

 

In Cypress.io, the choice to make use of a JavaScript Utility Perform, Customized Command, Customized Question, Process and even an Exterior Plugin ought to rely upon the particular wants of your take a look at suite and the scope of performance you’re aiming to realize.

So… attending to the purpose, in what conditions can every of them lend you a greater hand and prevent numerous work?

Let’s have a look at them one after the other.

 

JavaScript Utility Perform

 

 

• Use JavaScript Utility Features for easy, synchronous operations that don’t have to work together with the Cypress command chain.

• Ideally suited for information transformations, calculations, or any generic JavaScript features.

• You can outline them straight in your take a look at spec for instances the place the operation may be very particular to the scope of these exams, or wrap a number of of them in a helper file within the cypress/help folder in the event you plan to make use of them throughout a number of take a look at specs.

There’s nothing stopping you from returning a Cypress chainable object from the decision to JavaScript Utility Features, and in sure instances, it’d even be fairly handy.

Nonetheless, provided that the vast majority of JavaScript code is synchronous, and contemplating that the character of Cypress instructions is asynchronous and so they get queued for execution at a later time, you may wish to think about using a Customized Command as a substitute of a JavaScript Utility Perform when returning a Cypress chainable object.

 

Customized Command

 

 

That is when issues begin to get fascinating…

• Use Customized Instructions to create reusable units of Cypress instructions that may be referred to as as a single command.

• They’re asynchronous, and so they can return a Cypress chainable object, over which you’ll run assertions.

• A Customized Command can: begin a brand new Cypress chain (referred to as a dad or mum command), obtain a earlier topic and proceed an present chain (referred to as a toddler command), or both begin a series or use an present chain (referred to as a twin command).

• Added through Cypress.Instructions.add() and turns into a part of the Cypress chainable interface. You may as well overwrite present instructions utilizing Cypress.Instructions.overwrite().

• They’re outlined within the cypress/help/commnads.js and are extraordinarily useful for actions carried out incessantly in your exams, like customized login procedures or kind submissions.

• They are often reused throughout a number of take a look at specs in your Cypress undertaking.

• BE AWARE! Customized Instructions are executed as soon as and should not have built-in retry-ability. In order for you your technique to have retry-ability, it’s higher to make use of a Customized Question.

If you need to dig deeper within the intricacies of Customized Instructions you may go to the Cypress documentation Custom Commands, Building Cypress Commands, and Custom Cypress Command Examples.

 

Customized Question

 

 

• Customized Queries had been a particular ‘characteristic movie’ launched within the Cypress sequence on the finish of 2022, debuting in model 12.

• Use Customized Queries to question the state of your software, for example, to search out parts primarily based on customized logic or situations not lined by Cypress build-in queries. Examples of built-in queries embrace get(), discover(), filter(), url(), and window().

• They are often significantly helpful when integrating with UI libraries or frameworks that require particular selectors or patterns to work together with their elements.

• Queries are synchronous and might return a Cypress chainable object, over which it’s also possible to run assertions.

• Customized Queries are retry-able, that means they’ll constantly try to retrieve no matter you’ve gotten requested till they succeed or a timeout is reached. It will be important that the Customized Question callback perform doesn’t change the state of your software.

• New queries are added through Cypress.Instructions.addQuery(), however you may overwrite an present question utilizing Cypress.Instructions.overwriteQuery().

• They’re outlined within the cypress/help/instructions.js file and are helpful when you may encapsulate complicated or repeated DOM queries that you’ll reuse throughout your take a look at framework.

• Nonetheless, for repeatable conduct, it’s typically extra environment friendly to jot down a JavaScript Utility perform fairly than a Customized Question, and in spite of everything each behave “synchronously” (by default, JavaScript is a synchronous).

• TAKE CAUTION! In case your technique must be asynchronous or solely to be referred to as as soon as, then it is best to write a Customized Command as a substitute.

• STAY ALERT ! When piecing collectively prolonged sequences of queries, make sure that you keep away from incorporating customary Cypress instructions, as their inclusion will disrupt the take a look at’s potential to retry the complete chain.

For extra details about Customized Queries you may go to the Cypress documentation Custom Queries and Retry-ability.

 

Process

 

 

• Duties are used for dealing with operations that should be executed exterior the browser context.

• They run in Node.js, executed by the Cypress course of, and could be invoked out of your exams utilizing the cy.process() command. This bridges the hole between the Node.js server and browser-based exams, enabling a extra complete testing technique.

• Duties are perfect for database operations corresponding to seeding, querying, or cleanup. They’re additionally helpful for file system interactions, corresponding to downloading recordsdata, or any server-side characteristic not accessible inside the browser.

• Moreover, they’re nice for storing state in Node that should persist between spec recordsdata, working parallel duties like making a number of HTTP requests, and for executing an exterior course of or system command.

• The Process occasion handler can return a price or a promise. Returning undefined, or a promise resolved with undefined, will trigger the command to fail.

• Duties are sometimes outlined within the undertaking’s cypress.config.js file inside the setupNodeEvents() perform. Alternatively, you may outline them within the undertaking’s cypress/plugins/index.js file.

For extra details about Duties you may go to the Cypress documentation Tasks and Real World Example tasks.

 

Exterior Plugin

 

 

• Cypress Exterior Plugins are used to increase the performance of Cypress exams past the capabilities supplied by the core framework.

• These plugins are sometimes put in through Node Package deal Supervisor and configured inside the Cypress undertaking to offer further capabilities tailor-made to particular testing wants. They assist make Cypress a extra highly effective and versatile software for end-to-end testing.

• You’ll be able to host your Exterior Plugins on a number of repositories corresponding to GitHub or Bitbucket, and distribute them publicly through the software program registry NPM or internally inside your group through Nexus.

• They’re terribly helpful when you’ve gotten frequent instruments, instructions, and assertions that might be reused throughout a number of Cypress frameworks.

• There’s a huge array of Cypress Exterior Plugins accessible; some are very well-maintained and supported by the Cypress group, whereas others… should not maintained in any respect.

• Due to this fact, be selective and significant when selecting a Cypress plugin in your software. I like to recommend choosing plugins which are clear, light-weighted, incessantly up to date, and supported by credible creators. In spite of everything, every time you load a plugin in your take a look at or framework, you’re including time to your take a look at run.

 
Some frequent makes use of for Exterior Plugins in Cypress embrace:

Visible Testing (corresponding to Applitools’ cypress-eyes)

Accessibility Testing (corresponding to Andy’s cypress-axe, which makes use of Deque’s axe-core).

Reporting (corresponding to Yousaf’s cypress-multi-reporters for producing extra informative and styled take a look at reviews)

API Testing (corresponding to Filip’s cypress-plugin-api)

A Toolkit of helpful additional Question Instructions (corresponding to Gleb’s cypress-map)

Firing native system occasions (corresponding to Dmitriy’s cypress-real-events)

Filtering Checks (corresponding to @cypress/grep)

For extra details about accessible Exterior Plugins, you may go to the Cypress documentation on Plugins (nonetheless this checklist appears somewhat dated).

---

ACT3: RESOLUTION

 

Every of those Cypress Instruments serves a unique goal and can be utilized in conjunction to create a sturdy and maintainable testing suite. So, for my part, ALL OF THEM actually need to share the “Oscar” for “Finest Cypress Helper”.

 

JavaScript Utility Features, Customized Instructions and Customized Queries are primarily about organizing code inside your exams, whereas Duties and Exterior Plugins are for interacting with the system and surroundings exterior the browser or for extending Cypress’s capabilities.

Customized Instructions can improve the readability of your exams by tackling repetitive units of instructions directly. Equally, Customized Queries can summary the querying logic, making the exams simpler to grasp at a look.

Keep in mind to make use of Customized Instructions and Customized Queries judiciously, as every addition to your testing framework will increase the upkeep overhead and might doubtlessly introduce complexity. Hold them well-documented and guarantee they supply clear worth over the usual set of queries supplied by Cypress.

Nonetheless, I’ve to say that Cypress Exterior Plugins maintain a particular place in my , and that’s why I’ll dedicate a full weblog publish to them sooner or later.

 

Disclaimer: Keanu Reeves has neither gained an Oscar, Golden Globe, or Emmy, and nor even been nominated for any of those awards. Possibly in his subsequent John Wick characteristic movie!

(Picture from Marvelous Movies)