Testing the responsive web design of your application is important for validating that users have a consistently great experience across mobile devices. In mabl, you can train and run mobile web tests to validate your web application across multiple devices and screen orientations.
This article outlines some guidelines for testing mobile web apps.
Selecting mobile devices to emulate when running tests in Chrome
Mobile web tests vs. mobile tests
This article describes strategies for mobile web tests, which are a type of browser test that interacts with your responsive web application within a mobile-emulating Chrome browser. They are not the same as mobile tests, which interact with a native Android or iOS application using mobile-specific actions.
Analyze usage patterns
When devising a mobile web testing strategy, it is best to start by analyzing data from actual usage patterns. For example, Google Analytics 4 (GA4) provides such data within its Reports section.
Go to the User > Tech > Overview report to get a breakdown by user device and get the most common screen resolutions:
Reviewing device usage in GA4
Don’t have analytics data access?
You can contact your product management and marketing teams to request an export of usage data from mobile devices in a CSV or PDF file format. If you are starting a brand new project, you can search the web for the most popular mobile screen resolution that you should consider testing for.
Choose a strategy for testing across devices
After identifying which screen resolutions you want to test, align with your teammates on a strategy for testing your application across devices. Depending on how the responsive design of your application works, you can choose from one of the following strategies:
Run the same tests across desktop and mobile devices
If the differences between desktop and mobile are minor, you can train tests that run across all device types and use conditional logic to account for differences.
For example, if only the main navigation changes in your app, it might be easier to maintain conditional logic within the same test to account for that change when running in a mobile web browser.
Create separate tests for desktop and mobile devices
If the layout, functionality, or user experience differs significantly between desktop and mobile versions of your application, it may be easier to create separate tests for desktop and mobile devices.
For example, if your app has a completely different product filtering and sorting interface on mobile compared to desktop, or if certain features are entirely omitted or simplified on smaller screens, you’d have to use a lot of conditional logic to cover all mobile and desktop scenarios in the same test. In this case, it makes more sense to create and maintain separate tests for desktop and mobile devices.