首页 文章 问答 51讲堂 活动
写文章 提问题 登录 | 注册
  • 13
  • 13
分享

克隆官方项目

执行命令git clone https://github.com/cypress-io/cypress-example-recipes.git,将官方配到的被测项目克隆到本地，GIT的使用在此不多赘述，然后命令行进入到克隆下来的项目目录中，执行命令npm install

C:\cypress-example-recipes>npm install
> deasync@0.1.20 install C:\cypress-example-recipes\node_modules\deasync
> node ./build.js
`win32-x64-node-14` exists; testing
Binary is fine; exiting
> husky@4.0.0 install C:\cypress-example-recipes\node_modules\husky
> node husky install
husky > Setting up git hooks
husky > Done
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\bmp\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\core\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\custom\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\gif\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\jpeg\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-blit\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-blur\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-circle\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-color\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-contain\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-cover\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-crop\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-displace\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-dither\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-fisheye\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-flip\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-gaussian\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-invert\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-mask\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-normalize\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-print\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-resize\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-rotate\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-scale\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-shadow\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugin-threshold\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\plugins\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\png\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\tiff\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\types\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\@jimp\utils\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@2.6.11 postinstall C:\cypress-example-recipes\node_modules\babel-register\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@2.6.10 postinstall C:\cypress-example-recipes\node_modules\babel-runtime\node_modules\core-js
> node postinstall || echo "ignore"
> core-js-pure@3.6.0 postinstall C:\cypress-example-recipes\node_modules\core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall C:\cypress-example-recipes\node_modules\jimp\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@2.6.11 postinstall C:\cypress-example-recipes\node_modules\parcel-bundler\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.0 postinstall C:\cypress-example-recipes\node_modules\react-app-polyfill\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@2.6.10 postinstall C:\cypress-example-recipes\node_modules\start-server-and-test\node_modules\core-js
> node postinstall || echo "ignore"
> core-js@2.6.10 postinstall C:\cypress-example-recipes\node_modules\wait-on\node_modules\core-js
> node postinstall || echo "ignore"
> @cypress/snapshot@2.1.7 postinstall C:\cypress-example-recipes\node_modules\@cypress\snapshot
> node src/add-initial-snapshot-file.js
> cypress@6.0.0 postinstall C:\cypress-example-recipes\node_modules\cypress
> node index.js --exec install
Installing Cypress (version: 6.0.0)
  √  Downloaded Cypress
  √  Unzipped Cypress
  √  Finished Installation C:\Users\Administrator\AppData\Local\Cypress\Cache\6.0.0
You can now open Cypress by running: node_modules\.bin\cypress open
https://on.cypress.io/installing-cypress
> husky@4.0.0 postinstall C:\cypress-example-recipes\node_modules\husky
> opencollective-postinstall || exit 0
Thank you for using husky!
If you rely on this package, please consider supporting our open collective:
> https://opencollective.com/husky/donate
> nodemon@1.18.11 postinstall C:\cypress-example-recipes\node_modules\nodemon
> node bin/postinstall || exit 0
Love nodemon? You can now support the project via the open collective:
 > https://opencollective.com/nodemon/donate
> parcel-bundler@1.12.4 postinstall C:\cypress-example-recipes\node_modules\parcel-bundler
> node -e "console.log('\u001b[35m\u001b[1mLove Parcel? You can now donate to our open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/parcel/donate\u001b[0m')"
Love Parcel? You can now donate to our open collective:
 > https://opencollective.com/parcel/donate
> styled-components@4.4.0 postinstall C:\cypress-example-recipes\node_modules\styled-components
> node ./scripts/postinstall.js || exit 0
Use styled-components at work? Consider supporting our development efforts at https://opencollective.com/styled-components
> webpack-cli@3.3.3 postinstall C:\cypress-example-recipes\node_modules\webpack-cli
> node ./bin/opencollective.js
                            Thanks for using Webpack!
                 Please consider donating to our Open Collective
                        to help us maintain this package.
                 Donate: https://opencollective.com/webpack/donate
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\react-scripts\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 3597 packages from 1615 contributors and audited 3680 packages in 940.515s
55 packages are looking for funding
  run `npm fund` for details
