使用Playwright+TypeScript实现CSV文件拖拽上传失败求助

日志不显示的原因 #

page.evaluate() 里的 console.log() 输出的是浏览器控制台日志，不会出现在Node.js终端中。如果要在终端查看这些日志，需添加监听：

page.on('console', msg => console.log(`Browser console: ${msg.text()}`));

文件拖放失败的核心问题 #

你将文件Buffer转成hex字符串传给page.evaluate()，但File构造函数需要二进制数据（如ArrayBuffer或Uint8Array），而非hex字符串，这会导致生成的文件内容错误。另外，完整拖放流程通常需要先触发dragenter和dragover事件，否则网页可能不会响应drop事件。

修正后的代码 #

import { readFileSync } from 'fs';
import { resolve } from 'path';

// 监听浏览器控制台日志（用于调试）
page.on('console', msg => console.log(`Browser console: ${msg.text()}`));

const filePath = resolve(__dirname, './../../files/ci_file.csv');
const fileBuffer = readFileSync(filePath);

// 将Buffer转成数组传递给浏览器端，创建正确的DataTransfer
const dataTransfer = await page.evaluateHandle(({ buffer, fileName, mimeType }) => {
    console.log('Reached here!!');
    const dt = new DataTransfer();
    const file = new File([new Uint8Array(buffer)], fileName, { type: mimeType });
    dt.items.add(file);
    return dt;
}, {
    buffer: Array.from(fileBuffer),
    fileName: 'ci_file.csv',
    mimeType: 'text/csv' // CSV标准MIME类型为text/csv
});

// 模拟完整拖拽流程：先激活拖放区域，再触发drop
await page.dispatchEvent('#base_page', 'dragenter', { dataTransfer });
await page.dispatchEvent('#base_page', 'dragover', { dataTransfer });
await page.dispatchEvent('#base_page', 'drop', { dataTransfer });

// 释放dataTransfer对象，避免内存泄漏
await dataTransfer.dispose();

关键修正点 #

• 二进制数据传递：将Buffer转成数组传入evaluate，浏览器端再转成Uint8Array，确保文件内容正确。
• MIME类型修正：CSV文件标准MIME类型是text/csv，而非application/csv。
• 完整拖放事件链：添加dragenter和dragover事件，模拟真实拖拽交互流程。
• 日志监听：通过page.on('console')捕获浏览器端日志，方便调试。

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