From f2892adb8979363f4d250686dd3d05227e40c51f Mon Sep 17 00:00:00 2001 From: kevinlambert Date: Tue, 3 Nov 2015 13:56:11 +0000 Subject: [PATCH 1/4] Added onScreenWidthChange functionality --- README.md | 8 +++++++- lib/setScreenWidth.js | 13 ++++++++++--- lib/workflow.js | 2 +- 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 8b93731..4e186cc 100644 --- a/README.md +++ b/README.md @@ -123,7 +123,10 @@ require('webdrivercss').init(client, { screenshotRoot: 'my-shots', failedComparisonsRoot: 'diffs', misMatchTolerance: 0.05, - screenWidth: [320,480,640,1024] + screenWidth: [320,480,640,1024], + onScreenWidthChange: function(browser) { + + } }); ``` @@ -169,6 +172,9 @@ available: * **ignore** `String`
can be used to ignore color differences or differences caused by antialising artifacts in the screenshot comparison +* **onScreenWidthChange** `function`
+ can be used to make changes to the page after the screen width has been changed. The webdriverio instance is passed to the function. + The following paragraphs will give you a more detailed insight how to use these options properly. ### Let your test fail when screenshots differ diff --git a/lib/setScreenWidth.js b/lib/setScreenWidth.js index 3f53e21..7105d92 100644 --- a/lib/setScreenWidth.js +++ b/lib/setScreenWidth.js @@ -73,9 +73,16 @@ module.exports = function(done) { that.screenshot = that.screenshot.replace(/\.png/, '.' + that.newScreenSize.width + 'px.png'); that.filename = that.baselinePath; - that.instance.setViewportSize({width: that.newScreenSize.width, height: that.newScreenSize.height}) - .pause(100) - .call(cb); + that.instance + .setViewportSize({width: that.newScreenSize.width, height: that.newScreenSize.height}) + .pause(100) + .call(function() { + if (that.currentArgs.onScreenWidthChange) { + that.currentArgs.onScreenWidthChange(that.instance); + } + + cb(); + }); }); } diff --git a/lib/workflow.js b/lib/workflow.js index 6481ebb..9d63c89 100644 --- a/lib/workflow.js +++ b/lib/workflow.js @@ -36,7 +36,7 @@ module.exports = function(pagename, args) { throw new Error('You need to specify a name for your visual regression component'); } - var queuedShots = JSON.parse(JSON.stringify(args)), + var queuedShots = args, currentArgs = queuedShots[0]; var context = { From bd92335e342ca7615048b032cb5fe6e3942da166 Mon Sep 17 00:00:00 2001 From: kevinlambert Date: Wed, 11 Nov 2015 17:34:35 +0000 Subject: [PATCH 2/4] Added onScreenWidthChange functionality --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 4e186cc..70e45bd 100644 --- a/README.md +++ b/README.md @@ -123,10 +123,7 @@ require('webdrivercss').init(client, { screenshotRoot: 'my-shots', failedComparisonsRoot: 'diffs', misMatchTolerance: 0.05, - screenWidth: [320,480,640,1024], - onScreenWidthChange: function(browser) { - - } + screenWidth: [320,480,640,1024] }); ``` @@ -193,7 +190,10 @@ describe('my website should always look the same',function() { .url('http://www.example.org') .webdrivercss('header', { name: 'header', - elem: '#header' + elem: '#header', + onScreenWidthChange: function(browser) { + + } }, function(err,res) { assert.ifError(err); From f8195ee67b926cfcbb87fe329087cad2bf8d27ef Mon Sep 17 00:00:00 2001 From: kevinlambert Date: Wed, 11 Nov 2015 17:53:13 +0000 Subject: [PATCH 3/4] fix json stringify --- lib/workflow.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/workflow.js b/lib/workflow.js index 9d63c89..ce31547 100644 --- a/lib/workflow.js +++ b/lib/workflow.js @@ -36,7 +36,9 @@ module.exports = function(pagename, args) { throw new Error('You need to specify a name for your visual regression component'); } - var queuedShots = args, + var queuedShots = JSON.parse(JSON.stringify(args, function(key, val) { + return (typeof val === 'function') ? '' + val : val; + })), currentArgs = queuedShots[0]; var context = { From 91dc7025ddbef1f4f9a5961e7740f465f90f4784 Mon Sep 17 00:00:00 2001 From: kevinlambert Date: Thu, 12 Nov 2015 10:45:49 +0000 Subject: [PATCH 4/4] fix json stringify --- lib/workflow.js | 5 ++--- package.json | 3 ++- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/workflow.js b/lib/workflow.js index ce31547..c70f5e9 100644 --- a/lib/workflow.js +++ b/lib/workflow.js @@ -5,6 +5,7 @@ */ var async = require('async'); +var JSONfn = require('json-fn'); module.exports = function(pagename, args) { @@ -36,9 +37,7 @@ module.exports = function(pagename, args) { throw new Error('You need to specify a name for your visual regression component'); } - var queuedShots = JSON.parse(JSON.stringify(args, function(key, val) { - return (typeof val === 'function') ? '' + val : val; - })), + var queuedShots = JSONfn.parse(JSONfn.stringify(args)), currentArgs = queuedShots[0]; var context = { diff --git a/package.json b/package.json index a0d0c82..0a48bda 100644 --- a/package.json +++ b/package.json @@ -17,13 +17,14 @@ "dependencies": { "async": "^0.9.0", "deepmerge": "^0.2.7", + "fs-extra": "^0.18.2", "glob": "^5.0.5", "gm": "^1.17.0", + "json-fn": "^0.60.0", "node-resemble-js": "0.0.4", "request": "^2.55.0", "rimraf": "^2.3.2", "tar": "^2.1.0", - "fs-extra": "^0.18.2", "tar.gz": "^1.0.1" }, "devDependencies": {