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

Question

我正在通过 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 元素呢？

Answer 1

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

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

或使用异步等待

        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"));