如何使用Playwright（TS）模拟向拖拽区域输入元素拖拽文件

嗨，我刚好做过类似的操作，Playwright其实是支持模拟拖拽上传文件的，只是可能你没在文档里找到明确的指引～下面给你详细说下两种靠谱的方法，不管是txt、json还是png这些格式都适用：

方法1：直接给关联的input元素设置文件（最推荐） #

很多拖拽上传区域的底层，其实都绑定了一个隐藏的input[type="file"]元素，这种情况下直接用setInputFiles方法是最稳定的，完全不需要模拟复杂的拖拽动作：

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

test('拖拽区域批量上传多格式文件', async ({ page }) => {
  await page.goto('你的目标页面URL');
  
  // 定位到拖拽区关联的文件输入框（哪怕是隐藏的，Playwright也能正常定位）
  const hiddenFileInput = page.locator('input[type="file"]');
  
  // 准备要上传的文件路径，支持单个或多个，格式不限
  const targetFiles = [
    path.resolve(__dirname, '../test-files/demo.txt'),
    path.resolve(__dirname, '../test-files/config.json'),
    path.resolve(__dirname, '../test-files/cover.png')
  ];
  
  // 给输入框设置文件，Playwright会自动触发页面的上传逻辑
  await hiddenFileInput.setInputFiles(targetFiles);
  
  // 验证上传成功，根据你的页面提示调整选择器
  await expect(page.locator('.upload-success-tip')).toBeVisible({ timeout: 10000 });
});

小提示：如果不确定input元素的选择器，可以打开浏览器开发者工具，在拖拽区元素上找有没有绑定的input[type="file"]，或者监听页面的change事件，触发上传时看哪个元素有响应。

方法2：模拟真实的拖拽事件流程 #

如果你需要完全模拟用户拖拽文件到区域的动作（比如测试拖拽时的视觉反馈），可以通过触发dragenter、dragover、drop这一系列事件来实现：

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

test('模拟真实拖拽动作上传文件', async ({ page }) => {
  await page.goto('你的目标页面URL');
  
  // 定位页面上的拖拽区域元素
  const dropZone = page.locator('.your-drag-zone-class');
  
  // 准备文件数据，包含文件名、MIME类型和本地路径
  const filesToUpload = [
    {
      name: 'demo.txt',
      mimeType: 'text/plain',
      filePath: path.resolve(__dirname, '../test-files/demo.txt')
    },
    {
      name: 'cover.png',
      mimeType: 'image/png',
      filePath: path.resolve(__dirname, '../test-files/cover.png')
    }
  ];
  
  // 读取文件内容并创建File对象
  const fileObjects = filesToUpload.map(file => {
    const fileContent = fs.readFileSync(file.filePath);
    return new File([fileContent], file.name, { type: file.mimeType });
  });
  
  // 依次触发拖拽相关事件，模拟用户真实拖拽流程
  await dropZone.dispatchEvent('dragenter');
  await dropZone.dispatchEvent('dragover', {
    dataTransfer: { files: fileObjects }
  });
  // 触发drop事件完成上传
  await dropZone.dispatchEvent('drop', {
    dataTransfer: { files: fileObjects }
  });
  
  // 等待上传完成并验证
  await page.waitForSelector('.upload-complete', { timeout: 10000 });
});

一些需要注意的点 #

• 不管用哪种方法，文件路径一定要正确，推荐用path.resolve来生成绝对路径，避免相对路径的坑
• 多文件上传只需要在数组里添加多个文件路径/对象即可
• 如果拖拽区域需要先点击才能激活（比如显示上传提示），记得在上传前先调用await dropZone.click()

备注：内容来源于stack exchange，提问作者I.sh.