cypress初识--看完就可以写一个简单web自动化脚本了！

一、运行cypress
1、如果你还没有安装cypress的运行环境，请参考另一篇文章
《cypress环境安装及过程问题总结》
https://blog.csdn.net/summer_learn/article/details/104207462?spm=1001.2014.3001.5501
2、打开cmd,进入cypress的安装目录后，运行npx cypress open

c:\Users\admin>cd c:\Users\admin\cypress

c:\Users\admin\cypress>npx cypress open

3、运行pycharm编辑器，加载cypress的脚本目录
因为cypress中的脚本是js语言，我们可以使用pycharm编辑器，或者visiual studio code编辑器。根据自己情况选择，下面是以pycharm为例进行步骤讲解。

这时打开cypress的运行界面，就可以看到在cypress下面新建的目录文件已经同步到cypress上，也就是说，我们新建的脚本保存后，就可以实时同步到cypress上，在cypress中双击脚本，就可以自动运行。

二、了解cypress常用的语法
1、在cypress的图形界面Help-Documentation打开帮助文档
或者直接浏览器输入地址打开帮助文档https://on.cypress.io/

2、我们在编辑器的cy_test文件夹下，创建一个baidu_test的js文件

3、打开cypress图形界面，看到新建的文件已经被检测到了，只是文件内容还是空的。
这时可以尝试点击cypress脚本，就可以看到自动运行并打开了浏览器！
这也是比selenium好的一点，就是cypress不用添加任何webdriver驱动器，就可以打开浏览器，而selenium则需要先添加驱动器，并在对应浏览器安装插件后才可以使用selenium打开对应浏览器。

Cypress 会自动检测你可用的浏览器，建议把 Chrome 设置为默认浏览器，或者你也可以运行 Cypress 的时候手动指定cypress run --browser chrome。

4、基本命令介绍
.get()-找到元素
.clear()-清除输入或文本区域的值。
.type()-输入文本内容
.contains()-按文本内容查询
// eg:Find an element within ‘.main’ containing the text ‘New Post’
cy.get(’.main’).contains(‘New Post’)

.click()-默认左键单击按钮
.should-断言
.check()-勾选复选框
.uncheck()-取消复选框
.blur()-使重点突出的DOM元素变得模糊。
.focus()-专注于DOM元素。
.select()-选择一个在.
.dblclick()-双击DOM元素。
.rightclick()-右击DOM元素。

更多命令可以在cypress的官网API内容中进行学习

5、脚本结构介绍
cypress给我们提供了很多样例脚本，大家可以多看一下样例脚本学习里面命令的使用方法。
下面是一个网上其他大佬分享的百度访问的脚本和脚本结构解释。

/// <reference types="Cypress" />describe('百毒网站首页测试用例集', function() {beforeEach(() => {cy.visit('https://www.baidu.com')})it('百度一下按钮文本检查', function() {cy.get("#su").then($button_start_search=>{expect($button_start_search.attr("value")).to.eq("百度一下");})})})

代码解释：

reference表示告诉 VSCode 要去Cypress package 里找相关的语义解析，这样一来 Cypress 相关的语法和函数等就可以尽情地使用了；
describe声明了一个测试用例集；
beforeEach相当于单元测试的setup，即在每个测试用例运行前需要做的事；
it声明了一个测试用例；
cy.get接受一个 js selector，就是元素定位字符串，当然 Cypress 也支持 xpath 定位；
通过then或should，我们可以把get到的元素对象传递到下一步，以便做进一步处理，这里通过then把找到的button_start_search传递到下一步，并最终通过expect函数来判断button_start_search的value属性是否跟预期一致。
所以，去除一些我们预期想要写的内容，一个完整的cypress的脚本可以简化成以下结构：

/// <reference types="Cypress" />describe('tests name', function() {beforeEach(() => {cy.visit('web address')})it('一个用例名称', function() {cy.get("定位元素").then()})})

备注：查看定位元素的方法，是通过手动打开网站后，F12->点击工具栏的鼠标->移动到你需要定位的地方->找到它对应的元素

