Hello everyone! Today we will get acquainted in practice with the Cypress test automation framework by writing a small automated test. In this article, we will not analyze the advantages and disadvantages of the framework and conduct in-depth analysis of it. We will simply show all the basic steps from the very beginning so that you can understand for yourself whether this tool can be interesting and useful to you.

In today’s example all steps will be performed on Windows using Chrome browser. A development environment is helpful for writing the code, so we will use Visual Studio Code IDE. You can set it up in advance if you want to repeat the example precisely :)

Let's get started!

1. First of all, we need to download the Cypress application. Go to the mainpage https://www.cypress.io/ and click on the “Install” button in the upper right corner of the page.

2. Here we see a panel with download options. For now we will not see into NPM installation, so we just choose the “Direct download” option, click on the “Download” button, download the archive and unzip it into a separate folder.

3. In the contents of the unzipped folder we need to run the “Cypress.exe” file. After Cypress is launched, we see an application homepage. Here we can read the recent news, and now we need to click on the “Continue” button.

4. The “Projects” page is displayed. We need to add a new project by clicking on the link “Browse manually”.

5. We are asked to select a folder for our new project. Let’s create a new folder and name it  for example “NoveoTest”. Then we click on the “Select Folder” button to confirm the choice.

6. Our project folder is ready now. Next we need to select a testing type we will use. Let’s click on the “E2E Testing” option because we need to create a test to check a specific user scenario.

7. On the next page Cypress informs us that all the required files are added to the “NoveoTest” folder. We don’t need to change anything on this step so we can just click on the “Continue” button.

8. Now we need to choose a browser for test automation. Cypress currently supports different browsers, but in this case it’s enough to go with Chrome, so let’s click on the confirmation button and move to the next step.

9. Currently the launch page is displayed. Here we need to create a “spec” file which is supposed to include the test steps. We are able to download example specs or create our own spec. Let’s choose the second option and click on the “Create new spec” button.

10. Next we should enter the path for our spec. It makes sense to keep the default folder (“cypress\e2e”) and change the name, for example, to “noveotest.cy.js”. After that we can click on the “Create spec” button.

11. The spec is successfully created, and the contents of the file are displayed. Everything is going well, so let’s click on the “Okay, run the spec” button.

12. At this step Cypress automatically runs the spec which main goal currently is to open the default page: https://example.cypress.io.

 

13. Next, let’s click on the spec name on the left side panel (“noveotest.cy.js”). In the opened dialogue window we can select an IDE to open this file. In our example we need to select the “Visual Studio Code” option in the dropdown and then click on the “Save changes” button.

14. IDE is launched and our spec file is opened. Now we can edit it and write our own automated test! Please note that you can skip the previous step and open the folder (“NoveoTest”) with all the test files that were created earlier directly in the IDE. But this is not necessary for now, as we will be writing a very simple test and only editing the file that includes test steps, not fixtures or configuration.

15. To make the test both look and work well, we need to change the describe()function contents. For a start, the first argument of this function usually matches the test group name. Let’s change it to something suitable, for example “noveo test”.

describe('noveo test', () => {
  it('passes', () => {
    cy.visit('https://example.cypress.io')
  })
})

16. Next, it’s better to change the first argument of it function to make it consistent with our test case name. Here we need to decide what exactly we’ll test. In this example we’ll check if the first page from the list of vacancies is opened correctly on the Noveogroup website. So, we can describe it as “opens first career page”.

describe('noveo test', () => {
  it('opens first career page', () => {
    cy.visit('https://example.cypress.io')
  })
})

17. At this step, we begin to set the actions that Cypress will run. Let's take into account the fact that the Noveogroup website has a version adapted for mobile devices with some of the page elements looking different (for example, the main menu can be hidden by default). In our example, we will check the desktop version, so we need to set the Full HD resolution in advance using the cy.viewport command. We place it at the very beginning before the rest of the steps so that the website page opens with the screen resolution we need.

describe('noveo test', () => {
  it('opens first career page', () => {
    cy.viewport(1920, 1080);
    cy.visit('https://example.cypress.io')
  })
})

18. Now let’s change the URL so that Cypress will open the Noveogroup main page https://noveogroup.com/.

describe('noveo test', () => {
  it('opens first career page', () => {
    cy.viewport(1920, 1080);
    cy.visit('https://noveogroup.com/')
  })
})

19. Before opening the specific vacancy page it is needed to open the list of all the vacancies. To do that, we need to find in the website main menu the button that contains “Careers” text and click on this button.

describe('noveo test', () => {
  it('opens first career page', () => {
    cy.viewport(1920, 1080);
    cy.visit('https://noveogroup.com/');
    cy.get('.main-nav-list').contains('Careers').click()
  })
})

20. Next we need to identify the first vacancy in the list. We search for the list of vacancies, then select the first element and click on it.

describe('noveo test', () => {
  it('opens first career page', () => {
    cy.viewport(1920, 1080);
    cy.visit('https://noveogroup.com/');
    cy.get('.main-nav-list').contains('Careers').click();
    cy.get('.open-vacancies__item').first().click();
  })
})

21. The last step in this small test is to check if the opened page contains the correct elements. Let’s check that it contains subheadings “About us” and “Requirements”. Please note that the presence of two elements of the same type (in our case both subheadings) can be checked using a single command.

describe('noveo test', () => {
  it('opens first career page', () => {
    cy.viewport(1920, 1080);
    cy.visit('https://noveogroup.com/');
    cy.get('.main-nav-list').contains('Careers').click();
    cy.get('.open-vacancies__item').first().click();
    cy.get('.subtitle').should('contain', 'About us').and('contain', 'Requirements');
  })
})

22. It's all set! We need to save the spec file, for example, by pressing Ctrl + S, and return to the Cypress application to check everything. If the Chrome browser page in which the automated test example was launched before is still open, you can simply return to its window. After saving the spec file, the test run will restart automatically.

23. Finally, we see that:

• On the left side panel there is a green check mark with the number 1 that informs us about the successful test run.
• Noveogroup URL is displayed in the browser address bar.
• The screen resolution is set to 1920x1080.

Additionally, you can add another it function to the test group and check what the differences are:

describe('noveo test', () => {
  it('opens first career page', () => {
    cy.viewport(1920, 1080);
    cy.visit('https://noveogroup.com/');
    cy.get('.main-nav-list').contains('Careers').click();
    cy.get('.open-vacancies__item').first().click();
    cy.get('.subtitle').should('contain', 'About us').and('contain', 'Requirements');
  });


  it('opens first career page in mobile', () => {
    cy.viewport(720, 1280);
    cy.visit('https://noveogroup.com/');
    cy.get('.burger').click();
    cy.get('.main-nav-list').contains('Careers').click();
    cy.get('.open-vacancies__item').first().click();
    cy.get('.subtitle').should('contain', 'About us').and('contain', 'Requirements');
  })
})

Your first Cypress automated test is ready! You can try other features of this framework in practice using the websites and scenarios that suit you. The main thing is not to be afraid to learn new things and experiment. We hope you find this material helpful. Good luck in your new testing horizons!