Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

cypress
hooks
angular

What are before and beforeEach hooks in Cypress?

Marvah Mushtaq

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:

  1. before()
  2. beforeEach()
  3. after()
  4. 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
});
The before() hook

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('/')
});

OR

beforeEach(function namedFunction() {
    cy.visit('/')
});

OR

beforeEach('some description', function() {
    cy.visit('/')
})

it('test 1', () => {
  // rest of your test
})

it('test 2', () => {
  // rest of your test
});
The beforeEach() hook

Just like the before() block, the beforeEach() block can take three kinds of parameters:

  1. An anonymous function
  2. A named function
  3. 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 beforeEach cypress hook that redirects the user back to the homepage before each test runs. We use the visit command for this.
  • Lines 7-9: We create our first test where we check whether the Angular application has a title defined in the h1 tag and contains the Welcome keyword.
  • Lines 11-15: We create another test where we check whether the li element has the color red.

RELATED TAGS

cypress
hooks
angular

CONTRIBUTOR

Marvah Mushtaq
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring