Oct 5, 2014

Galen and SauceLabs. Testing how your websites look on mobile devices

Quite often I am asked the same question: "how do I run Galen in "SauceLabs?". Finally I got some time to write a complete tutorial. SauceLabs is a great service allowing you to easily test on various platforms and browsers including Android, iOS, Window 8.1 etc. I was surprised how easy it was for me to just reconfigure my Galen tests and point them to the SauceLabs Selenium Grid. Well, maybe not that easy, as there some little tricks and that is why I am writting this tutorial.

First of all you need to have SauceLabs account. I don’t remember but I think they offer you some free minutes on their cloud so you can just try it out. Next step is to get your access key together with the url. Log in to SauceLabs and click on the Docs link in the header as shown on the picture. That will lead you to the https://docs.saucelabs.com/

On the Docs page click on Java

That will take you to https://docs.saucelabs.com/tutorials/java/. On that page just scroll to the Java test code sample where it shows how to connect to SauceLabs. Here it is on the picture:

Copy that url as later we will put it in our test suite. That url contains your login and access key.

Now go to the Platforms section (https://saucelabs.com/platforms) and select the platform you need. I chose iPhone iOS 6.0 because it produces full screenshots so the reports look nicer. When you select a platform (just click on the device icon) you will get the generated settings for WebDriver on the right. In case of iPhone we need only platform, version and device-orientation parameters

For my test suite I also selected Internet Explorer 11 on Windows 8.1. I had only a small issue because SauceLabs doesn’t give me a name of a browser so I had to dig in the DesiredCapabilities.java sources and get the browser names that were used in it. In our case we use two browsers iphone and internet explorer

So now having all that data we can create a simple test suite (put it in a file my.test)

@@ Parameterized | deviceName | deviceType | gridArgs | | iPhone iOS 6 | mobile | --browser iphone --dc.platform "OS X 10.8" --dc.version "6.0" | | IE 11 | desktop | --browser "internet explorer" --dc.platform "Windows 8.1" --dc.version 11 | Home page on ${deviceName} selenium grid http://ishubin:blablabla-bla-bla-bla-blablabla@ondemand.saucelabs.com:80/wd/hub --page http://galenframework.com ${gridArgs} check home.spec --include ${deviceType}

And lets put a very basic check in file home.spec:

====================== search-textfield css #search-panel input ====================== @ desktop ------------- search-textfield width: ~ 162px @ mobile ------------ search-textfield width: 85 to 95 % of screen/width

Thats it! Now we can run the tests with the command:

galen test my.test --htmlreport reports

Remember I told you to select the iOS 6? For some reason in SauceLabs they can’t handle the full screenshots in iOS 7. If you select the latest device version for iPhone you will get a report like this:

As you see on the screenshot it also takes the iOS header and Safari footer. And because of this Galen highlights the objects in the wrong area. You can still test your website in the iOS 7 as it works perfectly. The only issue is that in the reports the page is not fully displayed and also you can’t use image comparison. Hope this annoying behavior will be fixed in SauceLabs. But for now you can also test it in iPhone iOS 6.

By the way for those of you who use Javascript tests with Galen here is basic example for running tests in iOS 6 in SauceLabs. Create a file my.test.js and put down the following:

test("SauceLabs test for homepage on iPhone", function () { var driver = createGridDriver("http://ishubin:blabla-bla-bla-bla-blabla@ondemand.saucelabs.com:80/wd/hub", { browser: "iphone", desiredCapabilities: { platform: "OS X 10.8", version: "6.0", "device-orientation": "portrait" } }); driver.get("http://galenframework.com"); checkLayout(driver, "home.spec", ["mobile"]); });

As you can see it is relatively easy to switch to the SauceLabs Selenium Grid. Running your tests there allows you to verify that your website looks good on all major devices. I would definetely recommend you to try it out.

Posted in Galen, Automation, Selenium, Web
comments powered by Disqus