Product search bug: setting the value property of the search field

This post is part of a series on the test IO blog about real bugs that our testers have found during test cycles. In each post, we explore the details of the issue, explain its impact, and discuss what software teams can do to avoid similar problems.

In the article 5 Ways to Make Your E-Commerce Website Search Feature Convert kissmetrics highlights the importance of customizing product search on your site. Some of the steps include creating a search bar that stands out visually for users and setting up filtered search results with specific filters that target your audience. The other key takeaway is properly handling long tail semantic searches. For example, if a user types in a long search string that is specific, your search engine needs to be able to find the product or a similar product without converting it to a shorter string. This can include autocomplete functionality for suggestive searches as the user types. If you are working with the “HTML DOM input search object” you’ll be utilizing various object properties such as autocomplete, autofocus, max length, title, value, defaultValue, and type. The HTML DOM input search object is new in HTML5. It represents an HTML <input> element with type="search"

While testing an ecommerce site, one of our testers found a bug during usability testing while testing product search. First, the tester located the product search on the site. Then, the tester attempted to do a product search by typing in the field. While the tester was typing they noticed the cursor moved, but the search box remained blank.

The bug was initially discovered on Samsung Galaxy S5, Android 6.0 Marshmallow. However, it ended up being reproducible on multiple devices and operating systems.

This bug highlights the importance of understanding product search and the HTML DOM input search object. If you are using this method you must ensure that all object properties are in place. For example, the “value” property can be used to set the search field to text. The “type” property indicates what type of form field you are using. So when you are using search, your “type” will always be “search”.

var x = document.getElementById("mySearch").type;

The “autocomplete” value property allows the browser to automatically complete values based on the users past search. The “required” value property requires that the form must be filled out before submitting. The “maxLength” value property sets the length for values entered by users. The “placeholder” value property gives the user a sample description of what to enter in the field. The “autofocus” value property determines whether a text field should automatically get focus when the page loads.

In this case, the search field may have not displayed text because the value property was set to something other than text or not set at all. There could have also been an issue where the “autofocus” value property was not set to false instead of true, which left the field out of focus when the user typed. Another possibility is that even if the field was set to text for whatever reason the search field did not register that the “type” property the user was typing in was a search field.