dotdiff 0.3.1 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9997ae1ee2c000b67cfdd6e76abfc3e5cfc28849
-  data.tar.gz: c35cc13323a21458161535f406b2e7c4af68421a
+  metadata.gz: aa3cab17d540380ffe0a575fc885cb38b0094fef
+  data.tar.gz: 4bb66612ff6708cc0c4af0ae928cd602e5b29201
 SHA512:
-  metadata.gz: 752d3c3960ab4630c43e68c69826caec7da722171e267ec71fc9ce4bd227902e54c73c63aaea33dbd43934dd0a64804c61414d181dceb78bdc68e145ba6fbb43
-  data.tar.gz: 9e4d4391cda1b47e0163366253c438fdc53f52724f8daf705559dd82c3d0526d7a95cf9fb55905fcb5c99325a6f01d4eb26067476ef460eb737a0d06b2148618
+  metadata.gz: 5920c90bfc868e52ee879dbc46da73bb4772832f09ff35ca31e2d50f2fdd02ba47674e239de2c8b135de0461e4049a35ad9c8f36dee6ada47689e8fe933d1e95
+  data.tar.gz: 6d20f46f80cbc2c28f6e2906db735fb5114bd5c6af96d8c3ea7d48667eaf7d56aac432c7a664309b30a0a7dc42c7544f08e664c9e6b4d3e08626cd5cda33cdcd

data/README.md

@@ -1,6 +1,10 @@
 # Dotdiff
 
