What's the difference?

• JavaScript-only
• (Chrome-only) - not anymore!
• Mocha-only
• it’s fast!, because test code itself run in the browser along with the app code itself.

Setup

Installation Prerequisite

Node.js

You’ll open a terminal and type node --version - and ?
If you didn't find node, install Node

Install Cypress

NPM (JavaScript’s package manager) installs packages locally, in the same folder as the test code. So first mkdir [foldername] a folder. and cd [foldername] into it.

run npm init -y to get package.json
here it can be registered that Cypress is installed

install npm install cypress
run npx cypress open

now in your IDE you will find folders, one is Integration with a lot of example tests

First Test

of Not-todo-List i created with Heroku & Strapi. Sorry for the delay - please wait a while for the backend.

Let’s add two not-todos “Paint on dusty Windows” and more importantly “Postpone Cypress Studies”.

1. Navigate to the Integration Folder & delete the examples 2. create a nottodoList.spec.js file.
2. For VS Code autocomplete support put /// <reference types="cypress" /> on top of the page.
3. Write a test inside an it function.

/// <reference types="cypress" />
it('should navigate to the Not-Todo App', () => {
  cy.visit('https://aquin-todolist.netlify.app/')
})

Run with npx cypress open

1. it accepts 2 parameters: Name of the test as a String & callback function with the test code.
2. it is using an object cy + using the visit method, to visit the page

try to make it fail - there will be a good error-explenation:

Aim a target to get things done in the website under Test

past it in your IDE

add a .type() command immediately after the .get

Passed!!!

Add Delays for Stability

The .get function has a second parameter timeout. We add that, to make it wait till it gets the input.

cy.get('input', {timeout: 6000}).type('paint flowers on dusty windows')

Click the add to add the Notodo to the List.

Get Input

• cy.visit() expects the page to send text/html content with a 200 status code.
• cy.request() expects the remote server to exist and provide a response.
• cy.contains() expects the element with content to eventually exist in the DOM.
• cy.get() expects the element to eventually exist in the DOM.
• .find() also expects the element to eventually exist in the DOM.
• .type() expects the element to eventually be in a typeable state.
• .click() expects the element to eventually be in an actionable state.
• .its() expects to eventually find a property on the current object.

CSS Selectors

cy.get('textarea.post-body')

Text Content

cy.contains("nichts überlegen")

Interacting With Elements

cy.get('textarea.post-body').type('This is an excellent post.')

• .type() - Type an input.
• .blur() - Make a focused DOM element blur.
• .focus() - Focus on a DOM element.
• .clear() - Clear the value of an input or textarea.
• .check() - Check checkbox(es) or radio(s).
• .uncheck() - Uncheck checkbox(es).
• .select() - Select an within a .
• .dblclick() - Double-click a DOM element.
• .rightclick() - Right-click a DOM element.

Asserting

  .should('have.class', 'active')
  .and('have.attr', 'href', '/users')