Screenshot of element and checking diffence between images

[gskachkov]

I've added additional selector parameter to screenshot method, that allow to make screenshot only selected element. Also when is making css refactoring we need to check that we have not modified page appearence. So I've added additional assert method that compare screenshot with some stored etalon png image. My changes contain modification in two modules:

1. dalek.
   • Modified screenshot action to support selector of the element

    test.open('http://google.com')
       .wait(500)
       .screenshot('test/screenshots/google.png','#lga')
       .done();

• Added screenshotIsEqualTo action that allow to check if previously created screenshot is equal to stored image, and create image diff if it necessary.

    test.open('http://google.com')
       .wait(500)
       .screenshot('test/screenshots/google.png','#lga')
       .assert.screenshotIsEqualTo('test/screenshots/google_etalon.png', true, 'Google Doodles')
       .done();

1. dalek-driver-native. fork of dalek-driver-native Added Image lib that support necessary for changes in dalek operations. Image lib relies on node-pngjs lib, that is simple pure js lib for work with png files.

I was inspired by @stoyanstefanov post (http://www.phpied.com/css-diffs-2/)

I'm quite new in github and open source contribution, so please let me know if I'm doing something in wrong way.

[asciidisco]

Wow. That is EXTREMELY sophisticated. Just wow. Although, I don't think it should be in core (because this is not the core goal of DalekJS).

BUT, by the end of next month we will restructure some of the internals of Dalek & will provide a plugin API & I will take care of your PR & migrate it to its won repository it will be the first DalekJS plugin ever.

Thank you so much.

[Midako]

Sry, if i'm writing in the Wrong Section, its my first time on Github Thank you for this wonderful function gskachkov, i was trying to use it....but i get some errors...maybe outdated ? if: .screenshot with selector parameter Error Output: { '0': undefined } if: .screenshot w/o selector parameter but with .assert.screenshotIsEqualTo('test/screenshots/google_etalon.png', true, 'Google Doodles') Error Output: { '0': [TypeError: Cannot call method 'apply' of undefined] }

[gskachkov]

@Midako I'll check, could you please provide browser that you used in your test?

[Midako]

@gskachkov im using Chrome usually, but the error appears on every browser i use OS: Win 7 Phantom 1.9.7 IE 11 Chrome 38.0.2125.104 (latest)

maybe it's a fail configure from me ? i did change the Action/Assert .js in dalekjs and added the pngjs lib to dalek-driver-native

[krnlde]

Phantom CSS does exactly that https://github.com/Huddle/PhantomCSS

[Midako]

@krnlde thanks for the hint, i know phantomcss...but i want to test gskachkov's compare script... with dalekjs

[gskachkov]

@Midako Just to double check. Have you downloaded fork of the dalek-driver-native? This link for it https://github.com/dalekjs/dalek-driver-native/pull/17 Changes were made in two repositories. dalek and dalek-driver-native

[Midako]

@gskachkov works like a charm, i did'nt changed the commands of dalek-driver-native

[gskachkov]

@Midako Just be aware that you can faced with some issues in making screenshot of the element in Chrome if selected element isn't fully visible on the screen, because of the issue in chrome driver https://code.google.com/p/chromedriver/issues/detail?id=294. Fortunately PhantomJS doesn't have this issue.

As for know I haven't found elegant solution for this issue.

You can reproduce this issue by following script.

test.open('http://dalekjs.com/docs/actions.html')
       .resize({width: 400, height: 500})
       .wait(500)
       .screenshot('test/screenshots/dalekjs_docs_actions.png','#content')
       .assert.screenshotIsEqualTo('test/screenshots/dalekjs_docs_actions_etalon.png', true, ' Selected element is bigger than screen')
       .done();

[Midako]

@gskachkov Thank you, i do already know this. it should be possible to do something like this .execute(function() { $('html, body').animate({ scrollTop: $('element').offset().top + 'px' }, 'fast'); })

[asciidisco]

Change my mind, lets get this in :D Merged manually.

[gskachkov]

@asciidisco Cool! Let me know if I need to change/fix something, because it is not the clearest/easiest code.