Cypress 里的 ensureAttached 检测原理
下面是我用 Cypress 开发的端到端测试。click 调用里的 force:true 参数是我后来加上去的。
如果不添加,会遇到错误消息:
在方法 $Cy.ensureAttached 里面跑出来的,这个方法位于 runner/cypress_runner.js 下面。
我想知道这个 cypress_runner.js 的本地位置:
本地请求的 url:http://localhost:4200/__cypress/runner/cypress_runner.js
远端端口:59701?
重定向到 __?
这个文件有20万行代码:
怀疑这个庞大的文件是 merge 起来的:
这里能看到所有的 ensure 检查:
断点触发时,从 callstack 是很难发现到底是哪一行 e2e spec 代码触发的这个 ensureAttached 检查:
但是可以通过输入参数里指定的 select,到 e2e 代码里搜索:
cx-hamburger-menu [aria-label=“Menu”]
通过参数说明,点击了 cx-hamburge 的 button 元素:
很容易就找到了:
具体逻辑就是,检查元素的 ownerDocument 属性:
这是 Web API 里 Node 元素的标准属性,见官网。
接口的只读 ownerDocument 属性: 返回节点的顶级文档对象。
使用例子:
// Given a node "p", get the top-level HTML
// child of the document objectconst d = p.ownerDocument;
const html = d.documentElement;
然后再判断这个 document 对象,是否有 activeWindow:
return nodes.every(node => {const doc = _document__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"].getDocumentFromElement(node);if (!_document__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"].hasActiveWindow(doc)) {return false;}return node.isConnected;});
};
这里 Cypress 还针对 firefox 进行了不同的处理:
因为在 firefox 里,即使 detached document, 也还保留了一个指向 window 的 reference.
const hasActiveWindow = doc => {// in firefox, detached documents still have a reference to their window// but document.location is nullif (Cypress.isBrowser('firefox') && !doc.location) {return false;}return !!doc.defaultView;
};
defaultView 是 Web API 另一个标准的接口。
In browsers, document.defaultView returns the window object associated with a document, or null if none is available.
这个也是只读属性,返回 document 关联的 window 对象。如果元素所在的 document 对象已经 detach from DOM,则 defaultView 指向 null.
node.isConnected:
接口 的只读isConnected属性 返回一个布尔值,指示节点是否(直接或间接)连接到上下文对象,例如Document(普通 DOM 情况下的对象),或ShadowRoot 影子 DOM 情况下的对象。
更多Jerry的原创文章,尽在:“汪子熙”:
Cypress 里的 ensureAttached 检测原理相关推荐
- Harris角点检测原理详解(转载)
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/lwzkiller/article/details/54633670 关于角点的应用在图像处理上比较广 ...
- 51单片机的键盘检测原理
一.独立键盘检测 1.按键的检测原理 单片机的I/O口既可以作为输出也可以作为输入使用,检测按键时用的是输入功能.把按键的一端接地,另一端与单片机的某个I/O口相连,开始时先给该I/O口赋一个高电平, ...
- 毫米波雷达心率、呼吸检测原理 TI mmWave Labs —— Driver Vital Signs
毫米波雷达心率.呼吸检测原理 1. 概述 普通成年人的心跳.呼吸的位移.频率参数如下: Frome Front Frome Back Vital Signs Frequency Amplitude A ...
- xposed检测原理分析 -案例某付宝、某音
一. 1.支付宝的Xposed hook 检测原理: Xposed Hook 框架将Hook信息存储在fieldCache, methodCache,constructorCache 中, 利用jav ...
- Harris角点检测原理详解
Harris角点特征提取算法流程: Harris角点检测的缺点:不能应对尺度变换 关于角点的应用在图像处理上比较广泛,如图像匹配(FPM特征点匹配).相机标定等.网上也有很多博客对Harris角点检测 ...
- AdaBoost人脸检测原理
AdaBoost人脸检测原理 FROM:http://blog.sina.com.cn/s/blog_4e6680090100d2se.html 对人脸检测的研究最初可以追溯到 20 世纪 70 年代 ...
- music算法原理_大话FMCW雷达之区域检测原理
大话FMCW雷达之区域检测原理mp.weixin.qq.com 除了在我们熟知的汽车上,FMCW雷达在我们的日常中,还有许多地方可以应用到. 今天就先讲一个最简单的应用-检测障碍.比如开车门的时候可 ...
- CV之Face Detection:Face Detection人脸检测原理及其常见分类技术
CV之Face Detection:Face Detection人脸检测原理及其常见分类技术 目录 人脸探测的原理 线性分类器 影像金字塔 滑动窗格 人脸探测的原理 将图片转为HOG图片以后,结合其他 ...
- [html] 说说html5手势检测原理是什么?
[html] 说说html5手势检测原理是什么? 手势检测的关键是用 touchstart,touchmove,touchend 三个事件对手势进行分解 个人简介 我是歌谣,欢迎和大家一起交流前后端知 ...
最新文章
- 2018年人工智能全景图与发展趋势分析
- 消息系统kafka原理解析
- PaddlePaddle顶会论文复现 | ECO视频动作识别网络
- 使用 ASP.NET Core Razor 页、Web API 和实体框架进行分页和排序
- 【开发工具】之source insight 4常用设置
- (MYSQL) Unknown table 'a' in MULTI DELETE的解决办法
- python qt刷新_Python Qt.SizeFDiagCursor方法代码示例
- C++ 把引用作为函数返回值
- 第十二届蓝桥杯模拟赛Python组(第三期)
- vue请求接口时报警告Provisional headers are shown
- SpringMVC在返回JSON数据时出现406错误解决方案
- Cisco Packet Tracer安装
- 均匀分布的期望和方差的推导_均匀分布的数学期望与方差 常见分布的数学期望和方差...
- 苹果手机怎么看生产日期?参考方法在这!
- [Netty]pipeline(二)
- 【Day2.3】华欣火车站,与火车失之交臂
- 沐神-动手学深度学习-引言
- 让 AirDrop 支持有线传输,甚至让不支持 AirDrop 的 Mac 也能使用该功能 黑苹果也可以的哦
- python图片保存jpg、show变成bmp_利用python实现.dcm格式图像转为.jpg格式
- 十大优秀免费空间排行榜-基于稳定实用可靠因素分析
热门文章
- eclipse环境lsp4e --- org.eclipse.lsp4e
- linux的mutex状态查询命令,如何断言std :: mutex是否已锁定?
- Apache OpenOffice 下载量突破一亿次
- 线程池源码分析-FutureTask
- 2015年度个人总结和计划
- PowerShell 2.0 实践(四)管理Windows进程
- 电脑键盘上各个键的作用!!!
- WEB数据透视表Pivot Table
- 转 JavaScript传值及.Net传值方式总结
- 【Asp.net】Cookie对象