title: Cypress_Test_Automation: how to trigger events for components created during runtime
body: <p>I'm using Cypress.io to automate one file upload test case based on a react page. The input component(type=file) for file upload is created during runtime when the page is rendered. </p>
  
  <p>Seems the button (by clicking the 'Choose file') opens a native file picker, which cypress Webdriver doesn't seem to support interacting with, so probably trigger an event to simulate file selection can be an option in this case. But the input(type=file) can't be located by Cypress because it is not a part of DOM, which means cy.get('input[type=file]') returns null.</p>
  
  <p>Could you please give me some thoughts how to do it?
  <a href="https://i.stack.imgur.com/h7mBt.png" rel="nofollow noreferrer">this button opens a native file picker</a></p>
  
  <p>I've tried with this - </p>
  
  <pre><code>const testfile = new File(['test data to upload'], 'upload.csv')
  
  cy.get('input[type=file]').trigger('change', {
    force: true,
    data: testfile,
  });
  </code></pre>
  
  <p>this brings no luck,because of
  CypressError: Timed out retrying: Expected to find element: 'input[type=file]', but never found it.</p>
  
  <p><strong>The source code of the page:</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  
  interface Props {
    text?: string
    type?: string | undefined
    fileID?: string
    onFileSelected: (file: any) =&gt; void
  }
  
  interface State {
    name: string
  }
  
  export default class FileUpload extends Component&lt;Props, State&gt; {
    fileSelector = document.createElement('input')
  
    state: State = {
      name: '',
    }
  
    componentDidMount() {
      this.fileSelector = this.buildFileSelector()
    }
  
    buildFileSelector = () =&gt; {
      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) =&gt; {
      if (type) {
        type = type[0] === '.' ? type : type.replace(/^/, '.')
        this.fileSelector.setAttribute('accept', type)
      }
    }
  
    handleFileChange = (event: any) =&gt; {
      const file = event.target.files[0]
      if (file) {
        this.setState({ name: file.name })
        this.props.onFileSelected(file)
      }
    }
  
    render() {
      const { name } = this.state
      return (
        &lt;div&gt;
          &lt;button
            onClick={(event: React.ChangeEvent&lt;any&gt;) =&gt; {
              event.preventDefault()
              this.fileSelector.click()
            }}
            style={{ marginRight: 10 }}
          &gt;
            {this.props.text || 'Choose file'}
          &lt;/button&gt;
          &lt;label&gt;{name || 'No file chosen'}&lt;/label&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>I look forward to receiving suggestions how to automate this 'choose file' action in Cypress. Thanks in advance.</p>