zoukankan      html  css  js  c++  java
  • Cypress web自动化27-Debugging调试你的代码

    前言

    在写脚本的过程中,有时候会遇到一些问题需要慢慢调试找出原因,Cypress 提供了调试的方法,方便我们快速定位到问题

    debugger 调试器

    你的Cypress测试代码运行在与应用程序相同的运行循环中.这意味着你可以访问页面上运行的代码, 以及浏览器为你提供的东西, 比如document, window等等, 当然也包括调试器.

    基于这些陈述, 你可能想在测试中添加一个 debugger 调试器, 就像这样:

    
    it('let me debug like a fiend', function() {
      cy.visit('https://www.cnblogs.com/yoyoketang/')
    
      cy.get('#blog_nav_sitehome')
    
      debugger // Doesn't work
    })
    

    但是上面的代码并不会运行。Cypress 的文档里面介绍,cy命令是以队列的形式添加到列表里,最后才执行的。
    debugger 将在 cy.visit() and cy.get() 之前执行,如下图。

    我们可以使用 .then()在执行期间进入 Cypress 命令,并在适当的时间添加调试器

    it('let me debug when the after the command executes', function () {
      cy.visit('https://www.cnblogs.com/yoyoketang/')
    
      cy.get('#blog_nav_sitehome')
        .then(($selectedElement) => {
          // Debugger is hit after the cy.visit
          // and cy.get command have completed
          debugger
        })
    })
    

    这样就可以先运行代码,在 debugger 位置暂停

    上面的代码整个工作流程如下

    • cy.visit()访问页面,Cypress等待加载
    • 查询该元素,如果没有立即找到它,Cypress会自动等待并重试一会儿。
    • 将执行传递给.then()的函数,并将找到的元素传递给它。
    • 在.then()函数的上下文中,调用 debugger 调试器,停止浏览器并调用 Developer Tools 的焦点。
    • 检查应用程序的状态,执行 debugger

    使用 .debug()

    Cypress 通过了一个 .debug() 方法,可以直接调用,更省事!

    it('let me debug like a fiend', function() {
      cy.visit('https://www.cnblogs.com/yoyoketang/')
    
      cy.get('#blog_nav_sitehome')
          .debug()
    })
    

    此时 cy.get() 会生成一个 subject 变量,在 Developer Tools 里面可以直接使用 console 调试

    使用 .debug() 快速检查任何(或多个)测试期间应用程序的部分。您可以将它附加到任何 Cypress 命令链上,以查看系统此时的状态。

    作者:上海-悠悠 交流QQ群:939110556
    原文blog: https://www.cnblogs.com/yoyoketang

  • 相关阅读:
    android 微信(5.3)聊天UI的布局思考
    android 屏幕适配
    不同Activity之间的动画切换
    Freemarker 进行字符串截取
    如何使带背景图片的Button按钮中的文字居中偏上显示
    关于在IE-8下 button的背景图片不能正确显示的问题
    android Xmpp+openfire 消息推送 :SASL authentication failed using mechanism DIGEST-MD5
    Android运行出现“java.io.IOException: 您的主机中的软件放弃了一个已建立的连接。”
    计算机网络
    Java基础-3
  • 原文地址:https://www.cnblogs.com/yoyoketang/p/12986509.html
Copyright © 2011-2022 走看看