Cypress-this element is detached from the DOM报错

已于 2023-01-11 10:08:20 修改
阅读量236 收藏
点赞数
分类专栏： Cypress 文章标签： 测试工具 测试用例 javascript Powered by 金山文档
于 2023-01-11 09:55:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/francyshisan/article/details/128639541
版权
在使用Cypress执行自动化测试时遇到了BecausethiselementisdetachedfromtheDOM的错误。问题源于页面元素在查找时还未渲染到DOM中，由于研发代码的异步操作。解决方案是添加`cy.wait()`来等待元素出现，或者增加`cy.visit()`的超时时间，确保页面完全加载。这样能确保元素被正确找到并执行点击操作。
摘要由CSDN通过智能技术生成

遇到的现象

今天在执行Cypress时，遇到报错“Because this element is detached from the DOM”

看报错信息里给出的为什么发生的原因：Your JS framework re-rendered ......，见截图里，定位事没问题了，该元素是存在的，经研究发现是由于在执行get该元素时，找不到，当前页面并没有渲染该操作，为什么？？我之前很不理解，我进入该页面是先执行了，页面内容的显示校验，再去执行该按钮的点击的，为什么还加载不出？？

后面发现由于研发代码这一步是异步的，我校验的页面内的文案描述非异步导致；

解决办法

  • 在执行button元素查找时先执行cy.wait()

//步骤前增加等待
cy.wait(3000)
cy.get('button').click()

  • 修改默认超时时间

cy.visit('具体的url', { timeout: 5000 })

