Responsive WebDesign Testing Using Galen

Download Responsive WebDesign Testing Using Galen

Post on 07-Apr-2017

514 views

Category:

Software

1 download

TRANSCRIPT

  • ResponsiveWeb Design3

    4Write once publish everywhere

    Design your development to meet users behavior and environment

    5

    A flexible grid based layout

    Page element sizing should be in relative units

    Enable flexible media

    Flexible images are sized in relative units

    Addition of media queries

    Allow the page to use different CSS style rules based on the width of the browser

    How is itachieved?

  • ResponsiveWeb Design Testing66

    7How to Test multiple devices/platforms??

    8

    Pages should be readable on all resolutions.

    Content dened important need to be visible in all breakpoints.

    Text, controls, image alignment

    Color, shading, gradient consistency

    Typed text (data entry) scrolls and displays properly

    Things to keep in mind!

    9

    Selecting set of devices for test

    Frequent changes in requirements.

    Manual testing possible for all devices?

    Do Emulators simulate all the devices in market?

    Challenges?

    10

    Responsive Web Design TesterViewport Resizer for ChromeGalenBrowserStackApplitools

    Tools

  • Galen Framework66

    10

    Galen FrameworkOpen Source Testing FrameworkDeveloped by Ivan ShubinBuilt with Responsive Web Design in mindUses Selenium for web page interactions

    10

    How does Galen WorkDefine a set of devices that needs testingWrite a spec file that defines the layout on these devicesGalen opens a browser, resizes to specified dimension and verifies the spec fileCan be used along with Selenium Grid

    10

    Galen SpecLanguage used to define the layout of the page on different devicesUses simple english words to describe the layoutHuman readableMinimal text to define the complete page

    10

    Galen Spec

    10

    Galen spec language*.gspecObject DefinitionTaggingRelative positions (near, below, inside)AlignmentHeight and WidthColor Scheme Image ComparisonCSS properties

    10

    Galen Demogithub repo:https://github.com/PranathiB/Galen

    10

    Other FeaturesError Reporting using HTML and JSONScreenshots captureImage Comparison

    10

    Questions Time :)