Cypress环境搭建

一、环境搭建

注：以下环境基于win10

补：https://www.cnblogs.com/zuidongfeng/p/10057253.html（错误，执行执行npm update）

来着：https://www.jianshu.com/p/55ed1d40f40f

 

1.安装node.js

（1）官网下载地址：https://nodejs.org/en/download/；

（2）傻瓜式安装，安装后查看是否安装成功：node –v；

（3）最新版的node在安装时同时也安装了npm，查看npm版本：npm -v；

（4）具体安装步骤参考菜鸟教程：https://www.runoob.com/nodejs/nodejs-install-setup.html

 

2.安装Cypress

（1）cmd进入命令行模式，进入D盘创建一个文件夹：mkdir Crypress_project；

（2）进入新创建的文件夹下面：cd Crypress_project；

（3）初始化项目：npm init -y；

（4）安装cypress：npm i cypress -S -D；

（5）打开package.json文件，将里面的内容全部删除，复制上去以下代码：

{

      "scripts": {

      "cypress": "cypress open"

     }

 }

 

3.运行Cypress

（1）运行命令：npm run cypress；

（2）Cypress窗口正常打开不报错，即环境安装成功。

（3）examples中是Cypress提供的demo，点击即可运行。（注：在D:\Dev\cypress_project\cypress\integration）

 

4.开始使用

（1）在 cypress/integration 目录下创建一个新的文件，如：first_test.spec.js

一旦我们创建了这个文件，Cypress测试引擎会立马在Integration Tests列表中显示出来。Cypress会监视你的spec文件，有任何的修改和更新都会立马显示出来。
即使我们还没有写任何的测试也没有关系。

 

 

（2）第一个例子

// describe('My First Test', function(){
//
// it('Hello World!', function(){
//
// expect(true).to.equal(false)
//
// })
// })


describe('A real test case', function() {

it('Visits the webpage', function() {

    cy.visit('https://www.baidu.com')
    cy.get('#kw').type('cypress').should('have.value','cypress')
    cy.contains('百度一下').click()

})

})

点击即可执行

重要知识点：cypress是实时执行test case的。即：如果之前浏览器没关闭且您是修改原有文件的，那么test case自动被发现，自动执行。浏览器别关哈~ 后面会体会到妙处！