Automated WooCommerce Testing with Ghost Inspector

WooCommerce sites are made up of a complex set of integrated parts. There’s WordPress, WooCommerce itself, other third-party plugins, and a theme. Each of these components require frequent updates and has the potential to break critical functionality on your site. This is why it’s critical to have automated tests.

For a WooCommerce site I used to work with, we had a checklist of items we would manually run through after any major update:

  • Verify products on home page look correct and load
  • Test “Add to Cart” button
  • Test removing item from cart
  • Verify all product on /shop page look correct
  • Test complete checkout with Stripe for guest checkout
  • Test complete checkout with PayPal for guest checkout
  • Test complete checkout with Stripe with coupon for guest checkout
  • etc.

Needless to say, this took a lot of time. Thankfully, tests like this can all be automated using Ghost Inspector.

Setting Up Automated Tests

Ghost Inspector (which uses Selenium under the hood) allows you to quickly set up acceptance tests for a WooCommerce site. After every deploy to our staging environment, Ghost Inspector automatically kicks off the tests and then posts the results and screenshots to our #qa Slack channel when it finishes.

I’ve set up test suites for different critical aspects of the site: checkouts, accounts, cart actions, and template checks.

The template checks I have set up are very basic, Ghost Inspector just validates that the page loads. But a great additional feature of Ghost Inspector is that it will take a screenshot every time a test completes, and if the screenshot differs significantly (you can set the threshold) from the previous screenshot it will notify you. So, this can also alert you to visual changes and regressions as well as functionality bugs.

How to Set Up a Test

Setting up a test doesn’t require any coding knowledge, though familiarity with CSS selectors and a bit of javascript would be helpful. Here’s how to set up a basic WooCommerce test with Ghost Inspector:

Additional Tips for WooCommerce

If you’re testing checkout and recording steps with the Chrome extension, you’ll have a bit of trouble with the Select2 fields and credit card validation. Instead of assigning variables to the field, I use a javascript action instead.

For the Select2 “State” select field:

jQuery('#billing_state').val('TX').trigger('change');

For the credit card fields:

jQuery('#stripe-card-number').val('4242424242424242');
jQuery('#stripe-card-expiry').val('09 / 24');

If you’re testing multiple checkout scenarios, it’s also helpful to set up variables that you can reuse throughout the suite for each test.

P.S. I am not affiliated with Ghost Inspector in anyway. Just love the service and wanted to share it.

About Devin

I'm a WordPress developer based in Austin, Texas. I run a little theme shop called DevPress and work for a startup called Nano. Find me on twitter @devinsays.

2 Responses

  1. Looks very interesting. Didn’t know something like this existed. It’s indeed a burden to test everything on a WooCommerce site when updating some plugins. You don’t wanna know how many times something stupid went wrong with the one wooshop I’m running.
    Definitely going to setup the free trial and see where it gets me. Thank you.

Leave a Reply