Cypress初探（一）

最新推荐文章于 2024-09-04 07:00:00 发布
最新推荐文章于 2024-09-04 07:00:00 发布
阅读量3.2w 收藏 55
点赞数 2
分类专栏： 前端自动化 文章标签： cypress
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/angl129/article/details/90696251
版权
本文是Cypress初学者指南，涵盖了开发环境的设置，包括Cypress、Node.js和IntelliJ IDEA的安装与配置。文章详细说明了如何配置Cypress以解决Chrome跨域问题，并使用Allure生成测试报告。此外，还介绍了Cypress的目录结构，如fixtures、integration和plugins，以及编写第一个测试用例的步骤。最后，讨论了Cypress的快速运行和便捷的DOM选取功能。
摘要由CSDN通过智能技术生成

                                             Cypress初探（一）

        最近想学习下web ui测试框架，发现了比较好用的cypress，直接用js操作更方便更快。

一、开发环境

Cypress + nodejs (node之前已安装，直接官网下载安装即可)+ intellij idea

1. 安装cypress

cd projectpath                   # 工程目录
npm install cypress --save-dev   # 安装cypress

 

       Cypress安装完成后，可看到提示：You can now open Cypress by running: node_modules/.bin/cypress open，通过如下命令打开Cypress。正常可看到如下窗口，其中有许多cypress自带的例子可以参考。

node_modules/.bin/cypress open

2. 配置

在工程路径下创建package.json文件，配置以chrome浏览器运行用例。


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  j--j
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
cypress自动化测试工具开发指南

				
			

			

				

					qq_40893595的博客
				

				

					09-15
					
					7417
					
				

			

		

		

			
				
待到秋来九月八，我花开后百花杀简介
简介



			
		

	



                

              
                



	

		

			

				
					
intellij-cypress:IntelliJ-Cypress插件

				
			

			

				

					04-28
				

			

		

		

			
				
IntelliJ Cypress集成插件
在常见的Intellij测试框架下集成了Cypress.io 。
兼容性
由于插件依赖于JavaLanguage和插件的NodeJS，所以它需要一个商业版本的IDEA（旗舰版，WebStorm等）
安装
可以从Jetbrains市场安装插件。 打开“设置/首选项->插件”菜单项，然后在搜索栏中键入“赛普拉斯”。 有关详细信息，请参见。 请注意，基本版本和专业版本不能同时运行，因此您应该禁用或卸载其中一个版本才能使用另一个版本。
用法
简短的视频概述：  : 
测试运行配置
插件引入了专用的赛普拉斯类型，您可以从文件视图（目录，规范文件）或直接从代码中创建运行配置
档案检视
代码视图
 请注意， cypress-intellij-reporter引入了mocha依赖关系，该依赖关系会自动在IDEA中启用mocha测试框架。 因此，请不要混淆赛普拉斯和

			
		

	



                


  
              

                


	

		

			

				
					
Cypress安装与零基础入门

				
			

			

				

					qq_45222482的博客
				

				

					07-29
					
					386
					
				

			

		

		

			
				
Cypress安装与初步使用

			
		

	





	

		

			

				
					
利器| Cypress 强大全新的 Web UI 测试框架应用尝鲜

				
			

			

				

					霍格沃兹测试学院的博客
				

				

					03-29
					
					700
					
				

			

		

		

			
				
介绍一款强大全新的 E2E（end to end）Web 测试框架Cypress[1]，号称 :Fast, easy and reliable testing for anything...

			
		

	



		

			
		



	

		

			

				
					
初探 Cypress：现代 Web 应用的测试利器

				
			

			

				

					上进！努力！！！
				

				

					08-26
					
					1131
					
				

			

		

		

			
				
Cypress 是一个基于 JavaScript 的前端测试框架，主要用于编写端到端测试（E2E testing），它可以模拟用户操作，并验证页面的行为是否符合预期。与传统的 Selenium 不同，Cypress 直接在浏览器中运行，拥有快速、稳定的执行速度和易于调试的特性。Cypress 作为一个现代化的前端测试工具，简化了测试代码的编写和调试过程，使得开发者能够更专注于功能实现和用户体验的优化。

			
		

	





	

		

			

				
					
