UI Testautomation with Cypress - Access Elements Intro
Tags: testautomation, javascript, beginners, qa
Published: 2020-09-07 14:00:48

# What's the difference? 
* JavaScript-only 
* (Chrome-only) - [not anymore!](https://docs.cypress.io/guides/guides/cross-browser-testing.html#Continuous-Integration-Strategies)
* 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] (https://nodejs.org/en/)

###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
![cypress folders](https://dev-to-uploads.s3.amazonaws.com/i/5dwp4t0idthnv8d41uvv.png)

# First Test
of [Not-todo-List](https://aquin-todolist.netlify.app/) 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”.
![Add 2 Things on ToDo List](https://dev-to-uploads.s3.amazonaws.com/i/8hv6z8ixsdp07u4fx34e.png)

1. Navigate to the *Integration* Folder & delete the examples 2.  create a `nottodoList.spec.js` file. 
3. For VS Code autocomplete support put `/// <reference types="cypress" />` on top of the page.
4. Write a test inside an `it` function. 
```Javascript
/// <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: 
![error message on cypress](https://dev-to-uploads.s3.amazonaws.com/i/s3kgsxoefun7sw3po3wn.jpg)

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

![Aim Target in Cypress](https://dev-to-uploads.s3.amazonaws.com/i/4n056ua1ntoqsez5dxi2.png)

past it in your IDE

![Code with .get(input) command](https://dev-to-uploads.s3.amazonaws.com/i/ye23y3x4cwbstbnbhkbr.png)

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

![.type('paint flowers on your dusty windows'](https://dev-to-uploads.s3.amazonaws.com/i/ognsdnp6logx0eg9h2vq.png)

Passed!!!
![Gif of first Test](https://dev-to-uploads.s3.amazonaws.com/i/gsm3xs74nugm9e9u7rpf.gif)

#Add Delays for Stability 

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

```Javascript
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 <option> within a <select>.
  - .dblclick() - Double-click a DOM element.
  - .rightclick() - Right-click a DOM element.

#Asserting
```javascript
  .should('have.class', 'active')
  .and('have.attr', 'href', '/users')
```