Every web developer faces this trouble erst the website is implemented: cross-browser layout testing. This is a very annoying job as you have to look at your website on a lot of different browser. We use to perform a manual chit on all these browsers at the end of website development, and as a result we get some layout number and have to find ward-heeler to fix these deffects. But what if we could automate layout screen of the website and perform it always in all major browsers? Imagine you postdate a TDD technique in your front-end development and you want to have an early feedback on layout issues. To clear this problem you could have a expression atGalen Framework. In short Galen Framework is a layout and functional testing framework that has its own language for describing the layout. The way you test layout using this approach is by declare a set of elements on the page and rules trace where each element is expected to be. The component are be tested relatively to each other. This way you can make your test very flexible and run them on different browser and even mobile devices in case your website is antiphonal. In this article I would like to show you how to write a basic layout test and run it in theSauceLabscloud. SauceLabs offers various platforms and browsers and even allows you to prefer browser version. Lets take the major browsers like: Internet Explorer 11, Firefox, Chrome, Opera and Safari on Mac. The website under test will behttp: //testapp.galenframework.com.

Configuration

Downloadthe latest Galen Framework version andinstal it. Once you get Galen installed just create an empty tryout folder anywhere on your file scheme. Go to that folder and create two files:homepage.spec
and crossbrowser.test
. The first one will have the specifications of the layout for home page. The website under tryout is reactive so normally you should also publish layout specifications for different size. But in this clause we will only cover the background layout so our exam will be simpler. And too one very significant part - use spaces instead of tabs
for indentation. Tabs are ignored so you will get an error if you indent with tabs.

Writing tests

Put the next code inhomepage.spec

file:

===============================================
heading css # header .middle-wrapper
header-icon css # header-logo
header-text css # header h1
card css # menu .middle-wrapper
content css # substance
===============================================

header
breadth: 900px
peak: ~ 69px
centered horizontally inside: blind 1px

header-icon
width: 48px
tiptop: 48px
inside: heading 0px leave, 5 to 15px top bottom

header-text
inside: header 5 to 22px top bottom
near: header-icon 15 to 30px right

menu
aligned vertically all: header
below: header 0 to 1px
height: ~ 64px

content
aligned vertically all: carte
below: card 0 to 1px

& gt; In the code above we draw the location of only 5 elements but that is enough for the presentment for now. Galen Framework has a very comprehensive syntax which allows to describe any complex layout. If you would like to learn more about it you can read this article:Galen Specs language usher. In short what we have described in the test code above is the following:

• The width of header, menu and message should be exactly 900 pixels and all of them should be centered on the screen

  SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

• The menu should be below header and above message

• Header icon should be situate in the remaining side of header and be close cope textbook

You don & # x27; t have to learn the galen syntax to understand what is checked in it as the code is quite readable. Of course for more complex illustration like repetitive components you will have to feature a basic understanding of the syntax to be able to say the specification, but that is something for another tutorial. In this billet, we will focus on Sauce Labs & # x27; integration.

Running tests in SauceLabs grid

& gt; Now how shall we run all these checks on all major browsers? Lets put this code in the crossbrowser.test
file:>

@@ set
sauceKey 325325-1515-235325325-2353253325
sauceUser ishubin
gridLogin $ {sauceUser}: $ {sauceKey}
gridUrl http: // $ {gridLogin} @ ondemand.saucelabs.com:80/wd/hub
website http: //testapp.galenframework.com

@ @ table browsers
| browserName | gridArgs |
| Safari on Mac | -- browser & quot; safari & quot; -- version 6 -- dc.platform & quot; OS X 10.8 & quot; |
| Opera | -- browser & quot; opera & quot; -- version 12 -- dc.platform & quot; Linux & quot; |
| Firefox | -- browser & quot; firefox & quot; -- version 34 -- dc.platform & quot; Linux & quot; |
| Chrome | -- browser & quot; chrome & quot; -- version 39 -- dc.platform & quot; Linux & quot; |
| IE 11 | -- browser & quot; internet explorer & quot; -- version 11 -- dc.platform & quot; Windows 8.1 & quot; |

@ @ parameterized using browsers
Home page on $ {browserName} browser
selenium grid $ {gridUrl} -- page $ {website} $ {gridArgs}
assay homepage.spec

As you can see you will have to be registered at SauceLabs and obtain the key from it. Just replace thesauceKeyandsauceUserproperties with your own credentials. Now you can run the tryout with this command:& quot; galen tryout crossbrowser.test -- htmlreport reports & quot;. Galen will run test on all declared browsers and in the end of the examination run it will make a folder with html report. Just open thereports/report.html & gt; file in your browser and you should get something like this:

Reports

The website that we used for our test looks ok on all those browsers. Now countenance see how Galen can spotlight the fault in case of broken layout. I have prepared a broken version of the website that is not showing good on Internet Explorer. Lets supersede the website parameter in our test retinue with the urlhttp: //testapp.galenframework.com/cross-browser-bugand rerun all the tests again. As you can see on the account below we experience a lot of failures in Internet Explorer 11.

Lets conduct a closer look at the failures. Just click the test link in the report overview and you should get this page with detailed errors:

If you scroll down you will see the error message& quot; header-text is -98px right which is not in range of 15 to 30px & quot;. If you click the red spec above this error message you will get a screenshot with highlighted elements on the page:

As you can see on the screenshot the heading text is misplaced and that is why in our test report we get a message saying that it is located -98px to the rightfield. It & # x27; s actually not located to the rightfield at all and that is why Galen yield us negative value. In the tryout we hold specified that we expect the header schoolbook to be located from the correct side of an icon with 15 to 30 pixel margin. The layout problem is rather clear and as you can see Galen was capable of catch this layout defect. And with help of SauceLabs Galen was capable of catching the layout number in Internet Explorer. But SauceLabs offers not only cross-browser testing but it gives you a mixture of nomadic platforms with tablets and phones and with an power to choose the twist orientation. That entail you can build a reliable test automation even for your reactive website and make certain it looks great on all nomadic and desktop browsers. If you are rum about layout testing you can read more article about Galen Framework onMindEngine.net website.