python+playwright自动化如何解决文件上传问题

最近在使用python+playwright框架做网页UI自动化,该框架的录制功能很厉害和强大。录制后直接将录制的代码复制到python中,很方面和好用。

在使用该浏览器录制功能的时候,录制的文件上传代码运行不成功。

复制代码
page.locator("div").filter(has_text=re.compile(r"^\+$")).first.click()
page.locator("body").set_input_files("测试pdf文件.pdf")

无论怎样都识别不了并上传文件。

我在网上查询资料,找到了上传文件的第一种方法。

复制代码
# with page.expect_file_chooser() as fc_info:
#     page.locator("div").filter(has_text=re.compile(r"^\+$")).first.click()
# page.pause()
# file_chooser = fc_info.value
# file_chooser.set_files("/Users/zc/desktop/1.png")

这种方法可以成功的上传文件,但是在跑自动化的时候会自动弹出一个页面,需要手动在这个页面上点击启动按钮,才可以成功上传文件。这对于跑自动化不太友好。另外,对于多个文件的上传该功能也不好使用。

为解决文件上传定位不了的问题,使用page.set_input_files()函数来解决,set_input_files有selector和files参数。set_input_files只能使用于input标签中type="file"类型,selector是文件上传入口定位参数,files是上传文件的路径。打开网页使用f12来定位上传文件的前端代码元素。

<div data-v-15edcce14="" class="upload-box">

<input data-v-15edcce14="" type="file" id="upFile" accept="image/png, image/jpeg"><div data-v-12edcce8="" class="icon-before"><span data-v-12edcce8="">+</span></div></div>

尝试使用page.set_input_files('inputid="upFile"',"/Users/zc/desktop/1.png") 并测试,可以正常上传文件。

如果有多个文件上传,同时文件上传都是 type="file" id="upFile"的input类型的元素。此时我们可以观察其他参数是否不一样,如果不一样的话可以通过其他参数的定位并上传文件。

如果其他参数都一致如何解决问题呢?我们可以通过xpath或元素索引来定位并上传。下面我们讲通过索引来定位并上传文件的方法。

最开始我使用page.locator('inputid="upFile"'):nth-of-type(index).set_input_files("上传的文件")的方法来上传,但是识别不了上传的入口,尝试寻找识别不了的原因,暂时没有找出来。

page.locator('inputid="upFile"'):nth-of-type(1).set_input_files("/Users/zc/desktop/1.png")

page.locator('inputid="upFile"'):nth-of-type(2).set_input_files("/Users/zc/desktop/1.png")

然后我换了下面的索引方式来尝试,文件都可以对应的上传成功。

复制代码
page.locator('input[id="upFile"]').nth(0).set_input_files("/Users/zc/desktop/1.png")
相关推荐
电梯界知识分子10 分钟前
浙江台州六层拆迁自建房:建房前期土建交底,规避薄墙预制板误区,预留轮椅通行电梯
运维·服务器·网络·安全·家用电梯
看-是灰机11 分钟前
Milvus向量数据库
linux·运维·人工智能·机器学习·milvus
weixin_4462608513 分钟前
PromptAgent‑Eval:面向提示驱动智能体的细粒度自动化评测框架
运维·自动化
下辈子不要当码农14 分钟前
Linux驱动学习(1)
linux·运维·学习
华允物联-HUAIOT35 分钟前
串口服务器支持 WiFi 吗?有线与无线串口联网科普
运维·服务器·单片机
北京靠谱的GEO优化机构1 小时前
为什么优质百科词条需要修改更新?常态化运维实操指南
运维
IMPYLH1 小时前
Linux 运维基础:从入门到实战的完整指南
linux·运维·php
前端 贾公子1 小时前
LangGraph == 图的状态(State)管理 (下)
运维·服务器·数据库
星恒随风1 小时前
Linux进程间通信(二):深入理解System V共享内存、消息队列、信号量与内核IPC资源管理
linux·运维·服务器·笔记·学习·状态模式
yangmu32032 小时前
PLC 设备介绍:工业自动化的“控制大脑”
运维·自动化