51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

测试开发精英班,通向高级软件测试工程师【周活动】 找茬--心里圈的故事 !【长期招募】博为峰网校招聘兼职讲师!横扫BAT,Python全栈测试开发技能大全
【106期】:如何树立正确使用Python做开发的习惯 【征稿】提交你的测试成绩单! 【专题】用尽一切办法只为让你学好用例 自学软件测试那点事
查看: 396|回复: 0

强大的全新 Web UI 测试框架 Cypress - Cypress 处理 iframe

[复制链接]

该用户从未签到

发表于 2019-4-16 14:15:40 | 显示全部楼层 |阅读模式
iframe是一种常见的web页面展示方式,比如斗鱼的登录框就是一个iframe实现的,下面示例Cypress如何处理嵌套iframe的元素,因为想像操作一般元素的用法去操作iframe里面的元素,一步到位是会报错的(找不到元素)。

首先写一个示例web页面
比如我们这里是用golang/gin框架随便实现的一个页面,很简单,大概html代码如下
  1. index.tmpl

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>iframe测试</title>
  7. </head>
  8. <body>
  9. <iframe id="iframe1" src="http://www.runoob.com">
  10. </iframe>
  11. <p>
  12.     <iframe name="iframe2name" id="iframe2" src="/login" frameborder="0" align="left" width="800" height="800" scrolling="no"></iframe>
  13. </p>
  14. <span>这里是正文................</span>
  15. </body>
  16. </html>
  17. login.tmpl
  18. <!DOCTYPE html>
  19. <html>
  20. <head>
  21.     <meta charset="utf-8">
  22.     <title>登录页</title>
  23. </head>
  24. <body>
  25.     <form>
  26.         <input id="login_input" type="text" placeholder="登录页输入框">
  27.     </form>
  28.     <iframe id="innerIframe" src="/register" width="200" height="200">

  29.     </iframe>
  30. </body>
  31. </html>

  32. register.tmpl

  33. <!DOCTYPE html>
  34. <html>
  35. <head>
  36.     <meta charset="utf-8">
  37.     <title>登录页</title>
  38. </head>
  39. <body>
  40. <form>
  41.     <input id="register_input" type="text" placeholder="注册页输入框">
  42. </form>
  43. </body>
  44. </html>
复制代码


它大概长这样:


我们的目标是操作最里层的innerIframe。
整个页面的树形结构大概如下:

注意:运行调试这种本地起来的web server,需要在Cypress的plugins/index.js里添加如下代码,否则cypress无法调试你的应用,具体问题详见描述截止3.1.5版本的Cypress已经解决了该问题,无需再添加如下代码,Cypress<3.1.5的版本请在Cypress的plugins/index.js添加如下配置:
  1. module.exports = (on) => {
  2.   on('before:browser:launch', (browser = {}, args) => {
  3.     if (browser.name === 'chrome') {
  4.       // ^ make sure this is your browser name, you may
  5.       // be using 'canary' or 'chromium' for example, so change it to match!
  6.       args.push('--proxy-bypass-list=<-loopback>')
  7.       return args
  8.     }
  9.   })
  10. }
复制代码


测试实现代码

  1. describe("IframeTest", function() {
  2.   it.only("嵌套Iframe测试", function() {
  3.     cy.visit("/iframeTest");
  4.     cy.get("#iframe2", { timeout: 20000 })
  5.       // 先判断最外层topIframe的存在
  6.       .should($topIframe => {
  7.         expect($topIframe.contents().find("#innerIframe")).to.exist;
  8.       })
  9.       // 再找嵌套的innerIframe
  10.       .then($topIframe => {
  11.         return cy.wrap($topIframe.contents().find("#innerIframe"));
  12.       })
  13.        // 找我们需要的元素
  14.       .then($innerIframe => {
  15.         return cy.wrap($innerIframe.contents().find("#register_input"));
  16.       })
  17.       // 对元素的处理
  18.       .then($expectElementLocator => {
  19.         cy.wrap($expectElementLocator).type("TTT");
  20.       });
  21.   });
  22. });
复制代码


效果


注:截止目前为止,这个问题官方还没有完美解决,这个方案和github上的这个issue都是workround(笔者试了下该issue下paulfalgout作者的方案,其实不好用,你们试试就知道了,在某些条件下会持续很久都不进行下一步动作),希望官网早日解决这个常见情况下的页面操作,也希望更多高手参与进来,找到一个更加完美的方法!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?(注-册)加入51Testing

x
回复

使用道具 举报

本版积分规则

关闭

站长推荐上一条 /2 下一条

小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

GMT+8, 2019-9-16 08:31 , Processed in 0.066620 second(s), 27 queries .

Powered by Discuz! X3.2

© 2001-2019 Comsenz Inc.

快速回复 返回顶部 返回列表