专栏首页从零开始学自动化测试Cypress web自动化37-cy.wrap() 操作 iframe 上的元素

Cypress web自动化37-cy.wrap() 操作 iframe 上的元素

前言

iframe 是一种常见的 web 页面上遇到的场景,像有些网站的登录就是放到 iframe 里面的。 cypress 如何处理 iframe 上的元素呢,cypress 目前没有提供类似 selenium 上的 switch_to.frame 这种直接切换的方法,得自己封装一个操作方法。

iframe场景

打开 https://www.126.com/ 首页,登录的输入框就是嵌套在iframe里面

/**
 * Created by dell on 2020/6/9.
 * 作者:上海-悠悠 交流QQ群:939110556
 */

describe('iframe login',function(){

    // 定义getIframeBody方法
    const getIframeBody = () => {
              // 尝试获取 iframe > document > body 
              // 直到 body element 不为空
              return cy
                  .get('iframe')
                  .its('0.contentDocument.body').should('not.be.empty')
                  // 包装body DOM元素以允许链接更多Cypress 命令, 如 ".find(...)"
                  // warp命令使用文档地址 https://on.cypress.io/wrap
                  .then(cy.wrap)
             }

    before( function() {
        cy.visit("https://www.126.com/")
    })

    it("iframe type", function() {
        // 定位输入框,输入账号
        getIframeBody().find('[name="email"]').type("123@qq.com")
        // 输入密码
        getIframeBody().find('[name="password"]').type("123456")
        // 点登陆按钮
        getIframeBody().find('#dologin').click()

   })
})

运行结果

注意:iframe 上的操作无法使用快照功能哦

自定义命令

我们可能会在多个测试用例访问iframe的元素,因此在 cypress 自定义命令 cypress/support/index.js 的文件里面添加一个命令。 自定义命令将自动在所有用例文件中使用,因为支持文件与每个用例文件串联在一起。

// cypress/support/index.js

/**
 * Created by dell on 2020/6/9.
 * 作者:上海-悠悠 交流QQ群:939110556
 */

Cypress.Commands.add('getIframeBody', () => {
  // 定义getIframeBody方法
  // and retry until the body element is not empty
  return cy
          .get('iframe')
           .its('0.contentDocument.body').should('not.be.empty')
          // 包装body DOM元素以允许链接更多Cypress 命令, 如 ".find(...)"
          // warp命令使用文档地址 https://on.cypress.io/wrap
          .then(cy.wrap)
})

用例文件内容 cypress/integration/iframe_login.js

// cypress/integration/iframe_login.js

/**
 * Created by dell on 2020/6/9.
 * 作者:上海-悠悠 交流QQ群:939110556
 */

describe('iframe login 126mail',function(){

    before( function() {
        cy.visit("https://www.126.com/")
    })

    it("login mail", function() {
        // 定位输入框,输入账号
        cy.getIframeBody()
            .find('[name="email"]').type("123@qq.com")
            .should('have.value', '123@qq.com')
        // 输入密码
        cy.getIframeBody()
            .find('[name="password"]').type("123456")
            .should('have.value', '123456')
        // 点登陆按钮
        cy.getIframeBody()
            .find('#dologin').click()

   })
})

运行结果

禁用log

我们可以通过禁用内部命令的日志记录来隐藏代码内部每个步骤的细节。

// cypress/support/index.js

/**
 * Created by dell on 2020/6/9.
 * 作者:上海-悠悠 交流QQ群:939110556
 */


Cypress.Commands.add('getIframeBody', () => {
  // 定义getIframeBody方法
  // and retry until the body element is not empty
  return cy
          .get('iframe', { log: false })
          .its('0.contentDocument.body', { log: false }).should('not.be.empty')
          .then((body) => cy.wrap(body, { log: false }))
})

这样重新运行,日志就会简洁一些了

关于cypress 处理iframe 相关资料https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/ warp命令使用文档地址 https://on.cypress.io/wrap

本文分享自微信公众号 - 从零开始学自动化测试(yoyoketang),作者:上海悠悠

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Selenium2+python自动化45-18种定位方法(find_elements)

    前言 江湖传言,武林中流传八种定位,其中xpath是宝刀屠龙,css是倚天剑。 除了这八种,其实还有十种定位方法,眼看就快失传了,今天小编让失传已久的定位方法重...

    上海-悠悠
  • python测试开发django-20.添加创建时间DateTimeField

    我们在admin后台发布一篇文章的时候,一般会有创建时间和最后更新时间这2个字段,创建时间就是第一次编辑文章的时候自动添加的,最后更新时间就是每次修改文章的内容...

    上海-悠悠
  • python接口自动化26-发xml格式post请求

    post请求相对于get请求多一个body部分,body部分常见的数据类型有以下四种(注意是常见的,并不是只有4种)

    上海-悠悠
  • HDFS和MR的配置和使用

    ①在$HADOOP_HOME/etc/hadoop/core-site.xml文件

    爱学习的孙小白
  • 手把手教你在腾讯云上搭建hadoop3.x伪集群的方法

    /home/centos/software/hadoop-3.1.3.tar.gz

    砸漏
  • 搭建Hadoop3集群

    强烈建议再搭建hadoop集群之前体验一下单机模式和伪分布式模式的搭建过程,可以参考以下链接:

    职场亮哥
  • Yarn 的日志聚集功能配置使用

    需要 hadoop 的安装目录/etc/hadoop/yarn-site.xml 中进行配置

    梅花
  • YARN之label调度在EMR中的应用

    在腾讯云EMR的用户场景使用当中,有部分用户要求希望他们能在任务高峰期,对集群进行扩容,利用云端的弹性计算资源,为集群扩展计算能力,并且在集群相对空闲的情况下,...

    shangwen_
  • 原 Spark On Yarn完全分布式搭

    云飞扬
  • 一文读懂Hadoop、HBase、Hive、Spark分布式系统架构

    机器学习、数据挖掘等各种大数据处理都离不开各种开源分布式系统,hadoop用户分布式存储和map-reduce计算,spark用于分布式机器学习,hive是分布...

    用户1257215

扫码关注云+社区

领取腾讯云代金券