Cypress Getting Started

Cypress is a next-generation front-end testing tool built for modern web applications; it runs on Chrome, Firefox, Edge, and Electron. Cypress is most often compared to Selenium; however, Cypress is both fundamentally and architecturally different. Cypress is faster in execution plus facilitates UI selectors interaction and validations. Keep in mind that Cypress is a JavaScript only tool. Let’s start by installing NodeJS on our computer, I highly recommend using NVM so you can manage different versions. Once installed, let’s create a new directory named cypress-getting-started and execute this command inside that new directory:

npm init -y

This will create a new package.json file and it should looks like this:

  "name": "cypress-workshop",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  "keywords": [],
  "author": "",
  "license": "ISC"

Next step is to use npm command to install Cypress.

npm install cypress

Now we want to generate some Cypress structure in our project; in order to do that, let’s run Cypress in an interactive mode with this command.

npx cypress open

Select default options and create a new spec which is a test file named it as:


Open that file and add this code:

describe("Loading home page", () => {

    it("validates page title", function () {
      cy.title().should("eq", "Vetlog")


That’s it; we open an URL https://vetlog.org/ and validating the page title is equal to “Vetlog”, pretty straight forward; however, following good practices, we need to externalize this URL and expected titles; Cypress provides us with a feature to drive the data from external sources called fixtures, which are located in ${PROJECT_HOME}/cypress/fixtures. Let’s create one named: test.json with this content:

  "vetlogUrl": "http://vetlog.org",
  "expectedTitle": "Vetlog"

We can use cy.fixture() in the before() structure to read all data from the fixture file “test.json” to the local object “this”.

 describe("Loading home page", () => {

  before(function () {
    cy.fixture("test").then((data) => {
      this.data = data

  it("validates page title", function () {
    cy.title().should("eq", this.data.expectedTitle)


To run the project:

npx cypress run --browser chrome

To browse the code go here, to download the project:

git clone git@github.com:josdem/cypress-getting-started.git

Return to the main article

comments powered by Disqus