在Cypress中上传文件当没有<input type="file">的情况

Question

我需要上传一个文件，但问题是该按钮没有input标签和attr type="file"属性。我该如何解决?

DOM: 我尝试了:

cy.contains('div#dropdown-grouped', "Bon d'intervention").siblings('div.d-none').find('input[type="file"]') 
    .selectFile('cypress/fixtures/bon.pdf', {force: true})

但是这会返回一个状态码为422

还尝试了以下方法：

const filePath = 'My reportis.jpg'
    cy.contains('#dropdown-group-1', "Bon d'intervention").attachFile(filepath)

但这显然没有任何作用。

如果我将按钮的标记从 button 更改为 input，并添加一个属性类型为 "file"，那会起作用吗？如果是，我该如何使用 cypress 更改标记呢？

非常感谢！

解决方案：

cy.contains('#dropdown-group-1', "Bon d'intervention").click()
cy.get('input[type="file"]').selectFile('cypress/fixtures/bon.pdf', {force: true})

- Andrei Nico

Answer 1

你的第一段代码是正确的，

cy.contains('div#dropdown-grouped', "Bon d'intervention")
  .siblings('div.d-none')
  .find('input[type="file"]')
  .selectFile('cypress/fixtures/Call order.pdf', {force: true})

状态码422是服务器的响应，因此selectFile()已经起作用并且应用程序发出了一个POST请求，但服务器不喜欢它所收到的内容。

422 Unprocessable Entity

超文本传输协议（HTTP）422不可处理实体响应状态码表示服务器理解请求实体的内容类型并且请求实体的语法正确，但无法处理包含的指令。

---

从进一步的讨论来看，按照用户所采取的步骤进行测试是有效的，这意味着在selectFile()之前添加一个button click()。

以下是最终的有效测试：

cy.contains('#dropdown-group-1', "Bon d'intervention").click() 

cy.get('input[type="file"]')
  .selectFile('cypress/fixtures/bon.pdf', {force: true})

- Fody

---

即使我将文件更改为.jpg，它仍然返回422 =（这并不是问题所在。 我相信这与服务器不知道我选择哪个特定选项来上传文件有关。 因为下拉菜单有几个选项可以上传文件，每个选项都有自己的卡片来显示文件。 - Andrei Nico

如果我将按钮的标签从button更改为input，并添加一个属性type="file"，那么会起作用吗？如果是，我该如何使用Cypress更改标签？ - Andrei Nico

我认为元素标签没问题，因为上传已经发送到服务器了 - 在这方面你没有问题。我明白你的意思是关于按钮执行其他操作的 - 尝试在添加文件之前或之后使用 .click() 按钮 - 用户会看到什么动作？显然他面前有一个菜单，他是否点击一个选项然后选择一个文件？这将是 Cypress 需要执行的操作顺序。 - Fody

所以在我的情况下正确的方法是点击按钮，然后获取文件输入类型并选择文件。Fody，请更新您的答案，以便我可以接受它：cy.contains('#dropdown-group-1', "Bon d'intervention").click() cy.get('input[type="file"]').selectFile('cypress/fixtures/bon.pdf', {force: true}) - Andrei Nico

好消息，已更新并删除有关文件类型的错误注释。我怀疑 click() 导致在 POST 调用中添加了额外的标头。 - Fody

Answer 2

发布这个以防能帮到别人。我在我的Angular应用程序中遇到了类似的问题，其中有一个隐藏的输入框。我的测试失败了，所以我的解决办法是删除隐藏输入框的类，然后我就能够选择和上传文件了。请参见下面的代码：

  <button mat-raised-button type="submit" (click)="fileUploadInput.click()" data-cy="upload-button">
    Upload file
      <input type="file" (change)="uploadFile($event)" accept=".csv, text/csv" #fileUploadInput class="fakeInput" data-cy="upload-input">
  </button>

stylesheet.css

.fakeInput {
  visibility: hidden;
}

test.spec.ts

  it('Uploads CSV file', () => {
    cy.get('[data-cy="upload-button"]').click()
    cy.get('[data-cy="upload-input"]').invoke('removeAttr', 'class') // <= removes class and makes element visible
.click().selectFile('cypress/fixtures/items.csv', )
    cy.contains('items.csv').should('exist')
  })

- LaCodeM