问题总结,web自动化测试元素无法操作?shadowDOM节点元素解决......


前言

web自动化遇到shadowDOM你会操作吗?

之前在做web自动化的时候,发现页面上有些元素,在selenium中无法通过xpath来定位,各种原因找了半天都没找到解决方案,最后发现元素在一个叫做shadow-root的节点下面,如下所示:

请添加图片描述

问题:shadow-root是什么?为什么下面的节点在selenium无法通过xapth来定位?

web自动化测试:https://www.bilibili.com/video/BV1MS4y1W79K/

shadowDOM介绍

可以看成一个隐藏的DOM。它是一个独立的DOM树,具有自己的元素和样式,与原始文档DOM完全隔离。

ShadowDOM 必须附在一个HTML元素中,存放shadowDOM的元素,我们可以把它称为宿主元素。

在HTML5中有很多的标签样式都是通过shadowDOM来实现的。
比如:日期选择框,音频播放标签,视频播放标签都自带了样式;

这边以音频播放标签audio为例:在html文件中写入一个audio标签,页面上显示出来的内容就会出现一个音频播放器,如下图:

<audio src="file/123.mp3
  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据您的问题,您可能在开发React组件时遇到了这个问题。这个问题通常发生在您使用antd或类似UI库的Tree组件时,当您在Tree节点的checkbox上单击时,您需要更新组件的状态以显示checkbox是否选中。但是,当您在handleCheckChange方法中访问data.key时,data.key是undefined。 这是因为antd的Tree组件在触发handleCheckChange方法时,会将选中的节点作为参数传递给该方法,而不是该节点的key属性。因此,要获取当前节点的key属性,您可以通过以下方式进行: 1. 在Tree节点上添加一个onClick方法,该方法将节点的key属性作为参数传递给handleCheckChange方法。 ```javascript <Tree checkable onCheck={this.handleCheckChange} > {renderTreeNodes(treeData)} </Tree> function renderTreeNodes(data) { return data.map(item => { if (item.children) { return ( <TreeNode title={item.title} key={item.key} onClick={() => this.handleNodeClick(item.key)} > {renderTreeNodes(item.children)} </TreeNode> ); } return <TreeNode title={item.title} key={item.key} />; }); } handleNodeClick = (key) => { console.log(key); // call handleCheckChange method with the key this.handleCheckChange(key); } handleCheckChange = (checkedKeys) => { console.log(checkedKeys); // your logic to update the component state } ``` 2. 在handleCheckChange方法中,使用Tree组件的state来获取选中节点的key属性。 ```javascript handleCheckChange = (checkedKeys) => { const { checkedNodes } = this.tree.state; const selectedNode = checkedNodes.find(node => node.key === checkedKeys[0]); console.log(selectedNode.key); // your logic to update the component state } ``` 这两种方法都可以解决获取当前节点key属性的问题,您可以根据自己的需求选择其中一种。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值