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