Get started with Cypress by creating new account in amazon - Cypress part 1
Tags: cypress, automation, amazon
Published: 2020-03-10 05:10:44

---
title: Get started with Cypress by creating new account in amazon - Cypress part 1
published: true
description: 
tags: #cypress #automation #amazon
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/tnvplowe7nhtoowp6jt1.jpg
---

Dear all, today I'm gonna go over a simple automation test with Cypress.

I.Why Cypress:

Besides from what they say in the [Cypress official site](https://www.cypress.io/), Cypress is actually a nice tool to invest your time. It's fast, interactive, and directly interact with the web browsers.

II.What you need to do to get started:

There are a few ways to install cypress but in this post I will go over how to install cypress using npm.

1.Install npm:

You can follow the guideline for how to install npm from [here](https://www.npmjs.com/get-npm)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/motq8c4y70jk3a9w19pk.png)

2.Choose your IDE:

For me, I'm using Webstorm. So you might want to checkout [WebStorm](https://www.jetbrains.com/webstorm/)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tdof34xk128be5u4s9gi.png)

A lot of guys prefer Visual Studio. It's up to you

3.Create new project in your IDE:

For Webstorm, please go to File -> New -> Project -> OK

4.Install cypress from npm:

Open terminal directly from your project:

npm install cypress --save-dev

Or you might want to checkout the official guidelines from [here](https://docs.cypress.io/guides/getting-started/installing-cypress.html#Installing)

After install cypress, there will be folder : node_modules and package.json file in your project.

That's it, you're good to go for next step.

III.Create test for create new account in amazon

1.Open cypress:

To open cypress, simply run : node_modules\bin\cypress open

2.Create a new test file for amazon:

In cypress folder, we already had integration folder.
In integration folder, create e2e folder -> amazon -> create_new_account.js

3.Mocha and chai in cypress:
From [cypress-page](https://docs.cypress.io/guides/references/bundled-tools.html#Mocha)

Cypress relies on many best-of-breed open source testing libraries to lend stability and familiarity to the platform from the get-go. If you’ve been testing in JavaScript, you’ll recognize many old friends in this list. Understand how we exploit them and hit the ground running with Cypress!

So you might want to get to know Mocha and Chai for setting up your test scenarios and assertions.

4.Find amazon web element using chrome developer tools:
There's a lot of things to get started using chrome developer tools, but as in this tutorial, I only cover for how to get the selector

From the web page, you can right click on element, choose inspect -> go to elements web view -> right click on element -> copy -> copy selector

That's selector we will use for find the element.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8eo4odfye679pvxfarvk.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mpvkpi9x31iyexfdsttd.PNG)


5.Interact with amazon page:
- Open the amazon web page:
```javascript
cy.visit('https://www.amazon.com/');
```
- Mouse over the sign-in button for Signup button appear:

```javascript

cy.get('#nav-link-accountList').trigger('mouseover');

```

- Click on sign-up button :

```javascript

cy.get('#nav-flyout-ya-newCust > a').click();

```

- Fill in the create-account form with full name, email and password:

```javascript

 cy.get('#ap_customer_name').click().type('Donald Cuong');
 cy.get('#ap_email').click().type('akkaka99@gmail.com');
 cy.get('#ap_password').click().type('Akkaka123');
 cy.get('#ap_password_check').click().type('Akkaka123');
 cy.get('#continue').click();

```
6.Run the test from cypress:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tg42vp5l0cobom362m44.PNG)

From cypress click on the create_new_account.js

See the cypress test run interactively

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/relwmlcbpxw1w7zefm2d.PNG)

As always, you can find the full source code from my github in [here](https://github.com/cuongld2/cypressGuidelines)

Yay!! We have written the first test for cypress.
Happy testing guys and gals!!

Notes: If you feel this blog help you and want to show the appreciation, feel free to drop by :

[<img src="https://thepracticaldev.s3.amazonaws.com/i/cno42wb8aik6o9ek1f89.png">](https://www.buymeacoffee.com/dOaeSPv
)

This will help me to contributing more valued contents.