Overview
Device presets let you configure browser sessions with predefined device settings, making it easy to test your application across different device configurations. Use device presets to:- Test responsive design across mobile, tablet, and desktop layouts
- Test localization with different locales and timezones (e.g., EU vs US users)
- Test accessibility preferences like dark mode and reduced motion
- Test browser-specific behavior (e.g., Safari mobile quirks)
- Add custom authentication headers for staging environments
When to Create Separate Presets
Create separate device presets when you need to:
See Applications and Environments for how device presets fit into the overall test configuration hierarchy.
Mobile Device Presets
For native mobile apps (iOS and Android), device presets configure the cloud simulator or emulator — not a browser viewport. Mobile testing must be enabled for your organization. Create mobile presets under Settings → Device Presets in the iOS Device Presets or Android Device Presets section. Each preset controls:
Mobile presets use the same priority order as web presets. Override at run time via the AI Chat Assistant or API using
devicePresetShortId.
Network log capture routes traffic through a proxy. If your app fails to load
data during tests, turn off Capture Network Logs on the device preset.
Available Settings
Device presets include the following settings:- Device Type: Choose between Desktop, Tablet, or Mobile configurations
- Resolution: Each device type comes with predefined viewport sizes
- Browse From: Route the browser’s traffic through a proxy so it exits from a chosen location’s IP
- Locale: Set the browser’s language and region settings (e.g., en-US, sv-SE)
- Timezone: Configure the device’s timezone (e.g., Europe/Stockholm)
- Custom Headers: Add custom HTTP headers for special testing requirements
Managing Device Presets
Creating a Preset
1
Navigate to Device Presets
2
Create New Preset
Click the “Create Device Preset” button
3
Configure Settings
Fill in the required settings: - Name your preset - Select a device type
(Desktop/Tablet/Mobile) - Configure locale and timezone - Optionally
override the default resolution - Optionally override the default user agent
4
Add Custom Headers (Optional)
If needed, add custom HTTP headers: - Click “Custom Headers” - Select a
header name or type your own - Enter the header value - Click the plus icon
to add more
5
Set as Default (Optional)
Toggle “Set as default preset” if you want this to be the project default
6
Save
Click “Create” to save your preset
Resolution Settings
Each device type comes with a default resolution:- Desktop: 1280×800 (recommended)
- Tablet: 768×1024
- Mobile: 375×667
Note: Using resolutions larger than 1280×800 may result in slower test execution. Our testing model is optimized for the default desktop resolution (1280×800) to provide the best balance of coverage and performance.
User Agent
Each device type comes with an appropriate default user agent. You can override this using the user agent toggle if needed for specific testing scenarios.Browse From, Locale, and Timezone
Browse from, Locale, and Timezone each use the same Override toggle as Resolution and User Agent. When a toggle is off, the field follows an automatic default and the description shows what that value is. When you turn it on, you set the value manually. Browse from controls where the browser’s traffic appears to originate. With the toggle off, the browser uses the default location and traffic exits from QA.tech’s own IP. Turn the toggle on to pick a location, and the browser routes through a proxy there so requests exit from a local IP. Use it to test geo-specific behavior such as localized content, regional pricing, or location-based redirects. Locations are grouped into Countries and United States (individual states); the available set is curated by QA.tech and may change over time. Locale and Timezone follow your Browse from choice automatically:
When a Locale or Timezone toggle is off, the field shows whether it is using the preset default or matching the Browse from location, so the effective value is always visible.
Picking a Browse from location updates Locale and Timezone to match that
location only while their own Override toggles are off. If you turn on the
Locale or Timezone override, your manual value is kept and is never changed by
a Browse from selection.
Custom Headers
You can add custom HTTP headers to be sent with all requests from this device (navigation, resources, API calls, redirects). This is useful for:- Adding authentication headers (e.g.,
Authorization: Bearer token) - Bypassing bot protection (e.g.,
X-Vercel-Code: your-code) - Adding API keys (e.g.,
X-API-Key: your-key) - Custom request identification
- Expand the “Custom Headers” accordion section
- Select a header name from the autocomplete dropdown (47 common headers available) or type your own
- Enter the header value
- Click the plus icon (+) to add the header
- Repeat to add multiple headers
- Click the trash icon to remove a header
- Header names must follow RFC 7230: letters, numbers, hyphens, underscores, and periods only (e.g.,
X-API-Key,Authorization) - Header values can contain printable ASCII characters
- Both name and value are validated before saving
Default Presets
Each project can have one default device preset. When set, this preset will be used for all tests unless overridden by higher-priority settings. See Priority Order for the complete hierarchy of how device presets are selected.Using Device Presets in AI Chat
You can discover and work with device presets through the AI Chat Assistant using natural language. The assistant can show you available presets and help you create or run tests with specific device configurations. Example: Creating tests for mobile Say you want to create tests that run on mobile devices. Simply ask:“Create a test for the checkout flow on mobile”The assistant will:
- Show you available mobile device presets
- Ask which specific preset you’d like to use
- Create the test configured with the selected device preset
“Run the login test on an iPhone”The assistant will show available mobile presets and run the test with your selected device configuration, overriding the test’s default preset for that run. More example queries:
- “What device presets do I have?”
- “Show me all mobile presets”
- “Can I test on tablet?”
- “Create checkout tests for mobile and desktop”
Priority Order
Device preset selection follows this priority order:- AI Chat runtime override (when specified)
- Test case setting (configured when editing a test case)
- Test plan setting (see Test Plans)
- Project default preset
- QA Tech default preset (fallback)
Integration with Test Plans
Device presets can be configured at the test plan level, allowing you to run the same test cases with different device configurations. This is particularly useful for:- Testing responsive design across multiple devices
- Verifying functionality on specific device types
- Running the same test plan with different locale/timezone settings
Setting Device Presets in Test Plans
1
Open Test Plan Settings
Navigate to your test plan and click “Settings”
2
Select Device Preset
Choose a device preset from the dropdown menu
3
Save Changes
Click “Save” to apply the device preset to your test plan
Multi-Device Testing Strategy
To test the same functionality across different devices, you have two options: Option 1: Separate Test Plans- Create device presets for each target device (e.g., “iPhone 14”, “Galaxy Tab”, “Desktop Chrome”)
- Create separate test plans that use different device presets
- Run the appropriate test plan in your pipeline or schedule
devicePresetShortId parameter in the applications array. This allows you to test different device configurations without creating multiple test plans. See Start Run API for details.
The GitHub App can automatically select device presets based on PR content - for example, testing on mobile when a PR mentions “responsive design”.
Accessibility Emulation
Test how your app responds to user accessibility preferences:
Configure in Advanced Settings when creating/editing device presets.
These settings emulate user preferences. For checking WCAG violations, see
Accessibility Issues.
Best Practices
- Use Project Defaults: Set a default device preset at the project level for consistent testing
- Match Target Devices: Choose presets that match your target audience’s devices
- Test Responsiveness: Create presets for different device types to verify responsive design
- Document Custom Presets: Add clear names and descriptions to custom presets
- Keep it Simple: Use the default resolution and user agent unless you have specific requirements
Restrictions
- Maximum viewport size: 1280x1024
- Device presets must use one of the three device types (Desktop/Tablet/Mobile)
- Each project can have only one default preset
Troubleshooting
If you encounter issues with device presets:- Preset Not Applied: Check the priority order to understand which preset is being used
- Resolution Issues: Make sure the override toggle is enabled if you want to use custom resolutions
- Custom Headers: Verify header names and values are properly formatted
- Default Not Working: Confirm only one preset is set as default in the project
Technical Notes
- Device presets are stored as snapshots in test runs for reproducibility
- Default configurations are optimized for common testing scenarios
- Custom headers are preserved across test runs
- Locale and timezone settings affect date/time handling in tests
- Device preset information is stored in test results and can be used for analysis
Related Documentation
- Test Plans - Configure device presets per test plan
- Applications and Environments - How device presets fit into the test configuration hierarchy
- AI Chat Assistant - Override device presets at runtime
- GitHub App - Automatic device testing for PRs