# Cypress - A complete end-to-end testing experience
###### tags: `javascript` `web` `unittest`

[Cypress](https://www.cypress.io/)


## How to work

{%youtube 5XQOK0v_YRE %}

**Cypress makes these 4 tasks amazingly simple:**

### Setting up tests

[Write your first passing test in 60 seconds](https://docs.cypress.io/guides/getting-started/writing-your-first-test.html). There are no servers, drivers, or any other dependencies to install or configure.

#### System requirements

Cypress is a desktop application that is installed on your computer. The desktop application supports these operating systems:

* macOS 10.9 and above (64-bit only)
* Linux Ubuntu 12.04 and above, Fedora 21 and Debian 8 (64-bit only)
* Windows 7 and above
If using npm to install Cypress, we support:

* Node.js 8 and above

#### Installing

##### `>_`npm install

Install Cypress via `npm`:

cd /your/project/path

npm install cypress --save-dev

:::info
Make sure that you have already run [npm init](https://docs.npmjs.com/cli/init) or have a `node_modules` folder or `package.json` file in the root of your project to ensure cypress is installed in the correct directory.
:::

##### `>_`yarn add

Installing Cypress via [yarn](https://yarnpkg.com/):

cd /your/project/path

yarn add cypress --dev

### Writing tests

Tests written in Cypress are easy to read and understand. Our [API](https://docs.cypress.io/api/api/table-of-contents.html) comes fully baked, on top of [tools you are familiar with already](https://docs.cypress.io/guides/references/bundled-tools.html#Mocha).

#### Write a real test

1. Visit a page
2. Query for an element
3. Click an element
4. Make an assertion

describe('Post Resource', () => {
  it('Creating a New Post', () => {
    cy.visit('/posts/new')     // 1.

    cy.get('input.post-title') // 2.
      .type('My First Post')   // 3.

    cy.get('input.post-body')  // 4.
      .type('Hello, world!')   // 5.

    cy.contains('Submit')      // 6.
      .click()                 // 7.

    cy.url()                   // 8.
      .should('include', '/posts/my-first-post')

    cy.get('h1')               // 9.
      .should('contain', 'My First Post')
  })
})

### Running tests

Cypress runs as fast as your browser can render content. You can watch tests run in real time as you develop your applications. TDD FTW!

1. Start your server
2. Visit your server
3. Configure Cypress

### Debugging

Readable error messages help you to debug quickly. You also have access to all the developer tools you know and love.

#### Tutorial videos

https://docs.cypress.io/examples/examples/tutorials.html

## Docker

Docker image with the operating system dependencies and Cypress installed globally

Images are tagged using the installed Cypress version; they should be enough to run Cypress tests headlessly or in the interactive mode with a single Docker command like this:

docker run -it -v $PWD:/e2e -w /e2e cypress/included:4.5.0

:::info
You can find the cypress tag in [docker hub](https://hub.docker.com/r/cypress/included/tags)

You also can read changelog in [reference document](https://docs.cypress.io/guides/references/changelog.html#4-5-0)
:::

For more information, read [Run Cypress with a single Docker command](https://www.cypress.io/blog/2019/05/02/run-cypress-with-a-single-docker-command/) and [End-to-End Testing Web Apps: The Painless Way](https://mtlynch.io/painless-web-app-testing/)

Source: [cypress-io/cypress-docker-images/tree/master/included](https://github.com/cypress-io/cypress-docker-images/tree/master/included)