-Dotdiff is a very basic wrapper around [perceptual-diff](http://pdiff.sourceforge.net/) which works with both Capybara and RSpec to capture and compare the images with a simple rspec matcher. Which can also hide certain elements via executing javascript for elements which can change with different display suchas username or user specific details.
+Dotdiff is a very basic wrapper around [perceptual-diff](http://pdiff.sourceforge.net/) which works with both Capybara and RSpec to capture and compare the images with a simple rspec matcher.
+
+It is now also possible to snapshot a particular element on the page just by using the standard capybara finders - which once the element is found will query the browser for its dimensions and placement on the page and use that metadata to crop using chunky_png from a full page snapshot.
+
+It can also hide certain elements via executing javascript for elements which can change with different display suchas username or user specific details, but only for full page screenshots.
 
 ## Installation
 
@@ -18,8 +22,10 @@ Or install it yourself as:
 
     $ gem install dotdiff
 
+
 ## Usage
 
+### Dependencies
 First ensure to install perceptualdiff binary which is available via apt-get and brew or via http://pdiff.sourceforge.net/
 
 In your spec/spec_helper
@@ -32,50 +38,44 @@ If you want the rspec_matcher require the following as well
 require 'dotdiff/rspec_matcher'
 ```
 
+### Configuration
 In an initializer you can configure certain options example shown below within Dotdiff
 
 ```ruby
 DotDiff.configure do |config|
   config.perceptual_diff_bin = `which perceptualdiff`.strip
-  config.image_store_path = File.expand_path('../../spec/fixtures/images', __FILE__)
-  config.js_elements_to_hide = [
-    "document.getElementsByClassName('drop-menu-toggle')[0]",
-    "document.getElementsById('username-title')",
-  ]
-  config.failure_image_path = '/home/user/spec_image_failures'
-
+  config.image_store_path = File.join('/home', 'user', 'images')
+  config.xpath_elements_to_hide = ["id('main')"]
+  config.failure_image_path = File.join('/home', 'user', 'failure_comparisions')
+  config.max_wait_time = 2
 end
 ```
 
-Basic usage in your spec is just the line below;
+### Spec usage
+
+For a full page screenshot you can use the below;
 
 ```ruby
-expect(page).to match_image('GooglePage', subdir: 'Google')
+expect(page).to match_image('HomePage', subdir: 'Normitec')
 ```
 
-It does the following;
+For a specific element screenshot you can use like so;
 
-It builds the base_image_file location with DotDiff.image_store_path + subdir + filename + .png
-
-It then checks if that file exists;
- - If it doesn't exist it or `resave_base_image` is passed;
-    - it hides any elements defined in `js_elements_to_hide`
-    - uses `Capybara::Session#save_screenshot` to create a screenshot
-    - it then un-hides any elements defined as above
-    - returns that compare was successfull
-
-Also if resave_base_image is passed and DotDiff.overwrite_on_resave is false it creates an r2 version so that you can compare with the original or if the file is deleted it will just write the same file.
+```ruby
+expect(find('#login-form')).to match_image('LoginForm', subdir: 'Normitec')
+```
 
- - If the `base_image_file` exists and resave_base_image is false;
-    - it hides any elements defined in `js_elements_to_hide`
-    - uses `Capybara::Session#save_screenshot` to create a screenshot in a tmpdir to compare against the base_image
-    - runs the command and observes the result
-    - it then un-hides any elements defined as above
-    - if failure_image_path is defined it moves the new captured image to that path named as the original file
-    - returns both the result and stdout failure message
+The only difference for the element specific is passing a specific element in the `expect` parameter.
 
-A failure message might look like the following `expected to match image but failed with: FAIL: Images are 120 pixels visibly different`
+## Configuration Options
 
+| Config                 | Description                                                                                                                                                                                                                                                                                                                                                                                                                                         | Example                                               | Default                        | Required |
+|------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------|--------------------------------|----------|
+| perceptual_diff_bin    | Location of the perceptual diff binary file                                                                                                                                                                                                                                                                                                                                                                                                         | `which perceptualdiff`.strip                          | N/A                            | Yes      |
+| image_store_path       | The root path to store the base images                                                                                                                                                                                                                                                                                                                                                                                                              | File.join('/home', 'user','images')                   | nil                            | Yes      |
+| xpath_elements_to_hide | When taking full page screenshots it will hide elements specified that might change each time and re-shows them after the screenshot.  It doesn't use this option for taking screenshots of specific elements.                                                                                                                                                                                                                                      | ["id('main')", "//div[contains(@class, 'formy'])[1]"] | []                             | No       |
+| failure_image_path     | When a comparison occurs and the perceptual_diff binary returns a failure with the message. It will dump the new image taken for comparison to this directory.  If not supplied it will not move the images from the temporary location that it is generated at.                                                                                                                                                                                    | File.join('/home', 'user','failures')                 | nil                            | No       |
+| max_wait_time          | This is similar to the Capybara#default_max_wait_time if you have a high value such as 10, as its possible that the  global xpath_elements_to_hide might not always exist it will wait the full time - therefore you can drop it for the hiding and showing of the elements.  In this example it would wait up 20 seconds in total 10 for hiding and 10 seconds for re-showing - that is if the element isn't even going to be present on the page. | 2                                                     | Capybara#default_max_wait_time | No       |
 
 ## Contributing
 
@@ -86,9 +86,8 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/jnormi
 
 The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
 
-## Whats left to do
+## Whats still to do
 
 Its not fully completed yet but is usable in its current state.
  - Improve the message output to extract just the fail line
  - Add an integration spec
- - Support multi browser resolutions and handle in the file name

data/dotdiff.gemspec

@@ -20,7 +20,10 @@ Gem::Specification.new do |spec|
   spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
   spec.require_paths = ["lib"]
 
+  spec.add_runtime_dependency "chunky_png", '~> 1.3'
+
   spec.add_development_dependency "bundler", "~> 1.11"
   spec.add_development_dependency "rake", "~> 10.0"
   spec.add_development_dependency "rspec", "~> 3.0"
+  spec.add_development_dependency "capybara", "~> 2.6"
 end

data/lib/dotdiff/comparer.rb

@@ -0,0 +1,60 @@
+module DotDiff
+  class Comparer
+    attr_reader :element, :page, :snapshot
+
+    def initialize(element, page, snapshot)
+      @page = page
+      @element = element
+      @snapshot = snapshot
+    end
+
+    def result
+      if element.is_a?(Capybara::Session)
+        compare_page
+      elsif element.is_a?(Capybara::Node::Base)
+        compare_element
+      else
+        raise ArgumentError, "Unknown element class received: #{element.class.name}"
+      end
+    end
+
+    private
+
+    def compare_element(element_meta = ElementMeta.new(page, element))
+      snapshot.capture_from_browser(false, nil)
+      snapshot.crop_and_resave(element_meta)
+
+      if !File.exists?(snapshot.basefile)
+        snapshot.resave_cropped_file
+        [true, snapshot.basefile]
+      else
+        compare(snapshot.cropped_file)
+      end
+    end
+
+    def compare_page
+      snapshot.capture_from_browser
+
+      if !File.exists?(snapshot.basefile)
+        snapshot.resave_fullscreen_file
+        [true, snapshot.basefile]
+      else
+        compare(snapshot.fullscreen_file)
+      end
+    end
+
+    def compare(compare_to_image)
+      result = CommandWrapper.new
+      result.run(snapshot.basefile, compare_to_image)
+
+      if result.failed? && DotDiff.failure_image_path
+        failure_path = File.join(DotDiff.failure_image_path, snapshot.subdir)
+
+        FileUtils.mkdir_p(failure_path)
+        FileUtils.mv(compare_to_image, File.join(failure_path, snapshot.base_filename), force: true)
+      end
+
+      [result.passed?, result.message]
+    end
+  end
+end

data/lib/dotdiff/element_handler.rb

@@ -2,7 +2,7 @@ module DotDiff
   class ElementHandler
     attr_accessor :driver
 
-    def initialize(driver, elements = DotDiff.js_elements_to_hide)
+    def initialize(driver, elements = DotDiff.xpath_elements_to_hide)
       @driver = driver
       @elements = elements
     end
@@ -29,8 +29,7 @@ module DotDiff
     end
 
     def element_exists?(xpath)
-      # TODO: Allow custom overriding beyond Capybara.default_max_wait_time
-      driver.find(:xpath, xpath, wait: 2, visible: :all) rescue nil
+      driver.find(:xpath, xpath, wait: DotDiff.max_wait_time, visible: :all) rescue nil
     end
 
     def elements

data/lib/dotdiff/element_meta.rb

@@ -0,0 +1,45 @@
+module DotDiff
+  class ElementMeta
+    attr_reader :page, :element_xpath
+
+    def initialize(page, element)
+      @element_xpath = element.path
+      @page = page
+    end
+
+    def rectangle
+      @rectangle ||= Rectangle.new(@page, @element_xpath)
+    end
+
+    class Rectangle
+      attr_reader :rect
+
+      def initialize(page, xpath)
+        @rect = get_rect(page, xpath)
+      end
+
+      def method_missing(name, *args, &block)
+        if %w(x y width height).include?(name.to_s)
+          case name
+            when :x then rect['left']
+            when :y then rect['top']
+            else rect[name.to_s]
+          end
+        else
+          super
+        end
+      end
+
+      private
+
+      def js_query(xpath)
+        "document.evaluate(\"#{xpath}\", document, null, XPathResult."\
+        "FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.getBoundingClientRect()"
+      end
+
+      def get_rect(page, xpath)
+        page.evaluate_script(js_query(xpath))
+      end
+    end
+  end
+end

data/lib/dotdiff/image/cropper.rb

@@ -0,0 +1,44 @@
+require 'chunky_png'
+
+module DotDiff
+  module Image
+    module Cropper
+      def crop_and_resave(element)
+        image = load_image(fullscreen_file)
+
+        image.crop!(
+          element.rectangle.x,
+          element.rectangle.y,
+          width(element, image),
+          height(element, image)
+        )
+
+        image.save(cropped_file)
+      end
+
+      def load_image(image_file)
+        ::ChunkyPNG::Image.from_file(image_file)
+      end
+
+      def height(element, image)
+        element_height = element.rectangle.height + element.rectangle.y
+
+        if element_height > image.height
+          image.height - element.rectangle.y
+        else
+          element.rectangle.height
+        end
+      end
+
+      def width(element, image)
+        element_width = element.rectangle.width + element.rectangle.x
+
+        if element_width > image.width
+          image.width - element.rectangle.x
+        else
+          element.rectangle.width
+        end
+      end
+    end
+  end
+end

data/lib/dotdiff/rspec_matcher.rb

@@ -1,15 +1,17 @@
 require 'rspec/expectations'
 
 RSpec::Matchers.define :match_image do |filename, opts = {}|
-  match do |page|
-    image = DotDiff::Image.new(Hash(opts).merge!(file_name: filename, driver: page))
+  match do |page_or_element|
+    options = Hash(opts).merge(filename: filename, page: page)
 
-    result, @message = image.compare
+    snapshot = DotDiff::Snapshot.new(options)
+    comparer = DotDiff::Comparer.new(page_or_element, page, snapshot)
+
+    result, @message = comparer.result
     result == true
   end
 
-
-  failure_message do |actual|
-    "expected to match image but failed with: #{@message}"
+  failure_message do |page_or_element|
+    "expected #{page_or_element.class} to match image but failed with: #{@message}"
   end
 end

data/lib/dotdiff/snapshot.rb

@@ -0,0 +1,73 @@
+module DotDiff
+  class Snapshot
+    include Image::Cropper
+
+    attr_reader :base_filename, :subdir, :rootdir, :page
+
+    IMAGE_EXT = 'png'.freeze
+
+    def initialize(options = {})
+      opts = { rootdir: DotDiff.image_store_path }.merge(Hash(options))
+      @base_filename = opts[:filename]
+      @subdir = opts[:subdir].to_s
+      @rootdir = opts[:rootdir].to_s
+      @page = opts[:page]
+    end
+
+    def fullscreen_file
+      @fullscreen ||= File.join(Dir.tmpdir, subdir, base_filename)
+    end
+
+    def cropped_file
+      @cropped ||= File.join(Dir.tmpdir, subdir, "#{base_filename(false)}_cropped.#{IMAGE_EXT}")
+    end
+
+    def basefile
+      File.join(rootdir, subdir.to_s, base_filename)
+    end
+
+    def base_filename(with_extention=true)
+      filename  = File.basename(@base_filename)
+      extension = File.extname(filename)
+      rtn_file  = @base_filename
+
+      if with_extention
+        rtn_file = "#{@base_filename}.#{IMAGE_EXT}" if extension.empty?
+      else
+        rtn_file = @base_filename.sub(ext, '') unless extension.empty?
+      end
+
+      rtn_file
+    end
+
+    def capture_from_browser(hide_and_show = true, element_handler = ElementHandler.new(page))
+      if hide_and_show
+        element_handler.hide
+        page.save_screenshot(fullscreen_file)
+        element_handler.show
+      else
+        page.save_screenshot(fullscreen_file)
+      end
+    end
+
+    def resave_cropped_file
+      resave_base_file(:cropped)
+    end
+
+    def resave_fullscreen_file
+      resave_base_file(:fullscreen)
+    end
+
+    private
+
+    def resave_base_file(version)
+      FileUtils.mkdir_p(File.join(DotDiff.image_store_path, subdir))
+
+      if !File.exists?(basefile) || DotDiff.overwrite_on_resave
+        FileUtils.mv(self.send("#{version}_file"), basefile, force: true)
+      else
+        FileUtils.mv(self.send("#{version}_file"), "#{basefile}.r2", force: true)
+      end
+    end
+  end
+end

data/lib/dotdiff/version.rb

@@ -1,3 +1,3 @@
 module DotDiff
-  VERSION = "0.3.1"
+  VERSION = "1.0.0"
 end

data/lib/dotdiff.rb

@@ -2,15 +2,21 @@ require 'dotdiff/version'
 
 require 'shellwords'
 require 'tmpdir'
+require 'fileutils'
 
 require 'dotdiff/command_wrapper'
-require 'dotdiff/image'
 require 'dotdiff/element_handler'
 
+require 'dotdiff/element_meta'
+require 'dotdiff/image/cropper'
+require 'dotdiff/snapshot'
+require 'dotdiff/comparer'
+
 module DotDiff
  class << self
    attr_accessor :perceptual_diff_bin, :resave_base_image, :failure_image_path,
-                 :image_store_path, :overwrite_on_resave, :js_elements_to_hide
+                 :image_store_path, :overwrite_on_resave, :xpath_elements_to_hide,
+                 :max_wait_time
 
    def configure
      yield self
@@ -20,8 +26,12 @@ module DotDiff
      @resave_base_image ||= false
    end
 
-   def js_elements_to_hide
-     @js_elements_to_hide ||= []
+   def xpath_elements_to_hide
+     @xpath_elements_to_hide ||= []
    end
- end
+
+    def max_wait_time
+      @max_wait_time || Capybara.default_max_wait_time
+    end
+  end
 end

metadata

@@ -1,15 +1,29 @@
 --- !ruby/object:Gem::Specification
 name: dotdiff
 version: !ruby/object:Gem::Version
-  version: 0.3.1
+  version: 1.0.0
 platform: ruby
 authors:
 - Jon Normington
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-03-15 00:00:00.000000000 Z
+date: 2016-03-26 00:00:00.000000000 Z
 dependencies:
+- !ruby/object:Gem::Dependency
+  name: chunky_png
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.3'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -52,6 +66,20 @@ dependencies:
     - - ~>
       - !ruby/object:Gem::Version
         version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: capybara
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '2.6'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '2.6'
 description: Preceptual diff wrapper for capybara and rspec image regression specs
   which is great for graphs and charts where checkingthe DOM is either impossible
   to not worth it.
@@ -72,9 +100,12 @@ files:
 - dotdiff.gemspec
 - lib/dotdiff.rb
 - lib/dotdiff/command_wrapper.rb
+- lib/dotdiff/comparer.rb
 - lib/dotdiff/element_handler.rb
-- lib/dotdiff/image.rb
+- lib/dotdiff/element_meta.rb
+- lib/dotdiff/image/cropper.rb
 - lib/dotdiff/rspec_matcher.rb
+- lib/dotdiff/snapshot.rb
 - lib/dotdiff/version.rb
 homepage: https://github.com/jnormington/dotdiff
 licenses:

data/lib/dotdiff/image.rb

@@ -1,78 +0,0 @@
-require 'fileutils'
-
-module DotDiff
-  class Image
-    attr_accessor :driver, :resave_base_image, :subdir, :file_name
-
-    def initialize(opts = {})
-      Hash(opts).each do |key, value|
-        if self.respond_to?("#{key}=")
-          self.send("#{key}=", value)
-        end
-      end
-    end
-
-    def compare
-      outcome = []
-
-      if !File.exists?(base_image_file) || resave_base_image
-        path = capture_and_resave_base_image
-        outcome = [true, path]
-      else
-        compare_to_image = capture_from_browser
-        result = CommandWrapper.new
-
-        result.run(base_image_file, compare_to_image)
-
-        if result.failed? && DotDiff.failure_image_path
-          FileUtils.mkdir_p(File.join(DotDiff.failure_image_path, subdir.to_s))
-          file_name = File.basename(compare_to_image)
-
-          FileUtils.mv(compare_to_image,
-            File.join(DotDiff.failure_image_path, subdir.to_s, file_name), force: true)
-        end
-
-        outcome = [result.passed?, result.message]
-      end
-
-      outcome
-    end
-
-    def resave_base_image
-      @resave_base_image.nil? ? DotDiff.resave_base_image : @resave_base_image
-    end
-
-    def base_image_file
-      @file_name = "#{file_name}.png" unless file_name.include?('.png')
-
-      File.join(DotDiff.image_store_path, subdir.to_s, file_name)
-    end
-
-    private
-
-    def element_handler
-      @elemnt_handler ||= ElementHandler.new(driver)
-    end
-
-    def capture_from_browser
-      tmp_screenshot_file = File.join(Dir.tmpdir, File.basename(base_image_file))
-
-      element_handler.hide
-      driver.save_screenshot(tmp_screenshot_file)
-      element_handler.show
-
-      tmp_screenshot_file
-    end
-
-    def capture_and_resave_base_image
-      tmp_image = capture_from_browser
-      FileUtils.mkdir_p(File.join(DotDiff.image_store_path, subdir))
-
-      if !File.exists?(base_image_file) || DotDiff.overwrite_on_resave
-        FileUtils.mv(tmp_image, base_image_file, force: true)
-      else
-        FileUtils.mv(tmp_image, "#{base_image_file}.r2", force: true)
-      end
-    end
-  end
-end