赛普拉斯天线

Late evening calls, reverted releases, lost revenue, and eventually fear of touching anything in legacy code not to break something. Nobody likes that. Do you know what is one of the best ways to avoid this? Integration tests!

傍晚的电话，恢复的发行，收入损失，最终担心触摸遗留代码中的任何内容都不会破​​坏某些内容。 没有人喜欢。 您知道避免这种情况的最佳方法之一是什么？ 集成测试！

We at Kiwi.com use Cypress.io for some time, and we already had to rethink how we write such tests to keep them efficient and stable. One topic that plays a role in it sometimes remains forgotten: configuration. In this post, we would like to share with you some tips on how we now set up Cypress tests with Typescript support for a typical Gitlab CI pipeline.

我们在Kiwi.com使用Cypress.io已有一段时间，我们已经不得不重新考虑如何编写这样的测试以保持它们的效率和稳定性。 在其中起作用的一个主题有时仍然被遗忘：配置。 在本文中，我们想与您分享一些有关如何现在为典型的Gitlab CI管道设置带有Typescript支持的赛普拉斯测试的技巧。

在我们开始之前... (Before we start…)

You can see all topics discussed here in the following repository:

您可以在以下存储库中查看此处讨论的所有主题：

回归本源 (Back to Basics)

Beginnings are fairly easy and well described in the documentation. First, we install cypress from npm and run yarn cypress open to get the autogenerated skeleton. After adding the typescript, renaming files to .ts and reshuffling, we get a structure like this:

入门非常容易，并且在文档中有很好的描述。 首先，我们从npm安装cypress，并yarn cypress open以获取自动生成的骨架。 添加打字稿，将文件重命名为.ts并重新.ts ，我们得到如下结构：

Notice that we use monorepo setup with yarn workspaces — our tests are placed there along with our frontend. To get that, we had to change some paths in cypress.json :

注意，我们在纱线工作区中使用了monorepo设置-我们的测试与前端一起放置在此处。 为此，我们必须在cypress.json更改一些路径：

{  "fixturesFolder": "src/fixtures",  "integrationFolder": "src/tests",  "pluginsFile": "src/plugins",  "supportFile": "src/support",  "screenshotsFolder": "assets/screenshots",  "videosFolder": "assets/videos"}

Every time we run a test, all screenshots and videos are stored in the assets folder. Trust me, you don’t want to commit it accidentally, so we will add the following lines to .gitignore with possible env file:

每次我们进行测试时，所有屏幕截图和视频都存储在assets文件夹中。 相信我，您不想意外提交它，因此我们将在可能的env文件中向.gitignore添加以下行：

assetscypress.env.json

As we want to follow the best practices and write clean code, we will add ESLint too. Since it’s already there for the whole repository, we need to just extend it: yarn workspace cypress add eslint-plugin-cypress --dev to install eslint-plugin-cypress in our cypress workspace and then we create .eslintrc.js :

由于我们希望遵循最佳实践并编写简洁的代码，因此我们还将添加ESLint。 由于它已经存在于整个存储库中，因此我们只需对其进行扩展： yarn workspace cypress add eslint-plugin-cypress --dev以在我们的cypress工作区中安装eslint-plugin-cypress ，然后创建.eslintrc.js ：

