Multi-Device Testing in a single tab

You can test your website or web application on two devices in a single tab simultaneously. For example, you can test a website on an iPhone 13 and a Pixel 7 real devices together in a single tab.

This guide covers:

• Supported devices
• Test on multiple devices in a single tab
• Toolbar options
• Synchronize interactions across devices

Supported devices

Test on multiple devices in a single tab

To test on multiple devices in a single tab, follow these steps:

1. Log in to the Live dashboard.
2. Select your preferred device-browser combination to run your website or web app.
3. Hover the cursor to the right side of the screen and click + Add Device button.
4. Select another device-browser combination.
5. Open your test website in the second device’s browser.
   You can now use the toolbar options and interactions to perform the tests on both devices simultaneously.

Toolbar options

In a single tab multi-device testing session, the Live toolbar gets divided into two categories: Single Device Controls and All Device Controls.

1. Single Device Controls: These controls affect only the active device.
   Active device is the currently selected device. It is also mentioned in the toolbar and is with the blue background.
2. All Device Controls: These controls are the options that affect both devices in the session.

Single Device Controls

You can use the following toolbar options on the selected device:

• Device and browser information: This displays the device and browser information. You can also stop a single device if you want to test on a single device.
• Switch Browser: You can switch to other device-browser combinations during an ongoing test session to test your website on different supported device-browser combinations.
• Show Home Screen: Takes you to the device home screen.
• Change Location: You can set different locations on both devices to compare how your website loads and behaves in different locations simultaneously.
• Files: You can test file-based scenarios such as uploading and downloading a file. To know more about how to test the file-based scenario, see Upload files to BrowserStack real devices and Download files to BrowserStack real devices.
• Throttle Network: You can set different network conditions on both devices to compare how your website loads in different network conditions. To know more about throttle network, see Test using Throttle Network on iOS and Android devices
  

The following video demonstrates how you can test your website for different locations and network conditions simultaneously by setting different locations and network conditions on both devices.

All Device Controls

• Local testing: Use this option to configure Local Testing settings. To know more about Local Testing, see Local Testing - Overview.
• Zoom: Use this option to zoom in or zoom out of the devices.
• DevTools: Use this option to open DevTools and debug your website on two devices simultaneously. To know more about DevTools, see Debug your website with DevTools on mobile.
• Rotate Device: Use this option to rotate both devices.
• Settings: Use this option to configure settings such as enabling interaction sync, self-signed certificate support, and setting idle session timeout.
• Record session: Use this option to record the test session. To know more about recording a session, see Record your test session.
• Stop All Devices: Use this option to stop both devices and close the session.

Synchronize interactions across devices

You can synchronize your interactions across both devices. This means that when you perform certain actions on one device, those actions are replicated on the other device automatically.

To enable interaction sync, follow these steps in your Live session:

1. Click Settings > Sync interactions across devices toggle.
2. Switch on the Sync interactions across devices toggle.
   A confirmation message is displayed confirming whether you want to enable this feature.
3. On the confirmation message for restarting the devices, click Proceed.
   The devices restart and self-signed certificate support is disabled.
   You can now interact with one device and your actions are replicated on the other device.

Interaction sync limitations

Interaction sync has the following limitations:

• Both devices need to have the same URL. At times you need to enter the URL manually if both devices don’t sync.
• If the URL in both devices is the same and interaction sync is not working then refresh the page.
• Interaction sync on certain websites does not work.
• You may face some interactions sync issues on iOS 13 and lower versions iPhone devices.
• Interaction sync is not supported on Vivo, Oppo, and Huawei devices.
• Occasionally sensitivity varies during scroll.