使用selenium定位input标签下的下拉框

news/2024/7/8 10:37:58 标签: python

先来看一下页面效果:是一个可输入的下拉列表

在这里插入图片描述

再来看一下下拉框的实现方式: 是用<ul><li>方式来实现的下拉框,不是select类型的,所以不能用传统的select定位方法。

在这里插入图片描述


在着手定位元素前一定一定要先弄清楚下拉列表的实现方式!!! 我一开始就是看到是下拉列表,想当然的采用select方法来定位,然后报错了QAQ ,大概意思是说该元素不支持使用select方法,然后才想着看一下实现代码,结果才发现下拉框字段是在<input>标签下的。


在这里插入图片描述

解决思路

 1、定位下拉框
 2、因为是<input>标签,因此使用send_keys方法给下拉框传值
 3、定位到下拉项
 4、点击下拉项
在这里插入图片描述


在这里插入图片描述


在这里插入图片描述

在这里插入图片描述


代码实现

# 导入包
from selenium import webdriver
from selenium.webdriver.common.by import By
import time

# 定位下拉框
mcc_name = 'body > div.el-dialog__wrapper.created-small-margin > div > div.el-dialog__body > div > form > div:nth-child(5) > div > div > div > input'

# 使用send_keys方法给下拉框传值
industry = driver.find_element(By.CSS_SELECTOR, mcc_name)
industry.send_keys('零售业 / 综合零售 / 百货商店')
time.sleep(1)

# 定位下拉项
indus = 'body > div.el-popper.el-cascader__dropdown > div.el-cascader__suggestion-panel.el-scrollbar > div.el-scrollbar__wrap > ul > li'

# 点击下拉项   
driver.find_element(By.CSS_SELECTOR, indus).click()


常见问题

元素定位不到怎么办?

多尝试几种定位方式,这个不行换另一个试试,八种定位方式总有一种适合。

另外,不要太过依赖F12直接copy的selectorXpath 因为很有可能就是这个原因导致的!!!有很多时候直接copy过来拿去定位,就会定位不到,实在不行手动输入定位一下。

适当的添加延时时间。 很多时候操作太快也有可能导致元素定位不到,比如在这个例子的给下拉框传值点击下拉项之间,如果不添加延时time.sleep(1),也会导致下拉项元素定位不到。


http://www.niftyadmin.cn/n/5537100.html

相关文章

应用案例 | 劳易测DCR 55助力电子制造业高效检测

在当今快节奏的电子制造行业中&#xff0c;电子产品的生产过程也日益复杂和精细化。在这个过程中&#xff0c;对各个组件的精确识别和有效追溯显得尤为重要。电子产品无论是部件零组件&#xff0c;还是封装模组&#xff0c;在组装成品前都需要经过严格的测试&#xff0c;包括功…

物联网数据解析实战:掌握CJSON库核心函数,精准处理JSON数据

物联网数据解析实战&#xff1a;掌握CJSON库核心函数&#xff0c;精准处理JSON数据 CJSON库是一个轻量级的JSON解析库&#xff0c;专为C语言设计&#xff0c;适用于嵌入式系统和物联网应用。它提供了简单易用的API&#xff0c;使得开发者能够轻松地解析和生成JSON数据。在本教…

【讲解下AI Native应用中的模型微调】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

Elasticsearch 第四期:搜索和过滤

序 2024年4月&#xff0c;小组计算建设标签平台&#xff0c;使用ES等工具建了一个demo&#xff0c;由于领导变动关系&#xff0c;项目基本夭折。其实这两年也陆陆续续接触和使用过ES&#xff0c;两年前也看过ES的官网&#xff0c;当时刚毕业半年多&#xff0c;由于历史局限性导…

Echarts中的折线图,多个Y轴集中在左侧(在Vue中使用多个Y轴的折线图)

简述&#xff1a;在 ECharts 中&#xff0c;创建一个带有多个 Y 轴的折线图&#xff0c;并且将这些 Y 轴都集中显示在图表的左侧&#xff0c;可以通过合理配置 yAxis 和 series 的属性来实现。简单记录 一. 函数代码 drawCarNumEcs() {// 初始化echarts图表,并绑定到id为"…

Chrome插件elasticsearch-head的安装和使用

文章目录 一、安装二、使用 一、安装 本来是想直接在Chrome扩展程序商店里安装的&#xff0c;但是它让我更新浏览器版本&#xff0c;因此就自己下载了.crx文件 elasticsearch-head的git地址是这个 我直接点进了crx然后点偏右上角下载标志下载&#xff08;光标悬浮显示download…

Vue2前端实现数据可视化大屏全局自适应 Vue实现所有页面自适应 Vue实现自适应所有屏幕

Vue自适应所有屏幕大小,目前页面自适应,尤其是数据可视化大屏的自适应更是案例很多 今天就记录一下使用Vue全局自适应各种屏幕大小的功能 在Vue.js中创建一个数据大屏,并使其能够自适应不同屏幕大小,通常涉及到布局的响应式设计、CSS媒体查询、以及利用Vue的事件系统来处理…

Python文件读入操作

本套课在线学习视频&#xff08;网盘地址&#xff0c;保存到网盘即可免费观看&#xff09;&#xff1a; ​​https://pan.quark.cn/s/e2ba7867f034​​ Python编程中&#xff0c;文件操作是一项基础且重要的技能。本文将详细介绍如何使用Python进行文件的打开、读取、写入和关…