一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。

前言

前面写了我目前所在团队关于cypress的一些实践经验与总结，光说不练假把式，今天我们就结合官方例子来学习一下cypress的基本使用。

安装并启动项目

git clone git@github.com:cypress-io/cypress-realworld-testing-todomvc.git

安装结束后，查看package.json文件，看如何启动项目

OK，让我们运行npm run start 启动项目。

OK，让我们在cypress/integration 目录下创建一个app.spec.js文件。在此编写我们的测试代码。然后重新打开一个终端，我们运行npm run cypress:open打开UI测试窗口。

可以看到，右上角是选择需要跑的浏览器，左侧列表选择我们编写的测试文件。点击需要运行的app.spec.js文件。

编码

首先，我们先添加一条待办事项吧。打开我们的程序页面，审查元素，找到input的class name

describe('我们的测试代码',() => {
    it('添加一条待办事项',() => {
        //指定要访问的程序地址
        cy.visit('http://localhost:8888')
        // 添加一条待办事项,{enter}用来模拟按下回车
        cy.get('.new-todo')
            .type('哎呀，别敲代码了，快去找产品mm约会了{enter}')
    })
})

此时，回头看看我们的测试窗口，发现已经出现了结果，不用重新刷新（热更新）。

很好，那我们需要更严谨一点，判断他是否只有一个待办事项，并且内容为我们指定的呢？同样的，获取list的类名，然后完善我们的测试用例。

it('添加一条待办事项',() => {
    //指定要访问的程序地址
    cy.visit('http://localhost:8888')
    // 添加一条待办事项,{enter}用来模拟按下回车
    cy.get('.new-todo')
        .type('哎呀，别敲代码了，快去找产品mm约会了{enter}')
    //待办事项的内容和设置的保持一致
        cy.get('.todo-list li').eq(0).find('label').should('contain','哎呀，别敲代码了，快去找产品mm约会了')
        //长度为1
        cy.get('.todo-list li').should('have.length',1)
})

再来看看运行结果。很好，全部通过。

但是，目前的编码略显冗余，我们可以将多个断言都写在一个测试用例中。

//实际中不止一个it，对每一个it都指定要访问的程序
beforeEach(() => {
    cy.visit('http://localhost:8888')
})
it('添加一条待办事项', () => {
    // 添加一条待办事项
    cy.get('.new-todo')
        .type('哎呀，别敲代码了，快去找产品mm约会了{enter}')
    //待办事项的内容和设置的保持一致
    cy.get('.todo-list li').eq(0).find('label')
        .should('contain','哎呀，别敲代码了，快去找产品mm约会了')
        .should('have.length',1)
});

总结

本文我们简单的学习了cypress的基本使用，想要深入了解使用请点击详细的教程

UI自动化测试——cypress(3)

前言

安装并启动项目

编码

总结