编剧：从不能使用 page.setInputFiles 的非输入元素上传文件？

问题描述

我正在通过 Playwright 上的非输入 HTML 标签上传文件。

例如，您可以像这样使用 setInputFiles，这是有效的：

await page.setInputFiles('input[type="file"]','./headphone.png')

但显然 setInputFiles 仅适用于输入元素，这样的事情会出错：

await page.setInputFiles('label.ImageUpload__label ','./headphone.png');

我正在处理的 HTML 是这样的：

<div id="ImageUpload" class="ImageUpload u-marginB10">
        <label class="ImageUpload__label js-dragdrop-area" for="selectFileMultiple">
            <span class="ImageUpload__hide">drag and drop or select files</span>
            <span class="ImageUpload__text"><span class="js-dragdrop-num">10</span>up to</span>
        </label>
</div>

那么，是否可以使用 Playwright 将文件上传到此类 HTML 元素？

解决方法

NodeJ：https://playwright.dev/python/docs/api/class-filechooser

        page.on("filechooser",(fileChooser: FileChooser) => {
             fileChooser.setFiles(["/path/to/a/file"]);
        })

Python：https://playwright.dev/python/docs/api/class-filechooser/

with page.expect_file_chooser() as fc_info:
    page.click("upload")
file_chooser = fc_info.value
file_chooser.set_files("/path/to/a/file")

Java：https://playwright.dev/java/docs/api/class-filechooser

FileChooser fileChooser = page.waitForFileChooser(() -> 
page.click("upload"));
fileChooser.setFiles(Paths.get("myfile.pdf"));