webdriverio-boneyard/webdrivercss

Regression testing tool for WebdriverIO v4

webdrivercss's Issues

Error running webdrivercss()

I get an error running webdrivercss inside a grunt task. The code is:

        require("webdrivercss").init(browser, {
            screenshotRoot: "test/visual/screenshots",
            failedComparisonsRoot: "test/visual/results",
            misMatchTolerance: 0.05
        });

            browser.webdrivercss(screenshotName, {
                elem: ".xtype-component"
            }, function(err, res) {
                expect(err).toBe(null);
                expect(res.misMatchPercentage).toBe(0);
                done();
            });

And you can see the error in screenshot.

Environment is Windows 7 with all dependencies installed following instructions from: https://github.com/LearnBoost/node-canvas/wiki/Installation---Windows

How to send more data in syncUp/ syncDown

Currently the syncUp/ syncDown hard codes the POST values. I'd like to extend it, so I could for example send a CSRF-Token, or other arbitrary info upon syncing.

Is there a recommended way for doing this? (I can write a PR, just need some guidance on the best practice here)

Consider using a different naming convention for baseline images that is more source control friendly

I suggest you consider a different naming convention for image files so that baseline images can be committed to source control and if changes are detected, these same baseline images are updated so you get changed image files to commit along with your changed source code (that caused the visual change). Accepting the new baseline is achieved by committing the new "baseline" images to source control and images with bugs can be rejected by reverting changes via the source control tool. I think this is a more friendly flow for developers and also allows you to selectively choose which baseline images to approve or reject. It is also easier to review as part of a "pre-commit code review" and make it easier to use 3rd party image diff tools such as kleidoscope to compare the "old baseline" with the suggest new one just like viewing the diff when a source code file changes.

Vertical stitching issues, occasionally on Chrome

Setup:
v1.0.3
Windows 7
Chrome v39

I seem to get occasional Stitching issues. This is not consistent, it only happens some of the times, making testing with Chrome very difficult.

Here's a screenshot example:

It's difficult to get uniform results.

1. I looked at webdriverjs, webdriverio, and webdriver JSON wire protocol, but I couldn't find a way to set the viewport size. Webdriver knows only of window size. Unless the viewport size is uniform, it's difficult to get uniform screenshots. How would you set the viewport size?

2. Also, I couldn't get full screenshots on many versions of chrome, firefox, and IE via protractor.
   So, I tried webdrivercss on chrome to see if it can take screenshots of CSS selectors.
   The result was that screenshots included scrollbar if CSS selector was wider than browser width.

   Below is an example screenshot that contains scrollbar.

Can't use CSS selector in BrowserStack

Hello,

I ran into error when trying to capture screen from BrowserStack.

Below is my code:

// init WebdriverJS
var webdriverjs = require('../index'),
    client = webdriverjs.remote({
        host: 'hub.browserstack.com',
        port: 80,
        logLevel: 'silent',
        desiredCapabilities: {
            'browser': 'IE',
            'browser_version': '7.0',
            'os': 'Windows',
            'os_version': 'XP',
            'browserstack.debug': 'true',
            'browserstack.user' : 'test1359',
            'browserstack.key': 'rRz7rSR24gUy446CpJB9'
        }
    });

// initialise WebdriverCSS for `client` instance
require('webdrivercss').init(client, {
    // example options
    screenshotRoot: 'my-shots',
    failedComparisonsRoot: 'diffs',
    misMatchTolerance: 0.05,
    screenWidth: [320,480,640,1024]
});

client
    .init()
    .url('http://www.google.com')
    .webdrivercss('google_logo', {
        elem: '#hplogo'
    })
    .end();

And here is the error output:

After I removed the CSS selector, it works. code as below:

// init WebdriverJS
var webdriverjs = require('../index'),
    client = webdriverjs.remote({
        host: 'hub.browserstack.com',
        port: 80,
        logLevel: 'silent',
        desiredCapabilities: {
            'browser': 'IE',
            'browser_version': '7.0',
            'os': 'Windows',
            'os_version': 'XP',
            'browserstack.debug': 'true',
            'browserstack.user' : 'test1359',
            'browserstack.key': 'rRz7rSR24gUy446CpJB9'
        }
    });

// initialise WebdriverCSS for `client` instance
require('webdrivercss').init(client, {
    // example options
    screenshotRoot: 'my-shots',
    failedComparisonsRoot: 'diffs',
    misMatchTolerance: 0.05,
    screenWidth: [320,480,640,1024]
});

client
    .init()
    .url('http://www.google.com')
    .webdrivercss('google_logo')
    .end();

Appreciated if you could help out. Thanks!

Generate Reports on Captured Images

It would be nice to have a reporter that would output to a file, stats about the process.

For example:

1. the images that were taken
2. for each image, whether they are a baseline or diff
3. the images within or not within the tolerances

I got an error and I do not know how to do

spawn gm ENOENT
    at exports._errnoException (util.js:746:11)
    at Process.ChildProcess._handle.onexit (child_process.js:1046:32)
    at child_process.js:1137:20
    at process._tickCallback (node.js:355:11)

