Upload File
Upload files to form elements and file input fields in your test cases
Overview
The Upload File step allows you to upload files to file input elements on your web page. It handles the complete file upload process, including file selection, cloud storage upload, and form submission for comprehensive file upload testing scenarios.
Form Fields
Field Name | Type | Required | Description |
---|---|---|---|
Locator | string | Yes | CSS selector or locator for the file input element |
File | file | Yes | File to upload (selected through browser file dialog) |
Form Configuration
Locator Field
- Text input field for entering CSS selectors targeting file input elements
- Element Picker Integration: Click the target icon to visually select file upload fields on the page
- Provides locator validation and suggestions
- Should target
<input type="file">
elements or custom file upload components - Important: Element picker selection is required for proper test execution (see Technical Details below)
File Selection
- Browse button opens native file dialog for file selection during test creation
- Displays selected file name or previously uploaded file name
- Supports all file types and formats
- Files are securely uploaded to cloud storage with signed URLs
Examples
Complete Workflow Example
Here’s how to add an Upload File step in your test:
- Add the Step: In the No-Code Editor, add an “Upload File” step to your test sequence
- Select Target Element:
- Click the target/crosshair icon next to the Locator field
- This activates the element picker mode
- Navigate to your application and click on the file input element you want to target
- The locator will be automatically populated (e.g.,
input[type="file"]
)
- Choose File:
- Click the “Browse” button in the step form
- Select your test file from your local computer (e.g.,
test-document.pdf
)
- The file name will appear next to the Browse button
-
Save Step: Click “Save” to add the step to your test sequence
-
Run the step using the “Run Single Step” feature to ensure that the file upload is happening.
Common Issues
Element Not Found
- Ensure the file input element is visible and not hidden by CSS
- Some custom file upload components may hide the actual input element
- Check if the element is loaded dynamically and may need wait conditions
Upload Failures
- Network timeouts can cause upload failures for large files
- Verify cloud storage permissions and signed URL generation
- Check browser file access permissions
- Ensure the target input accepts the file type being uploaded
Timing Issues
- Large files may take time to upload - consider adding appropriate wait conditions
- File processing on the server side may require additional wait steps
- UI updates after upload completion might need verification steps
File Path Issues
- Use relative file paths or files accessible to the test environment
- Ensure test files are included in the test project structure
- Consider using test fixtures for consistent file availability
Technical Details
Why Element Picker is Required
The element picker is essential for Upload File steps because of how file uploads work during test execution:
- During Test Creation: The native file dialog opens normally when you click “Browse” to select your test file
- During Test Execution: The native file dialog will not open in the live browser when the test runs
- Internal File Handling: Instead, our test runner uses the element you selected with the element picker to programmatically set the file path and trigger the upload
This approach ensures your tests can run reliably in automated environments where native file dialogs would interrupt the test flow.
Element Selection Best Practices
- Always use the element picker rather than manually typing selectors for file inputs
- Ensure the picked element is the actual
<input type="file">
element, not a wrapper div or button - Test your file upload step after creation to verify the element selection works correctly
Related Steps
- Fill - For filling form fields before or after file upload
- Click - For clicking submit buttons after file upload
- Wait for Element - For waiting on upload completion indicators
- Verify Visibility - For verifying upload success messages
- Verify Value - For checking uploaded file names or paths