Experience QA Tips and Tricks

You've built an action and it's looking pretty great. Congrats! Now you need to make sure that your visitors have the same positive experience. The tips below are a few considerations that can save the day when you QA your own work.

Use the Browser Tabs and Window

  • Use two tabs at the same time: one with your experience running and one not.
    • Switch back and forth to help spot any unwanted changes.
  • Resize the browser window.
    • This can help spot issues with positioning, especially with badges. Typically this is most relevant for responsive/adaptive designs.

Use Other Browsers and Devices

  • Spend time checking your site and changes with several browsers.
    • This tests compatibility and can also give you a greater chance of catching a bug.
    • If you are short on time, you should at least check Firefox, the earliest version of IE that you support, Chrome, and Safari.
  • If you have access to mobile devices, view your action on them.
    • Emulators can be helpful, but they aren't always the most accurate way to display how your site will behave, especially when switching between orientations.

Page-Specific Tips

Page TypeTips
Home page/general
  • Sign in/out to check any potential layout changes
  • Check how drop-downs interact with your action. For example, ensure your action displays behind them.
  • Change sorts, filters, and layout (list views vs. grid views)
  • Trigger a lazy load
  • Navigate through subsequent pages
Product detail page
  • Select different options available for the product
  • Add the product to the cart
  • Update the number of an item in the cart
  • Remove items from the cart
  • Apply and remove a promo code
  • Verify that you can enter the checkout flow
  • Check any alternate checkout flows (guest vs. logged-in visitors)

Additional Considerations

Page structural changes
  • Change the sorts and filters on index/search
  • Navigate through pages on index/search
  • Log in/out of the site to see what changes
  • Update the cart in any way
  • Add a product to the cart
  • Open/close the menu on a mobile device
Overlapping elements
  • Check drop-down menus
  • Check the mini-cart
  • Check any other pop-ups
  • Inspect quick-view modals
  • Check click zones vs. links within an entire banner
  • If something covers the link/click zone, you've inserted, make sure that that nothing takes over the functionality of the inserted element. For example, you inserted a banner with a click zone below the nav. The nav has drop-down menus and your click zone displays on top of the drop-down menu when triggered. Tweak the z-indexes of one or both of the elements to fix this.
  • Check both orientations of your site on a mobile device
General notes & tips
  • Check to see if resizing the window breaks anything
  • Check page typing