Testing: Cypress Setup - Githubissues

Step by Step Setup Guide

[x] Create a new folder for a first try with Cypress
- [x] Init a git repository
- [x] Init a npm workspace
[x] Create a src folder that should contain all source code of your example app (you can find the example source code at the end of this issue)
[x] Create a .gitignore file
- [x] A predefined list of ignores can be found here

NPM Scripts

Serve Script

[x] Install serve as a local development server and save it as a development dependency
[x] Create a serve script in your package.json.

"scripts": {
  "serve": "serve ./src"
}

Run the serve script with npm run serve to start your local development server.

Remember to keep the server open while you develop or run cypress

Cypress

[x] Install cypress as a development dependency
[x] Add a node script to run cypress in your package.json

"scripts": {
  "e2e": "cypress open"
}

[x] Run cypress once with the e2e npm script so that cypress will create all necessary folders and files
[x] You need to set the base url for e2e tests in the cyress.json file in the root directory of your npm workspace

{
  "baseUrl": "http://localhost:5000"
}

The url must match to your personal setup and port

Add Own Tests

[x] Create a new test file in /cypress/integration/
[x] Once you added the test you may need to restart the cypress npm script
[x] Analyze the test to lern the basic commands of Cypress

todo.spec.js

describe("todo App", () => {
  it("should allow to enter text", () => {
    cy.visit("/");
    cy.get("#input")
      .type("learn cypress")
      .should("have.value", "learn cypress");
  });

  it("should add li elements", () => {
    cy.visit("/");
    cy.get("#input").type("learn cypress");

    cy.get("#add-button").click();

    cy.get("#list").get("li").should("have.length", 1);
  });
});

Ressources

Example Source Code

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="input" /><button id="add-button">Add</button>
    <ul id="list"></ul>
    <script src="script.js"></script>
  </body>
</html>

script.js

const input = document.querySelector("#input");
const addButton = document.querySelector("#add-button");
const list = document.querySelector("#list");

addButton.addEventListener("click", addTodo);

function addTodo() {
  const newTodo = input.value;
  const newLi = document.createElement("li");
  newLi.innerText = newTodo;

  list.appendChild(newLi);
}

glissario / bootcamp-schedule

Testing: Cypress Setup #86

Step by Step Setup Guide

NPM Scripts

Cypress

Add Own Tests

Ressources

Example Source Code