Question

我正在使用Cypress.io根据反应页面自动执行一个文件上传测试用例。呈现页面时，将在运行时期间创建用于文件上传的输入组件（类型=文件）。

似乎该按钮（通过单击“选择文件”）打开了一个本机文件选择器，赛普拉斯Webdriver似乎不支持与之交互，因此在这种情况下，触发事件以模拟文件选择可能是一个选项。但是Cypress无法找到input（type = file），因为它不是DOM的一部分，这意味着cy.get（'input [type = file]'）返回null。

您能给我一些想法吗？ this button opens a native file picker

我已经尝试过-

const testfile = new File(['test data to upload'], 'upload.csv')

cy.get('input[type=file]').trigger('change', {
  force: true,
  data: testfile,
});

这没有运气，因为 CypressError：超时重试：预期找到元素：“ input [type = file]”，但从未找到。

页面的源代码：

import React, { Component } from 'react'

interface Props {
  text?: string
  type?: string | undefined
  fileID?: string
  onFileSelected: (file: any) => void
}

interface State {
  name: string
}

export default class FileUpload extends Component<Props, State> {
  fileSelector = document.createElement('input')

  state: State = {
    name: '',
  }

  componentDidMount() {
    this.fileSelector = this.buildFileSelector()
  }

  buildFileSelector = () => {
    const { fileID, type } = this.props

    this.fileSelector.setAttribute('type', 'file')
    this.fileSelector.setAttribute('id', fileID || 'file')
    this.fileSelector.setAttribute('multiple', 'multiple')
    this.setAcceptType(type)
    this.fileSelector.onchange = this.handleFileChange
    return this.fileSelector
  }

  setAcceptType = (type: string | undefined) => {
    if (type) {
      type = type[0] === '.' ? type : type.replace(/^/, '.')
      this.fileSelector.setAttribute('accept', type)
    }
  }

  handleFileChange = (event: any) => {
    const file = event.target.files[0]
    if (file) {
      this.setState({ name: file.name })
      this.props.onFileSelected(file)
    }
  }

  render() {
    const { name } = this.state
    return (
      <div>
        <button
          onClick={(event: React.ChangeEvent<any>) => {
            event.preventDefault()
            this.fileSelector.click()
          }}
          style={{ marginRight: 10 }}
        >
          {this.props.text || 'Choose file'}
        </button>
        <label>{name || 'No file chosen'}</label>
      </div>
    )
  }
}

我期待收到有关如何在赛普拉斯中自动执行“选择文件”操作的建议。预先感谢。

Answer 1

我通过将input（type = file）元素放入DOM中来解决此问题，以便赛普拉斯可以定位该元素并对其进行操作。

但是关于我之前遇到的问题，如果仍然可以在赛普拉斯中进行处理，我仍然想听听您的一些见解。

Cypress_Test_Automation：如何触发运行时创建的组件的事件

1 个答案: