Upload File

​

Overview

​

Form Fields

​

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

1. Add the Step: In the No-Code Editor, add an “Upload File” step to your test sequence

2. 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"])

3. 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

4. Save Step: Click “Save” to add the step to your test sequence
5. 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

• 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

​

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