Giter Club home page Giter Club logo

webdrivercss's Introduction

WebdriverCSS Version Build Status Coverage Status Join the chat at https://gitter.im/webdriverio/webdrivercss


**Note: WebdriverCSS isn't yet compatible with WebdriverIO v3.0 and is not longer maintained. ** If anyone wants to take ownershipt of this project I am happy to assign push permissions.


CSS regression testing in WebdriverIO. This plugin is an automatic visual regression-testing tool for WebdriverIO. It was inspired by James Cryer's awesome project called PhantomCSS. After initialization it enhances a WebdriverIO instance with an additional command called webdrivercss and enables the possibility to save screenshots of specific parts of your application.

Never lose track of unwanted CSS changes:

alt text

How does it work?

  1. Define areas within your application that should always look the same
  2. Use WebdriverIO and WebdriverCSS to write some E2E tests and take screenshots of these areas
  3. Continue working on your application or website
  4. After a while rerun the tests
  5. If desired areas differ from previous taken screenshots an image diff gets generated and you get notified in your tests

Example

var assert = require('assert');

// init WebdriverIO
var client = require('webdriverio').remote({desiredCapabilities:{browserName: 'chrome'}})
// init WebdriverCSS
require('webdrivercss').init(client);

client
    .init()
    .url('http://example.com')
    .webdrivercss('startpage',[
        {
            name: 'header',
            elem: '#header'
        }, {
            name: 'hero',
            elem: '//*[@id="hero"]/div[2]'
        }
    ], function(err, res) {
        assert.ifError(err);
        assert.ok(res.header[0].isWithinMisMatchTolerance);
        assert.ok(res.hero[0].isWithinMisMatchTolerance);
    })
    .end();

Install

WebdriverCSS uses GraphicsMagick for image processing. To install this package you'll need to have it preinstalled on your system.

Mac OS X using Homebrew

$ brew install graphicsmagick

Ubuntu using apt-get

$ sudo apt-get install graphicsmagick

Windows

Download and install executables for GraphicsMagick. Please make sure you install the right binaries desired for your system (32bit vs 64bit).

After these dependencies are installed you can install WebdriverCSS via NPM as usual:

$ npm install webdrivercss
$ npm install webdriverio # if not already installed

Setup

To use this plugin just call the init function and pass the desired WebdriverIO instance as parameter. Additionally you can define some options to configure the plugin. After that the webdrivercss command will be available only for this instance.

  • screenshotRoot String ( default: ./webdrivercss )
    path where all screenshots get saved.

  • failedComparisonsRoot String ( default: ./webdrivercss/diff )
    path where all screenshot diffs get saved.

  • misMatchTolerance Number ( default: 0.05 )
    number between 0 and 100 that defines the degree of mismatch to consider two images as identical, increasing this value will decrease test coverage.

  • screenWidth Numbers[] ( default: [] )
    if set, all screenshots will be taken in different screen widths (e.g. for responsive design tests)

  • updateBaseline Boolean ( default: false )
    updates baseline images if comparison keeps failing.

Example

// create a WebdriverIO instance
var client = require('webdriverio').remote({
    desiredCapabilities: {
        browserName: 'phantomjs'
    }
}).init();

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

Usage

WebdriverCSS enhances an WebdriverIO instance with an command called webdrivercss

client.webdrivercss('some_id', [{options}], callback);

It provides options that will help you to define your areas exactly and exclude parts that are unrelevant for design (e.g. content). Additionally it allows you to include the responsive design in your regression tests easily. The following options are available:

  • name String (required)
    name of the captured element

  • elem String
    only capture a specific DOM element, you can use all kinds of different WebdriverIO selector strategies here

  • width Number
    define a fixed width for your screenshot

  • height Number
    define a fixed height for your screenshot

  • x Number
    take screenshot at an exact xy postion (requires width/height option)

  • y Number
    take screenshot at an exact xy postion (requires width/height option)

  • exclude String[]|Object[]
    exclude frequently changing parts of your screenshot, you can either pass all kinds of different WebdriverIO selector strategies that queries one or multiple elements or you can define x and y values which stretch a rectangle or polygon

  • hide String[]
    hides all elements queried by all kinds of different WebdriverIO selector strategies (via visibility: hidden)

  • remove String[]
    removes all elements queried by all kinds of different WebdriverIO selector strategies (via display: none)

  • ignore String
    can be used to ignore color differences or differences caused by antialising artifacts in the screenshot comparison

The following paragraphs will give you a more detailed insight how to use these options properly.

Let your test fail when screenshots differ

When using this plugin you can decide how to handle design breaks. You can either just work with the captured screenshots or you could even break your integration test at this position. The following example shows how to handle design breaks within integration tests:

var assert = require('assert');

