Cypress_Test_自动化：如何为运行时创建的组件触发事件

Question

我在用柏树。io根据react页面自动上传一个文件测试用例。用于文件上载的输入组件（type=file）是在呈现页面时在运行时创建的。

似乎按钮（通过单击“选择文件”）打开了一个本机文件选择器，而赛普拉斯网络驱动程序似乎不支持与之交互，所以在这种情况下，可能会触发一个模拟文件选择的事件。但是Cypress无法定位输入（type=file），因为它不是DOM的一部分，这意味着cy.get（'输入[type=file]'）返回null。

你能告诉我怎么做吗？此按钮打开本机文件选择器

我试过这个-

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>
    )
  }
}

我期待收到关于如何在Cypress中自动执行此“选择文件”操作的建议。提前谢谢。

Answer 1

我通过将一个input（type=file）元素放入DOM中解决了这个问题，这样cypress就可以找到元素并对其进行操作。

但是关于我之前遇到的问题，如果仍然可以在cypress中处理，我仍然希望听到您的一些见解。