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:
cypress\e2e\home.spec.cy.js
Open that file and add this code:
describe("Loading home page", () => {
it("validates page title", function () {
cy.visit("https://vetlog.org/")
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.visit(this.data.vetlogUrl)
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