found 40231 vulnerabilities (40138 low, 48 moderate, 44 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

安装成功后，目录结构如下所示：

2.png

cypress-esample-recipes测试项目的examples文件夹内包括了很多子项目，每个子项目都相对独立，有自己的前后端实现，例如进入C:\cypress-example-recipes\examples\logging-in__html-web-forms路径下，然后运行命令npm start启动这个子项目

C:\cypress-example-recipes\examples\logging-in__html-web-forms>npm start
> logging-in-html-web-form@1.0.0 start C:\cypress-example-recipes\examples\logging-in__html-web-forms
> node server.js --port 7077

使用浏览器访问http://localhost:7077，页面如下所示

1.png

测试实例

Cypress安装完成后即可直接创建测试用例用于测试，假设测试如下几个功能点：

  • 访问http://localhost:7077

  • 输入用户名密码，单击登陆按钮

  • 如果用户名和密码正确则登陆成功，否则登陆失败

Cypress安装完成后，会自动生成一个路径，即C:\cypress\node_modules\.bin\cypress\integration，它是Cypress默认存放测试用例的根目录，任何创建在此路径下的文件将被当作测试用例

在该路径下创建一个js文件，例如testLogin.js，然后将如下代码写入

// testLogin.js
///<reference types="cypress"/>
describe('登陆', function(){
// 此用户名密码为本地服务器默认
const username = 'jane.lane'
const password = 'password123'
context('HTML表单登陆测试', function(){
it('登陆成功, 跳转到dashboard页', function(){
cy.visit('http://localhost:7077/login')
cy.get('input[name=username]').type(username)
cy.get('input[name=password]').type(password)
cy.get('form').submit()
// 断言，验证登陆成功则跳转到dashboard页面
// 断言，验证用户名存在
cy.url().should('include', '/dashboard')
cy.get('h1').should('contain', 'jane.lane')
})
})
})

然后启动Cypress

3.png

单击窗口中刚刚创建的js文件，Cypress便会启动测试并执行该js文件完成测试任务，执行完成后，如下图所示

4.png

Cypress强大的Debug能力

5.png

如图红色圈出的部分，每一步都可以点击查看详细信息，具体情况如下：

  • 每个命令(Command)均有快照且支持回放，并支持在不同的操作命令快照之间切换，方便开发者了解整个测试的上下文

  • 支持查看测试运行时发生的特殊页面事件(例如网络请求)，Cypress会记录测试运行时发生的特殊页面事件，包括网络XHR请求、URL哈希更改、页面加载、表格提交，如下图所示表单提交请求

6.png

  • Console输出每个命令(Command)的详细信息

  • 暂停命令并单布/恢复执行，在调试测试代码时，Cypress提供了命令来暂停即cy.pause(),比如将它添加到js文件，位于cy.get('form').submit()之前，再次执行代码，如图所示结果

7.png

8.png

于此同时，在页面的上方也多出来Paused标记和Resume和Next:'get'按钮

9.png

此时如果点击Resume按钮，测试将恢复运行直至结束或下一次暂停，如果选择Next:'get'按钮，则测试会单步执行

还可以使用cy.debug()命令实现暂停，写法稍微不同

10.png

再次执行测试，发现直接执行完毕到了最后，但是打开F12，然后点击Run All Tests按钮

11.png

便会进入如页面所示的Debug模式

12.png

在Paused in debugger后有两个按钮，一个是Resume Script Execution(F8),单击此按钮测试将恢复运行直至结束或下一个暂停或下一个debug命令，第二个按钮是Step Over next function call(F10),单击此按钮测试会跳转到下一个函数调用里

当找到隐藏或多个元素时候可视化，修改一下代码，当username定位到不止一个页面元素，然后再次执行测试

13.png

找到了两个页面元素，因此执行失败，可以非常直观的看到

14.png

在一系列测试执行后，还可以看到命令行窗口的日志

15.png


作者：Davieyang.D.Y

原文链接：https://blog.csdn.net/dawei_yang000000/article/details/110097492#comments_13983957

  • 【留下美好印记】
    赞赏支持
登录 后发表评论
+ 关注

热门文章

    最新讲堂

      • 推荐阅读
      • 换一换
          • 比亚迪：今年拟在新加坡、菲律宾新增数十家销售网点——软件测试圈
            02-01
            　　据日经亚洲今日报道，比亚迪新加坡和菲律宾市场总经理 James Ng 透露，公司计划今年在这两个市场新增数十家销售网点。　　具体来看，比亚迪在菲律宾已拥有超过 10 家经销商，公司计划年内在当地再增加 20 多家经销商，为当地消费者提供更方便的购车、售后服务。比亚迪在新加坡则拥有 7 家销售网点，今年计划在当地再增加 2-3 家。　　比亚迪在去年 8 月进军菲律宾市场，菲律宾企业 Ayala 旗下汽车部门 AC Motors 通过其销售网络负责多款比亚迪电动车型在菲律宾的销售、维保。引入当地的车型包括汉 EV、唐 EV、海豚，对应国内元 PLUS 的车型 ATTO 3 于同年晚些时候引入。...
            信息资讯
            0 0 366
            分享
          • Spring-Intergration简介与实例——软件测试圈
            08-30
            　　一、Spring-Intergration 简介　　Spring-Intergration提供Spring编程模型的拓展，以支持EIP（nterprise Integration Patterns，企业集成模式）。在基于Spring的应用程序中支持轻量级的消息传递，支持通过适配器（Adapters）与外部系统集成。Spring-Intergration有以下目标：　　·提供一个简单的模型来实现复杂的企业集成解决方案　　·在基于Spring的应用程序中提供异步、消息驱动的行为　　·激励Spring的现有用户直观、增量的使用Spring-Intergration　　二、Spring-Inter...
            其它
            0 0 837
            分享
          • 什么样的接口不适合做自动化？
            01-19
            读者提问：什么样的接口不适合做自动化测试呢 ？阿常回答：这个问题我反过来回答，什么样的接口适合做自动化测试呢 ？考虑投入产出比。从长远看，实现自动化能否给我们带来持续的效益。在我们公司的做法，选取核心业务流程，实现核心业务正常、异常及反向流程的接口自动化。今天一位读者朋友阿花问阿常这个问题：阿花在测试团队中负责接口自动化，她的疑问：接口自动化由她一个人负责，所有的接口难道都要做自动化，接口自动化是万能的吗？自动化测试如何创造业务价值？接口自动化不是万能的，它并不能比手工测试发现更多的bug，在我们做接口自动化之前，先考虑我们为什么做接口自动化，想解决什么问题。接口自动化的适...
            测试管理停止摆烂
            0 0 940
            分享
          • TikTok的10亿美元创作者基金即将关闭——软件测试圈
            11-07
            　　TikTok 今天告诉用户，TikTok 的 10 亿美元创作者基金将于 2023 年 12 月 16 日终止运作。TikTok 发言人玛丽亚-荣格（Maria Jung）说，美国、英国、德国和法国的创作者将不能再通过这一基金为自己的内容转化收入，不过意大利和西班牙的 TikTok 用户不受此影响。　　创作者基金最初于 2020 年推出，公司承诺在三年内向制作应用程序病毒内容的用户支付 10 亿美元。创作者的报酬基于浏览量和其他参与度指标，一路走来，平台网红和其他内容创作者都注意到，该基金的报酬很低，有时几百万的浏览量才得到几美元的报酬，这使得他们无法仅靠创作者基金谋生。TikTok 没有...
            信息资讯
            0 0 527
            分享
          • 一文搞懂SQL盲注原理
            05-23
            测试同学在做安全测试时，相信多少都会遇到SQL注入与盲注的漏洞，那么今天我们就来分享下SQL注入与盲注的相关知识，希望对大家有所启发。一、SQL盲注的定义SQL注入，简单理解，也就是将用户输的的内容当代码执行了，应用程序没有对用户输入的内容进行判断和过滤，攻击者通过将构造的恶意SQL语句作为查询参数，使其在后台服务器上解析执行，最终导致数据库信息被篡改或泄露，这个过程就成为SQL注入。盲注，其实是SQL注入的一种， 攻击者在没有获得任何错误回显消息的情况下，通过使用一系列的布尔型或时间型查询，逐渐推断出数据库中的敏感信息。 简单理解下，盲注的表现就是，同一个接口，同一个参数，传不符合常规的值，...
            其它接口测试
            0 1 2223
            分享
      • 51testing软件测试圈微信