Jan Deppisch

Frontend-Entwickler

Hello Frontend RheinMain

#testdriven

#css

+

#automated

#responsive

#testing

 

Usual webdev way:

Write CSS

Check visually, compare with reference designs

Pass bugs with screenshots back to dev

Things a designer tests (sometimes unconciously)

"is this div centered"

"are there 2 cols only on mobile"

"is the hamburger icon hidden on desktop"

"does this button have a height of 40px"

So these things must become stable in our CSS:

"is this div centered"

"are there 2 cols only on mobile"

"is the hamburger icon hidden on desktop"

"does this button have a height of 40px"

Because

Specifity issues

"blackbox" 3rd-party styles

Not fully encapsulated modules etc.

Browsers behave different

 

Especially in a big frontend team.

(Tools like scss-lint don't have the purpose to
make a specific element-layout "stable")

(S)CSS can break layouts easily

And there must be an easier way to test than by hand:

"is this div centered"

"are there 2 cols only on mobile"

"is the hamburger icon hidden on desktop"

"does this button have a height of 40px"

Testing manually takes time

number of browsers

x

number of breakpoints

x

number of pages

x

number of UI-states

What we want

(of course you already use scss + scss-lint + autoprefixer + codereviews + automated deployment, do you?)
 

When implementation is $done:

Freeze the CSS layout rules

which led to this stable implementation

Have our CSS more robust

e.g.

a grid-item stays on its row

a button has the exact height like in the styleguide

...

What we even more want

First think of the requirements

that define an element as stable

Then write CSS to achieve this

"Automated layout testing

for responsive websites"

including an intuitive concept to achieve #testdriven #css

Galen way

  • CSS specs first

  • then write CSS to fix tests

  • test element-attributes and -features

  • ... on different breakpoints

  • use phantomjs, selenium-grid or other webdrivers

  • take screenshots on layout errors

  • compare with reference screens

  • ...

DEMO TIME!

==============================================================================
body                                    body
header-wrapper                          .header-wrapper
global-header-bar                       .global-header-bar
hamburger-icon                          .global-header-nav .btn-burger
dropdown-cart-label                     .dropdown-cart .dropdown-label
dropdown-language                       .dropdown-lang
header-grid-item                        .header-grid .grid-item-container
global-header-intro                     .global-header-intro
==============================================================================




@ Header | mobile
--------------------------
global-header-bar
    "should have a" width: 100 % of body/width

hamburger-icon
    visible

dropdown-cart-label
    "'my-account'-label should be" absent

dropdown-language
    "language switch should be" absent

global-header-intro
    absent
@ Header | desktop
--------------------------
global-header-bar
    "should have a" width: 1240 px

hamburger-icon
    absent

dropdown-cart-label
    "'my-account'-label should be" visible

dropdown-language
    "language switch should be" visible

global-header-intro
    visible
    centered all inside: header-wrapper 30 px
==============================================================================
global-footer-overview                  .global-footer-overview
global-footer-navigation                .global-footer-navigation
==============================================================================

@ Footer | mobile
--------------------------
global-footer-navigation
    "only 2 cols in a row should be displayed" width: ~ 50 % of global-footer-overview/width

@ Footer | desktop
--------------------------
global-footer-navigation
    "6 cols in a row should be displayed" width: 15 to 17 % of global-footer-overview/width
@@ set
    domain          www.<myclient>.local

@@ table sizes
    | deviceName | tags      | size      | exclude_tags |
    | Mobile     | mobile    | 320x600   | desktop      |
    | Desktop    | desktop   | 1900x1000 | mobile       |

@@ groups layout
@@ parameterized using sizes
Layout tests on ${deviceName}
    http://${domain} ${size}
        wait 5s
        check specs/layout/header.spec --include "${tags}" --exclude "${exclude_tags}"
        check specs/layout/footer.spec --include "${tags}" --exclude "${exclude_tags}"
Running "shell:galen" (shell) task
========================================
Test: Layout tests on Mobile
========================================
        wait 5s
        check specs/layout/header.spec --include "mobile" --exclude "desktop"
@ Header
-------------------------
    global-header-bar
        width: 100 % of body/width

    hamburger-icon
        visible

    dropdown-cart-label
        absent

    dropdown-language
        absent

    global-header-intro
        absent

        check specs/layout/footer.spec --include "mobile" --exclude "desktop"
@ Footer
-------------------------
    global-footer-navigation
        width: ~ 50 % of global-footer-overview/width
========================================
Test: Layout tests on Desktop
========================================
        wait 5s
        check specs/layout/header.spec --include "desktop" --exclude "mobile"
@ Header
-------------------------
    global-header-bar
        width: 1240 px

    hamburger-icon
        absent

    dropdown-cart-label
        visible

    dropdown-language
        visible

    global-header-intro
        visible
        centered all inside: header-wrapper 30 px

        check specs/layout/footer.spec --include "desktop" --exclude "mobile"
@ Footer
-------------------------
    global-footer-navigation
        width: 15 to 17 % of global-footer-overview/width


========================================
----------------------------------------
========================================
Status: PASS

Summary

  • #testdriven #css ftw!

  • secure the css

  • better awareness of what should be tested (helps designer + dev)

  • automated responsive testing

  • designers have more time for edge-case tests

  • npm module = fits neatly into gulp/grunt deployment

Thanks!

Questions?