Playwright JavaScript图片上传报错：Node is not an HTMLInputElement如何解决？

你遇到的错误核心原因很明确：setInputFiles方法只能作用于<input type="file">元素，但你代码里定位的是<button>按钮，自然会触发报错。网站上的上传按钮只是交互入口，实际负责接收文件的是隐藏的文件输入框。

修复步骤 #

• 定位真正的文件上传输入框：直接通过属性选择器定位页面中的<input type="file">元素，若页面存在多个同类元素，可结合父元素属性进一步精准筛选。
• 移除不必要的按钮点击操作：Playwright调用setInputFiles时会自动触发上传流程，无需手动点击按钮。
• 统一模块导入方式（可选但推荐）：避免混合使用CommonJS的require和ES模块的import，减少潜在兼容性问题。

修正后的代码示例 #

import path from 'path';
import { test, expect } from '@playwright/test';

test("文件上传测试", async ({ page }) => {
    await page.goto('https://www.transfernow.net/es');
    // 定位文件上传输入框并设置文件
    await page.locator('input[type="file"]').setInputFiles(path.join(__dirname, 'images.png'));
});

若页面存在多个文件输入框，可通过层级关系精准定位：

// 结合容器元素缩小定位范围
await page.locator('div.upload-area input[type="file"]').setInputFiles(path.join(__dirname, 'images.png'));

内容的提问来源于stack exchange，提问作者Gfjhrr1244