如何通过Playwright实现图片上传并断言图片名称？

你的断言失败核心问题有两个：

1. 定位器错误与元素特性误解 #

你用page.locator("img-input-link")定位文件输入框，但缺少ID选择器前缀#，正确写法应为#img-input-link。但即使修正定位器，也无法通过该元素断言文件名——因为<input type="file">本身不会在页面上显示选中的文件名，浏览器会隐藏真实路径，MUI上传组件通常用单独的文本元素（如span、div）展示文件名，而非input自身。

2. 断言对象错误 #

文件上传后，你需要断言的是页面上实际显示文件名的元素（比如上传成功后的列表条目、对话框内的文件名提示），而非文件输入框本身。

修正后的测试脚本示例 #

场景1：断言上传成功后列表中的文件名 #

假设上传成功后，列表内的图片条目会显示文件名，可按如下修改：

import { expect, test } from "@playwright/test";
import { login } from "./common";
import { v4 as uuid } from "uuid";

test("validate image upload", async ({ page }) => {
  await login(page, "/");

  // 导航到图片页面
  await page.click('text="admin"');
  await page.click('text="Image settings"');
  await page.click('text="Images"');

  const imageName = uuid();
  const fileName = "tom.jpg";

  // 开始测试流程
  await page.click('text="Add Image"');
  await page.fill('input[id="Image Name *"]', imageName);
  await page.setInputFiles('#img-input-link', `images/${fileName}`);

  await page.click('text="Create"');

  // 断言图片名称显示
  await expect(page.locator(`text=${imageName}`).first()).toBeVisible();
  // 断言文件名在列表中显示（根据实际DOM结构调整选择器）
  await expect(page.locator(`text=${fileName}`).first()).toBeVisible();
});

场景2：断言对话框内选中的文件名 #

如果需要在点击Create前确认已选中文件，先通过浏览器开发者工具找到MUI上传组件中显示文件名的元素（比如带特定类的span），替换对应定位器：

// 选择文件后，断言对话框内显示的文件名
await expect(page.locator('.MuiUploadHelper-text')).toContainText("tom.jpg");

实用调试技巧 #

1. 在断言前加入page.pause()，打开Playwright Inspector查看DOM结构，精准定位显示文件名的元素。
2. 用console.log(await page.locator('#img-input-link').inputValue())查看文件输入框的真实值，会发现是类似C:\fakepath\tom.jpg的伪路径，无法直接用来断言显示的文件名。

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