Cypress: Creating a simple test environment

Remark: The posts on this page are generally works in progress and subject to changes, therefore comments are disabled.

In order to start playing around with Cypress commands, we don’t need a real web application and web server. We can start testing Cypress commands on a simple HTML page.

To prepare a simple testing environment we can go through the following steps:

Create a folder for example simpleTestApp.
Create a simple HTML file e.g. home.html inside that folder, for example, a HTML file with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>A simple HTML document</title>
</head>
<body>
    <p>Hello World!<p>
</body>
</html>

Make sure that Node.js is installed on your computer
You can check whether you have it already installed on your computer by checking its version:

node -v
To install Cypress for our example project simpleTestApp, open a command prompt window and navigate into the simpleTestApp folder and execute here the command to install cypress:

npm install cypress –save-dev
Now cypress is installed inside the test project but it is not configured. To auto-configure it, simply start Cypress with the following command from within the simpleTestApp folder:

npx cypress open
The command above starts the Cypress GUI. Select the [E2E Testing] option:

Next, you will see the following screen, which means that Cypress has automatically created all files it needs to work:

Select [Continue] and then the following view appears. Here you can select [Start E2E Testing in Chrome]:

The following GUI appears. Here you can select either of the options [Scaffold example specs] or [Create new empty spec]. Both options will create the remaining missing folders which are required for Cypress to run properly. But for our case, we select the [Create new empty spec] to keep it as simple as possible.

Enter a path for the new test file, for example cypress\e2e\example1.cy.js

Confirm the suggested example code:

Once you confirm it the test will be created and immediately executed against the remote Cypress test application:

Now we would like to write our own first simple cypress test which would test our simple test project which is nothing more than a simple Html file (home.html).

To do this we have to navigate to the folder ..\simpleTestApp\cypress\e2e (which was automatically created when we opened Cypress for the first time above). Here we can open the automatically created example file example1.cy.js and paste the following content:

describe('example1', () => {
  beforeEach(() => {
    // Cypress starts out with a blank slate for each test
    // so we must tell it to visit our website with the `cy.visit()` command.
    // Since we want to visit the same URL at the start of all our tests,
    // we include it in our beforeEach function so that it runs before each test
    cy.visit('../../home.html')
  })

  it('write a log', () => {
    cy.log('Hello from Cypress')
  })
})

Once we save our changes the test will be executed again on the Cypress GUI and test our local home.html file:

admin

Uncategorized