如何使用 MUI 单击 Cypress 中的隐藏输入并上传图像？

Question

问题：我尝试使用 上传图像.selectFile，但遇到错误，该图像已被隐藏，因此这是不可能的。

使用 Material UI 响应代码：

      <Button
        datacy="uploadImage"
        size={"medium"}
        disableRipple
        disableTouchRipple
        disableFocusRipple
        component="label"
        variant={"text"}
        sx={{ marginTop: { xs: 2, md: 0 }, p: 0, width: "fit-content" }}
      >
        <input
          type="file"
          onChange={(e) => onChange(e)}
          hidden
          accept="image/png, image/jpeg"
        />
        {hasProfilePicture ? "Change" : "Upload"}
      </Button>

HTML 组件：

<label role="button" datacy="uploadImage">
   <input type="file" accept="image/png, image/jpeg" hidden="">
   Change
</label>

失败的尝试：

1. cy.get('[datacy="uploadImage"] input').selectFile("cypress/fixtures/Headshot 2.jpg");

   4000ms 后超时重试：cy.selectFile() 失败，因为此元素不可见：此元素不可见，因为它具有 CSS 属性：display: none 修复此问题，或使用 {force: true} 禁用错误检查。

2. cy.get("input[type='file'] hidden").selectFile("cypress/fixtures/Headshot 2.jpg");

4000 毫秒后超时重试：期望找到元素：input[type='file'] 隐藏，但从未找到它。

问题：我可以编写什么 Cypress 前端测试来单击组件并上传图像？

Answer 1

您应该能够定位该<label>元素，因为命令<input>中的 is.selectFile()足以智能地找到输入。

cy.get('[datacy="uploadImage"]')
  .selectFile("cypress/fixtures/example.png")

cy.get('[datacy="uploadImage"] input')
  .its('0.files')
  .should('have.length', 1)      // passes
  .its('0.name')
  .should('eq', 'example.png')   // passes

测试用

<label role="button" datacy="uploadImage">
   <input type="file" accept="image/png, image/jpeg" hidden="">
   Change
</label>