Running Cypress

Let's explore Cypress by running a test.

We'll cover the following

Opening Cypress

Let’s start with a real Cypress test:

context("Signup flow", () => {
  it("The happy path should work", () => {
    cy.visit("/");
    // ... we are going to write the rest of the test
  });
});

Let’s have a closer look at the code line by line:

  • context("... is the same as describe(".... They both help to group some related tests.

  • it("... is the same as a test(".... They both contain the test instructions.

  • cy.visit("/");is the first line of the test itself. It visits the home page of Conduit.

Cypress knows which URL leads to the whole site. Take a look at the Cypress config file to see how.

{
  "baseUrl": "http://localhost:4100",
  "projectId": "jdiekj"
}

The baseUrl property tells Cypress that the domain of the site is available.

Cypress open

You need to select Test.spec.js in the UI to run the test.

The Cypress test should contain the following:

Note: You can see the cypress UI better by opening the link next to Your app can be found at:

context("Signup flow", () => {
  it("The happy path should work", () => {
    cy.visit("/");
    // ... we are going to write the rest of the test
  });
});
Test

Now you can see the page launched by the test.

The Test Runner

On the left you can see the Test Runner, one of Cypress’s most useful features. It allows you to analyze what’s happening in the front-end application.

By reading what’s happening in the front-end app, you get access to needed feedback during development, debugging, and testing. Test Runner gives you access to the front-end Ajax calls and alerts you to any errors within the front-end code. Test Runner also notifies you about Cypress and the result of the assertion.