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

Posted 2023-03-16

【中文标题】编剧：从无法使用 page.setInputFiles 的非输入元素上传文件？

【英文标题】：Playwright: Upload files from non-input element that cannot be used page.setInputFiles?

【发布时间】：2021-05-13 20:35:03

【问题描述】：

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

【问题讨论】：

elementHandle.setInputFiles(files[, options]) 真的希望 elementHandle 指向一个输入元素。

【参考方案1】：

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

【讨论】：

是python的吗？我可以在 node.js 上使用该功能吗？

这里是上述代码的Python版本：playwright.dev/python/docs/api/class-filechooser