Casper visibility testing for responsive designs

config.coffee

# jslint node: true
'use strict'

# You can extend default options passing config object in module initialization
#
# var options = {
#     foo: 'bar'
# }
#
# var casper = require('./modules/config')(options);

extendConfig = (config, options) ->
    for key of options
        config[key] = options[key]

    return config

module.exports = (options) ->
    config = {
        verbose: false
        logLevel: 'debug'
        viewportSize:
            width: 1600
            height: 900
    }

    if options
        config = extendConfig(config, options)

    casper = require('casper').create(config)

example.coffee

# jslint node: true
'use strict'

casper = require('./modules/config')()
responsiveness = require('./modules/responsiveness')
testUrl = 'http://example.com'

casper.start(testUrl, ->
    data = [{
        selector: '.description',
        visibility: [{
            viewport: '1600|720',
            visible: no
        }, {
            viewport: '1024|720',
            visible: no
        }, {
            viewport: '700|720',
            visible: no
        }, {
            viewport: '500|720',
            visible: yes
        }, {
            viewport: '300|720',
            visible: yes
        }]
    }]

    responsiveness.call(this, data)
);

casper.run ->
    @test.renderResults true

responsiveness.coffee

# jslint node: true
'use strict'

# Data format of elements argument:
#
# elements = [{
#     selector: '#go-up',
#     visibility: [{
#         viewport: '1600|720',
#         visible: no
#     }, {
#         viewport: '1024|720',
#         visible: no
#     }]
# }];
#
# Call it with 'this' binded to your casper instance eg.:
#
# var responsiveness = require('./modules/responsiveness');
# casper.start(testUrl, function() {
#     var data = (...);
#     responsiveness.call(this, data);
# });

module.exports = (elements) ->
    for element in elements
        for breakpoint in element.visibility
            width = parseInt(breakpoint.viewport.split('|')[0], 10) || 1600
            height = parseInt(breakpoint.viewport.split('|')[1], 10) || 900
            message = element.selector + ' at ' + width + 'x' + height + ' should be '

            @viewport(width, height)

            if breakpoint.visible
                message += 'visible'
                @test.assertVisible(element.selector, message)
            else
                message += 'hidden'
                @test.assertNotVisible(element.selector, message)