StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There is now a solution for automated testing of responsive design - Galen Framework. I have been working on a tool that would allow to test the responsive design of web page as well as just layout of website for cross-browser compatibility. The tool is available here <a href="http://galenframework.com">http://galenframework.com</a></p> <p>It uses Selenium in order to open a web page in a browser, re-size the browser window to a needed size and then to get the location of elements on page. It has a special syntax for describing the page look on different devices (browser sizes)</p> <p>Here is a small example of testing basic web page skeleton:</p> <pre><code># Objects definition ===================================== header id header menu css #menu content id content side-panel id side-panel footer id footer ===================================== @ all ------------------------------- header inside: screen 0px top left right menu centered horizontally inside: screen below: header 0px content below: menu 0px inside:screen 0px left @ desktop -------------------------------- side-panel below: menu 0px inside: screen 0px right width: 300px near: content 0px right aligned horizontally top: content @ mobile -------------------------------- content, side-panel width: 100% of screen/width side-panel below: content 0px </code></pre> <p>Later you can run tests either in a single command or you can also create a separate test suite where you have more actions to perform (e.g. inject custom javascript, or do something with WebDriver etc.). To run the above example with single command you do it like this:</p> <pre><code>galen check homepage.spec --url "http://example.com" --size "400x600" --include "mobile,all" --htmlreport "reports" </code></pre> <p>That was only the basics. There are more examples on official website.</p> <p>Also there is an introduction article which explains how to use TDD approach (Test Driven Development) when designing a web page <a href="http://mindengine.net/post/2013-11-16-tdd-for-responsive-design-or-how-to-automate-testing-of-website-layout-for-different-devices/">http://mindengine.net/post/2013-11-16-tdd-for-responsive-design-or-how-to-automate-testing-of-website-layout-for-different-devices/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload