Starting With Cypress

What is Cypress?

Cypress is a JavaScript-based end-to-end testing framework that doesn’t use Selenium at all. It is built on top of Mocha, which is again a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and fun.

Who uses Cypress?

Our users are typically developers or QA engineers building web applications using modern JavaScript frameworks.

Cypress enables you to write all types of tests:

  • End-to-end tests
  • Integration tests
  • Unit tests

Cypress can test anything that runs in a browser.

Cypress ecosystem

Cypress consists of a free, open sourcelocally installed Test Runner and a Dashboard Service for recording your tests.

our  Dashboard Service can record your test runs. You’ll never have to wonder: Why did this fail?

Features

Here is a list of things it can do that no other testing framework can:

  • Debuggability: Stop guessing why your tests are failing. Debug directly from familiar tools like Developer Tools. Our readable errors and stack traces make debugging lightning fast.
  • Automatic Waiting: Never add waits or sleeps to your tests. Cypress automatically waits for commands and assertions before moving on.
  • Consistent Results: Our architecture doesn’t use Selenium or WebDriver. Say hello to fast, consistent and reliable.
  • Screenshots and Videos: View screenshots taken automatically on failure, or videos of your entire test suite when run from the CLI.
  • Cross browser Testing: Run tests within Firefox and Chrome-family browsers (including Edge and Electron) locally.

Installation of Cypress

System requirements

Operating System

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

Node.js

If you’re using npm(node package manager) to install Cypress, we support:

  • Node.js 10 or 12 and above

>> install node.js

>> install Visual Studio code(IDE[integrated development environment] for easy code building)

>> create a blank folder (project) for cypress open vs code under this folder, then open terminal, then go to the project path and

>> run commands

Make sure that you have already run npm 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.

npm init >>> this command will create package.json file.

npm install cypress –save-dev  >>>> download the cypress.

This will install Cypress locally as a dev dependency for your project.

or this below video clip will help you in installation of cypress

 

Direct download

If you’re not using Node or npm in your project or you want to try Cypress out quickly, you can always download Cypress directly from our CDN.

Recording runs to the Dashboard is not possible from the direct download. This download is only intended as a quick way to try out Cypress. To record tests to the Dashboard, you’ll need to install Cypress as an npm dependency.

The direct download will always grab the latest available version. Your platform will be detected automatically.

Then you can manually unzip and double click. Cypress will run without needing to install any dependencies.

Opening Cypress

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 >>>> for open Cypress.

Some time you can face the error like :

C:\Users\CFS\CypressAutomationProject> ./node_modules/.bin/cypress open ./node_modules/.bin/cypress : File C:\Users\CFS\CypressAutomationProject\node_modules\.bin\cypress.ps1 cannot be loaded because running scripts is disabled on this system. For more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170. At line:1 char:1 + ./node_modules/.bin/cypress open + ~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : SecurityError: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess

so you can try this solution :

Solution :
In Window::
Open Windows PowerShell
Run Set-ExecutionPolicy RemoteSigned
Type Yes
Now Run run command ./node_modules/.bin/cypress run Test runner will work properly

Adding npm scripts

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.

if you wants to open script than you have to go to package .json

and create in side the script

{

  “scripts”: {

    “cypress:open”: “cypress open”

  }

}      

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

npm run cypress:open

./node_modules/.bin/cypress run => (it is used for running your script from terminal but this will run your all scripts)

if you want to run only specific script so u can give the specific path of the script)

./node_modules/.bin/cypress run –spec cypress/integration/test/sample.js =>> this is the command for running specific script.

./node_modules/.bin/cypress run –spec cypress/intregration/test/sample.js –browser chrome==> it is used for running script on specific browser like (chrome browser) using command line

create file jsconfig.json and add the code for

{“include”: [

    “./node_modules/cypress”,

        “cypress/**/*.js”

          ]}

add this code so auto suggest will be on.

Switching browsers

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.

Write your first test

Now it’s time to write our first test. We’re going to:

  1. Write our first passing test.

As we continue to save our new test file we’ll see the browser auto reloading in real time.

Open up your favorite IDE and add the code below to our sample_spec.js test file.

describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(true)
  })
})

Let’s start coding in our .js file

describe(‘My First Test’, () => {

  it(‘Visits the Kitchen Sink’, () => {

    cy.visit(‘https://example.cypress.io’)

  })

})

Leave a Reply

Your email address will not be published. Required fields are marked *