cypress环境搭建

				
			

			

				

					冰点契约的博客
				

				

					11-13
					
					136
					
				

			

		

		

			
				
Cypress环境搭建

			
		

	





	

		

			

				
					
前端自动化测试框架Cypress之基础知识，offer收割机

				
			

			

				

					2401_84093973的博客
				

				

					04-05
					
					651
					
				

			

		

		

			
				
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往免费获取自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

			
		

	





	

		

			

				
					
cypress-jest-coverage-merge:一个将Cypress和Jest Coverage报告合并到一个报告文件中的助手

				
			

			

				

					05-23
				

			

		

		

			
				
一个将Cypress和Jest Coverage报告合并为一个报告文件的助手。  该脚本的灵感来自以下合并Cypress＆Jest报告的示例： : 和 。  为了更好地与多个OS（Windows / Linux）兼容，此项目使用nodejs API来处理文件，例如...

			
		

	





	

		

			

				
					
Cypress推出一款高灵敏度的高速CMOS图形传感器

				
			

			

				

					01-19
				

			

		

		

			
				
Cypress Semiconductor宣布推出一款高灵敏度的高速CMOS图形传感器，锁定高阶影像机器市场。新款2500万像素VITA 25K传感器提供市场的资料吞吐量，并提供管道式与触发式全域快门。新款传感器拥有32个10位数字低电压...

			
		

	





	

		

			

				
					
cypress官方驱动_cypress_

				
			

			

				

					10-02
				

			

		

		

			
				
cypress driver for windows

			
		

	





	

		

			

				
					
cypress-xpath:将XPath命令添加到赛普拉斯测试运行器

				
			

			

				

					03-18
				

			

		

		

			
				
赛普拉斯
将XPath命令添加到测试运行程序
用npm安装
npm install -D cypress-xpath
用纱安装
yarn add cypress-xpath --dev
然后将其包含在您项目的cypress/support/index.js
 require ( 'cypress-xpath' )
