Skip navigation

Sample: File Upload

Consider following sample form. We will practice the upload file actions with below test suite.




Test suite

To create the test suite, follow these steps:

  1. Create a file named data/file-upload.tests.yaml in your test project.

  2. Add the following content to the file:

    scenarios:
      - url: https://tuyen.blog/optimizely-cms/testing/file-upload-test-sample/
        label: Upload files
        actions:
          # Upload single file
          - input: '#my-document'
            file: alloy.tests.yaml
    
          # Upload multiple files
          - input: '#my-documents'
            file:
              - alloy.tests.yaml
              - color-blender.tests.yaml
    
      # - url: https://tuyen.blog/optimizely-cms/testing/file-upload-test-sample/
      #   label: Upload multiple files for single file input
      #   actions:
      #     - input: '#my-document'
      #       file:
      #         - alloy.tests.yaml
      #         - color-blender.tests.yaml
    

Verify

Execute the following command to verify the test suite:

npm run ref -- --test-suite file-upload
npm run approve -- --test-suite file-upload
npm run test -- --test-suite file-upload

Notes

If the upload file action doesn't work, try add useFileChooser property as in sample below:

scenarios:
  - url: https://tuyen.blog/optimizely-cms/testing/file-upload-test-sample/
    label: Upload file
    actions:
      - input: '#my-documents-selector'
        file:
          - alloy.tests.yaml
          - samples/file.pdf
        # Only use below property if the scenario
        # doesn't work without it
        useFileChooser: true