Cypress Test Cases Writing Take Aways.

March 3, 2019
10:29 pm

Finally I setup Cypress for the project that I am working on in my company. After wrote several test cases, here is some take aways I want to share.

Stub Network Before Visit

When stubbing the requests for test cases, cypress need to know about the routes before the reqeusts being made from the app you are testing.

This is crucial for the initial requests that your app will emit to load initial data used to boot up.

One way to make sure that is always put the stubbing before the visit() call:

beforeEach(() => {
    cy.server();
    /** put your stubbing code here */
    cy.visit('your web site!');
});

Execute Javascript Before The Page Resource Loads

In case of any front end local data mocking, for example, data from localstorage. If that data is used during the initialization (if the user has already logged in), we need to make sure the mocking job be done before any page resource being loaded and executed.

To do this, we just need to use the callback function of visit():

cy.visit(`/app`, {
    onBeforeLoad: () => {
        loginUser();
    },
});

Query Child Elements

This is a very common process when locating elements on the page. Look at an example below, which is an screenshot from the project I’m working on:

So above is a filter list in our product. And in my test case I need to check if the filters selected all exist and are visible.

How to do that? If just using cy.contains('24.com') seems easy enough, but not practical, as there might be another element on this page (note that the screenshot is just part of the page) may contains the same text. So we need to lock it in just in that area.

To do that, we locate this “Include” section first:

cy.contains('INCLUDE people who match at least ONE of the following')
   .should('be.visible')

According the HTML structure, the filter list and the section title share the same parent, so the parent should be the scope to search from:

cy.contains('INCLUDE people who match at least ONE of the following')
   .should('be.visible')
   .parent()
   .within(() => {
        cy.contains('24.com');
   });

The key magic here is the within() command, it scopes all subsequent cy commands to within this element. Useful when working within a particular group of elements.