首页 文章 问答 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

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

热门文章

    最新讲堂

      • 推荐阅读
      • 换一换
          • 与普遍看法相反，研究认为人工智能不会让你失业——软件测试圈
            12-27
            　　一项新的研究显示，工作经验对员工如何与人工智能互动有很大影响。拥有更多特定任务经验的员工从人工智能中获益更多，而资深员工则由于担心人工智能的不完善而不太可能信任人工智能。研究结果强调，在工作场所整合人工智能时，需要采取量身定制的策略，以加强人与人工智能的团队合作。　　新的研究揭示了人类与人工智能互动的复杂方面，凸显了一个令人惊讶的趋势：人工智能系统倾向于使初级员工受益，但原因却不尽如人意。　　发表在 INFORMS 期刊《管理科学》（Management Science）上的最新研究为企业领导者提供了关于工作经验对员工与人工智能互动的影响的宝贵见解。　　这项研究探讨了人类工作经验的两种主要...
            信息资讯
            0 0 437
            分享
          • 十个多线程并发编程面试题（附答案）——软件测试圈
            03-05
            1.说说你知道的创建线程的方式继承Thread类，重写run方法。实现Runnable接口，重写run方法。实现Callable接口，重写call方法。通过线程池创建线程。2.说说Runnable和Callable的区别Callable可以返回一个类型V，而Runnable不可以。Callable能够抛出checked exception,而Runnable不可以。Future和FutureTask留给你们！我放GitHub上了（uphe）3.说说通过线方程池创建线程的式Executors.newCachedThreadPool();创建一个可缓存线程池，如果线程池长度超过处理需要，可灵活回收...
            移动测试职业发展
            14 14 2531
            分享
          • 新人必看：测试过程中我们的反思
            11-20
            在我们的测试工作中，除了需要不断的学习新知识外，还有一个可能常常被我们忽视的工作，那就是反思。反思的重要性不言而喻，可以帮助我们总结过往的经验教训，可以帮助我们重新复盘过去工作中的得失，可以让我们通过曾经犯下的错误找到未来需要规避的问题，可以通过积累的经验获取后续工作中更高效的方法。那么问题来了，做测试的我们，该反思什么呢？在我们团队的日常工作中，每隔一段时间我们就会组织召开一次学习总结会。在这个会上，我们会去回顾过去一段时间工作中大家遇到的问题、学到的新知识、沉淀的经验和方法。在这个过程中，大家互相交流，互相碰撞，互相提问，互相弥补。通过这样的讨论学习，每个人都能感受到这些碰撞出的火花带来的...
            职业发展
            0 1 2262
            分享
          • 网站都变成灰色，有哪些方法可以快速实现？——软件测试圈
            12-06
            有些时候我们需要把网站页面变成黑白色或灰色，特别是对于一些需要悼念的日子，以及一些影响力很大的伟人逝世或纪念日的时候，都会让网站的全部网页变成灰色（黑白色），以表示我们对逝者或者英雄的缅怀和悼念。当大家看到全站的内容都变成了灰色，包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢？有人会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了，而且万一某个控件忘记加灰色样式了岂不是太突兀了。其实，解决方案很简单，只需要几行代码就能搞定了。通过参考资料，我总结出以下几个方法可以帮助我们达到目的：使这个网页的颜色变成灰色的最简...
            java
            0 0 1495
            分享
          • Jmeter之JSON提取器应用——软件测试圈
            01-28
                   在接口测试中有一个这样的场景：登录之后，需要进行昵称修改，怎么实现？       首先我们分别看下登录、昵称修改的接口说明：        以上业务中补充一点，昵称修改，还需要添加请求头Authorization传登录获取的token值。       分析：登录之后的响应结果中会返回用户id、token信息; 而更新昵称需要传参member_id、且需要请求头传token；也就是我们要想办法从“登录”的响应结果中...
            移动测试Jmeter
            14 14 1923
            分享
      • 51testing软件测试圈微信