如何用Playwright测试Angular应用中的拖拽图片上传功能

Playwright处理文件上传不用纠结系统级的拖拽操作，直接操作组件关联的文件输入框或者拖拽区域本身就行，两种方式都靠谱，下面给你具体实现：

1. 准备测试资源 #

在你的测试项目目录下建个test-assets文件夹，放一张测试用的图片（比如test-logo.png）。

2. 核心测试代码（推荐操作隐藏输入框） #

你的拖拽组件绑定了id="fileDropRef"的隐藏input，直接定位这个元素上传文件最稳定：

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

test('上传Logo并验证显示', async ({ page }) => {
  // 打开用户资料页面
  await page.goto('/profile');

  // 定位到隐藏的文件输入框
  const fileInput = page.locator('#fileDropRef');

  // 上传测试图片，填相对路径就行
  await fileInput.setInputFiles('./test-assets/test-logo.png');

  // 验证图片是否成功渲染
  const logoImg = page.locator('img.logo');
  // 检查src是否是base64格式（对应你的transformedBase64()方法）
  await expect(logoImg).toHaveAttribute('src', /^data:image\/png;base64,/);
  // 额外验证图片是否有效（自然宽度大于0说明加载成功）
  const imgWidth = await logoImg.evaluate(img => (img as HTMLImageElement).naturalWidth);
  expect(imgWidth).toBeGreaterThan(0);
});

3. 模拟拖拽交互的测试方式 #

如果想测试拖拽区域的交互逻辑，直接给拖拽区域元素调用setInputFiles也可以，Playwright会自动处理内部关联：

test('模拟拖拽上传Logo', async ({ page }) => {
  await page.goto('/profile');

  // 定位拖拽区域（带appDragAndDrop指令的那个container）
  const dropArea = page.locator('.profile-logo-row-area .container:has(h3)');

  // 模拟拖拽文件到区域
  await dropArea.setInputFiles('./test-assets/test-logo.png');

  // 同样验证图片显示
  const logoImg = page.locator('img.logo');
  await expect(logoImg).toHaveAttribute('src', /^data:image\/png;base64,/);
});

关键说明 #

• Playwright的setInputFiles方法会自动触发组件的change或fileDropped事件，完全覆盖你的业务逻辑；
• 不用真的模拟系统拖拽，这种方式跨平台更稳定，不会受系统文件管理器的影响；
• 验证环节除了检查base64，也可以根据实际业务加其他断言（比如上传后的接口请求、本地存储变化等）。

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