Closed codingbootcampseu closed 3 years ago
src
.gitignore
Serve Script
serve
package.json
"scripts": { "serve": "serve ./src" }
Run the serve script with npm run serve to start your local development server.
npm run serve
Remember to keep the server open while you develop or run cypress
cypress
"scripts": { "e2e": "cypress open" }
e2e
cyress.json
{ "baseUrl": "http://localhost:5000" }
The url must match to your personal setup and port
/cypress/integration/
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); }); });
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); }
Step by Step Setup Guide
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).gitignore
fileNPM Scripts
Serve Script
serve
as a local development server and save it as a development dependencypackage.json
.Run the serve script with
npm run serve
to start your local development server.Cypress
cypress
as a development dependencypackage.json
e2e
npm script so that cypress will create all necessary folders and filescyress.json
file in the root directory of your npm workspaceAdd Own Tests
/cypress/integration/
todo.spec.js
Ressources
Example Source Code
index.html
script.js