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('input[id="upFile"]',"/Users/zc/desktop/1.png") 并测试,可以正常上传文件。

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

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

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

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

page.locator('input[id="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")
相关推荐
舒一笑1 天前
程序员效率神器:一文掌握 tmux(服务器开发必备工具)
运维·后端·程序员
NineData1 天前
数据库管理工具NineData,一年进化成为数万+开发者的首选数据库工具?
运维·数据结构·数据库
梦想很大很大2 天前
拒绝“盲猜式”调优:在 Go Gin 项目中落地 OpenTelemetry 链路追踪
运维·后端·go
Sinclair2 天前
内网服务器离线安装 Nginx+PHP+MySQL 的方法
运维
叶落阁主2 天前
Tailscale 完全指南:从入门到私有 DERP 部署
运维·安全·远程工作
甲鱼9293 天前
MySQL 实战手记:日志管理与主从复制搭建全指南
运维
碳基沙盒6 天前
OpenClaw 多 Agent 配置实战指南
运维
蝎子莱莱爱打怪8 天前
Centos7中一键安装K8s集群以及Rancher安装记录
运维·后端·kubernetes
DianSan_ERP9 天前
电商API接口全链路监控:构建坚不可摧的线上运维防线
大数据·运维·网络·人工智能·git·servlet
呉師傅9 天前
火狐浏览器报错配置文件缺失如何解决#操作技巧#
运维·网络·windows·电脑