completed chapter 6; includes examples for 'Enter' button, mouseover,…

… force-click

cypress.config.js

@@ -5,8 +5,9 @@ module.exports = defineConfig({
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
-    // baseUrl: 'http://localhost:3000',
+    // baseUrl: 'https://todomvc.com/examples/react/dist/',
     // viewportHeight: 550,
     // viewportWidth: 660
+    experimentalStudio: true
   },
 });

cypress/e2e/spec.cy.js

@@ -1,3 +1,20 @@
-it('my first test', () => {
-    cy.visit('https://cypress.io')
-});
+function addTodo(todoText) {
+    let todo1 = cy.get("[data-testid='text-input']");
+    todo1.click();
+    todo1.type(todoText);
+    todo1.type("{enter}");
+}
+
+function removeTodo(todoText) {
+    let todoItem = cy.get("[data-testid='todo-item-label']").contains(todoText);
+    todoItem.trigger('mouseover');
+    let todoItemRemoveButton = cy.get("[data-testid='todo-item-button']");
+    todoItemRemoveButton.click({force: true});
+}
+
+it('add and remove a single todo item', () => {
+    cy.visit('https://todomvc.com/examples/react/dist/');
+    addTodo('todo1');
+    removeTodo('todo1');
+});
+

cypress/support/quickstart.txt

@@ -0,0 +1,17 @@
+Terminal commands 
+=================
+
+node -v
+* check what version of Node is installed
+
+npm init
+* initialize a Node project in the current folder
+
+npm init -y
+* initialize a Node project and say accept all configuration defaults
+
+npm install cypress
+* install Cypress and its dependencies into the current Node project
+
+npx cypress open
+* open Cypress in UI mode