Testing Chrome Extensions With Selenium

A browser extension, which automatically finds the best coupon codes and discounts as you shop online in over 3,000 UK stores, and automatically applies coupons with one click. The browser extension is available for Google Chrome, Safari, and Firefox and it’s free to download. In 2018, the company behind the browser extension joined а publishing technology platform and together they have continued improving the existing product and building new tools that help people save time and money when shopping online.

Challenge

As mentioned above, once you reach the desired retailer’s website, this browser extension is offering you the best voucher codes. Needless to say, one of the most important things is to provide the right codes for that specific retailer. Another thing worth mentioning is the interaction with the extension. As expected people get frustrated if you provide them with buggy software, but when you install a helper software for another software then the dissatisfaction is on another level. That being said, basic functionalities and UI were also important for the business because being an interactive extension, there is a possibility to “break” the site (or more the user view) that you are visiting, and end up with nothing in return. Basically, a nonfunctional retailer’s website site and no deals.

For that purpose, we decided that we will do automated tests for the abovementioned browser extension. Taking into consideration that we haven’t seen many posts about automated tests for browser extensions, this was quite the challenge. Since this is an ordinary HTML page, with the only difference in how it is being accessed, we used Selenium as our first weapon of choice.

We began with the same steps as when testing an ordinary website. However, the real challenge came when we had to test the UI and prove that the extension is not expanding all over the website, and when we had to move the tests to the server. As usual, tests are most wanted for the Google Chrome browser, but headless chrome does not support extensions. So what did we do?

Solution

We started with the basics. Despite installing and uninstalling the extension, and checking the network requests and their headers, we’ve also put an emphasis on the UI testing and running-on-cloud solution. In order to test the UI part, we had to be sure whether the extension stays in the right position on the screen. The element’s position in the extension also had to be validated.

For the first part of the solution, we decided to check the element coordinates in relation to its parent (starting with the main layout of the extension as parent number 1). Then the specific parent layout was divided into quadrants, and with that, you could check if the element (taken as a rectangle) dots belong to the right quadrant. Also, there were additional checks if some other element should be placed above, or on the side in comparison to the one that was currently being checked. And now that we have done that, we covered the UI part.

The result – we’ve built tests that can validate the position of the elements in relation to their parent element and siblings.

The second part was to put tests on the cloud. And since headless is not supporting extensions, we needed to run the tests with GUI.

But how can you run a chrome browser on a server with GUI? – Well easy, by faking a display.

The solution was to use X virtual frame buffer (Xvfb), which actually performs the graphical operations in the virtual memory, without showing any screen output. Once we did that, the tests were fully functional and we had them all on the cloud.

Result

The network requests and the encoded values that we checked were exactly what we needed for the automation tests.

Checking the extension on different retailers’ websites, previously filtered by a combination of the content, was also another point that will persuade you to use automation testing.

However, enabling the tests to run on the cloud, for which we used AWS code build, provided us, not only to schedule the test to run on a daily basis, but also to include them in the delivery process, before and after, or when needed.

Once again, let’s not forget that automated testing increases overall software efficiency and ensures robust software quality.