What are before and beforeEach hooks in Cypress?
Overview
Cypress hooks carry out certain operations before or after each test. They are helpful to set conditions that we want to run before a set of tests. They also help clean after a set of tests are executed.
Some of the most common hooks are the following:
before()beforeEach()after()afterEach()
Let’s discuss the before() and beforeEach()hooks in detail.
The before() hook
The before() hook is run once before we start the execution of the first test. It might have a few setup steps we need to perform before we get started with the test execution.
Code
Let’s assume we have to write a couple of tests in which we have to visit a specific page URL. After a couple of tests, opening the URL page action will get repetitive and therefore take a lot of resources.
So, a before() hook is used as a solution over here.
Syntax
before(function() {
// Steps we need to perform before we get started with the test execution.
})
OR
before(function namedFunction() {
// Steps we need to perform before we get started with the test execution.
})
OR
before('some description', function() {
// Steps we need to perform before we get started with the test execution.
})
Example
before(function() {cy.visit('/')})it('test 1', () => {// rest of your test})it('test 2', () => {// rest of your test});
We use a before() hook in the code block above. This opens up our URL page before all our tests are executed.
The beforeEach() hook
If we want to isolate our tests so they don’t affect each other, we use the beforeEach() block to group these test steps together. This is done if we want to execute some steps before each test case.
This helps us gain overall test stability. However, it might need us to structure our tests in a certain way.
beforeEach(function() {cy.visit('/')});ORbeforeEach(function namedFunction() {cy.visit('/')});ORbeforeEach('some description', function() {cy.visit('/')})it('test 1', () => {// rest of your test})it('test 2', () => {// rest of your test});
Just like the before() block, the beforeEach() block can take three kinds of parameters:
- An anonymous function
- A named function
- A description and both an anonymous or named function
The above code will open and visit the URL before executing each test.
Code
We can find a working example containing a few concepts discussed here:
describe('My App', () => {
beforeEach(() => {
cy.visit('/');
})
it('it has a title', () => {
cy.get('h1').contains('Welcome');
});
it('it has a red color element', () => {
cy.get('li')
.should('have.css', 'color')
.and('eq', 'rgb(255, 0, 0)')
});
});Note: If you have opened this shot in the incognito mode, please enable the "Allow all cookies" option in your browser. Otherwise, you might get an error in the "Output" tab.
Explanation
- Lines 3-5: We define a
beforeEachcypress hook that redirects the user back to the homepage before each test runs. We use thevisitcommand for this.
- Lines 7-9: We create our first test where we check whether the Angular application has a title defined in the
h1tag and contains theWelcomekeyword. - Lines 11-15: We create another test where we check whether the
lielement has the color red.
