Cross browser testing using BrowserStack

It is very rare when building web apps that you can guarantee exactly which operating system, browser and version of that browser, that your users will be arriving on. Even then the chances are that it isn’t the same browser that the engineers are using to build it — so cross browser testing should be a requirement in the vast majority of projects.

Unfortunately it often isn’t the case and this leads to an inconsistent and often vastly reduced experience of web apps in some browsers. In the past cross browser testing has been tedious, time consuming and dare I say boring! Hopefully this article will show you our journey in working towards improving that process in our project and how tools like BrowserStack Automate can really help.

We are currently working on a web app to help our online planning team -these are the people that do the initial planning to make sure there is enough capacity to meet expected demand across the country delivering online grocery orders.

Like many large organisations, Sainsbury’s has plenty of Windows users. These machines are restricted by the companies managed policy. This means that many of the colleagues we build web apps for are locked to a particular version of a browser. The software engineers in the team I work with are all Mac based, so we knew we were potentially going to have inconsistencies between even the same browser on different operating systems. Even though we knew exactly which browser and operating system our web app users would be accessing it from, a luxury that is rarely the case, we knew we would still potentially have some cross browser issues.

Working as an agile team meant that we were constantly engaging with and delivering new features to our users to get feedback, but sometimes we would see messages from our users along the lines of “I don’t seem to be able to … ” . When we accessed the web app in the same environment and checked, often the issue can’t be replicated by us. We use shared docker images from dev to production and before we release any code, it runs through our pipeline. This pipeline consists of unit tests, functional tests and end to end tests. These tests need to have passed, so we have a high confidence that any features we release are well tested and our setup is replicated across all environments.

To make matters more interesting, the team we are building the application for are located in London, we are in Manchester — so although we have tools to screen share and the ability to view an issue, diagnosing the cause can get a bit more tricky! The Windows machines we did have at our disposal did not have adequate development tools and the console was locked down by the organisations managed policy, so that wasn’t going to be much help to us when diagnosing the issue.

Enter BrowserStack

What about ongoing…

BrowserStack has a great feature that records each run through of the tests as a video, so if you get a failure within the tests, you can simple login and view the recording of the failure. Once you find where it fails you can use BrowserStack Live to navigate to the same place in the same operating system and browser where the tests failed and investigate the issue using the developer tools.

Yes, some. We personally found that tunnelling access from BrowserStack into our environment was slow and there could be delays between running one test and the next. If the application was publicly accessible and we didn’t need to tunnel the performance significantly increased, but this wasn’t a viable option for us.

We also found that WebDriverIO selectors and commands don’t work across all browsers in the same way, some selectors are browser specific and we had to implement some work arounds to get tests to run across both Chrome and Internet Explorer.

Overall though we found BrowserStack to be a great tool for easily testing our web app across browsers using our existing E2E tests. The combination of operating systems and browsers available is really wide ranging — and we haven’t even looked at the mobile options that are also on offer.

Related posts:

After more than a year working on my craft and developing myself so I can accomplish my life goals, I had come to believe I had overcome the main hurdle of doubt. While thinking about my goals and…

En el campo contable existe una discusión respecto a la regulación, los intereses y la información que deben revelar las administraciones públicas, pertenecientes al sector dentro del que se…

A decision tree is a Supervised Machine Learning Algorithm that can be used for Classification and Regression problems but is mostly preferred for solving Classification problems. Step 1: Begin with…