Cross Browser and Mobile Browser Testing

Cross browser testing is always a bit of a challenge for test teams that are trying to keep up with the ever increasing combinations of browsers, platforms and operating systems. Add mobile browsers into the mix and you may as well forget traditional approaches testing. Testing manually just isn’t going to cut it.

One approach worth looking at for cross browser testing using TestComplete’s browser emulator feature. Depending on your website or web app you may well be able to write a test once then just scale up using emulations of browsers on a single machine. Alright, nothing really replaces testing on the real device with the final release of the product. That’s an approach that’s time consuming, requires lots of physical mobile devices and doesn’t scale well. The next best thing (which does scale well, doesn’t require physical devices and saves you lots of time) is to use the TestComplete browser emulation capability.

TestComplete allows you to define phone and tablet browser profiles that can then be emulated on a standard windows machine. With these profiles defined you can create a single automated test and then run this automated test across all these defined profiles. This makes it simple and fast to scale up and run cross browser tests for multiple platforms. We’re going to take you through the steps you need to follow to achieve this.

Emulating Mobile Browsers

The browsers implemented on Apple iOS, Android, BlackBerry, Amazon Kindle and many other mobile devices all use the WebKit browser engine. This is the engine that drives Google Chrome too. So to emulate all these different mobile browsers TestComplete uses Google Chrome too.

To emulate these mobile browsers effectively TestComplete overrides a number of browser characteristics in order to make each emulation of a mobile browser represent, as closely as possible, the browser running on the mobile device. This means when each emulated browser is started the Chrome browser will be run in a mode where:

• The ‘User Agent‘ header in the http request from the browser is modified to represent the browser that we’re emulating. This makes the web server think that the browser is your mobile web browser. So the web server will then return content applicable to that browser type (even though it’s chrome running on your desktop machine).
• The ‘Browser Screen Size‘ that defines the area that the web site has to render the html information on. As we’ll see later the Chrome browser that is actually fired up on your desktop will be resized so that it mirrors the size of the browser that runs on the mobile device. This enables us to see how the web site would actually look like on the mobile device.

We’ll use the term ‘mobile browser profile’ to define this combination of ‘User Agent’ and ‘Browser Screen Size’ that represents a specific mobile device and browser that we’re emulating. We can see the mobile browser profiles already configured in our TestCompelte project in the properties tab for the project.

It’s from this Properties tab that we’ll want to configure a range of mobile browsers to emulate. So for example we may want to emulate Safari running on an iPad. If this is the case we can set this up as follows:

Step 1 – Define the User Agent String

First work out the User Agent string you want to emulate. There are a couple of ways to do this. You can take a mobile device and go to ‘www.whatsmyuseragent.com’ to find out an actual user agent string. Or you could go to a site like ‘www.useragentstring.com’ which lists a range of different user agent strings for mobile devices. Either way you’ll need to get a user agent string like this:

Mozilla/5.0 (iPad; CPU OS 7_1_2 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D257 Safari/9537.53

Step 2 – Define the Browser Screen Size

Second determine the size of the browser screen you want to emulate. Again you can take a real physical mobile device and visit a site like ‘http://whatsmy.browsersize.com/’ that will show you the browser dimensions. For the iPad I’m using in this example I have:

Screen Width: 768
Screen Height: 1024

Step 3 – Add a New Virtual Browser

Third we need to add the new virtual browser in TestComplete. To do this go to the Virtual Browsers properties page (see image above) and then add a new virtual browser:

Add A New Virtual Browser Record:

Specify The User Agent String

Specify The Browser Screen Size

Specify The Browser Name

It’s important to note that before you run this that any other Chrome browsers running on your system should be shut down first. A couple of other points that will help too:

1. Go to Chrome Advanced settings (chrome://settings/) and make sure ‘Continue running background apps….’ is de-selected.

   

   This will make sure that when you run the emulated browser that this is the only Chrome browser running. This helps make object identification easier (see Preparing Chrome for Web Testing for more information).

2. Go to Chrome settings (chrome://settings/) again and in the ‘On Start Up’ section make sure ‘Open a specific page…’ is selected and that this page is set to ‘about:blank’.

   

   This just helps avoid opening superfluous web pages when you start your tests.

We’ve configured Chrome correctly and you’ve defined the new virtual browser. You should be able to select and run the browser now:

With the browser open we can check the settings by visiting ‘www.whatsmyuseragent.com’ and ‘http://whatsmy.browsersize.com/’ again. And with a range of different virtual browsers configured we’re ready to start defining automated tests to run on these browsers. We’ll look at writing and running those tests in the next blog post.