Cypress测试框架介绍

Why Cypress?

• 易于安装
• 运行速度快
• 极易调试
• UI友好
• Unit，Integration，E2E

安装

bash

npm install cypress

试运行：

bash

npm cypress open

更新配置文件

打开cypress.json:

json

{
    "baseUrl": "http://localhost:3000",
    "ignoreTestFiles: "**/examples/*",
    "viewportWidth": 1920,
    "viewportHeight": 1080
}

Locators

get

可以使用get方法获取一个或多个DOM元素。

JavaScript

it("get 1 or more DOM elements by get", () => {
    cy.get('button');

    cy.get('.register');

    cy.get("[class='submit-button btn']");
    cy.get("[type='submit']");

    cy.get("#btn-submit");
})

Contains

找到第一个包含特定文本的DOM元素。

JavaScript

cy.contains('Submit')

也可以把get和contains组合使用：

JavaScript

cy.get('xxxx').contains('yyyy')

Find

选择某个元素的下级元素：

JavaScript

cy.get('.student').find('footer')

注意：不能单独使用find

Commands

如果某种定位方式将被非常频繁的使用，那么可以在support/commands.js中对其定义，这样就可以在别处对其引用

添加测试用例

JavaScript

/// <reference types="cypress" />

describe("student dashboard", () => {
    beforeEach(() => {
        cy.visit('/dashboard')
    })

    it("should display a dialog when add button is clicked", () => {
        cy.contains("button", "Add").click()
        cy.contains("Add a new student").should("be.visible")
    })

    it("should display student card when a new student is added", () => {
        cy.get("#student-add-btn").click()
        cy.get("input[placeholder='name']).type('lcoding')
        cy.contains("Save Changes").click()
        cy.contains("lcoding").should("be.visible").and("have.class", "xxxxxxxxx")
    })
})