Cypress初步使用

一、简介

Cypress是新一代前端测试框架,它基于node js。解决了开发人员和QA工程师在测试现代应用程序时面临的关键难点问题。   Cypress包含免费的、开源的、可本地安装的Test Runner 和 能够记录测试的控制面板服务。

Cypress天然支持UI自动化,接口自动化的无缝融合,并且自带Mock Server,拥有独特的测试流水线实现方式,且上手简单,个人可以轻易搭建起企业级的前端自动化测试框架,使得企业可以轻松的,高质量,快速的交付产品,也使得个人可以很快构建起分层的自动化测试框架,轻松实现测试流水线,实现个人价值的提升。

功能特点 【时间旅行】测试的每一步都有 snapshot,只需将鼠标悬停在命令日志中的命令上,就可以准确地查看每个步骤中发生了什么。 【可调试】 我们无需猜测测试用例为何失败,直接从熟悉的工具进行调试(例如:谷歌浏览器的开发者工具),可读错误和堆栈跟踪让调试更有效率。 【自动等待】再也无需在测试用例代码中添加 wait 或 sleep 代码,Cypress 会自动等待命令和断言完成。 【网络通信控制】无需涉及服务器即可控制、保存和测试边缘情况。你可以根据需要保留网络流量。 【视图快照和视频】从命令行运行测试时,我们可以查看失败用例的视图快照和整个测试过程的视频。

二、安装

1) 通过npm来安装Cypress:

① 那么首先安装node.js(npm是一个node包管理和分发工具),下载:https://nodejs.org/en/

② 打开CMD命令行,利用 mkdir 新建目录,利用 cd 命令切换到指定目录(也可以手动先新建好)

image

③ 使用 npm install cypress --save-dev 安装Cypress(如果有WARN可忽略,不影响)

image

④ 使用 **node_modules.bin\cypress open **启动Cypress

image

image

2) 直接下载Cypress压缩包

① 官网下载地址:https://download.cypress.io

② 解压到指定目录,然后进入目录,执行Cypress.exe

image

③ 选择你的项目路径

image

三、使用

1) 默认已经为我们准备了一些丰富的例子 ,可以直接点击运行。

image

2)我们也可以自己新建一个测试文件:

① 首先切换至目录 ~\Cypress\cypress\integration(任意编辑器都可以,我使用的时PyCharm)

image

② 然后新建一个测试文件 sample_spec.js,代码如下:

  1. describe('My First Test', function () {
  2. it('Does not do much!', function () {
  3. cy.visit("https://www.baidu.com")
  4. cy.get("#kw").type("cypress test")
  5. cy.wait(60)
  6. cy.get("#su").click()
  7. cy.contains('cypress website').click()
  8. })
  9. })

③ 最后打开Cypress运行此文件即可,你会发现运行速度很快,这就是Cypress的优势所在。

④ 更多API详解参考:https://docs.cypress.io/zh-cn/guides/guides/module-api.html#cypress-run

四、设置

1) 运行情况: 从左向右分别显示成功数、失败数、未运行、耗时,以及自动滚屏和重新运行按钮

image

2) 控件定位: 1.点击选择器 ->2.点击定位元素 ->3.复制生成代码

image

3) 窗口设置:

① 默认情况下,除非由cy.viewport命令指定,否则视口将为1000*660px

image

② 我们可以通过在cypress.json中指定这些值来覆盖默认视口维度

  1. {
  2. “viewportWidth”:1200,
  3. “viewportHeight”:800
  4. }

我们可以通过以下定位:

cy.get(‘button’).click() 通过tag,不推荐

cy.get(’.btn.btn-large’).click() 通过class,易变,不推荐

cy.get(’#main’).click() 通过id(前要加#)

cy.contains(‘Submit’).click() 通过文本,推荐

cy.get(’[data-cy=submit]’).click() 通过属性,推荐

可以参考: https://www.cnblogs.com/liuyitan/p/12591545.html

随便写了两个例子

describe('My First Test', function () {
    it('Does not do much!', function () {
        cy.visit("https://town.com/partner/centers")
        // cy.wait(100)
        cy.get("#username").clear()
        .type("stest1234")

        cy.get("#password").clear()
        .type("1")
        // cy.contains("Sign In").click()
        cy.get('[class="etc-login-btn"]').first()
        .click()

    })
})

另一个:

describe('My First Test', function () {
    it('Does not do much!', function () {
        cy.visit("https://testerhome.com/")
        cy.contains('登录').click()
        cy.wait(100)
        cy.get("[id=user_login]", {timeout: 2000})
        .clear()
        .type("XX")
        cy.get("[id=user_password]", {timeout: 2000}).type("XXX")
        cy.get("[name=commit]", {timeout: 2000}).click()
        cy.get(".avatar-32").first().click()
        cy.get(".dropdown-menu > :nth-child(1)")
        .should("contain","snake")
        cy.screenshot()
    })
})

整体用下来,感觉还可以,比起selenium来,无需去准备webdriver等,不需要设置等待时间。而且各种方法,跟webdriver很类似,无需刻意去记,拿起来即用,学习成本比较低。关键运行速度比较快,而且每个步骤都有记录。 跟webdriver一样,需要自己去定位元素,工具定位的都不太准。所以要对css的元素选择要熟悉一点,对mocha框架熟悉,对JS熟悉。 个人现在对CLI这块,还没完全掌握,感觉架到CI上,还没那么容易。

本文分享自微信公众号 - python粉丝团(pythongroup),作者:Snake

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • cypress搭建自动化框架

    在简单看了cypress 官方文档后,就开始用上了,越用感觉越爽。 顺便提一句,官方文档太良心了,方方面面都讲到了,而且还有视频,可以切换语言。 下面就...

    赵云龙龙
  • postman的使用技巧

    有段时间调用接口比较频繁。虽然用charles, fiddler都能胜任。但是不想用代理去连手机。而且各个环境来回切换比较麻烦。很早以前用过一段时间po...

    赵云龙龙
  • 从0开始做系统之传递数据

    我们做系统,光有后台不行,还得有好看和便利的前台来操作和展示信息。前端一般是用html5和JS来控制。如果好看,你还得懂css。 后台控制数据和逻...

    赵云龙龙
  • Cypress简易入门教程

    1)安装node.js(https://nodejs.org/en/download/),根据版本选择32位或64位。

    小老鼠
  • Cypress web自动化30-操作窗口滚动条(scrollTo)

    web页面的操作,有些元素不在窗口上显示,需滑动滚动条才能显示出来,Cypress 可以使用 scrollTo 操作滚动条的位置。 可以根据窗口的位置来滚动,也...

    上海-悠悠
  • Cypress系列(43)- wait() 命令详解

    https://www.cnblogs.com/poloyy/category/1768839.html

    小菠萝测试笔记
  • Cypress系列(69)- route() 命令详解

    https://www.cnblogs.com/poloyy/category/1768839.html

    小菠萝测试笔记
  • Cypress学习10-Navigation 导航功能(go,reload,visit)

    上海-悠悠
  • Cypress系列(57)- 删除等待代码

    https://www.cnblogs.com/poloyy/category/1768839.html

    小菠萝测试笔记
  • 前端自动化测试实践05—cypress-e2e入门

    在 jest 单元测试中使用快照、API-mock 和 DOM 样式状态断言已经能够实现基础的 UI 测试,但是单元测试属于白盒测试,更关注数据的流动,而端到端...

    CS逍遥剑仙

扫码关注云+社区

领取腾讯云代金券