如何使用 Playwright 将文件拖动到任何元素

Question

我有一个用于上传文件的拖动区域元素，我正在寻找一种模拟此操作的方法。 我需要能够上传任何类型的文件。

Playwright 文档中没有提及此操作。

Answer 1

这是我在 GitHub 上找到的解决方案Playwright 问题

import { Page } from '@playwright/test';
import { readFileSync } from 'fs';

const dragAndDropFile = async (
  page: Page,
  selector: string,
  filePath: string,
  fileName: string,
  fileType = ''
) => {
  const buffer = readFileSync(filePath).toString('base64');

  const dataTransfer = await page.evaluateHandle(
    async ({ bufferData, localFileName, localFileType }) => {
      const dt = new DataTransfer();

      const blobData = await fetch(bufferData).then((res) => res.blob());

      const file = new File([blobData], localFileName, { type: localFileType });
      dt.items.add(file);
      return dt;
    },
    {
      bufferData: `data:application/octet-stream;base64,${buffer}`,
      localFileName: fileName,
      localFileType: fileType,
    }
  );

  await page.dispatchEvent(selector, 'drop', { dataTransfer });
};

使用示例：（使用

此演示站点）

test("simulate drag and drop file", async ({ page }) => {
  await page.goto("https://www.dragdrop.com/test/");
  await dragAndDropFile(page, "#demo-upload", "./image1.png", "image1");
});