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:
- modals (Pinny)
- accordions (Bellows)
- carousels (Scooch)
Typically, an issue with a component propagates as a problem throughout the entire device and OS.
Test forms with particular scrutiny.
Ensure that the correct native keyboard is invoked for each field type.
The corresponding keyboard and field types are:
- numeric for number-only fields
- The postal/zip code field should be numeric only in the case where the shipping is restricted to the US. If your site visitor is shipping to the UK or to Canada, he or she cannot complete checkout if the form does not allow alphabetic characters.
- email-specific (with the
@symbol) for email address fields
searchkeyboard for search fields.
Ensure that each required form field is marked with an
*asterisk character. At other times, only mark fields with an
optionaltag 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:
- incomplete data
- invalid data
- an empty field.
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:
- a registered site user and
- a guest.
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
- cart edit
- account page
- profile page
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.
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:
- global navigation
- pop-down search
- mini cart flyout.
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
search addressin the "Checkout" page
- filters in the "Listing" page
- product options in the "Product" page (for example, color and size)
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:
- filters on listing pages
- color and size chips on product display page
- zoom and pan feature for a product image
- Watch for this especially on older devices.
- success notifications and modals
- dealer locators and maps
- hero carousels
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:
- Bazaarvoice: for reviews
- RichRelevance: for product suggestions (also known as "you may also like...")
- image viewers
- image carousels.
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:
- Social sharing networks
Verify these external resources across multiple device versions and brands.
Edit in GitHub