Testing frontend applications with Cypress
Cypress is an all-in-one testing framework, assertion library, with mocking and stubbing, all without Selenium.
Cypress installation
Cypress is realy easy to install, just use your package manager: npm
npm install cypress --save-dev
or yarn:
yarn add -D cypress
Running Cypress
After Cypress installation you can call it from your project root:
./node_modules/.bin/cypress open
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 call cypress via:
npm run cypress:open
Setting up CI
Configure Cypress in CI is almost the same as running it locally. You generally only need to do two things:
- Install Cypress
npm install cypress --save-dev
- Run cypress
cypress run
Feature tests examples
Cypress uses pretty simple DSL for writing tests
describe("Home", () => {
beforeEach(() => {
cy.visit("/");
cy.get("input").first().type("[email protected]");
cy.get("input").last().type("password");
cy.server();
});
it("Should login with email and password", () => {
cy.route("POST", "/api/v1/admin/user_token", "fixture:login.json");
cy.route("GET", "/api/v1/admin/contacts", "fixture:contacts.json");
cy.get("button").click();
cy.url().should("include", "/contacts");
});
it("Should not login ", () => {
cy.route("POST", "/api/v1/admin/user_token");
cy.get("button").click();
cy.get(".notices").contains("Invalid login or password");
cy.url().should("include", "/login");
});
});
Fixtures examples
Fixtures load a fixed set of data located in a file. It is very useful if you want to stub server response. For example, after login we need to include access token in the server response, we will create a file:
fixtures/login.json
{
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdwpMeJf36POk6yJV_adQssw5c"
}
Or return users data after GET request to /users
page
fixtures/users.json
{
"data": [
{ "id": 1, "attributes": { "name": "John", "email": "[email protected]", "id": 1 } },
{ "id": 2, "attributes": { "name": "Ned", "email": "[email protected]", "id": 2 } }
]
}
License
Copyright Β© 2015-2019 Codica. It is released under the MIT License.
About Codica
We love open source software! See our other projects or hire us to design, develop, and grow your product.