最近在使用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")