使用
安装后，您的cy对象将具有xpath命令。
 it ( 'finds list items' , ( ) => {
  cy . xpath ( '//ul[@class="todo-list"]//li' )
    . should ( 'have.length' , 3 )
} )
您也可以将xpath到另一个命令之外。
 it ( 'finds list items' , ( ) => {
  cy . xpath ( '//ul[@class="todo-list

			
		

	





	

		

			

				
					
cypress-parallel-specs-locally:在本地并行执行 Cypress 规范的脚本

				
			

			

				

					05-29
				

			

		

		

			
				
cypress-parallel-specs-locally  在本地并行执行 Cypress 规范的脚本：  runner_v1 是一个带有递归的承诺池 -  runner_v2 是一个基于事件的，带有状态 - ，用于节点 12+  Runner v2 尝试解决多个 Cypress xvfb 实例...

			
		

	





	

		

			

				
					
比selenium体验更好的ui自动化测试工具: cypress介绍

				
			

			

				

					m0_58026506的博客
				

				

					08-25
					
					2079
					
				

			

		

		

			
				
话说Cypress is a next generation front end testing tool built for the modern web. AndCypress can test anything that runs in a browser.Cypress consists of a free,open source,locally installedTest Runneranda Dashboard Service forrecording your tests....

			
		

	





	

		

			

				
					
Cypress系列（7）- Cypress 编写和组织测试用例篇 之 Mocha的介绍

				
			

			

				

					qq_33801641的博客
				

				

					06-03
					
					766
					
				

			

		

		

			
				
如果想从头学起Cypress，可以看下面的系列文章哦
https://www.cnblogs.com/poloyy/category/1768839.html

前言

Cypress 底层依赖于很多优秀的开源测试框架，其中就有 Mocha
Mocha 是一个适用于 Node.js 和浏览器的测试框架，它使得异步测试变得简单


JS 语言带来的问题
JS 是单线程异步执行的，这使得...

			
		

	





	

		

			

				
					
浏览器自动化测试的利器：Cypress

				
			

			

				

					2401_83063795的博客
				

				

					09-04
					
					1063
					
				

			

		

		

			
				
此外，Cypress 支持快速的测试执行，因为它设计了一种机制，可以在不等待整个页面加载完成的情况下，对应用程序进行测试。Cypress 适用于各种类型的测试，包括单元测试、集成测试以及端到端测试，为Web应用的测试提供了全面的解决方案。Cypress 的时间旅行调试功能是一个强大的工具，它允许开发者在测试执行过程中的任何时刻暂停，然后回溯到测试的早期阶段。Cypress 的一大特色是它的测试运行器，它提供了一个清晰的视图，让开发者可以看到测试执行的每一步，从而快速定位并解决问题。

			
		

	





	

		

			

				
					
UI自动化测试神器-＞Cypress

				
			

			

				

					人人为我，我为人人
				

				

					03-07
					
					2173
					
				

			

		

		

			
				
序：

Cypress是基于node.js环境的，安装则极为便利，如果我们测试人员维护好了自动化脚本，就可以直接将js脚本分享给研发人员，辅助研发人员进行自测。如果能将UI自动化普及到整个部门都去使用，辅助提升产品研发效率，那UI自动化就是非常有价值的事情。



1.1、Cypress简介

官网地址：https://docs.cypress.io

官网的首页有一句标语“The web has evolved.Finally, testing has too.”

意思是Web已经进化了，最终，测试也是

			
		

	





	

		

			

				
					
cypress初探

				
			

			

				

					twinkle的博客
				

				

					08-21
					
					600
					
				

			

		

		

			
				
本期主要使用cypress 来测试ui界面使用cypress来编写e2e测试使用cypress来编写组件测试,但是在使用组件的时候，可千万要看自己的node环境的版本哦，不然测试组件一直处于loading只写文章不放源码有点谈恋爱不结婚耍流氓的感觉😶‍🌫️😶‍🌫️😶‍🌫️。

			
		

	





	

		

			

				
					
Cypress常用操作

				
			

			

				

					sinat_39364174的博客
				

				

					07-15
					
					1401
					
				

			

		

		

			
				
describe('Post Resource', function() { it('Creating a New Post', function() {

cy.visit('/posts/new') //访问/posts/new页面

cy.get('input.post-title') //找到类为：post-title的输入框

cy.contains('Submit') .click()  //找到包含文本：Submit的元素并点击

cy.url() .should('inclu...

			
		

	





	

		

			

				
					
Cypress怎么匹配第一个label

					
最新发布

				
			

			

				

					09-12
				

			

		

		

			
				
Cypress是一个流行的端到端测试工具，用于Web应用程序测试。在Cypress中，如果你想匹配页面上的第一个具有特定标签（label）的元素，你可以使用Cypress的查询选择器结合jQuery或DOM遍历方法来实现。

以下是一个例子，展示了如何在Cypress中找到并测试第一个具有特定label的元素：

```javascript
// 假设你想要查找页面上第一个名为"Username"的label元素
cy.get('label').then(($labels) => {
  // $labels是一个包含所有label元素的jQuery对象
  // 通过遍历找到第一个匹配的label元素
  const firstLabel = $labels.get(0);
  // 进行相关测试或操作
  expect(firstLabel).to.have.text('Username');
});
```

在上面的代码中，`.get('label')`选择了所有的label元素，然后使用`.then()`来处理这些元素。在回调函数中，使用`.get(0)`来获取第一个label元素，然后可以使用Cypress的断言方法来验证这个label的文本。

请注意，这种方法是基于同步JavaScript和jQuery库的选择器和遍历功能的，适用于Cypress执行上下文中可以使用的DOM元素。



			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值