> For the complete documentation index, see [llms.txt](https://dentalwhale.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dentalwhale.gitbook.io/documentation/cyress-tests/cypress-test.md).

# Cypress Test

Framework to do all test(End-to-end; Integration; unit)

## Installing <a href="#installing" id="installing"></a>

### &#x20;`npm install` <a href="#npm-install" id="npm-install"></a>

Install Cypress via `npm`:

```
cd /your/project/path
```

```
npm install cypress --save-dev
```

{% hint style="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.
{% endhint %}

### `yarn add` <a href="#yarn-add" id="yarn-add"></a>

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

```
cd /your/project/path
```

```
yarn add cypress --dev
```

## Opening Cypress <a href="#opening-cypress" id="opening-cypress"></a>

If you used `npm` to install, Cypress has now been installed to your `./node_modules` directory, with its binary executable accessible from `./node_modules/.bin`.

Now you can open Cypress from your **project root** one of the following ways:

**The long way with the full path**

```
./node_modules/.bin/cypress open
```

**Or with the shortcut using `npm bin`**

```
$(npm bin)/cypress open
```

**Or by using `npx`**

**note**: [npx](https://www.npmjs.com/package/npx) is included with `npm > v5.2` or can be installed separately.

```
npx cypress open
```

**Or by using `yarn`**

```
yarn run cypress open
```

After a moment, the Cypress Test Runner will launch.

![Cypress Test Runner](https://2628351299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lp-GGFDRT053dVKtILV%2F-M7syrvLHeSz6YlPwyGs%2F-M7t0bMdDH3Vv5pt2jG4%2Fimage.png?alt=media\&token=05f7b833-529b-456a-80e0-07fea07d687c)

### Switching browsers <a href="#switching-browsers" id="switching-browsers"></a>

The Cypress Test Runner attempts to find all compatible browsers on the user’s machine. The drop down to select a different browser is in the top right corner of the Test Runner.

![](https://2628351299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lp-GGFDRT053dVKtILV%2F-M7t0i8VM3AsHkvtjoEn%2F-M7t0p7H3g0JvsxB3y-f%2Fimage.png?alt=media\&token=855b16d5-078d-41e6-88c2-f2d88eafd721)

### Adding npm scripts <a href="#adding-npm-scripts" id="adding-npm-scripts"></a>

While there’s nothing wrong with writing out the full path to the Cypress executable each time, it’s much easier and clearer to add Cypress commands to the `scripts` field in your `package.json` file.

```
{
  "scripts": {
    "cypress:open": "cypress open"
  }
}
```

Now you can invoke the command from your project root like so:

```
npm run cypress:open
```

…and Cypress will open right up for you.