Creating mobile web tests

Once you decide on your testing strategy for mobile web, you can use the mabl desktop app to train tests on an emulated mobile device in your Chrome browser. That way you can create a dedicated test that validates the user experience on a given mobile device like the iPhone. You can then run that very same test on other devices and screen orientations where you expect the application experience to be similar.

To train a test with an emulated mobile device setting, you can either create a new test or update the setting for an existing test. To create a new test, follow these steps.

• Open the mabl desktop app.
• Click to create a new browser test using the New test button in left sidebar navigation.
• Fill out the test creation form by specifying the mobile device you want to emulate within the Device section.

📘

Screen resolution requirements

When training a mobile test, 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).

• Click the Create test button to start a training session with an emulated Chrome browser experience based on the specified device configuration.
• Add desired steps for your test case such as clicks, assertions, and more.
• Save your test changes.

You are now ready to run your test. See our guide for running mobile web tests to learn more.

🚧

A note on menu and hover differences

Menu navigation and hover actions are something to watch for when running tests across desktop and mobile devices. It is likely for the navigation to be collapsed in a hamburger menu on certain devices. There are also no hovers actions on touch input devices such an iPhone.

Updating test device setting

When you go to edit steps of an already created test, mabl will use the configured test device setting to launch a training session that emulates the respective desktop or mobile device experience in your local Chrome browser. You can change the device setting for a test by following these steps:

• Go to the test details page
• Click on the pencil icon button to edit the test info
• Choose your new device setting
• Save your changes