Links

Mobile version testing

What is a mobile version / RWD?

Your website may behave differently when opened on smaller screens, such as a smartphone or a tablet. This behavior is called Responsive Web Design (RWD) or simply a mobile version of your website - your website is designed in a way that adapts to different screen widths.

When to test more than one screen width?

If your app is very similar on mobile and desktop, there's no need to create separate mobile tests - it will just double your work without much value added. We recommend that you focus on one screen resolution - the one that has the most users. You can still create 5 - 10 additional tests for different resolutions, but focus on the major differences between the mobile and desktop versions - just check if these specific core differences work correctly.
If your app has many differences between mobile and desktop, for example very different navigation and user journeys, it makes sense to develop tests for mobile and desktop in parallel, as completely independent projects.

How to create tests for different screen resolutions?

The easiest way to test the mobile version (responsive web design / RWD) is to have 2 different projects: one for desktop tests and one for mobile tests. Set a different window width per project in its project settings.
We recommend doing this in the following way:
  1. 1.
    Create all the important desktop tests
  2. 2.
    Duplicate the project
  3. 3.
    Rename the new project and add - Mobile suffix to the project name
  4. 4.
    Change the window width to 400 in the project settings
  5. 5.
    Adapt the tests to the mobile version via re-recording test steps.
Duplicate the project and change its name
Change the window width
Run tests with smaller mobilewindow width