Cypress使用手把手教你写第一个测试用例

Cypress安装完后，见安装方法：Cypress安装手把手教你_测试狂人的博客-CSDN博客

有些同学安装后不知道如何去编写脚本，现在手把手教你如何操作，根据我下面的步骤一步步执行。

具体操作

打开后会出现下图所示，开始的时候是“Not Configure”，现在是 “Configure”，点进去下一步：

ps“”如果您不确定自己想要哪种类型并且只想继续您的测试之旅，现在只需选择E2E - 您以后可以随时更改它！

默认下一步就来到此地方，选择谷歌浏览器： 

此时你会好奇脚本在那里写？

打开你的IDE，我用的是VScode，打开你的项目，就是安装下载那个，我的在

 项目如图：

 

 这是默认的脚本区

1.编写脚本

2.执行打开

 3.自动弹出。点击那个脚本test.cy.js：

运行结果右侧绿色的代表通过：

 如果错误的脚本，如图，地址改下

 它的报错，会提示你脚本哪里不对。

参考别人的完全脚本：Cypress基础入门 - 爱码网

describe('我的第一个测试',function(){
    it('百度测试用例:',function(){
        cy.visit('http://www.baidu.com') //访问url
        cy.title().should('contain','百度一下，你就知道')   //验证页面 title 是否正确
        cy.get('#kw').type('python')       //根据 css 定位搜索输入框
        .should('have.value','python')  //验证关键字自动是否展示正确
        cy.get('#su').click()   //根据 css 定位搜索按钮并点击
        cy.url().should('include','wd=python')     //验证目标url 是否正确包含关键字
        cy.title().should('contain','python_百度搜索')  //验证页面 title 是否正确
        cy.get('[]').should('contain','python')    // 验证第一个结果中是否包含TesterHome
        cy.screenshot()
    })
})

 它会自动按步骤执行，右侧会播放步骤。

用例就是这么写，详细操作看官方文档！

总结三大重点：

1.脚本区，就是IDE的

2.打开执行区：

 

弹出的窗口选择编写的脚本

3.执行结果区：

自动弹出的结果