Part2: Cypress启动及首个Hello World

Test Runner介绍

• 导入测试用例以后可以通过tree view形式查看当前工作目录所有测试用例

• 根据测试用例进行分类

• 执行测试用例需要添加的浏览器可以进行选择

  
  
  image.png

• 执行过程及结束以后在窗口右侧都可以显示回放截图

• 执行报告及测试数据都可以在左侧窗口显示，并且打印出测试数据

• 如果是成功的检查点，可以显示verify pass

• 如果是失败的检查点，则显示fail并且会提示error message

  
  
  image.png

• Run Tab会显示dashboard，将需要提交测试的用例报告显示出来

• 报告内容将显示成功，失败用例数量

• 报告内容将失败用例进行video形式添加到附件中

• 执行时间，测试用例详情都显示在测试报告

  
  
  image.png

如何启动Test Runner

• 使用命令行cypress open
  在命令行中输入相应的代码cypress open，这个方法是默认方法。本人使用IDE是VS code,所有可以直接在terminal下面进行设置

image.png

image.png

• 使用npx方式
  方法跟npm是类似的，只是命令稍微不一样

  
  
  image.png

• 使用yarn方式
  这个方法也是比较容易实现，如果机器安装了yarn就可以使用这个方法。

  
  
  image.png

• 使用exe文件打开
  我自己使用Win系统，习惯直接打开exe文件操作，这个方法不需要任何命令行就可以实现

  
  
  image.png

实现第一个Script

• 在Integration\example下面创建脚本文件

/// 

describe('MyFirstTest',function(){
    it('Verify the result',function()
        {
            expect(true).to.equal(true)
        }

    )

    it('Verify title of the homepage',function()
        {
            cy.visit('http://www.mi.cn')
            cy.title().should('eq','小米商城 - 小米11、Redmi Note 9、小米MIX Alpha，小米电视官方网站')
        }

    )
}

)

• 执行测试脚本

1. 结果是如下显示形式，主要特点是左侧是测试结果并且标记出测试结果

2. 右侧是截图并且标记出测试的页面及测试题图详情

   
   
   image.png

• 代码说明

1. 访问mi.cn的官方网址
2. 验证首页的标题是否跟预期一致