Hello Readers, Today we will learn about Hooks and Tags their significance, and how to use them in Cypress.
What is Cypress?
The Cypress tool is a JavaScript testing automation solution used for web automation.
It enables teams to create web test automation scripts. This solution aims to facilitate frontend developers and test automation engineers to write web tests in the web language that is JavaScript for web test automation.
What are Hooks?
Cypress also provides hooks (borrowed from Mocha). These are helpful to set conditions that you want to run before a set of tests or before each test.
They’re also helping to clean up conditions after a set of tests or after each test.
Some of the common hooks are as follows −
- before − It is executed, once the prior execution of any tests within a described block is carried out.
- after − It is executed, once the post-execution of all the tests within a described block is carried out.
- beforeEach − It is executed prior to the execution of an individual, it blocks within a described block.
- afterEach − It is executed post execution of the individual, it blocks within a described block.
Example Code
In the above Example code snippet
The last executed step is the AFTER ALL. Both of them ran only once.
The step executed under BEFORE EACH ran twice (before each TEST BODY).
Also, the step executed under AFTER EACH ran twice (after each TEST BODY).
Both It blocks are executed in the order, in which they are implemented.
/* Command for Auto Suggestions in Cypress */
/// <reference types="Cypress" />
describe('Hooks Demonstration', function()
{
before(function() {
/* executes once prior all tests in it block */
cy.log("Before hook")
})
after(function() {
/* executes once post all tests in it block */
cy.log("After hook")
})
beforeEach(function() {
/* executes prior each test within it block */
cy.log("BeforeEach hook")
})
afterEach(function() {
/* executes post each test within it block */
cy.log("AfterEach hook")
})
it('First Test', function() {
cy.log("First Test")
})
it('Second Test', function() {
cy.log("Second Test")
})
})OUTPUT
To display output in Cypress Open the terminal and type the following command
npx cypress openthen select the destination file
Then the Output will be Displayed as Follows:-
What are Tags?
Cypress has 2 tags .only and .skip.
The .only tag is utilized to execute it block to which it is tagged
The .skip tag is utilized to exclude it block to which it is tagged.
Example Code
/* Command for Auto Suggestions in Cypress */
/// <reference types="Cypress" />
describe('Tags Demonstration', function()
/* it block with tag .only */
{
it.only('First Test', function() {
cy.log("First Test")
})
/* it block with tag .only */
it.only('Second Test', function() {
cy.log("Second Test")
})
/* Block without .only tag */
it('Third Test', function() {
cy.log("Third Test")
})
})
In the Above Example code, the .only tag executes the block to which it is tagged and ignores the block without the .only tag.
Output
Example Code
In the above example code show that it block (Third Test) with the .skip tag got skipped from the execution.
describe('Skip tag', function()
{
/* It Block without skip Tag */
it('First Test', function() {
cy.log("First Test")
})
/* It Block without skip Tag */
it('Second Test', function() {
cy.log("Second Test")
})
/*it block with .skip Tag */
it.skip('Third Test', function() {
cy.log("Third Test")
})
})Output
References
https://docs.cypress.io/guides/overview/why-cypress
