setInputFiles在antd上传组件上出现错误

Question

我的应用程序正在使用antd上传元素。

使用Playwright，我正在编写一个上传文件的测试。我使用的选择器是：

await page.locator('button:has-text("Click To Upload")').setInputFiles(`${filePath}/${filename1}`);

我能够成功地抓住Click To Upload按钮并调用click((，所以我知道选择器是正确的。但是，如果我尝试api setInputFiles，我会得到

frame.setInputFiles: Error: Node is not an HTMLInputElement
=========================== logs ===========================
waiting for selector "button:has-text("Click To Upload")"
selector resolved to visible <button type="button" class="ant-btn ant-btn-default"></button>
============================================================

查看元素的html，我看到：

<span>
<span class="">
<div class="ant-upload ant-upload-select ant-upload-select-text">
<span tabindex="0" class="ant-upload" role="button">
<input type="file" accept="" multiple="" style="display: none;">
<button type="button" class="ant-btn ant-btn-default" ant-click-animating-without-extra-node="false">
<span role="img" aria-label="upload" class="anticon anticon-upload">
<svg viewBox="64 64 896 896" focusable="false" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>
</svg>
</span>
<span>Click To Upload</span>
</button>
</span>
</div>
<div class="ant-upload-list ant-upload-list-text"></div>
</span>
</span>

我必须能够使用setInputFiles，因为它自动采用相对路径。有什么想法吗？我怎么才能让setInputFiles工作？

Answer 1

在阅读文档时，setInputFiles需要一个输入元素。

但是，如果由于输入是动态的而无法使用，则可以使用以下方法：

let [fileChooser] = await Promise.all([
page.waitForEvent('filechooser'),
page.locator('button:has-text("Click To Upload")').click(),
]);
await fileChooser.setFiles([`${filePath}/${filename1}`]);

Answer 2

尝试使用与input标记相关的ID，而不是按钮标记。