Cannot read property 'documentWidth' of null

We use browserstack to test our webapp ! I think there are problems with android devices ! The response object does not contain the property what the script /node_modules/webdrivercss/lib/documentScreenshot.js excepted( see below error part ). What's going wrong?

no problems on iOS :)

Devices

'browserName' : 'android', 
'platform' : 'ANDROID',
'device' : 'HTC One M8'

'browserName' : 'android', 
'platform' : 'ANDROID', 
'device' : 'Samsung Galaxy S4'

browserName: 'android', 
platform: 'ANDROID', 
device: 'Samsung Galaxy S5'

'browserstack.local': true,
'browserName' : 'android',
'platform' : 'ANDROID',
'device' : 'Google Nexus 9'

Error

/srv/node_modules/webdrivercss/lib/documentScreenshot.js:131
                    return (currentXPos < (response.execute[0].value.documentW
                                                                    ^
TypeError: Cannot read property 'documentWidth' of null

Test-Script

var webdriverio = require('webdriverio'),
    webdrivercss = require('webdrivercss'),
    client = webdriverio.remote({
        host: 'hub.browserstack.com',
        port: 80,
        user : 'xxxxxxx',
        key: 'xxxxxx',
        logLevel: 'silent',
        desiredCapabilities: {
            'browserstack.local': true,
            'browserName' : 'android',
            'platform' : 'ANDROID',
            'device' : 'Samsung Galaxy S4'
        }
    });


webdrivercss.init(client)

client
    .init()
    .url('https://www.cu-camper.com')
    .getTitle(function(error, title) {
        console.log('Title was: ' + title);
    })
    .webdrivercss('startpage', {
        name: 'main-wrapper',
        elem: '.main-wrapper'
    })
    .getCssProperty('#footer', 'color', function(err, color) {
        console.log(color);
    })
    .end();

related issue #32

README indicates that you need to install both ImageMagick and GraphicsMagic but you really only need to install GraphicsMagick.

How to test IE locally?

Hello,

I tried to test IE locally, but it always open the Firefox browser. I have installed IE driver and added into my PATH.

Here is my code:

// init WebdriverJS
var client = require('webdriverjs').remote({
    desiredCapabilities: {
        'browser': 'IE',
        'browser_version': '10.0'
    }
});

// initialise WebdriverCSS for `client` instance
require('webdrivercss').init(client, {
    // example options
    screenshotRoot: 'my-shots',
    failedComparisonsRoot: 'diffs',
    misMatchTolerance: 0.05
});


client
    .init()
   .url('http://github.com')
    .webdrivercss('githubform', {
        elem: '#site-container > div.marketing-section.marketing-section-signup > div.container > form'
    })
    .end();

Thank you.

Vertical Stitching issue with Firefox

When generating the document screenshot with Firefox, the browser never scrolls, which causes an image that just repeats the above the fold content.

I've been told that Firefox now has an API to take a full document screenshot instead of a viewport screenshot, which might be the issue if they replaced the API.

webdrivercss doesnt work !

System

OS: Ubunbu 14.04.1
Nodejs: 0.10.25
webdrivercss: 1.0.6
webdriverio: 2.4.5

issue

We cant use webdrivercss because see below error message and our code example! after hours i give up and report that as issue. Maybe im doing something wrong, i dont know. On Browserstack i can see that make the first screenshot(screenwith: 320) but if they try to make the second one it throw an error :(

error message

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: write EPIPE
    at errnoException (net.js:901:11)
    at Object.afterWrite (net.js:718:19)

code example

// init WebdriverIO
var client = require('webdriverio').remote({
    host: 'hub.browserstack.com',
    port: 80,
    user : 'userxxx',
    key: 'passxxx',
    logLevel: 'silent',
    desiredCapabilities: {
        browserName: 'chrome'
    }
})
// init WebdriverCSS
require('webdrivercss').init(client);

client
    .init()
    .url('http://cu-camper.com')
    .getTitle(function(err,title) {
        console.log(title);
    })
    .getCssProperty('#footer', 'color', function(err, color) {
        console.log(color.value);
    })
    .webdrivercss('startpage', {
        screenWidth: [320,480,640,1024],
        name: 'main-wrapper',
        elem: 'footer',
        screenshotRoot: 'src/js/tests/shots',
        failedComparisonsRoot: 'src/js/tests/diffs',
        misMatchTolerance: 0.05
    })
    .end();

gyp_main.py: error: no such option: --no-parallel

$npm i webreivercss
gyp ERR! configure error
gyp ERR! stack Error: gyp failed with exit code: 2
gyp ERR! stack at ChildProcess.onCpExit (/home/user/.nvm/v0.10.33/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:343:16)
gyp ERR! stack at ChildProcess.emit (events.js:98:17)
gyp ERR! stack at Process.ChildProcess._handle.onexit (child_process.js:810:12)
gyp ERR! System Linux 3.16.0-23-generic
gyp ERR! command "node" "/home/user/.nvm/v0.10.33/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /home/user/project/node_modules/webdrivercss/node_modules/resemble/node_modules/canvas
gyp ERR! node -v v0.10.33
gyp ERR! node-gyp -v v1.0.1
gyp ERR! not ok
npm ERR! [email protected] install: node-gyp rebuild
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is most likely a problem with the canvas package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node-gyp rebuild
npm ERR! You can get their info via:
npm ERR! npm owner ls canvas
npm ERR! There is likely additional logging output above.

npm ERR! System Linux 3.16.0-23-generic
npm ERR! command "/home/user/.nvm/v0.10.33/bin/node" "/home/user/.nvm/v0.10.33/bin/npm" "install" "webdrivercss"
npm ERR! cwd /home/user/project
npm ERR! node -v v0.10.33
npm ERR! npm -v 1.4.28
npm ERR! code ELIFECYCL

Also work with selenium-webdriverjs ?

Sorry if this is a naive question, but will webdrivercss work with https://code.google.com/p/selenium/wiki/WebDriverJs or https://github.com/admc/wd ?

let os/browsername/version be a part of the screenshot name

as optional flag (default: false)

When providing an exclude rectangle, getting error that scrollPos not defined

When creating a webdrivercss test like the following:

var cssOptions = {
    name: 'row-selection',
    elem: MAIN_VIEW,
    exclude: [{x0: 401, y0: 418, x1: 1269, y1: 583}],
    x: 1,
    y: 1,
    width: 1300,
    height: 600,
};
client
    .webdrivercss('row-selection', cssOptions, function (err, res) {
        expect(err).toBeFalsy();
        console.log(res);
        expect(res['row-selection'][0].isWithinMisMatchTolerance).toBeTruthy();
    })
    .call(done);

I am getting an error:

TypeError: Cannot read property 'x' of undefined
  at Object.module.exports (/Users/pbanka/dev/cy-connections-ui/node_modules/webdrivercss/lib/cropImage.js:23:39)
  at fn (/Users/pbanka/dev/cy-connections-ui/node_modules/webdrivercss/node_modules/async/lib/async.js:582:34)
  at Object._onImmediate (/Users/pbanka/dev/cy-connections-ui/node_modules/webdrivercss/node_modules/async/lib/async.js:498:34)
  at processImmediate [as _immediateCallback] (timers.js:330:15)

component screenshot for centered website fails with browserstack

I'm trying to figure out how to screenshot components inside of a horizontally centered website (margin: 0 auto;) with webdrivercss and browserstack. Every time I run a test, it returns an image which includes the background outside the selector that I'm passing in. I'd expect the screenshot to have it's upper-left origin begin at the same point of origin of the component I'm targeting with the selector (would not include the background).

I've tried setting resolution in desiredCapabilities for webdriverio, screenWidth in webdrivercss.init and also inside my test via .windowHandleSize() to "normalize" the width of the screen. In my case, 1280px wide is what I'm setting. That's the width at which we've designed the site without any of the default background showing, yet the screenshot always comes back with the gray background showing (see attached).

Any suggestions on how to possibly fix this?

No captured image from BrowserStack using IE with CSS selector

Hello,

I have tried to capture a specific component selected by CSS selector in BrowserStack, Chrome works great, FIrefox got big displacement, IE<8 got error, and IE>=8 there are no captured image, although the code run through without any error. (I tried on IE 8,9,10,11 and got same issue)

Could you please kindly take a look into this? Thank you!

Here is my code:

// init WebdriverJS
var webdriverjs = require('../index'),
    client = webdriverjs.remote({
        host: 'hub.browserstack.com',
        port: 80,
        logLevel: 'silent',
        desiredCapabilities: {
             'browser' : 'IE',
             'browser_version' : '11.0',
             'os' : 'Windows',
             'os_version' : '7',
            'browserstack.debug': 'true',
            'browserstack.user' : 'test1359',
            'browserstack.key': 'rRz7rSR24gUy446CpJB9'
        }
    });

// initialise WebdriverCSS for `client` instance
require('webdrivercss').init(client, {
    // example options
    screenshotRoot: 'my-shots',
    failedComparisonsRoot: 'diffs',
    misMatchTolerance: 0.05
});

client
    .init()
    .url('http://www.google.com')
    .webdrivercss('google_logo_ie8', {
        elem: '#hplogo'
    })
    .end();

Add ability to take screenshots in multiple browsers simultaneously

Similar to how https://github.com/axemclion/grunt-saucelabs allows you to specify a list of browsers to run the unit tests in and also a limit on the Sauce concurrency level to use.

documentScreenshot Uncaught RuntimeError when using appium

Not to sure where to raise this (here or webdriverio), or even if it is your issue really, but since webdriverio would appear to include support for appium, thought I'd see what the best way to go about this is.

I'm trying to take full page screen shots on Android in Chrome. documentScreenshot uses the scroll function of webdriverio, which in turn uses touchScroll protocol for mobile. This uses:

session/:sessionId/touch/scroll

Which is unimplemented in appium, and causes:

     Uncaught RuntimeError
     Problem: unimplemented command: session/434794f25da079a3a88a8c9e95065fee/touch/scroll

https://github.com/appium/appium/blob/4687052dea74abcafb21f25f6a741358b650cea9/lib/server/routing.js

If this is just a matter of waiting for appium to implement this, was wondering of best alternative. I'll continue looking into this.

arguments to `webdrivercss` callback aren't documented

https://github.com/webdriverio/webdrivercss#usage says you can pass in a callback argument, but doesn't state what arguments that callback will be invoked with.

The res argument appears to be an object mapping names from the webdrivercss call to some array of objects of some type (which also isn't documented!) that has useful properties such as isWithinMisMatchTolerance.

iPhone, iPad and Android issues

Hi,

I struggling to run my WebdriverCSS tests against iPhone, iPad or Android devices on Browserstack.

When using the following settings for 'desiredCapabilities':

'browserName': 'iPhone',
'platform': 'MAC',
'device': 'iPhone 6'

or

'browserName' : 'android',
'platform' : 'ANDROID',
'device' : 'Samsung Galaxy S5'

I get the error:

TypeError: Cannot read property 'value' of null
    at WebdriverIO.<anonymous> (/src/git/node_modules/WebdriverCSS/lib/setScreenWidth.js:29:59)
    at /src/git/node_modules/webdriverio/node_modules/chainit/index.js:137:22
    at RequestHandler.<anonymous> (/src/git/node_modules/webdriverio/lib/utils/RequestHandler.js:223:13)
    at Request.self.callback (/src/git/node_modules/webdriverio/node_modules/request/request.js:121:22)
    at Request.emit (events.js:98:17)
    at Request.<anonymous> (/src/git/node_modules/webdriverio/node_modules/request/request.js:978:14)
    at Request.emit (events.js:117:20)
    at IncomingMessage.<anonymous> (/src/git/node_modules/webdriverio/node_modules/request/request.js:929:12)
    at IncomingMessage.emit (events.js:117:20)
    at _stream_readable.js:943:16

Is this an issue with BrowserStack or are they currently not supported.

Thanks,
David

Feature request : event callbacks

It would be great to get event hooks before and after each important event in the screenshot phase as a starting list

beforeTest
afterTest (this is the only one that exists right now)
beforeDocumentScreenshot
afterDocumentScreenshot
beforeElementScreenshot
afterElementScreenshot
beforeContextSwitch
afterContextSwitch
beforeDocumentScroll
afterDocumentScroll

as a use case -- you might imagine a dropdown menu that hides itself when switching from desktop to mobile view. If I want a screenshot of the menu open, I need to be able to "click" on the menu after the window has been sized for each of the mobile sizes

one way of implementing this would be to retool the webdrivercss function like so

browser.webdrivercss(
    name, 
    elements,
    function afterTestCallback(err, res){}, 
    {beforeScreenshot : function(),
     afterScreenshot : function()})

v2.0 could do away with the afterTestCallback parameter and just include it as a member of the config or callback object

excludeAfter not implemented?

Hi,

I can't see where excludeAfter is implemented or how to use it.

Is this yet to be implemented? Might be worth noting on the readme

Not saving screenshots

I am not able to get webdrivercss to save screenshots. Below is the full script I am executing, slightly modified from the readme.

var client = require('webdriverjs').remote({desiredCapabilities:{browserName: 'firefox'}});
// init WebdriverCSS
require('webdrivercss').init(client);

client.init();
client.url('http://example.com');

client.saveScreenshot('example.png', null);
client.webdrivercss('example', null);

webdriverjs creates the expected screenshot 'example.png'.
webdrivercss creates the default screenshot directories (./webdrivercss/diff), but they contain no files.

Installed via npm with no errors reported. Canvas also installed via npm with no errors.

Am I missing something?

Win7 x64
Node.js v0.10.30
JRE 1.8.0_11 64bit
selenium-server-standalone-2.42.4

Full page stitching does not work when the horizontal scroll bar is visible.

The resulting screenshot has residues of both scroll bars.

Is it possible to get accurate screenshots on every browser?

For example, on linux, taking a full screenshot is impossible for various versions of firefox and chrome. For some versions of them, it works.

How does webdrivercss circumvent selenium's inability to take screenshots properly?

Not working with Appium

I'm trying to use the library with testing the mobile native app using Appium on iOS.

      client.click("Menu button")
      .webdrivercss('Menu', [{
        name: 'page'
      }], function(err, res){
        assert.ifError(err);
        assert.ok(res.page[0].isWithinMisMatchTolerance);
      })
      .call(done);

it seems that the saveDocumentScreenshot is not succeeding, because the iOS Instruments can't parse the javascript it sends for determining the page position. It fails with Error "An error occurred while executing user supplied JavaScript, Return statements are only valid inside functions".

One way to fix the library is to introduce the option to not auto-scroll the page.

For example, swapping the line in makeScreenshot.js

this.instance.pause(100).saveDocumentScreenshot(this.screenshot, done);

with

this.instance.pause(100).saveScreenshot(this.screenshot, done);

will work fine and not throw an error.

Another place which throws same error is in file getPageInfo.js. Skipping it's execution by returning empty response works just fine.

done(null, response);

So with this modifications, I got the basic functionality working - making screenshots and failing if they don't match.

I would be glad to make a PR with some fixes / or an option to disable the "auto scroll", but I don't quite get what the getPageInfo.js does.

Any suggestions / comments are appreciated.

Have webdrivercss return created files in response

I was on the way to create a pull request, but I saw you were woking on 1.0, and without roadmap I don't feel like I should get in the way.

Is there any chance the images filename/path are returned in the return callback ?

For instance:

client
        .url('http://www.example.org')
        .webdrivercss('header', {
            name: 'header',
            elem: '#header'
        }, function(err,res) {
            console.log('Created screenshot %s', res.new.filename);
            console.log('Original screenshot is %s', res.reference.filename);
            console.log('Diff image is %s', res.diff.filename);
        })
       .call(done);

Feel free to use a different API if it fits better, all I want is to be able to generate custom reports.

If you give me some insight, I can help on this.

Can't install on 64 bit machine

Hello,

I have tried to install WebdriverCSS on 64 bit Windows, and also 64 bit Mac, and they all failed with same error as below:

I have installed ImageMagick, GraphicsMagick and Cairo already.
Would be appreciated if you could help out. Thanks!

throw ElementNotFound exception if given element wasn't found on page

Displacement in BrowserStack Chrome using v0.2.3

Hello,

I am testing the new version v0.2.3 in BrowserStack with Chrome browser, but get big displacement. I think this is introduced by the new updated version, because I remember Chrome was working fine in BrowserStack before.

Here is my code:

// init WebdriverJS
var webdriverjs = require('../index'),
    client = webdriverjs.remote({
        host: 'hub.browserstack.com',
        port: 80,
        logLevel: 'silent',
        desiredCapabilities: {
             'browser' : 'chrome',
             'os' : 'Windows',
             'os_version' : '7',
            'browserstack.debug': 'true',
            'browserstack.user' : 'test1359',
            'browserstack.key': 'rRz7rSR24gUy446CpJB9'
        }
    });

// initialise WebdriverCSS for `client` instance
require('webdrivercss').init(client, {
    // example options
    screenshotRoot: 'my-shots',
    failedComparisonsRoot: 'diffs',
    misMatchTolerance: 0.05
});

client
    .init()
    .url('http://github.com')
    .webdrivercss('githubform', {
        elem: '#site-container > div.marketing-section.marketing-section-signup > div.container > form'
    })
    .end();

Here is the displaced screenshot captured from BrowserStack:

Here is the correct screenshot using the same code capture from local machine:

Appreciated if could help out. Thank you.

"updateBasleine: true" should use the existing "regression" images instead of rerunning the test

1. The user decided to update baseline after reviewing the current "regression" images and diffs. Rerunning the test would take new possibly different screenshots that will be used as baseline which is misleading.
2. It will be much faster to use the existing images instead of rerunning the entire test.

Same code, works fine in Chrome but not in Firefox

I have the same bit of code, which seems to work fine in Chrome, but not on Firefox.
In particular, The screenshot taken by Firefox is of the correct size, but seems to have some offset.

The code is quite simple:

// initialise WebdriverCSS for `browser` instance
require('webdrivercss').init(browser, {
        // example options
        screenshotRoot: 'my-shots',
        failedComparisonsRoot: 'diffs',
        misMatchTolerance: 0.05,
        screenWidth: [320,480,640,1024]
});

[...]
        it.only('has the same content', function (done) {
            browser
                                .url('http://www.google.co.uk')
                .webdrivercss('hplogo', {
                                name: 'hplogo',
                                elem: '#hplogo'
                        }, function (err,res) {
                                expect(err).to.be.null;

                                // this will break the test if screenshot differ more then 5% from
                                // the previous taken image
                                expect(res.misMatchPercentage).to.be.below(5);
                        })
                        .call(done);

        });

    });

Chrome:

Firefox:

(yes, it is white, of the correct size)

WebdriverCSS is not performing visual difference step

When webdriverCSS asserts visual difference between images it creates regression screenshot and is not producing visual-diff screenshot, as it supposed to do.

I have a Jenkins job, which runs Selenium Cloud with webdriver.io and uses testem and jenkins TAP plugin for running mocha tests and reporting.

Webdriver.io configurations

var client = webdriverio.remote({
    desiredCapabilities: {
        browserName: 'firefox',
        version: '27',
        platform: 'XP',
        tags: ['FF'],
        name: 'Basic test',
    },
    host: 'ondemand.saucelabs.com',
       port: 80,
       user: sauceLabs.user,
       key: sauceLabs.key,
       logLevel: 'silent'
});

WebdriverCSS configurations

describe('## Homepage Screenshots', function( done ) {

    // 3 min timeout
    this.timeout(180000);

    it('Take Screenshots Of Homepage Components', function ( done ) {
        client
        .url( pageUrl.homepage )
            client
            .webdrivercss('homepage', [
                {
                    name: 'header',
                    elem: ".site-header",
                },
                {
                    name: 'footer',
                    elem: '.site-footer'
                },
            ], function(err, res) {
                    assert.ifError( err );
                    assert.ok( res.header[0].isWithinMisMatchTolerance );
                    assert.ok( res.footer[0].isWithinMisMatchTolerance );
                })

        client.call( done );

    });

});        

I have opened this question on StackOverflow as well.

unique names for tmp screenshot images

all temporary files saveDocumentScreenshot creates to assemble the screenshot of the whole website aren't unique. That means if two processes execute webdrivercss tasks in parallel we run into a race condition and gm throws an exception.

Screenshot displacement

Hello,

I am using webdrivercss on Windows 7 32 bit machine in VirtualBox. I am trying to capture specific component selected by CSS3 selector, but it always get displacement.

My code as below:

// init WebdriverJS
var client = require('webdriverjs').remote({
    host: 'localhost',
    port: 4444
});

// initialise WebdriverCSS for `client` instance
require('webdrivercss').init(client, {
    // example options
    screenshotRoot: 'my-shots',
    failedComparisonsRoot: 'diffs',
    misMatchTolerance: 0.05
});


client
    .init()
   .url('http://github.com')
    .webdrivercss('githubform', {
        elem: '#site-container > div.marketing-section.marketing-section-signup > div.container > form'
    })
    .end();

captured screenshot below:

Any advice would be appreciated! Thank you!

when taking screenshots with a mac, the images are incorrect

Thanks for all your work on this library. I love webdrivercss! In fact, I am working on an effort to replace all our phantomcss tests with webdrivercss. In addition, I am planning to give a talk to our local JavaScript meetup about this great project!

One oddity I am finding is that if I run webdriverio with webdrivercss on our (Linux-based) continuous-integration system, the screen-capture works flawlessly. However, if I run the same suite of tests on a mac (with a retina display), I find that the images produced by webdrivercss are the correct size but are oddly scaled and inappropriate. (FWIW, I have often found that other screen-capture with a retina display can produce similar oddly-scaled images for other applications).

Is there a work-around for this problem? I'd be happy to provide a pull-request if you might point me toward where in the code the issue might lay?

Thanks!

On linux:
on a mac:

on linux:
on a mac:

Use webdrivercss without webdriverjs

Is it possible to use webdrivercss without webdriverjs?
Any hints on doing so?

make use of selectorExecute to enable all kinds of selector types

Since exclude elements get passed as array we will have to reimplement @nickyout solution into WebdriverCSS

IE < 9 and `saveDocumentScreenshot`

I know you're working on this and I did not check on master's branch so it might be fixed.

In current (v0.3.0) saveDocumentScreenshot returns an image with main viewport duplicated as many time as needed to fill the document height.

Error on test with remote

The following test works fine on my local:

client
  .init()
  .url('http://google.com')
  .webdrivercss('google', {name: 'homepage'})
  .end();

But when executed with SauceLabs or BrowserStack via TravisCI I get:

Error: [webdrivercss("chrome",{"name":"homepage"})] <= 
 [saveDocumentScreenshot("webdrivercss/chrome.png")] <= 
 spawn ENOENT
    at errnoException (child_process.js:1011:11)
    at Process.ChildProcess._handle.onexit (child_process.js:802:34)

Here's the .travis.yml file.

What am I missing?

Socket closed running on windows

Hi,
I have installed webdrivercss and webdriverjs on my Windows 7(32 bit) machine. When i try to run a basic test as below, it always gives socket closed error.

I checked the selenium server output, it seems like everything is running fine until it reach the point to take screenshot and save it. The folder for screenshot root is already created. I actually use webdriverjs to successfully take a screenshot and save it. So there shouldn't be any write issues.

Any help would be appreciated! Thanks!

Below is my testing file: 'test_webdrivercss.js'

// init WebdriverJS
var client = require('webdriverjs').remote({  
    host: 'localhost',
    port: 4444})
// init WebdriverCSS
require('webdrivercss').init(client, {
    // example options
    screenshotRoot: 'my-shots',
    failedComparisonsRoot: 'diffs',
    misMatchTolerance: 0.05,
    screenWidth: [320,480,640,1024]
});

client
    .init()
    .url('http://example.com')
    .webdrivercss('headerArea')
    .end();

Below is the error output:

Btw, I do the test with a local selenium-server-standalone-2.39.0 server running.

Below is the server console output:

Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation. All rights reserved.

C:\Users\IEUser>cd c:\webdrivercss

c:\webdrivercss>start-selenium
Jul 02, 2014 6:08:15 AM org.openqa.grid.selenium.GridLauncher main
INFO: Launching a standalone server
Setting system property webdriver.chrome.driver to C:\Users\IEUser\AppData\Roami
ng\npm\node_modules\selenium-standalone.selenium\2.42.0\chromedriver
06:08:15.165 INFO - Java: Oracle Corporation 24.60-b09
06:08:15.166 INFO - OS: Windows 7 6.1 x86
06:08:15.180 INFO - v2.42.0, with Core v2.42.0. Built from revision 5e82430
06:08:15.361 INFO - RemoteWebDriver instances should connect to: http://127.0.0.
1:4444/wd/hub
06:08:15.363 INFO - Version Jetty/5.1.x
06:08:15.364 INFO - Started HttpContext[/selenium-server/driver,/selenium-server
/driver]
06:08:15.364 INFO - Started HttpContext[/selenium-server,/selenium-server]
06:08:15.364 INFO - Started HttpContext[/,/]
06:08:15.421 INFO - Started org.openqa.jetty.jetty.servlet.ServletHandler@13d99c

06:08:15.421 INFO - Started HttpContext[/wd,/wd]
06:08:15.425 INFO - Started SocketListener on 0.0.0.0:4444
06:08:15.425 INFO - Started org.openqa.jetty.jetty.Server@e771f3
06:08:22.425 INFO - Executing: [new session: Capabilities [{platform=ANY, javasc
riptEnabled=true, browserName=firefox, version=}]])
06:08:22.448 INFO - Creating a new session for Capabilities [{platform=ANY, java
scriptEnabled=true, browserName=firefox, version=}]
06:08:27.131 INFO - Done: [new session: Capabilities [{platform=ANY, javascriptE
nabled=true, browserName=firefox, version=}]]
06:08:27.149 INFO - Executing: [get: http://github.com])
06:08:32.120 INFO - Done: [get: http://github.com]
06:08:32.264 INFO - Executing: [get window size])
06:08:32.286 INFO - Done: [get window size]
06:08:32.292 INFO - Executing: [set window size])
06:08:32.372 INFO - Done: [set window size]
06:08:32.381 INFO - Executing: [execute script: return (function () {
var elemBounding = document.querySelector(arguments[0]).getBoundingC
lientRect();
window.scrollTo(elemBounding.left,elemBounding.top);
}).apply(null, arguments);, [#site-container > div.marketing-section.mar
keting-section-signup > div.container > form]])
06:08:32.403 INFO - Done: [execute script: return (function () {
var elemBounding = document.querySelector(arguments[0]).getBoundingC
lientRect();
window.scrollTo(elemBounding.left,elemBounding.top);
}).apply(null, arguments);, [#site-container > div.marketing-section.mar
keting-section-signup > div.container > form]]
06:08:32.408 INFO - Executing: [take screenshot])
06:08:34.744 INFO - Done: [take screenshot]
06:08:34.831 INFO - Executing: [execute script: return (function () {...}]
06:08:34.880 INFO - Done: [execute script: return (function () {...}]

Extremely slow workflow

If you request multiple screen widths, the workflow is built to resize the screen and take a screenshot for every element rather than take a screenshot at a size, and then pull all of the elements at that size, change the size and pull all of the elements again.

IE Vertical Stitching issue with Fixed Header

When creating the document screenshots in IE, our fixed header is repeating down the page. This isn't an issue with firefox or chrome

Issues installing with Node 0.10.32

Followed the following instructions provided:

brew install imagemagick graphicsmagick cairo

gulp-webdrivercss [johndoe]$ npm install webdrivercss -D
-
> [email protected] install /Users/[johndoe]/Dropbox/Projects/Experiments/gulp-webdrivercss/node_modules/webdrivercss/node_modules/resemble/node_modules/canvas
> node-gyp rebuild

Package xcb-shm was not found in the pkg-config search path.
Perhaps you should add the directory containing `xcb-shm.pc'
to the PKG_CONFIG_PATH environment variable
Package 'xcb-shm', required by 'cairo', not found
gyp: Call to './util/has_cairo_freetype.sh' returned exit status 0. while trying to load binding.gyp
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/[johndoe]/.nvm/v0.10.32/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:343:16)
gyp ERR! stack     at ChildProcess.emit (events.js:98:17)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (child_process.js:810:12)
gyp ERR! System Darwin 12.4.0
gyp ERR! command "node" "/Users/[johndoe]/.nvm/v0.10.32/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/[johndoe]/Dropbox/Projects/Experiments/gulp-webdrivercss/node_modules/webdrivercss/node_modules/resemble/node_modules/canvas
gyp ERR! node -v v0.10.32
gyp ERR! node-gyp -v v1.0.2
gyp ERR! not ok
npm ERR! Darwin 12.4.0
npm ERR! argv "node" "/Users/[johndoe]/.nvm/v0.10.32/bin/npm" "install" "webdrivercss" "-D"
npm ERR! node v0.10.32
npm ERR! npm  v2.1.2
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is most likely a problem with the canvas package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node-gyp rebuild
npm ERR! You can get their info via:
npm ERR!     npm owner ls canvas
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/[johndoe]/Dropbox/Projects/Experiments/gulp-webdrivercss/npm-debug.log

Can you guys provide addition instructions?

Also had to install xquartz manually.

I'm on OSX 10.8.4

Thanks!

Problem saving diffs (no method 'getImageDataUrl')

Hi,

When running webdrivercss locally, no diffs are being generated for me. The problem is at saveImageDiff.js:46.

/Users/equiet/Desktop/Unite/unite-dashboard/node_modules/webdrivercss/lib/saveImageDiff.js:46
        var diff = new Buffer(imageDiff.getImageDataUrl().replace(/data:image\
                                        ^
TypeError: Object #<Object> has no method 'getImageDataUrl'
    at Object.module.exports (/Users/equiet/Desktop/Unite/unite-dashboard/node_modules/webdrivercss/lib/saveImageDiff.js:46:41)
    at fn (/Users/equiet/Desktop/Unite/unite-dashboard/node_modules/webdrivercss/node_modules/async/lib/async.js:582:34)
    at Object._onImmediate (/Users/equiet/Desktop/Unite/unite-dashboard/node_modules/webdrivercss/node_modules/async/lib/async.js:498:34)
    at processImmediate [as _immediateCallback] (timers.js:336:15)

imageDiff actually looks something like this:

{ isSameDimensions: true,
  dimensionDifference: { width: 0, height: 0 },
  misMatchPercentage: '1.90',
  analysisTime: 101,
  getDiffImage: [Function] }

Btw, imageDiff.getDiffImage() returns this:

{ domain: null,
  _events: {},
  _maxListeners: 10,
  width: 1440,
  height: 900,
  data: <Buffer ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ...>,
  gamma: 0,
  writable: true,
  readable: true,
  _parser:
   { domain: null,
     _events:
      { error: [Object],
        close: [Object],
        metadata: [Function],
        gamma: [Function],
        parsed: [Function] },
     _maxListeners: 10,
     _buffers: [],
     _buffered: 0,
     _reads: [ [Object] ],
     _paused: false,
     _encoding: 'utf8',
     writable: true,
     _options:
      { width: 1440,
        height: 900,
        deflateChunkSize: 32768,
        deflateLevel: 9,
        deflateStrategy: 3,
        checkCRC: true },
     _hasIHDR: false,
     _hasIEND: false,
     _inflate: null,
     _filter: null,
     _crc: null,
     _palette: [],
     _colorType: 0,
     _chunks:
      { '1229209940': [Function],
        '1229278788': [Function],
        '1229472850': [Function],
        '1347179589': [Function],
        '1732332865': [Function],
        '1951551059': [Function] } },
  _packer:
   { domain: null,
     _events: { data: [Function], end: [Function], error: [Function] },
     _maxListeners: 10,
     _options:
      { width: 1440,
        height: 900,
        deflateChunkSize: 32768,
        deflateLevel: 9,
        deflateStrategy: 3,
        checkCRC: true },
     readable: true } }

I have tried using imageDiff.getDiffImage().data, but no luck:

Error: { [Error: Command failed: gm convert: Improper image header (/var/folders/xm/9gdh3srx30d4wjpnzy53g7440000gp/T/gmnMWxbV).
] code: 1, signal: null }

Any ideas?

Thanks.

BrowserStack Firefox always compare fail

Hello,

I tried to compare the same webpage component in BrowserStack using FIrefox, although the captured screenshot should be exactly the same, but comparison diff image always show pink difference.

Here is my code:

// init WebdriverJS
var webdriverjs = require('../index'),
    client = webdriverjs.remote({
        host: 'hub.browserstack.com',
        port: 80,
        logLevel: 'silent',
        desiredCapabilities: {
             'browser' : 'Firefox',
             'os' : 'Windows',
             'os_version' : '7',
            'browserstack.debug': 'true',
            'browserstack.user' : 'test1359',
            'browserstack.key': 'rRz7rSR24gUy446CpJB9'
        }
    });

// initialise WebdriverCSS for `client` instance
require('webdrivercss').init(client, {
    // example options
    screenshotRoot: 'my-shots',
    failedComparisonsRoot: 'diffs',
    misMatchTolerance: 0.05
});

client
    .init()
    .url('http://github.com')
    .webdrivercss('githubform', {
        elem: '#site-container > div.marketing-section.marketing-section-signup > div.container > form'
    })
    .end();

I know I've been poking around recently, because I am doing a spike on WebdriverCSS for my team. Would be really appreciated if you could help fix the issues so that we can adopt this great technology. Thank you!

Does it work with webdriverjs-angular?

I try to screen capture angular app.
it's seem not capturing anything

var webdriverjsAngular = require('webdriverjs-angular').remote({
    desiredCapabilities: {
        browserName: 'chrome'
    },
    ngRoot: '.angularWrapper' // main application selector
})

// initialise WebdriverCSS for `client` instance
require('webdrivercss').init(webdriverjsAngular, {
    // example options
    // screenshotRoot: 'my-shots',
    // failedComparisonsRoot: 'diffs',
    misMatchTolerance: 0.05,
    screenWidth: [320]
});

webdriverjsAngular
  .init()
  .url('some url')
  .webdrivercss('searchForm', {
    elem: ".searchForm",
  }, function(err,res) {
    console.log('done')
  })
  .end()