当前位置: 首页 > 开发杂谈 >

[Day24] Vue3 E2E Testing: Cypress 基本结构

今天这篇文章主要会介绍 Cypress 的基本结构以及常见的语法,那我们马上开始吧!

基本结构

Cypress 的测试基本结构是由 Test Group, Test Item, Command 和 Assertion 所组成的

describe('Todo List', () => { // Test Group
  it('Does do much!', () => {  // Test Item
		expect(true).to.equal(true)  // Assertion
	})

  it('create 2 items', () => { // Test Item
    cy.visit('https://todomvc.com/examples/vue') // Command

    cy.get('.new-todo') // Command
      .type('todo A{enter}') // Command
      .type('todo B{enter}') // Command

    cy.get('.todo-list li') // Command
      .should('have.length', 2) // Assertion
  })
})

有看过我之前介绍的 Vue 3 单元测试 (Unit Testing) - Vue Test Utils + Jest 基本范例 & 核心语法 的朋友肯定会觉得 describe, it & expect 很熟悉,不过要注意的是,Cypress 并不是采用 Jest 而是 Mocha (describe & it) 和 Chai (expect)。

Test Group & Test Item

和在写单元测试一样,要攥写每一笔 E2E 测试时都要以 it 为测试的最小单位,如果想要将一至多组相关联的测试组合在一起则可以使用 describe。

https://ithelp.ithome.com.tw/upload/images/20211009/201134873Ydrmqm9cZ.png

Command

https://i.imgur.com/YiyWD9V.gif

command 是用来告诉 Cypress 要执行什麽动作的命令,我们可以透过一行一行的 command chain来让它模拟使用者在网页操作的行为。

it('create 2 items', () => {
  cy.visit('https://todomvc.com/examples/vue') // command

  cy.get('.new-todo') // command
    .type('todo A{enter}') // command
    .type('todo B{enter}') // command
})

这些 command 通常也很容易翻译成人类可以读懂的样子

-> 浏览 https://todomvc.com/examples/vue 
-> 找到 class 为 .new-todo 的元素
-> 输入完 todd A 後按下 enter
-> 输入完 todo B 後按下 enter

Assertions

Assertions describe the desired state of your elements, your objects, and your application.

Assertions (断言) 是用来描述了元素、物件和应用程序的期望状态,来确保 command (命令) 的结果符合我们所预期的。

因为 Cypress 整合了很多套件,所以我们有很多种断言的函示可以选择,像是

又或者是 Cypress 内建的 should,should 可以传入来自 Chai, Chai-jQuery 或 Sinon-Chai 的 Chainer,例如:

// Length
cy.get('li.selected').should('have.length', 3)

// Class
cy.get('form').find('input').should('not.have.class', 'disabled')

// Value
cy.get('textarea').should('have.value', 'foo bar baz')

// Visibility
cy.get('li').should('be.visible')
cy.get('li.hidden').should('not.be.visible')

Default Assertions

尽管 Cypress 提供了许多断言,但有时候最好的测试可能可以没有断言!

it('create 2 items', () => {
  cy.visit('https://todomvc.com/examples/vue')

  cy.get('.new-todo')
    .type('todo A{enter}')
    .type('todo B{enter}')
})

什麽意思呢? 在这个例子中我们没有写明确的断言,但这个测试仍然可能会以多种方式失败,例如

  • cy.visit() 可能会无法成功的浏览我们的目标页面。
  • cy.get() 可能无法在 DOM 中找到目标元素。
  • 我们想要 .type() 的输入可能会被 disabled 无法输入。

事实上这是因为许多命令都有一个预设内建的断言,或者更准确的说,有一些命令可能会因为执行失败导致测试错误而无需添加明显的 (explicit) 断言。

Automatically retry

与其他测试框架不同的是 Cypress 中有一部分的命令 (command) 会自动重试断言直到 timeout 为止。(预设下,timeout 的长度为 4 秒)

cy.get('button').click().should('have.class', 'active')
$('button').on('click', (e) => {
  setTimeout(() => {
    $(e.target).addClass('active')
  }, 2000)
})

在上面的例子中,尽管我们在点击 button 两秒後才加上 active 的 class ,这条测试依然会通过。

大部分会 retry 的命令都是和 DOM 有关,例如:cy.get()、.find()、.contains() 等,你可以在 API 文件中的 ”Assertions“ 的部分来检查这个命令是否会 retry。例如 .first()

https://ithelp.ithome.com.tw/upload/images/20211009/20113487hm4EMkAiqO.png

参考资料


今天的分享就到这边,如果大家对我分享的内容有兴趣欢迎点击追踪 & 订阅系列文章,如果对内容有任何疑问,或是文章内容有错误,都非常欢迎留言讨论或指教的!


相关文章:

  • [day20]谈购物流程设计
  • Day 20:专案04 - Facebook爬虫01 | ChromeDriver、Selenium
  • 均线的重要性-价值千金
  • 跨境电商选品原则
  • [Tableau Public] day 4:尝试制作不同种类的报表-1
  • 中东亚马逊FBA入仓包装规则
  • wihs卖家设置productboost的竞拍价格注意事项和技巧
  • 110/08 - 档案要存那里?
  • 亚马逊卖家开店必知的三个营销策略
  • Day 29: 来讲一下commit前的小撇步
  • Day11 远端共同协作 - 使用 GitHub
  • Day13-TypeScript(TS)修改成员
  • 为什么Shopee成为优选卖家很重要?
  • 【Day16】数据展示元件 - Table
  • Data layer implementation (1)
  • PayPal国外买东西教程:银联卡(国内储蓄卡信用卡)怎么用PayPal买国外的东西更安全
  • SiteGround域名转移教程:如何转出SiteGround域名
  • 寻找印度市场伙伴
  • 海外适合游戏投放的渠道有哪些?
  • WordPress建立数据库连接时出错怎么办?
  • 教程/魔改BBR 一键安装脚本 for CentOS/Debian 7+
  • 如何在Hositnger主机开启Cloudflare服务,Hositnger主机Cloudflare CDN使用教程
  • 性价比最高的国外VPS服务器推荐:便宜好用的美国VPS大全
  • 国外虚拟主机大全:便宜好用靠谱的国外网站空间推荐大全
  • 新的 Web.com 电子商务平台帮助中小企业接触数百万潜在买家
  • 怎么获得菲律宾手机卡和接受短信验证码
  • VPS优惠:搬瓦工香港VPS补货/G口/KVM/月付9.9美元
  • 简单做WordPress网站的方法:最快最便宜的做外贸网站的方法
  • 瑞士银行开户指南:0门槛开户欧洲银行卡教程【Dukascopy开户教程】
  • 通过CloudFlare Partner计划使用cname接入CloudFlare免费CDN