Functional Testing Checklist

Test your mobile site's functionality.

1. General Components

Test the functionality of the mobile site components across different devices. Also, for each device you test, plan to test different browser versions.

Pay particular attention to:

Typically, an issue with a component propagates as a problem throughout the entire device and OS.

2. Forms

Test forms with particular scrutiny.

Ensure that the correct native keyboard is invoked for each field type.

The corresponding keyboard and field types are:

Ensure that each required form field is marked with an * asterisk character. At other times, only mark fields with an optional tag when they are optional and leave mandatory fields unmarked.

Particularly for required form fields, scrutinize every possible error state.

Common errors for required fields include:

A. Errors

Highlight the form field with the error in red. Display the associated error message close to the error field so that your site visitor corrects the faulty input.

Enable scroll-to-field for form error correction. However, be careful because this feature tends to break on various browsers and devices.

The style of the displayed error messages is typically consistent across browsers and devices.

To ensure the display of the correct styling, test your mobile site on the oldest browser version on the oldest device. Then test the newest browser version on the newest device.

If both tests show the correct error styling, typically, the intermediate versions of browsers and devices also show the correct style.

3. Checkout Flow

Execute a checkout flow test during each QA session of your site. The checkout flow is the most vital flow for an e-commerce site and therefore deserves your keenest attention.

Test the flow on every device and operating system that your mobile site version supports.

If the option is available on your site, perform the test both as:

4. Data

Portions of your site that require the browser to store data or to load a large quantity of data need attention during the QA process.

A. Data Storage

Ensure that changes apply correctly and that they are carried between devices for portions of your site that need to store data.

Mobile site elements that commonly need to store data include the

These items need especially close scrutiny in your QA process if your site visitor edits them in a popup modal.

B. Loading Data

Identify the page on your site with the highest load. A common example of a page with high load is a very long product listing page that contains hundreds of products.

Scroll down as far as you can on a page with high load to ensure that the browser does not crash as it loads and stores the page data.

5. Transitions

In all of the environments that your mobile site supports, test the page transitions, modal overlays, and loading interstitials. Another common page transition for you to test is the behaviour of the "Back" button in various browsers and devices.

6. Site Elements

Test the menus and flyouts on each page. Some common examples of these elements on e-commerce sites include:

Ensure that each element works correctly on its own. Then go on to access the elements one after another.

These elements should all work together. Or they should work in such as way that if you open a second element, the first one cleanly closes.

Older devices are slowed down by multiple requests.

On a legacy device, destructively test places such as the

A. Commonly Broken Elements

Portions of the site with many working pieces are particularly prone to functional issues especially across different OS versions and devices.

Mobile site elements that commonly break include:

Be careful especially in the case where the height of the carousel adjusts for varying image size or text size.

If present, chat is particularly high risk because of user interaction. It needs additional QA time.

7. External Resources

Be aware of external vendor features that are incorporated directly into your site or that are linked as resources inside your site.

Embedded External Resources

Common embedded site elements often include:

These elements are often neglected from rigorous tests on the mobile platform. Ensure these resources interact well on your mobile site version on different mobile devices.

A. Linked External Resources

Commonly linked external resources include:

Verify these external resources across multiple device versions and brands.

Edit in GitHub