摘要:进行测试之理论是目前很火的一个测试组件,内部绑定了之类的断言为了让代码代码更有说服力,减少提交测试错误,进行测试显然是非常有必要的。
cypress 进行 e2e 测试之理论
cypress 是目前 e2e 很火的一个测试组件,内部绑定了 macha、chai、chai-jquery 之类的断言,为了让代码代码
更有说服力,减少提交测试错误,进行 e2e 测试显然是非常有必要的。
官网
GitHub
借鉴官网一句话来说:
Cypress is a next generation front end testing tool built for the modern web. We address the key本文环境
pain points developers and QA engineers face when testing modern applications.
node v9.5 npm v5.5e2e 简介
e2e 测试端对端测试的简称, e2e 即为end to end,
指任意一个人的社交、交易、休闲都可以直接与另外任意一个人产生关系,去中心化、渠道化.
做前端怎么少的多的了 npm 呢
$ npm i -D cypress
然后为了方便起见,咱们在package.json中写入下面脚本:
{ "scripts": { "e2e:open": "cypress open", "e2e:run": "cypress run" } }
运行npm run e2e:open,启动一个 cypress 的服务器,如下:
如下图这就完成了一个启动一个 cypress。第一次点开时候,cypress 会帮你创建一个初始化配置目录,这是
cypress 推荐的目录的结构,当然也可以自己创建。
点击 example_spec.js 文件,然后可以看到如下界面,cypress 开始测试:
上面就看到 cypress 的运行过程了。下面看看 example_spec.js(文件的位置
:projectName/cypress/integration)文件中写了啥:
describe("Kitchen Sink", function() { it(".should() - assert thatis correct", function() { // ... } })
这是主要结构的,下面大部分都是在一个it函数内部,是测试里面的回调函数。详细可以查看 TDD 和 BDD 测试
框架,cypress 绑定了这些测试框架。
这是 cypress 里面一个很重要的方法,可以访问一个链接,列入 example.js 文件如下:
beforeEach(function() { // Visiting our app before each test removes any state build up from // previous tests. Visiting acts as if we closed a tab and opened a fresh one cy.visit("https://example.cypress.io/commands/querying") })
这里就是在前置钩子函数里面访问了https://...../querying这个链接。如果代码需要浏览器调试,比如用户交
互点击,用户输入之类的。第一步就是访问:cy.visit
还是从 example_spec.js 问中说起:
it("cy.get() - query DOM elements", function() { // https://on.cypress.io/get // Get DOM elements by id cy.get("#query-btn").should("contain", "Button") // Get DOM elements by class cy.get(".query-btn").should("contain", "Button") cy.get("#querying .well>button:first").should("contain", "Button") // ↲ // Use CSS selectors just like jQuery })
这里定义了一个测试单元,在这个里面做了啥呢?第一步获取 id 为 query-btn 这个按钮。接下来 should 操作
,奉上一张表自行查看:
cy.get 还有一个玩法就是 cy.get("@app")这种,意思说之前你已经cy.get(".app").as("app"),不需要再次获
取了,直接使用别名就好了
从官网截图的表格,详
细jquery-chai 文档表格
这里看到cy.get()和jquery.$是不是很像,在官网这里说了这样一句话:
The querying behavior of this command matches exactly how $(…) works in jQuery.
所以可以将 cy.get()当$一样来用即可,不过这里返回的不过 jquery 对象罢了,这里返回的事通过 cypress 包
装过的对象可以在控制台看到这样的东西,见下图:
是一个用于 cypress 所有方法的对象。然后可以操作他的 api 了。
第一部分,主要是查询,查询页面元素是否按照我们开发想要的存在,下面看第二部分:
context("Actions", function() { beforeEach(function() { cy.visit("https://example.cypress.io/commands/actions") }) // Let"s perform some actions on DOM elements // https://on.cypress.io/interacting-with-elements it(".type() - type into a DOM element", function() { // https://on.cypress.io/type cy .get(".action-email") .type("fake@email.com") .should("have.value", "fake@email.com") // .type() with special character sequences .type("{leftarrow}{rightarrow}{uparrow}{downarrow}") .type("{del}{selectall}{backspace}") // .type() with key modifiers .type("{alt}{option}") //these are equivalent .type("{ctrl}{control}") //these are equivalent .type("{meta}{command}{cmd}") //these are equivalent .type("{shift}") // Delay each keypress by 0.1 sec .type("slow.typing@email.com", { delay: 100 }) .should("have.value", "slow.typing@email.com") cy .get(".action-disabled") // Ignore error checking prior to type // like whether the input is visible or disabled .type("disabled error checking", { force: true }) .should("have.value", "disabled error checking") }) })
这一部分主要是进行获取元素交互, 下面来说交互是如何搞得。 与 cy.get 相似还有:
cy.contains 通过文本获取元素
cy.closet 见 jqery
cy.next/cy.nextAll 可以和 cy.contains 联合使用获取该节点的下一个节点
cy.prev/cy.prevAll 同上
cy.children/cy.parents/cy.parent 获取子节点/ 所有的父节点 / 父节点
cy.first/cy.last
cy.url 获取当前页面 url
cy.title 获取当前页面标题
... API 挺多的,同样奉
上api 文档
既然要交互肯定需要点击输入滚动,可以还存在拖拽等等。咱们就暂时从输入开始说起啦
cy.type这不是一个可以直接使用的方法,要配合cy.get使用的,作用是给空间进行输入。例如:
测试输入例如 text, textareacy.get("input").type("hello world")测试 tabIndex
This is TabIndex div.
cy.get(".el").type("laldkadaljdkljasf") // 这个里面是随机字符串测试 input 为日期的
cy.get("input[type=date]").type("2008-8-9")键盘绑定
下面直接是对 input 进行组合键盘操作
cy.get("input").type("{shift}{alt}Q")
按住键盘操作
cy.get("input").type("{alt}这里是按了一下alt后输入的内容")
还有长按键盘之类的操作,详细就看官网了这里之类奉上链
接https://docs.cypress.io/api/commands/type.html#Key-Combinations
这里就是关于键盘的组合操作。
对于选择例如 radio, checkbox这些就只需要利用点击事件即可,如下:
cy .get("input[type=radio]") .as("radio") .click() cy.get("@radio").should("be.checked")定时 cy.wait
下面是等待 1s
cy.wait(1000)cy.clock 和 cy.tick
自己的代码:
var seconds = 0 setInterval(() => { $("#seconds-elapsed").text(++seconds + " seconds") }, 1000)
测试代码
cy.clock() cy.visit("/index.html") cy.tick(1000) cy.get("#seconds-elapsed").should("have.text", "1 seconds") cy.tick(1000) cy.get("#seconds-elapsed").should("have.text", "2 seconds")
这里就会出现关于 clock 和 tick
的用法,更多用法看文档,我也有部分迷惑的。待后来再解决。老规矩文档地址:
地址
先复制一段出来:
{ "baseUrl": "http://localhost:8080", "pageLoadTimeout": 3000, "viewportHeight": 667, "viewportWidth": 375 }
这是一个非常精简的配置了:
baseUrl 基础链接,之后在是使用 cy.visit 的时候,只需要访问具体路由例如: cy.visit("/Hello")
viewport 两个属性
viewportHeight 测试窗口的高度
viewportWidth 测试窗口的宽度
pageLoadTimeout 页面家安在超过 3000ms 即为超时。
总结上面是 cypress 的基本用法,cypress 是基于 electron 的一个测试框架,提供 web 环境进行点对点的测试,在
programer 思维下,进行自动化的交互操作,必要点检测说明,这是一个非常棒的用处。例如之后拥有数据埋点,
可以在固定的位置检测是否有埋点。测试想要的地方是否匹配的数据。模拟用户的点击操作,这都是非常棒的。在
jquery 操作年代,各种 id 和 class 奇怪命名下,这些都可以容易找到,在 vue 和 react 大行其道的年代,但
是却可以通过文本寻找节点。这也是非常棒的体验,更多秘密需要去体验,奉上官方地址
:官网 cypress
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/94633.html
摘要:是一款开箱即用可以跑在浏览器上的测试工具。同样,测试了也可以直接调试。这个时候我们的测试文件就可以访问了,点击之后发现他需要我们编写测试用例,那么接下来就手把手教你编写基本的测试用例。 What is E2E? 所谓的E2E就是end-to-end。 假设我们编写的每个功能程序都是一个黑匣子,最终用户也只会看到这个黑匣子,那么站在用户的角度来看并不需要知道这个黑匣子内部是什么东西也不...
摘要:上也有几个临时方案,目前我倾向使用自带的来查看。在打开的测试的浏览器中打开切到按下用户按,输入,选择重新刷新并统计代码执行覆盖率。那么,起来为了高撩质测量试代码,起来。 不很久不很久以前 据说某家公司有两位前端,天天撸bug,为啥嘞?只怪测试MM倾人国,轻语哥哥有bug。✧(๑•̀ㅂ•́)و✧ 可是最近两位有点犯愁 Σ(っ °Д °;)っ。测试MM有几次提了紧急bug,都在旁边鼓励他们...
摘要:阅读原文目前测试工具有哪些项目不需要不需要端到端测试一般都需要一个容器,来运行前端应用。向快速,一致和可靠的无剥落测试问好。 阅读原文 1. 目前E2E测试工具有哪些? 项目 Web Star puppeteer Chromium (~170Mb Mac, ~282Mb Linux, ~280Mb Win) 31906 nightmare Electron 15502 ...
摘要:使用可以快速生成一个项目,其中包含了和以及覆盖率统计的配置参考一个创建测试脚本的快速方法其他参考资料前端自动化测试概览测试之使用对项目进行单元测试 showImg(https://segmentfault.com/img/bVbjfXr?w=600&h=317); 前言 测试可以提供快速反馈,根据测试用例覆盖代码,从而提升代码开发效率和质量。根据投入产出价值,通常迭代较快的业务逻辑不做...
阅读 3562·2021-09-13 10:28
阅读 1914·2021-08-10 09:43
阅读 994·2019-08-30 15:44
阅读 3125·2019-08-30 13:14
阅读 1781·2019-08-29 16:56
阅读 2897·2019-08-29 16:35
阅读 2827·2019-08-29 12:58
阅读 841·2019-08-26 13:46