module.exports = {  extends: ["plugin:cypress/recommended"],  plugins: ["eslint-plugin-cypress"],  rules: {    // does not make sense in Cypress world    "promise/prefer-await-to-then": OFF,  },};

Your exact configuration may vary, but the philosophy is the same — you should have one root ESLint configuration and override only what’s necessary for cypress workspace. For example, we force devs to use async/await in unit tests but we turned off thepromise/prefer-await-to-then rule for cypress workspace because cypress commands are not regular promises.

您的确切配置可能有所不同，但是原理是相同的–您应该具有一个根ESLint配置，并且仅覆盖cypress工作区所需的配置。 例如，我们强迫开发人员在单元测试中使用async / await，但是由于cypress命令不是常规的promise，所以我们关闭了cypress工作区的promise/prefer-await-to-then规则。

让我们写第一个测试 (Let’s write the first test)

Now it’s about the time to finally add some tests. For the beginning, we will check just that the Kiwi.com homepage is loaded, the navbar on top is shown and a user can open the hamburger menu:

现在是时候终于要添加一些测试了。 首先，我们将仅检查是否已加载Kiwi.com主页，显示了顶部的导航栏，并且用户可以打开汉堡包菜单：

describe("Landing page", () => {  it("shows navigation menu", () => {    cy.visit("/");    cy.get("[data-test='NavBar']").should("be.visible");    cy.get("[data-test='NavBar-SideNav-Open']").click();    cy.get("[data-test='NavBar-SideNav']").should("be.visible");  });});

And the resulting code is…ewww, not great, not terrible.

结果代码是……ewww，不好，也不可怕。

  • we follow best practices by using data-test attributes for selectors, but it’s a lot of writing and we have to use quotes inside the string

    我们通过对选择器使用data-test属性来遵循最佳做法，但这需要大量的编写工作，我们必须在字符串中使用引号

  • after a couple of weeks or months, it might not be clear what exactly is happening in the test

    在几周或几个月后，可能不清楚测试中到底发生了什么

We can do a lot better! In the beginning, we might be tempted to add a custom command to select elements more easily, something like cy.getByDataTest("Navbar"). It turns out there is even a better solution. We use Testing Library for unit tests and there is a variant for Cypress too. Let’s use it:

我们可以做得更好！ 在一开始，我们可能会想添加一个自定义命令来更轻松地选择元素，例如cy.getByDataTest("Navbar") 。 事实证明，还有更好的解决方案。 我们使用测试库进行单元测试，赛普拉斯也有一个变体。 让我们使用它：

  1. yarn workspace cypress add @testing-library/cypress to install the lib

    yarn workspace cypress add @testing-library/cypress安装lib

  2. In tsconfig.json, we add support for types: "types": ["cypress", "@types/testing-library__cypress"]

    在tsconfig.json ，我们添加了对类型的支持： "types": ["cypress", "@types/testing-library__cypress"]

  3. We upgrade src/support/index.ts file to make use of it:

    我们升级src/support/index.ts文件以使用它：

import "@testing-library/cypress/add-commands";import { configure } from "@testing-library/cypress";import "./commands";configure({ testIdAttribute: "data-test" });

And this is how we rewrite our test:

这就是我们重写测试的方式：

describe("Landing page", () => {  it("shows navigation menu", () => {    cy.visit("/");    cy.findByTestId("NavBar").should("be.visible");    cy.log("												


											

赛普拉斯天线_赛普拉斯在gitlab ci管道中设置了首次验收测试相关推荐
	

    
								
  1. win2008r2 惠普g160鼠标_惠普台式机重装系统后鼠标键盘不能用
		
    我的台式机很奇怪,鼠标能用键盘不能用了,该怎么办呢?下面由小编给你做出详细的介绍!希望对你有帮助!台式机鼠标能用键盘不能用解决方法一:1.重新启动电脑;2.鼠标键盘如果是p2p的接口(圆口,上面有针脚 ...
    
		
    2. 
						
  2. 惠普ns1005w使用说明_惠普 NS1005w 多功能一体机解析：15秒智能闪充 + 全功能手机操控...
		
    一.惠普新款多功能一体机加了什么技能点? 作为一枚研究生,我所在的学院办公室经常需要打印文献.复印资料,因此在打印设备的配备上也异常丰富.陆续摆放过四台打印机,而且比较巧合的是全部都是惠普的打印机.  ...
    
		
    3. 
						
  3. 惠普m1005mfp说明书_惠普HP LASERJET M1005一体机怎么使用?
		
    打印机越来越融入人们的生活,走进人们的视线里,当我们面对一台打印机是如何使用呢,今天小编讲解一下惠普HP LASERJET M1005多功能黑白激光一体机如何使用? 软件名称:惠普hp laserje ...
    
		
    4. 
						
  4. 深圳赛意信息 怎么样_赛意信息蔡胜龙：制造业数字化资产管理的“术”与“道”...
		
    雷锋网按:2020 年 8 月 7 日,全球人工智能和机器人峰会(CCF-GAIR 2020)正式开幕.CCF-GAIR 2020 峰会由中国计算机学会(CCF)主办,雷锋网.香港中文大学(深圳)联合 ...
    
		
    5. 
						
  5. win2008r2 惠普g160鼠标_惠普电脑装win7键盘鼠标不能用解决方法全集(支持8/9/10代cpu usb)...
		
    [文章导读]最近有很多网友问,为什么我惠普电脑装win7键盘鼠标不能用了?大家都知道,win10系统虽然发布了几年,但是由于Win7的习惯留住了不少Win7忠实用户,因此Win7系统的使用用户还是比较 ...
    
		
    6. 
						
  6. win2008r2 惠普g160鼠标_惠普Hp DL380 GEN9 UEFI模式安装win2008 r2的方法
		
    DL380 GEN9 UEFI模式 安装 2008 r2 实验机器 :3 80 Gen9 实验环境 : 服务器型号 : DL380 Gen9 操作系统 : windows2008 r2 阵列卡型号 : ...
    
		
    7. 
						
  7. 2000坐标系高程与85高程转换_科普 | 如何在大疆智图中设置坐标系
		
    点击上方 蓝字 关注我们 在大疆智图"输出坐标系设置"中可设置坐标系,例如选择WGS 84/ UTM zone 49N或CGCS2000(2000国家大地坐标系)/Gauss-Kr ...
    
		
    8. 
						
  8. webpack设置应用缓存_如何使用Webpack在Rails应用程序中设置TinyMCE
		
    webpack设置应用缓存 by Joanna Gaudyn 乔安娜·高登(Joanna Gaudyn) 如何使用Webpack在Rails应用程序中设置TinyMCE (How to setup T ...
    
		
    9. 
						
  9. kubernetes安装_在 Kubernetes 上安装 Gitlab CI Runner
		
    在 Kubernetes 上安装 Gitlab CI Runner​www.qikqiak.com 上节课我们使用 Helm 快速的将 Gitlab 安装到了我们的 Kubernetes 集群中,这节 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. c++ unicode转换中文_彻底弄懂UTF-8、Unicode、宽字符、locale
		
    2. 
						
  2. 更效率、更优雅 | 阿里巴巴开发者工具不完全盘点
		
    3. 
						
  3. Java黑皮书课后题第5章：5.5（千克与磅之间的互换）编写一个程序，并排显示下面两个表格
		
    4. 
						
  4. spring控制事务:声明式事务（XML）事务的传播行为
		
    5. 
						
  5. 打造自己的装机U盘（二）
		
    6. 
						
  6. 对No Starch Press出版的《Python Playground》一书的书评及其作者访谈录
		
    7. 
						
  7. jquery系列教程4-事件操作全解
		
    8. 
						
  8. 学习c++一点一滴----读取注册表
		
    9. 
						
  9. 我如何学习：不要停下学习的脚步
		
    10. 
						
  10. Excel怎么批量将各数据复制填充指定次数
		
    11. 
						
  11. 密西根州立大学计算机排名,密歇根州立大学MSU（Michigan State University）计算机科学Computer Science专业排名第91位（2021年THE世界大学商科排名）...
		
    12. 
						
  12. 荣耀终端android面试,华为终端面试经验
		
    13. 
						
  13. 手把手教你申请计算机软件著作权（4）——资料邮寄
		
    14. 
						
  14. 路边停车系统的具体流程是什么
		
    15. 
						
  15. Dcloud云函数服务空间
		
    16. 
						
  16. 笔记本电脑wifi图标变成了小地球的解决办法（留日后查看）
		
    17. 
						
  17. 广州市黄埔区2021-2022学年九年级第一学期期末考试英语试题
		
    18. 
						
  18. 电话机器人系统成功部署，无限开通电话机器人——2
		
    19. 
						
  19. Parallels虚拟机Linux和Mac之间共享文件夹
		
    20. 
						
  20. 自动化办公-3.python自动化之word操作
		
    21. 
		

	


热门文章
	

    
									
  1. 谈谈那些被京东撸货“割韭菜”那群人，看看有你没？
			
    2. 
						
  2. 远程桌面报错：出现身份验证错误/要求的函数不受支持
			
    3. 
						
  3. java判断是否为数字(JAVA判断输入是否是数字)
			
    4. 
						
  4. 查询java死循环代码
			
    5. 
						
  5. 继承Thread类创建线程类
			
    6. 
						
  6. excel的导出并下载
			
    7. 
						
  7. ldd not a dynamic executable
			
    8. 
						
  8. 手机为什么显示服务器异常即将退出游戏,LOL服务器连接异常即将退出怎么回事...
			
    9. 
						
  9. loading加载效果（纯css）
			
    10. 
						
  10. 华泰证券软件开发工程师笔试经历
			
    11.