56

The web has evolved.Finally, testing has too.

 4 years ago
source link: https://www.tuicool.com/articles/ZvERzmE
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

cypress.png

Fast, easy and reliable testing for anything that runs in a browser.

Cypress is a complete end-to-end testing framework, in this post i will guide you through how to get started and use this great tool to test ui.

Setup:

Installation:

yarn add cypress --dev

package.json

"scripts": {
    "cypress": "./node_modules/.bin/cypress open",
    "test": "./node_modules/.bin/cypress run"
    }

Configure:

create cypress.json file in the root folder.

{
  "baseUrl": "https://devresources.site",
  "video": false,
  "pageLoadTimeout": 30000,
  "defaultCommandTimeout": 10000,
  "viewportWidth": 1280,
  "viewportHeight": 720
}

start cypress.

npm run cypress

Cypress will setup the cypress folder in your project, and open the cypress test runner.

Our first test:

let's create our first test, to cleanup i will recommend delete the examples folder in cypress/integration/examples

i'm going to demonstrate on https://devresources.site , lets see what is the feature in the page we want to test, first of all we want to know resources are populating the page so lets create a test for that.

create our first test file inside cypress/integration/home.spec.js

/// <reference types="Cypress" />

context('Home page', () => {
  beforeEach(() => {
    cy.visit('/');
  });

  it('resources loading', () => {
    cy.get('.ant-card-body').should('exist');
  });

  it('categories', () => {
    cy.get('.ant-menu-item').should('exist');
  });
});

basically this steps is as follow,

  • cypress will open a browser and navigate to https://devresources.site (cy.visit('/') - > navigate to baseUrl + / )
  • run the first test, and look for the class .ant-card-body this class will show only when resources is loaded to the page.
  • run the second test, and look for the class .ant-menu-item this class will show only when the categories is loaded.

in production environment i will recommend to go more into details, for example a real world example is that cypress can validate that the text in the card is visible and there is no other element that hiding it.

cypress is a very strong tool that can help you cover most of the test for your app, try to use it as much as possible to cover wide range of scenarios, cover edge case and common errors.

The repo for future reference .


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK