Skip to main content

Creating mobile web tests

Eva Ferreira
  • Updated

In mabl, you can validate your web app across different devices with mobile web tests. Unlike mobile app tests, which interact with a native Android or iOS application, mobile web tests interact with your web app in Chrome emulation. This article explains how to create mobile web tests.

Before you start

Before creating mobile web tests, we recommend that you analyze usage patterns and form a strategy for testing across different devices. See mobile web testing guidelines for more details.

Train a mobile web test

To train a new test with an emulated mobile device setting, follow these steps:

  1. Create a new browser test: New test > Browser test
  2. Give the test a name
  3. In Core settings, click on the Mobile web tab.
  4. Select an application, plan, or application URL to associate the test with.
  5. In Mobile web viewport, select a device and orientation. Your screen resolution should be at least 120px greater than the height of the device size. For example, if you need to test iPhone 13 Pro Max [926x428], your screen resolution needs to be at least 1146px height (926px +120px).
  6. Click the Create test button to start a training session with an emulated Chrome browser experience based on the specified device configuration.
  7. Add desired steps for your test case such as clicks, assertions, and more.
  8. Save your test changes.
training_mobile_web_test.png

Training a mobile web test

On subsequent training sessions, you can manage the viewport from the Training configuration modal: Edit test > Launch Trainer.

edit_test_mobile_web.png

Updating device settings in a subsequent training session

Understanding mobile emulation

Mobile emulation relies on two key settings in Chrome: setting the viewport size and passing a specific user agent string as an HTTP header on all network requests. If you encounter issues with your application not rendering as expecting during execution, you can check the User-Agent string to isolate the source of the failure:

  1. In Chrome DevTools, toggle the device toolbar and select a mobile device to emulate.
  2. In the Console panel, type navigator.userAgent to the see the user agent string value of the selected device.

You can use this exact string value to troubleshoot your application's device detection logic and confirm that the correct input is being sent by mabl.

Limitations

  • Mobile web testing is only supported in Chrome emulation. Testing mobile web apps on other browsers is not supported.
  • Hover steps are not supported in Chrome mobile emulation.
  • Visual tests are not supported for mobile web.
  • On iOS devices, Apple requires Chrome to use Apple's WebKit rendering engine, which is different from the Blink rendering engine that Chrome uses on desktop and Android. Due to some differences in these rendering engines, on rare occasions you may see slightly different results when running a mabl test in Chrome emulation on an iOS-based device, such as an iPhone, compared to using Chrome on an actual physical device.
  • The test details page does not display element screenshots if the test was only run on emulated mobile devices.

Related articles