132AnAnAn
关注
专栏目录
cypress-shadow-dom:扩展具有阴影DOM支持的Cypress命令
05-27
柏树荫穹顶（已弃用） 扩展具有阴影DOM支持的...npm install --save-dev cypress-shadow-dom 用法 cypress-shadow-dom扩展了Cypress的cy命令。 将此行添加到项目的cypress/support/commands.js ： import 'cypre
cypress-plugin-snapshots:Cypress.io中用于快照测试的插件
05-02
npm i cypress-plugin-snapshots -S 文字快照的用法 describe ( 'data test' , ( ) => { it ( 'toMatchSnapshot - JSON' , ( ) => { return cy . request ( 'data.json' ) . its ( 'body' ) . toMatchSnapshot ...
python 报错either the element is no longer attached to the DOM, it is not in the current frame context
supramolecular的博客
08-14 3665
time.sleep(3) 需要等待页面更新即可
[Cypress] Interact with Hidden Elements in a Cypress Test
weixin_34307464的博客
07-04 86
We often only show UI elements as a result of some user interaction. Cypress detects visibility and by default won’t allow your test to interact with an element that isn’t visible. In this lesson, we’...
this.$refs获取不到dom的可能原因及方法解决
热门推荐
北京欢迎您
12-27 4万+
背景 搞饿了么高仿APP时，使用this.$refs.wrapper.getElementsByClassName('food-list') 时获取不到dom节点 正常能获取到应该是如下图： 然后我又用了网上的方法: this.$refs.foodList （foodList是li的dom节点） 结果还是刷新页面时获取不到dom 然后我对比了网友访的饿了么的源码，下面是网友的 下面是我的： ...
element ui字段_ui备忘单下拉字段
weixin_26715991的博客
09-04 1477
element ui字段 重点 (Top highlight)Dropdowns get a lot of flak from the UI world – and if we are honest, it’s not without reason. Done badly, they become cumbersome, overwhelming, and ugly. But that’s not...
npm install cypress --save-dev报错 cb() never called!
qq_32312323的博客
07-30 389
这里写自定义目录标题新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markd
cypress-image-snapshot 的安装和使用
azhang190426的博客
06-17 1073
1. 通过npm 安装 ： npm install --save-dev cypress-image-snapshot 报错了： npm ERR! While resolving: mid_test_cypress@1.0.0 npm ERR! Found: cypress@7.5.0 npm ERR! node_modules/cypress npm ERR! dev cypress@"^7.4.0" from the root project npm ERR! npm ERR! Could no.
cypress-cucumber-preprocessor
weixin_44983082的博客
07-15 765
cypress-cucumber-preprocessor是Cypress对于cucumber功能进行增强的插件 安装 安装插件库：npm install --save-dev cypress-cucumber-preprocessor 修改插件配置文件 cypress/plugins/index.js const cucumber = require('cypress-cucumber-preprocessor').default module.exports = (on, config) =&gt
cypress报错this.skip is not a function
weixin_41923687的博客
11-26 515
cypress学习this.skip时，发现报错：“this.skip is not a function”。 搜了一下原来是Mocha不鼓励使用箭头功能 const flag =1; describe('third level1', function (){ it('firth level1', () => { if (flag === 1) this.skip();
Cypress系列（93）- Cypress.dom 命令详解
qq_33801641的博客
11-25 992
如果想从头学起Cypress，可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 作用 与 DOM 元素相关的 helper 方法的集合 重点 实际上Cypress.dom可以链接几十种方法但并不会全部讲解 这些方法几乎在每个内置命令中都由 Cypress 在内部使用 阅读源码，查看所有方法：https:...
cypress-allure-plugin:赛普拉斯插件可在测试中使用诱人的报告人api
05-13
yarn add -D @shelex/cypress-allure-plugin 使用npm： npm i -D @shelex/cypress-allure-plugin 设置 在cypress/plugins/index.js连接插件。 考虑到赛普拉斯在第一次初始化时会使用module.exports生成插件文件，...
cypress-parallel-specs-locally:在本地并行执行 Cypress 规范的脚本
05-29
cypress-parallel-specs-locally 在本地并行执行 Cypress 规范的脚本： runner_v1 是一个带有递归的承诺池 - runner_v2 是一个基于事件的，带有状态 - ，用于节点 12+ Runner v2 尝试解决多个 Cypress xvfb 实例...
cypress-localstorage-commands：使用localStorage方法扩展Cypress的cy命令。 允许在两次测试之间保留localStorage
02-06
用localStorage方法扩展Cypress的cy命令。 允许在测试之间保留localStorage并禁用localStorage。 问题所在 您想在赛普拉斯测试之间保留localStorage。 您要禁用localStorage来检查错误处理。 这个解决方案 该解决...
Java笔记Day42：初入六六村！（springMVC前后端不同数据类型传值）
weixin_51721783的博客
10-12 392
url链接能看到用params。Content-Type 为 application/x-www-form-urlencoded或form-data 用data。Content-Type 为 application/json，用json。
单元测试不加载主方法中application.yml配置文件的问题
最新发布
politeboy的博客
10-16 280
将test/resources目录下的yml文件改名为applicaiton-test.yml文件 ，并在测试方法上使用注解@ActiveProfiles(“test”) ，这个“test”就是application-test.yml文件 -后面的字符。因为test/resources/名称也是application.yml，我理解同名文档替换掉了src/main/resources/application.yml导致没有加载进来。
Git:LF will be replaced by CRLF、pytest PermissionError以及Git应用中的一些问题解决及一些使用技巧
本博客记录了从2014年以来在工作学习中遇到的技术问题、解决方法以及部分个人人生经历、经验等内容。
10-12 1634
偶然git add在进行代码提交的时候碰到警告warning: LF will be replaced by CRLF in ***file，原因是编辑的代码内容中存在符号转义问题，windows中的换行符为 CRLF， 而在linux下的换行符为LF，所以在执行add . 时，git发现改动文件中引入了LF会发出警告你哪些文件不是纯CRLF文件，但git不会自动修改工作区的文件，而是对暂存区进行修改。git log可以列出历史的提交列表，如果想快速查看最近的变动内容，可以使用git log -p。
【springboot入门-mvc常用注解使用方式及原理】
lixiaoyi01的博客
10-13 681
在ServletInvocableHandlerMethod的invokeAndHandle方法中，会调用getMethodArgumentValues方法来获取参数值，这个方法会遍历所有的参数解析器，使用它们来解析参数。在invokeHandlerMethod方法中，会遍历所有的参数解析器，寻找能够解析当前参数的解析器，并将其缓存。然后，通过参数解析器将需要的参数从请求中获取出来，并进行类型转换和数据绑定。在这个方法中，resolvers.resolveArgument会调用具体的参数解析器来解析参数。
cy.type() failed because this element is not visible
06-06
如果 `cy.type()` 命令失败并显示 "this element is not visible"（此元素不可见）错误，通常是因为该元素不在页面上可见或被其他元素遮挡。 在 Cypress 中，如果元素不可见（如 `display: none` 或 `visibility: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值