Refactor protractor-image-comparison process

[wswebcreation]

This module is now hard to maintain with all the 🍝 -code, the refactor should optimise the code, make it more readable and better to maintain. This refactor will also remove some dependencies and starts using Canvas for 100%.

The idea is to create at least 2 modules, 1 module that will be the core and exposes an API that can be used by multiple frameworks. The second module will be a Protractor plugin that will use the core module. The core module will be split from protractor-image-comparison when the refactor is done and stored in a separate repo.

Todo:

• [x] implement canvas to crop all images
• [x] remove canvas-prebuilt
• [x] implement node-canvas
• [x] update ResemebleJS to latest version
• [x] remove the png-library
• [x] fix all configs
• [x] fix all tests and create new ones
• [x] prepare he iPhone X series toolbar height
• [x] prepare the iPhone X series home bar width for comparison to automatically block it out
• [ ] prepare the Android tool bar to automatically block it out
• [ ] ...

Methods

• [x] refactor saveScreen for:
  • [x] Chrome
  • [x] Firefox
  • [x] IE11
  • [x] Edge
  • [x] Safari
  • [x] Android Chrome for ChromeDriver
  • [x] Android Chrome for NativeWebScreenshot
  • [x] iOS Safari
• [x] refactor saveElement for:
  • [x] Chrome
  • [x] Firefox
  • [x] IE11
  • [x] Edge
  • [x] Safari
  • [x] Android Chrome for ChromeDriver
  • [x] Android Chrome for NativeWebScreenshot
  • [x] iOS Safari
• [x] refactor saveFullPageScreen for:
  • [x] Chrome
  • [x] Firefox
  • [x] IE11
  • [x] Edge
  • [x] Safari
  • [x] Android Chrome for ChromeDriver
  • [x] Android Chrome for NativeWebScreenshot
  • [x] iOS Safari
• [x] refactor checkScreen for:
  • [x] Chrome
  • [x] Firefox
  • [x] IE11
  • [x] Edge
  • [x] Safari
  • [x] Android Chrome for ChromeDriver
  • [x] Android Chrome for NativeWebScreenshot
  • [x] iOS Safari
• [x] refactor checkElement for:
  • [x] Chrome
  • [x] Firefox
  • [x] IE11
  • [x] Edge
  • [x] Safari
  • [x] Android Chrome for ChromeDriver
  • [x] Android Chrome for NativeWebScreenshot
  • [x] iOS Safari
• [x] refactor checkFullPageScreen for:
  • [x] Chrome
  • [x] Firefox
  • [x] IE11
  • [x] Edge
  • [x] Safari
  • [x] Android Chrome for ChromeDriver
  • [x] Android Chrome for NativeWebScreenshot
  • [x] iOS Safari
• [ ] refactor the refactor
• [ ] refactor the refactor with TypeScript?

Open issues:

• [ ] iOS Safari on iPads can have multiple tabs, so the address bar is bigger making the cutout go wrong
• [x] Element cutouts are not done correctly on Edge
• [x] Looks like IE11 element cut outs are a little bit off to the left => is an issue in IE11, looks like the coordinates are not given back correctly, like it doesn't calculate the left border and puts in on the right. Need to keep checking this on a new site

All changes can be tracked in this eat/rewrite-3 branch

[miguelchico]

Hi @wswebcreation Nice work here!!

I was wondering if as part of this refactor you have plans to remove node-canvas-prebuilt dependency. That dependency is downloading some prebuilt canvas from github and that's stopping me to use it in my CI environment (where accessing to the internet is restricted for security reasons)

I've seen it's not part of your solution so far in the eat/rewrite-3 branch, but just double checking :)

Thank you!

[wswebcreation]

Hi @miguelchico

Tnx for the feedback, yes, I've already removed the prebuild version and implemented the node-canvas (which now by default holds the prebuild)

[miguelchico]

Hi @wswebcreation Do you have a timeline for this refactor?

I'm so excited that I can't wait!

[wswebcreation]

Hi @miguelchico

I've released a beta of protractor-image-comparion. This is a complete refactor and now supports the latest version of canvas

You can install it with npm install protractor-image-comparison@beta

And find more info here, the config has become much easier, so please check the docs

[wswebcreation]

Version 3.0.1 is out, please try that one and read the release notes carefully.