Cypress安装与使用教程（1）—— 软测大玩家

 
 

作者简介：博主是一位测试管理者，同时也是一名对外企业兼职讲师。
主页地址：【Austin_zhai】
目的与景愿：旨在于能帮助更多的测试行业人员提升软硬技能，分享行业相关最新信息。
声明：博主日常工作较为繁忙，文章会不定期更新，各类行业或职场问题欢迎大家私信，有空必回。

 
 

1. 软件介绍

  前一阵子有个行业里做WMS业务的朋友推荐给我一款软件，说做web端的测试特别棒，名字叫Cypress，这几天也是抽空看了下，发现还真的挺有意思的。今天就结合这款软件的一些基础用法和个人见解来给大家讲一讲这款Cypress。

  其实准确来说Cypress是一款测试框架，其擅长针对端到端的web端测试，在博主结合自己团队的测试业务过程中，发现其在自动化测试与兼容性测试的各类测试场景中有着比较良好的表现。比如我们在进行自动化测试用例代码的修改过程中就可以使用Cypress的热重载特性来实现实时的reloading与debug，相较于每次修改代码后都需要重新启动的一些自动化测试工具，这个的维护与调试效率要来的高得多。其他优势就不在这里展开太多了，接下来我们就先来看看软件的安装与基础使用吧。

 
 

2. 软件安装

  Cypress因为可以跨平台，所以它的安装方法也是较为的丰富，这里我们就暂时以Windows平台来进行介绍。

  我们先来到官网【Cypress官网】，在首页点击右上角的Install。这里要提示一下，Cypress网站与软件的用户登录是需要用到魔法的，不开可能会访问不到。

 
 

  在接下来弹出的选项窗口中选择右侧的Direct Download，直接下载程序的压缩包。

 
 

  下载完成后直接解压到你指定的路径即可，接下来我们直接在解压对应的Cypress文件夹内启动执行文件。进入软件后如下图：

 
 

3. 软件使用

  点击Continue后我们就可以直接开始使用了，但这里还是推荐大家先进行下登录，不仅可以使用Cypress Could还可以保存测试项目的设置与查看测试结果。主流的账号，比如Google、GitHub都是可以快速绑定登录的。登录完成后我们可以看到主界面非常的简单，只有一个选项。这里大家可以将自己的web被测对象的项目文件夹（没有？那就手动创建或去公司的代码仓库里去拉取）手动拖进下面的提示区内，或者直接左键选择你的web测试项目文件夹。注意：这里不是让你把项目代码文件放进去，而是测试团队将要使用的Cypress的项目文件夹。

 
 

  添加完成后，我们就可以在首页界面看到两个选项，这里我们选择第一个端到端测试(END to END)，说到端对端测试，它其实就是模拟了最终用户的实际使用情况，关注的是整个应用程序的各个部分之间的集成和互动。旁边的组件测试因为没有NPM的依赖所以没办法使用，这个无视就行了。

 
 

  接下来我们选择被测对象所运行的浏览器环境，这个只需根据自己的测试任务来对应选择即可，没有什么讲究。

 
 

  在我们选择了对应的浏览器之后Cypress就会打开这样的一个测试项目主页，然后创建一个空的规范文件来进行接下去的端到端测试。

 
 

  在弹出的文件命名对话框中输入你指定的文件名即可。

 
 

  创建文件完成后直接会跳出成功添加的对话框，这里我们无需去运行这个规范文件，直接点击右上角的大叉，关闭窗口即可。

 
 

  关闭后会返回至首页，这里我们可以看到之前创建的规范文件，规范文件以列表形式展现，这里需要注意的是之后只要在文件内进行任何修改，Cypress都会进行记录并显示修改内容。

 
 

  点击进入刚才的规范文件，我们可以看到左侧的文件内已经有了一个用例的执行结果并显示passes，这个不用去关注，默认的规范文件中本来就只有一条访问cypress样例网站的用例，毕竟会成功。这里我们需要将测试代码修改为我们自己的业务测试代码。我们将鼠标悬停在左侧的TEST BODY字样上，这时右侧会显示Open in IDE的选项，我们可以选择自己平时常用的一款IDE打开进行代码的编辑。

 
 

  这里博主用的IDE是PyCharm，下图就是样例中的代码，可以看出逻辑十分的简单，就是运行测试用例并访问example.cypress.io。我们需要在这里将自己的测试业务代码编辑进去。

 

  这里我们就将测试逻辑修改为自己的业务，为了方便演示，我们就将逻辑变更为判断访问的网址是否为我们指定的网址，对就测试通过，错就测试失败。

describe("test_url_check", function () {
  it("visit_url_check", function () {
    cy.visit("www.rubies-test.com"); 
    cy.url().then((url) => {
      if (url === "https://www.rubies-test.com") {
        cy.log("Test results correct");
      } else {
        cy.log("Test result error");
      }
    });
  });
});

 

  这里修改完代码保存之后就会直接触发用例执行，并且在之前的规范文件列表画面中显示代码的更新时间。

 

  运行完之后我们就可以在当前页面查看用例的执行情况。可以看到下图我们的测试结果是成功的，并且正确打印出了测试结果。那么接下来我们做一点点小小的改动，我们将网址变化一下，使得断言的结果与实际结果不同，来看看会发生什么。

 

  我们将代码添加断言操作，并将访问的网站改成C站，光从代码查看就能得知这个断言一定不会成功，接下来我们看下执行后的结果会是什么样的。

describe("test_url_check", function () {
  it("visit_url_check", function () {
    cy.visit("https://austin.blog.csdn.net/");
    cy.url().should("eq", "https://www.baidu.com/");
  });
});

 

  从下图就可以看到断言这块的逻辑报错了，其实就是两个url结果不相等导致的代码错误。这边要注意一下，用例执行失败的业务操作可以根据各自的习惯来进行定义，因为它本身没有用例执行失败的状态，所以我们可以去在这一块业务进行下完善与优化。

 
 

4. 后话

  可以看到Cypress的安装与基础使用是属于比较简单直白的类型的，只不过因为它是主要用于web代码调试与端对端测试的场景，前端开发人员自不用多说，而对于测试人员则必须掌握一定的Javascript的代码基础才能够灵活使用本软件。后续也会基于不同的场景来介绍更多的组合与进阶功能。