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来定位上传文件的前端代码元素。

尝试使用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")