describe('my website should always look the same',function() {

    it('header should look the same',function(done) {
        client
            .url('http://www.example.org')
            .webdrivercss('header', {
                name: 'header',
                elem: '#header'
            }, function(err,res) {
                assert.ifError(err);

                // this will break the test if screenshot is not within the mismatch tolerance
                assert.ok(res.header[0].isWithinMisMatchTolerance);
            })
            .call(done);
    });

    // ...

The res variable will be an object containing details on the screenshots taken. It will have properties matching each element name, and the value of those properties will contain an array of screenshots at each resolution.

For example, the res object for the code above would be:

{ 
  header: [ 
    {
      baselinePath: 'webdrivercss/header.header.baseline.png',
      message: 'mismatch tolerance not exceeded (~0), baseline didn\'t change',
      misMatchPercentage: 0,
      isExactSameImage: true,
      isSameDimensions: true,
      isWithinMisMatchTolerance: true
    }
  ]
}

Applitools Eyes

Applitools Eyes is a comprehensive automated UI validation solution with really smart image matching algorithms that are unique in this area. As a cloud service it makes your regression tests available everywhere and accessible to everyone in your team, and its automated maintenance features simplify baseline maintenance.

In order to work with Applitools Eyes you need to sign up and obtain an API key. You can sign up for a free account here.

Applitools Eyes Example

var assert = require('assert');

// create a WebdriverIO instance
var client = require('webdriverio').remote({
    desiredCapabilities: {
        browserName: 'chrome'
    }
});

// initialise WebdriverCSS for `client` instance
require('webdrivercss').init(client, {
    key: '<your personal API key>'
});

client
    .init()
    .url('http://example.com')
    .webdrivercss('<app name>', {
        name: '<test name>',
        elem: '#someElement',
        // ...
    }, function(err, res) {
        assert.ifError(err);
        assert.equal(res.steps, res.strictMatches)
    })
    .end();

The following options might be interesting if you want to synchronize your taken images with an external API. Checkout the webdrivercss-adminpanel for more information on that.

  • api String URL to API interface
  • user String user name (only necessary if API requires Basic Authentication or oAuth)
  • key String assigned user key (only necessary if API requires Basic Authentication or oAuth)

Define specific areas

The most powerful feature of WebdriverCSS is the possibility to define specific areas for your regression tests. When calling the command, WebdriverCSS will always take a screenshot of the whole website. After that it crops the image and creates a single copy for each element. If you want to capture multiple images on one page make sure you pass an array of options to the command. The screenshot capturing process can take a while depending on the document size of the website. Once you interact with the page by clicking on links, open layers or navigating to a new site you should call the webdrivercss command to take a new screenshot.

To query elements you want to capture you are able to choose all kinds of different WebdriverIO selector strategies or you can specify x/y coordinates to cover a more exact area.

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

Will capture the following:

alt text

Tip: do right click on the desired element, then click on Inspect Element, then hover over the desired element in DevTools, open the context menu and click on Copy CSS Path to get the exact CSS selector

The following example uses xy coordinates to capture a more exact area. You should also pass a screenWidth option to make sure that your xy parameters map perfect on the desired area.

client
    .url('http://github.com')
    .webdrivercss('headerbar', {
        name: 'headerbar',
        x: 110,
        y: 15,
        width: 980,
        height: 34,
        screenWidth: [1200]
    });

alt text

Exclude specific areas

Sometimes it is unavoidable that content gets captured and from time to time this content will change of course. This would break all tests. To prevent this you can determine areas, which will get covered in black and will not be considered anymore. Here is an example:

client
    .url('http://tumblr.com/themes')
    .webdrivercss('tumblrpage', {
        name: 'startpage',
        exclude: ['#theme_garden > div > section.carousel > div.carousel_slides',
                 '//*[@id="theme_garden"]/div/section[3]',
                 '//*[@id="theme_garden"]/div/section[4]']
        screenWidth: [1200]
    });

alt text

Instead of using a selector strategy you can also exclude areas by specifying xy values which form a rectangle.

client
    .url('http://tumblr.com/themes')
    .webdrivercss('tumblrpage', {
        name: 'startpage',
        exclude: [{
            x0: 100, y0: 100,
            x1: 300, y1: 200
        }],
        screenWidth: [1200]
    });

If your exclude object has more then two xy variables, it will try to form a polygon. This may be helpful if you like to exclude complex figures like:

client
    .url('http://tumblr.com/themes')
    .webdrivercss('polygon', {
        name: 'startpage',
        exclude: [{
            x0: 120, y0: 725,
            x1: 120, y1: 600,
            x2: 290, y2: 490,
            x3: 290, y3: 255,
            x4: 925, y4: 255,
            x5: 925, y5: 490,
            x6: 1080,y6: 600,
            x7: 1080,y7: 725
        }],
        screenWidth: [1200]
    });

alt text

Tweak the image comparison

If you experience problems with unstable comparison results you might want to try tweaking the algorithm. There are two options available: colors and antialiasing. colors might help you if you don't care about color differences on your page, while the antialiasing option can for example reduce unexpected differences on font or image edges:

client
    .url('http://tumblr.com/themes')
    .webdrivercss('tumblrpage', {
        name: 'startpage',
        ignore: 'antialiasing',
        screenWidth: [1200]
    });

Note: This doesn't affect the taken screenshots, but only the comparison calculations. By setting this option you reduce the sensitivity of the comparison algorithm. Though it's unlikely this might cause layout changes to remain unnoticed.

Keep an eye on mobile screen resolution

It is of course also important to check your design in multiple screen resolutions. By using the screenWidth option WebdriverCSS automatically resizes the browser for you. By adding the screen width to the file name WebdriverCSS makes sure that only shots with same width will be compared.

client
    .url('http://stephencaver.com/')
    .webdrivercss('startpage', {
        name: 'header',
        elem: '#masthead',
        screenWidth: [320,640,960]
    });

This will capture the following image at once:

alt text

file name: header.960px.png

alt text

file name: header.640px.png

alt text

file name: header.320px.png

Note that if you have multiple tests running one after the other, it is important to change the first argument passed to the webdrivercss() command to be unique, as WebdriverCSS saves time by remembering the name of previously captured screenshots.

// Example using Mocha
it('should check the first page',function(done) {
  client
    .init()
    .url('https://example.com')
    // Make this name unique.
    .webdrivercss('page1', [
      {
        name: 'test',
        screenWidth: [320,480,640,1024]
      }, {
        name: 'test_two',
        screenWidth: [444,666]
      }
    ])
    .end()
    .call(done);
});

it('should check the second page',function(done) {
  client
    // ...
    // Make this name unique.
    .webdrivercss('page2', [
      // ..
    ])
    // ...
);

Synchronize your taken Images

If you want to have your image repository available regardless where you run your tests, you can use an external API to store your shots. Therefor WebdriverCSS adds a sync function that downloads the repository as tarball and unzips it. After running your tests you can call this function again to zip the current state of your repository and upload it. Here is how this can look like:

// create a WebdriverIO instance
var client = require('webdriverio').remote({
    desiredCapabilities: {
        browserName: 'phantomjs'
    }
});

// initialise WebdriverCSS for `client` instance
require('webdrivercss').init(client, {
    screenshotRoot: 'myRegressionTests',

    // Provide the API route
    api: 'http://example.com/api/webdrivercss'
});

client
    .init()
    .sync() // downloads last uploaded tarball from http://example.com/api/webdrivercss/myRegressionTests.tar.gz
    .url('http://example.com')

    // do your regression tests
    // ...

    .sync() // zips your screenshot root and uploads it to http://example.com/api/webdrivercss via POST method
    .end();

This allows you to run your regression tests with the same taken shots again and again, no matter where your tests are executed. It also makes distributed testing possible. Regressions tests can be done not only by you but everyone else who has access to the API.

API Requirements

To implement such API you have to provide two routes for synchronization:

  • [GET] /some/route/:file Should response the uploaded tarball (for example: /some/root/myProject.tar.gz) Content-Type: application/octet-stream
  • [POST] /some/route Request contains zipped tarball that needs to be stored on the filesystem

If you don't want to implement this by yourself, there is already such an application prepared, checkout the webdriverio/webdrivercss-adminpanel project. It provides even a web interface for before/after comparison and stuff like this.

Contributing

Please fork, add specs, and send pull requests! In lieu of a formal styleguide, take care to maintain the existing coding style.

Default driver instance used for testing is PhantomJS (v1.9.8), so you need to either have it installed, or change the desiredCapabilities in the bootstrap.js file under the test folder to your preferred driver (e.g., Firefox).

You also need a web server to serve the "site" files and have the root folder set to "webdrivercss". We use the http-server package. To use this package, run these commands:

/path/to/webdrivercss-repo/ $ npm install -g http-server
/path/to/webdrivercss-repo/ $ http-server -p 8080

You can validate the site is loading correctly by visiting http://localhost:8080/test/site/index.html in a browser.

You'll also need a local selenium server running. You can install and start one via the following commands in a separate terminal:

npm install -g selenium-standalone
selenium-standalone install
selenium-standalone start

webdrivercss's People

Contributors

adrianolek avatar amitaibu avatar anselmbradford avatar arve0 avatar benurb avatar brettle avatar christian-bromann avatar cvrebert avatar danielputerman avatar equiet avatar jamesdwilson avatar klamping avatar onikiienko avatar pmacpherson avatar rupl avatar solker avatar stephencroberts avatar thesavior avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

webdrivercss's Issues

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:
image

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!

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:

capture1
capture2

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

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

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

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:
githubform current

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

Appreciated if could help out. Thank you.

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();

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

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:
image

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 () {...}]

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.

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.

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()

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)

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.

home-page 700px

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.

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.

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:

hplogo 1024px current

Firefox:

hplogo 1024px new
(yes, it is white, of the correct size)

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.
error

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

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?

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.

main-page

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: appsdropdown appspopover regression
on a mac: appsdropdown appspopover baseline

on linux: navbar dialogbody regression
on a mac: navbar dialogbody baseline

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!

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

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.

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.

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();

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)

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.

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

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:

chrome genericuserfields container 1024px diff

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)

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

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!

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:
githubform current

Any advice would be appreciated! Thank you!

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).

image

Any suggestions on how to possibly fix this?

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.

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.

cloudlogin_divider current

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.

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.