Skip to content

@kamilogorek /config.coffee secret
Last active

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Casper visibility testing for responsive designs
# 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)
# 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
# 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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.