el-popper el-cascader__dropdown级联选择器的selenium定位问题

在做用Python+Selenium做自动化的时候,碰到这种比较异类的选择框对于新手来说太难定位了,首页显示出来的那几个可以直接定位,但是后面的你滑动它才显示出来,不然就是被隐藏的,所以无法直接定位。
隐藏的级联选择器

我用了个笨办法就是,用try/except,虽然定位失败,但是脚本只是打印一个东西,还是继续往下走,然后你需要定位的元素就从隐藏状态变成显示状态了,这时候就能定位成功了。注意:但是用一次还不行,必须用两次才能定位成功,不知道咋回事,反正就是多一点代码,复制粘贴就可以了。
附上代码

driver.find_element(By.XPATH,'.//*[@placeholder="请选择所属区域"]').click()
    # 两次尝试点击最后一个行政区域,让最终需要的行政区域显示出来,使之成为可点击元素。
    try:
        # 点一下最后一个,让网页加载所有list显示出来
        driver.find_element(By.XPATH,'//span[contains(.,"三都水族自治县")]/preceding-sibling::*').click()
    except:
        print('-----------------------无用的分割线-----------------------')
    try:
        # 点一下最后一个,让网页加载所有list显示出来
        driver.find_element(By.XPATH,'//span[contains(.,"三都水族自治县")]/preceding-sibling::*').click()
    except:
        print('-----------------------无用的分割线-----------------------')
    # 点击区域
    driver.find_element(By.XPATH, '//span[contains(.,"惠水县")]/preceding-sibling::*').click()
<think>嗯,用户想了解如何从零开始实现一个Cascader级联选择器组件。我需要先回忆一下这类组件的常见功能结构。Cascader通常用于多层级数据的选择,比如省市区选择。用户可能需要知道如何构建交互、处理数据联动以及样式设计。 首先,应该考虑组件的数据结构。通常,级联选择器的数据是树形结构,每个节点可能有子节点。所以,数据模型需要支持递归遍历。接下来是交互部分,当用户选择一个选项后,如何展开下一级菜单。这里可能需要事件处理动态渲染子菜单。 然后,UI部分需要考虑如何展示多级菜单,可能需要使用绝对定位来浮动子菜单,并确保它们正确对齐。同时,处理点击外部区域关闭菜单的功能,这可能需要用到全局事件监听。 另外,用户可能希望组件支持多选,所以需要处理Checkbox的状态联动,比如选中父节点时自动选择所有子节点,或者部分选中状态。这部分逻辑比较复杂,需要考虑如何递归更新节点的选中状态。 还有,样式方面可能需要参考现有的UI库,比如Ant Design,用户提到可以复用它们的类名来保持样式一致。同时,动画效果如展开收起的过渡效果也需要考虑。 测试也是重要的一环,需要确保不同场景下的交互正确,比如动态加载数据、异步数据源的处理等。最后,封装组件为可复用的NPM包,编写文档示例代码,方便其他开发者使用。 总结一下,实现步骤可能包括:设计数据模型、处理用户交互、渲染多级菜单、状态管理、样式动画、测试与优化。需要分步骤讲解,并给出代码示例,帮助用户逐步构建组件。</think>### 如何手写实现级联选择器Cascader) #### 一、核心设计思路 1. **数据结构** 使用树形结构存储层级数据,节点对象需包含: - `label`(显示文本) - `value`(唯一标识) - `children`(子节点数组) ```typescript interface TreeNode { label: string; value: string; children?: TreeNode[]; } ``` 2. **交互逻辑** - 点击父级选项时展开子菜单(使用事件冒泡机制) - 子菜单定位需计算父元素偏移量(通过`getBoundingClientRect`) - 点击非菜单区域关闭所有层级(通过`事件委托`实现) #### 二、关键代码实现 ```tsx // 1. 递归渲染菜单 const renderMenu = (nodes: TreeNode[], level: number) => { return ( <div className="menu-level" style={{ left: level * 200 }}> {nodes.map(node => ( <div key={node.value} onClick={(e) => handleItemClick(e, node)} className="menu-item" > {node.label} {node.children && <span className="arrow" />} </div> ))} </div> ); }; // 2. 联动控制逻辑 const handleItemClick = (e: React.MouseEvent, node: TreeNode) => { e.stopPropagation(); if (node.children) { setActiveLevel(prev => [...prev.slice(0, level), node.value]); // 更新激活路径 } else { onSelect(getSelectedPath()); // 最终选择值 } }; ``` #### 三、样式与动画 1. 使用`position: absolute`实现浮动层叠效果 2. 通过`transform: translateY()`实现平滑展开动画 3. 复用Antd的样式类名保持一致性(如`.ant-cascader-menu`)[^3] #### 四、进阶优化 1. **异步数据加载** 在节点添加`isLeaf`标记,通过`loadData`回调实现动态加载 ```ts const loadData = async (selectedPath: string[]) => { const res = await fetch(`/api/data?path=${selectedPath.join('/')}`); updateTree(selectedPath, res.data); }; ``` 2. **多选模式** 使用Checkbox组件并实现状态联动: ```ts const updateCheckState = (node: TreeNode) => { const allChildrenChecked = node.children?.every(c => c.checked); node.indeterminate = !allChildrenChecked && node.children?.some(c => c.checked); node.checked = allChildrenChecked; }; // 需递归更新父节点状态 ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值