三、编写一个简单的cypress脚本
我们尝试编写一个脚本，即通过百度网站搜索关于cypress的内容并断言网址中包含所查询的内容，根据上面的脚本结构以及基本命令介绍，可以自己动手尝试一下编写。

/// <reference types="Cypress" />describe('通过百度查找网页内容', function() {beforeEach(() => {cy.visit('www.baidu.com')})it('百度cypress的内容', function() {cy.get("#kw").type('cypress')cy.get("#su").click()//断言网页地址内容包含cypresscy.url().should("include",'cypress')})})

保存后执行结果如下

可以看到执行结果通过，总用时5.51秒。执行过程中有一些红色的执行过程记录可以不用管，只要最终结果是执行通过的就可以了。这个红色的并不是报错，而是在执行过程中的一些未完成动作的快照记录，可以鼠标悬停到执行过程的每一步去观察一下。

如果这个内容对你有用，记得关注我哦，互相分享学习测试技能。

cypress初识--看完就可以写一个简单web自动化脚本了！相关推荐

linux spt 脚本,写一个简单的FGO脚本
前言正好最近事情比较少,就抓紧时间简单写了一个FGO脚本(API),当初的想法相当简单,就是想写一个abstract的FGO的API来实现对FGO的操作,同时还可以当脚本来用. 思路因为是关于FG ...
用Python写一个简单的游戏脚本，让你成为游戏里面的大佬！
想必大家都喜欢玩游戏吧,现在游戏市场是非常火爆和可观的,不少程序员都纷纷涌入游戏公司,我们学习python其实也可以作为写游戏脚本的,不清楚的小伙伴可以来看下了哦~ 以楚留香的电脑版为例,记录脚本的编 ...
怎样写一个简单的操作系统？（原文标题：How to write a simple operating system）分类：翻译 2011-01-26 01:10 3175人阅读评论(3) 收藏
怎样写一个简单的操作系统?(原文标题:How to write a simple operating system) 分类: 翻译2011-01-26 01:10 3175人阅读评论(3) 收藏举 ...
构建自己的购物搜索引擎一：写一个简单的
记得2010年10月9号,淘宝全网搜索引擎一淘网上线,当时不怎么关注,只是在网站上看到过新闻而己,前两个月,觉得是时候走确定自己以后要走的方向了,于是决定以后加入到搜索的行列中,此时开始关注一淘网的技 ...
如何搭建python框架_从零开始:写一个简单的Python框架
原标题:从零开始:写一个简单的Python框架 Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发. 你为什么想搭建一个Web框架?我想有下面几个原因: 有一个 ...
ipad php mysql_如何用PHP/MySQL为 iOS App 写一个简单的web服务器（译） PART1
原文:http://www.raywenderlich.com/2941/how-to-write-a-simple-phpmysql-web-service-for-an-ios-app 作为一个i ...
用java写一个简单的区块链（下）
用java写一个简单的区块链(下) 2018年03月29日 21:44:35 java派大星阅读数:725 标签: 区块链java 更多个人分类: 区块链版权声明:本文为博主原创文章,转载请标明 ...
如何写一个简单的node.js C 扩展
node 是由 c 编写的,核心的 node 模块也都是由 c 代码来实现,所以同样 node 也开放了让使用者编写 c 扩展来实现一些操作的窗口. 如果大家对于 require 函数的描述还有印象的 ...
ios php mysql实例_如何用PHP/MySQL为 iOS App 写一个简单的web服务器（译） PART1
原文:http://www.raywenderlich.com/2941/how-to-write-a-simple-phpmysql-web-service-for-an-ios-app 作为一个i ...
[Unity3D]用C#在unity里面写一个简单的红绿灯
[Unity3D]用C#在unity里面写一个简单的红绿灯 00.成果展示 01.创建可变颜色的小球 02.编写代码 R1.cs R2.cs G1.cs G2.cs Y1.cs Y2.cs 03.自己 ...

cypress初识--看完就可以写一个简单web自动化脚本了！

cypress初识--看完就可以写一个简单web自动化脚本了！相关推荐

最新文章

热门文章