A Win-Win-Win situation with Exploratory Testing

Exploratory Testing….

Exploratory Testing has many definitions, depending of course on who you speak to. Some people liken it to trying to break the system (which isn’t what I would choose), this can be a bi-product of exploratory testing. I quite like this one (taken from Elisabeth Hendrickson’s slides on “Exploratory Testing in an Agile Context

The Set Up

I’m going to use Fiddler for this, as I like to keep an eye on any background calls that the website may be making, that aren’t entirely obvious in the front end. For those that don’t know, Fiddler is a tool that helps in debugging web applications as it captures the network traffic, it can allow you to modify requests and responses before the browser can receive them. There are many tools that allow you to do similar, such as Burp and Charles Proxy, but I’m more familiar with Fiddler, so will be using this. It also enables me to understand far more about the system, as it can give a glimpse into the inner workings of a website.

The Charter

Hopefully, you’ll know all about charters in relation to Exploratory Testing. If you don’t, have a look at the slides here. A charter for me is a mission statement, it answers the question “What am I trying to achieve”, it allows exploratory testing sessions to be focused whilst giving me the freedom to go off other tracks if I deem it necessary during the session.

And so we begin….

I close down all other applications that I may be running, so that means Slack, Skype, Skype for Business, Outlook etc. This is to ensure that I am focused on what I want to achieve, and do not get distracted.

Select Web Browsers to only capture traffic from the web browser
Diving deep into our code? To see the rest apply now….

The most important aspect of a product page… Add To Bag

I already have some experience with how product pages work etc. The most important feature on the product page of an e-commerce site is to be able to “Add to Bag”. So I immediately jump in to the size selection.

The size selection for the product
Error message shown in my “Mini Bag” when I attempt to add more than the quantity that is left for an item.
The Error Message displaying in my Mini Bag
My first bug! Clicking on the error message, removes ALL the items from my bag :(
Undo in case I want to put my items back in my bag…. Yes please, I didn’t want you to remove all my bag in the first place!
Only 1 item is put back into my bag unfortunately.

I like the look of that, let’s save it for pay day…. The Wish List functionality

Next I want to look at “Add to Wish List”. Using “Comparable Products” as part of the HICCUPS heuristic, I imagine that it is similar to “Save for Later” on ASOS.com or the Wish list on Amazon.

Add To Wishlist, I am assuming this is similar to “Save for Later” on ASOS, or “Wish list” on Amazon…

I don’t know what clothes will go with these jeans…. The Complete The Look

Scrolling further down the page I get to the “Complete The Look” (CTL) section, I like this… a lot. I like how they show complete outfits with the Jeans that I’m interested in purchasing, in the hope that I might pick up some of the tops or trainers that I’m being shown. ❤

I really like how they’re showing complete outfits with the Jeans I’m interested in purchasing. For someone who has difficulties in matching items of clothing together this is perfect!

I want to know more…. The Newsletter Signup

Further down, I see a Newsletter Signup…. This is what I like to see! An E-Mail box, my mind immediately starts thinking about some classic e-mail test cases… things like “__@a.com” or “abc@a.co.uk” I start playing about, and notice in Fiddler a request being made to :

/api/newsletter-banner-fragment/subscribe-customer request
I can see my request body here being made to the API that will subscribe me to the newsletter
Rules -> Customize
You want to copy and edit this snippet of text in the editor so that it will break on the newsletter subscription
This will now break on every request that contains “api/newsletter-banner-fragment”
You can edit the “email” in the body to be something that is an invalid email, or to whatever you want, and get a 200 response.

My Takeaways

And with that, my exploratory testing session has come to an end. To summarise, I’ve found some things I really liked about the Zalando website, things that to me didn’t necessarily make sense, some areas that I’d love to explore more and 2, possibly 3 “bugs” based on HICCUPS heuristics.

  • The stock values in the size/option drop-down don’t get updated when adding to bag, which is a bit confusing.
  • The “Got It” message on the Mini Bag removes all the items from the bag, when I feel they shouldn’t remove any items from the bag.
  • The subsequent “Undo” option after selecting “Got It” only adds 1 item back into the bag, regardless if I had 2 of that item in there.
  • The rainbow 🌈 for the “Wish List” once I’ve added it to my Wish List.
  • The ability to see the product being worn in a number of different outfits. As someone who struggles to find clothes that match, this is a really nice feature. 👌
  • The message in the source code telling people to apply to work there
  • The carousel behaving differently for Complete The Look and Similar Items. From a UX perspective, I believe they should behave similar when scrolling through them. ▶️
  • The fact I need to create an account to add to my Wish List. I personally feel that guests should be able to create Wish Lists, and then either merge when they sign in, or saved when creating a new account.
  • For the newsletter, even after signing up and refreshing the page, the fact that the newsletter sign up persists probably isn’t the greatest experience. I’d like to think this could be hidden once the user has signed up to the newsletter. 📰
  • The rest of the product page — I feel there’s a whole load of functionality that I didn’t test on the product page, so definitely more time to learn about the other elements of the page would be amazing.
  • Where do the size/stock values come from? I spent far too long looking in Fiddler, I could see a request being made with the values, but I couldn’t see any response that set the values! I’d love to find this out as it was just frustrating not knowing!
  • The newsletter sign up, there are many ways I could investigate this both from a security perspective and from just entering invalid emails, and seeing how it behaves.
Pretty-Print this minified file… This is a really nifty little feature that I had no idea existed in Chrome Dev Tools

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gareth Waterhouse

Gareth Waterhouse

73 Followers

I mostly write about work and testing. I occasionally write about Sunderland AFC.