capybara-screenshot-diff 1.6.3 → 1.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ecb7108c89946f6489787b491c0cd831f096d09ee656e68674887952682aee7a
-  data.tar.gz: d41e23dae6a64663d26b586235ccc4cdc10d02a43b3fefa6a8563327cde563bd
+  metadata.gz: c2aaf70ea2e2737e435920bc94a4504a2d2d3fe9d92874a4f1a9ac2f66527ed1
+  data.tar.gz: '087a7e5e2636a56318884f7d272126e62faea68c49401e96fa40a4a0d43bfb8b'
 SHA512:
-  metadata.gz: 89501dc8c7ab1b540d182dacd10f8bf2d3b24521851db20bed42eb7c066b484d5a5cfbc766a4a0d5c80539500c1eef342f55be4069da455ba1d2ba14524d2463
-  data.tar.gz: 12c02e086af0df03206eaa5ac332306b0b199c33d70b6393c64a60a70a5777e4598b4aedf67afc0a6aa06166247efd7e6a0c21652aa4c2587e13009566363b87
+  metadata.gz: 7c636d231583f4b3df1404aff861ef94000752e8b07edc829e2c16d56e34e2ba7418849c7e875a9e625832a6b8259f854c3ff3e0883c20d5942350d34181bc7d
+  data.tar.gz: f706ccc8937cd86a53b0a0dd04cb2429e77d4ef1ac643b898ce7bc08c4b623c976ce3f402136fccf0851c99509ec346102a48ef724a4711f70e73e438cf2a973

data/.github/dependabot.yml

@@ -0,0 +1,8 @@
+---
+version: 2
+
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"

data/.github/workflows/lint.yml

@@ -13,7 +13,7 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1

data/.github/workflows/test.yml

@@ -14,19 +14,24 @@ env:
   FERRUM_PROCESS_TIMEOUT: '15'
   WD_CACHE_TIME: '864000' # 10 days
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
   test:
     name: Functional Testing
-    runs-on: ubuntu-20.04 # In order to install libvips 8.9+ version
+    runs-on: ubuntu-22.04 # In order to install libvips 8.9+ version
+    timeout-minutes: 5
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: '3.0'
+          ruby-version: '3.1'
           bundler-cache: true
 
       - name: Install libvips
@@ -38,42 +43,44 @@ jobs:
           COVERAGE: enabled
 
       - name: Upload Screenshots
-        if: ${{ always() }}
-        uses: actions/upload-artifact@v2
+        if: always()
+        uses: actions/upload-artifact@v3
         with:
-          path: test/fixtures/app/doc/screenshots/
+          name: screenshots
+          retention-days: 1
+          path: |
+            test/fixtures/app/doc/screenshots/
+            tmp/capybara/screenshots-diffs/
 
       - name: Upload Coverage
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         with:
           name: coverage
+          retention-days: 1
           path: coverage
 
   matrix:
     name: Test Integration Rails & Ruby
     needs: [ 'test' ]
     runs-on: ubuntu-20.04
+    timeout-minutes: 5
 
     strategy:
       matrix:
-        ruby-version: [ '3.1', '3.0', '2.7', '2.6', 'jruby' ]
+        ruby-version: [ '3.1', '3.0', '2.7', 'jruby' ]
         gemfile:
+          - 'rails70_gems.rb'
           - 'rails61_gems.rb'
           - 'rails60_gems.rb'
-          - 'rails52.gemfile'
-        include:
-          - ruby-version: 2.7
-            gemfile: rails70_gems.rb
-          - ruby-version: 3.0
-            gemfile: rails70_gems.rb
-          - ruby-version: 3.1
-            gemfile: rails70_gems.rb
+        exclude:
+          - ruby-version: 'jruby'
+            gemfile: 'rails70_gems.rb'
     env:
       BUNDLE_GEMFILE: gemfiles/${{ matrix.gemfile }}
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
@@ -91,6 +98,7 @@ jobs:
     name: Test Integration Capybara & Image Drivers
     needs: [ 'test' ]
     runs-on: ubuntu-20.04
+    timeout-minutes: 5
 
     strategy:
       matrix:
@@ -102,7 +110,7 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
@@ -118,3 +126,13 @@ jobs:
         env:
           SCREENSHOT_DRIVER: ${{ matrix.screenshot-driver }}
           CAPYBARA_DRIVER: ${{ matrix.capybara-driver }}
+
+      - name: Upload Screenshots
+        uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: screenshots-${{ matrix.screenshot-driver }}-${{ matrix.capybara-driver }}
+          retention-days: 1
+          path: |
+            test/fixtures/app/doc/screenshots/
+            tmp/capybara/screenshots-diffs/

data/.gitignore

@@ -10,3 +10,5 @@
 /pkg/
 /spec/reports/
 /tmp/
+/test/fixtures/**/*.committed.png
+/test/fixtures/**/*.latest.png

data/CONTRIBUTING.md

@@ -19,4 +19,6 @@ Run the tests for a matrix of configurations of Ruby implementations and Rails v
 
 ## Merging to master
 
-Before merging to master, please have a member of the project review your changes, and make sure the tests are green in travis-ci.
+Before merging to `master`,
+please have a member of the project review your changes,
+and make sure the tests are green.

data/Dockerfile

@@ -3,9 +3,7 @@
 #   $ docker build . -t csd
 #   $ docker run -v $(pwd):/app -ti csd rake test
 
-ARG RUBY_VERSION=2.7.2
-
-FROM circleci/ruby:2.7.2-node-browsers
+FROM jetthoughts/cimg-ruby:3.1-chrome
 
 RUN \
   # Install dependencies
@@ -47,6 +45,7 @@ RUN sudo /app/bin/install-vips
 ADD ./lib/capybara/screenshot/diff/version.rb /app/lib/capybara/screenshot/diff/
 ADD ./capybara-screenshot-diff.gemspec /app/
 ADD ./gems.rb /app/
+ADD ./Rakefile /app/
 
 RUN bundle install
 

data/README.md

@@ -1,4 +1,4 @@
-[![Build Status](https://travis-ci.org/donv/capybara-screenshot-diff.svg?branch=master)](https://travis-ci.org/donv/capybara-screenshot-diff)
+[![Test](https://github.com/donv/capybara-screenshot-diff/actions/workflows/test.yml/badge.svg)](https://github.com/donv/capybara-screenshot-diff/actions/workflows/test.yml)
 
 # Capybara::Screenshot::Diff
 
@@ -40,14 +40,14 @@ In your test class, include the `Capybara::Screenshot::Diff` module:
 ```ruby
 class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
   include Capybara::Screenshot::Diff
-  ...
+  # ...
 end
 ```
 
-### rspec
+### RSpec
 
 ```ruby
-describe 'Permissions admin', :type => :feature, :js => true do
+describe 'Permissions admin', type: :feature, js: true do
 
   include Capybara::Screenshot::Diff
 
@@ -64,7 +64,7 @@ But it's better to include it within your *_helper.rb file so that it can used a
 require 'capybara/screenshot/diff'
 
 RSpec.configure do |config|
-    config.include Capybara::Screenshot::Diff::TestMethods
+  config.include Capybara::Screenshot::Diff
 end
 ```
 
@@ -97,8 +97,8 @@ doc
 ```
 
 To store the screen shot history, add the `doc/screenshots` directory to your
- version control system (git, svn, etc).
- 
+version control system (git, svn, etc).
+
     Screen shots are compared to the previously COMMITTED version of the same screen shot.
 
 ### Screenshot groups
@@ -186,20 +186,14 @@ end
 test.
 
 
-
 ### Capturing one area instead of the whole page
 
+You can crop images before comparison to be run, by providing region to crop as `[left, top, right, bottom]` or by css selector like `body .tag`
+
 ```ruby
 test 'the cool' do
   visit '/feature'
-  screenshot 'cool_element', crop: bounds('#my_element')
-end
-
-private
-
-def bounds(selector)
-  element = evaluate_script("document.querySelector('#{selector}').getBoundingClientRect()")
-  [element['left'], element['top'], element['right'], element['bottom']]
+  screenshot 'cool_element', crop: '#my_element'
 end
 ```
 
@@ -305,7 +299,7 @@ Capybara::Screenshot::Diff.enabled = ENV['COMPARE_SCREENSHOTS']
 
 By default, `Capybara::Screenshot::Diff` saves screenshots to a
 `doc/screenshots` folder, relative to either `Rails.root` (if you're in Rails),
- or your current directory otherwise.
+or your current directory otherwise.
 
 If you want to change where screenshots are saved to, then there are two
 configuration options that that are relevant.
@@ -370,7 +364,6 @@ Capybara::Screenshot.hide_caret = true
 This will make the cursor (caret) transparent (invisible), so the blinking does not delay the screen shot.
 
 
-
 ### Removing focus from the active element
 
 Another way to avoid the cursor blinking is to set the `blur_active_element` option:
@@ -428,7 +421,7 @@ Capybara::Screenshot::Diff.shift_distance_limit = 1
 this will impact performance **severely** if a match cannot be found.
 
 If `shift_distance_limit` is `nil` shift distance is not measured.  If `shift_distance_limit` is set,
-even to `0`, shift distabnce is measured and reported on image differences.
+even to `0`, shift distance is measured and reported on image differences.
 
 ### Allowed difference size
 
@@ -452,25 +445,26 @@ Capybara::Screenshot::Diff.area_size_limit = 42
 ### Skipping an area
 
 Sometimes you have expected change that you want to ignore.
-You can use the `skip_area` option to the `screenshot` method to ignore an area:
+You can use the `skip_area` option with `[left, top, right, bottom]`
+or css selector like `'#footer'` or `'.container .skipped_element'` to the `screenshot` method to ignore an area:
 
 ```ruby
 test 'unstable area' do
   visit '/'
-  screenshot 'index', skip_area: [17, 6, 27, 16]
+  screenshot 'index', skip_area: [[17, 6, 27, 16], '.container .skipped_element', '#footer']
 end
 ```
 
-The arguments are [x1, y1, x2, y2] for the area you want to ignore.  You can also set this globally:
+The arguments are `[left, top, right, bottom]` for the area you want to ignore.  You can also set this globally:
 
 ```ruby
 Capybara::Screenshot::Diff.skip_area = [0, 0, 64, 48]
 ```
 
-If you need to ignore multiple areas, you can supply an array of arrays:
+If you need to ignore multiple areas:
 
 ```ruby
-screenshot 'index', skip_area: [[0, 0, 64, 48], [17, 6, 27, 16]]
+screenshot 'index', skip_area: [[0, 0, 64, 48], [17, 6, 27, 16], 'css_selector .element']
 ```
 
 ### Available Image Processing Drivers
@@ -479,7 +473,7 @@ There are several image processing supported by this gem.
 There are several options to setup active driver: `:auto`, `:chunky_png` and `:vips`.
 
 * `:auto` - will try to load `:vips` if there is gem `ruby-vips`, in other cases will load `:chunky_png`
-* `:chunky_png` and `:vips` will load correspondent driver  
+* `:chunky_png` and `:vips` will load correspondent driver
 
 ### Enable VIPS image processing
 
@@ -488,8 +482,8 @@ and could be enabled by adding `ruby-vips` to `Gemfile`.
 
 If need to setup explicitly Vips driver, there are several ways to do this:
 
-  * Globally: `Capybara::Screenshot::Diff.driver = :vips`  
-  * Per screenshot option: `screenshot 'index', driver: :vips`  
+* Globally: `Capybara::Screenshot::Diff.driver = :vips`
+* Per screenshot option: `screenshot 'index', driver: :vips`
 
 With enabled VIPS there are new alternatives to process differences, which easier to find and support.
 For example, `shift_distance_limit` is very heavy operation. Instead better to use `median_filter_window_size`. 
@@ -532,6 +526,24 @@ test 'unstable area' do
 end
 ```
 
+### Skipping stack frames in the error output
+
+If you would like to override the `screenshot` method or for some other reason would like to skip stack
+frames when reporting image differences, you can use the `skip_stack_frames` option:
+
+```ruby
+test 'test visiting the index' do
+  visit root_path
+  screenshot :index
+end
+
+private
+
+def screenshot(name, **options)
+  super(name, skip_stack_frames: 1, **options)
+end
+```
+
 ## Development
 
 After checking out the repo, run `bin/setup` to install dependencies.

data/bin/install-vips

@@ -2,7 +2,7 @@
 
 set -e
 
-version=${VIPS_VERSION:-8.10.0}
+version=${VIPS_VERSION:-8.12.2}
 
 wget "https://github.com/libvips/libvips/releases/download/v$version/vips-$version.tar.gz"
 tar xf "vips-$version.tar.gz"

data/capybara-screenshot-diff.gemspec

@@ -12,7 +12,7 @@ Gem::Specification.new do |spec|
   spec.summary = "Track your GUI changes with diff assertions"
   spec.description = "Save screen shots and track changes with graphical diff"
   spec.homepage = "https://github.com/donv/capybara-screenshot-diff"
-  spec.required_ruby_version = ">= 2.5.0"
+  spec.required_ruby_version = defined?(JRUBY_VERSION) ? ">= 2.6.0" : ">= 2.7.0"
   spec.license = "MIT"
   spec.metadata["allowed_push_host"] = "https://rubygems.org/"
   spec.files = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
@@ -20,7 +20,7 @@ Gem::Specification.new do |spec|
   spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
   spec.require_paths = ["lib"]
 
-  spec.add_runtime_dependency "actionpack", ">= 4.2", "< 8"
+  spec.add_runtime_dependency "actionpack", ">= 6.0", "< 8"
   spec.add_runtime_dependency "capybara", ">= 2", "< 4"
   spec.add_runtime_dependency "chunky_png", "~> 1.3"
 end

data/lib/capybara/screenshot/diff/browser_helpers.rb

@@ -0,0 +1,101 @@
+# frozen_string_literal: true
+
+require_relative "region"
+
+module Capybara
+  module Screenshot
+    module BrowserHelpers
+      def current_capybara_driver_class
+        Capybara.current_session.driver.class
+      end
+
+      def selenium?
+        current_capybara_driver_class <= Capybara::Selenium::Driver
+      end
+
+      def window_size_is_wrong?
+        selenium? &&
+          Screenshot.window_size &&
+          page.driver.browser.manage.window.size != ::Selenium::WebDriver::Dimension.new(*Screenshot.window_size)
+      end
+
+      def rect_for(css_selector)
+        all_visible_regions_for(css_selector).first
+      end
+
+      def bounds_for_css(*css_selectors)
+        css_selectors.reduce([]) do |regions, selector|
+          regions.concat(all_visible_regions_for(selector))
+        end
+      end
+
+      IMAGE_WAIT_SCRIPT = <<~JS
+        function pending_image() {
+          var images = document.images;
+          for (var i = 0; i < images.length; i++) {
+            if (!images[i].complete) {
+                return images[i].src;
+            }
+          }
+          return false;
+        }()
+      JS
+
+      def pending_image_to_load
+        evaluate_script IMAGE_WAIT_SCRIPT
+      end
+
+      HIDE_CARET_SCRIPT = <<~JS
+        if (!document.getElementById('csdHideCaretStyle')) {
+          let style = document.createElement('style');
+          style.setAttribute('id', 'csdHideCaretStyle');
+          document.head.appendChild(style);
+          let styleSheet = style.sheet;
+          styleSheet.insertRule("* { caret-color: transparent !important; }", 0);
+        }
+      JS
+
+      def hide_caret
+        execute_script(HIDE_CARET_SCRIPT)
+      end
+
+      FIND_ACTIVE_ELEMENT_SCRIPT = <<~JS
+        function activeElement(){
+          const ae = document.activeElement; 
+          if (ae.nodeName === "INPUT" || ae.nodeName === "TEXTAREA") { 
+            ae.blur();      
+            return ae;
+          }
+          return null;
+        }();
+      JS
+
+      def blur_from_focused_element
+        page.evaluate_script(FIND_ACTIVE_ELEMENT_SCRIPT)
+      end
+
+      GET_BOUNDING_CLIENT_RECT_SCRIPT = <<~JS
+        [
+          this.getBoundingClientRect().left,
+          this.getBoundingClientRect().top,
+          this.getBoundingClientRect().right,
+          this.getBoundingClientRect().bottom
+        ]
+      JS
+
+      def all_visible_regions_for(selector)
+        all(selector, visible: true).map(&method(:region_for))
+      end
+
+      def region_for(element)
+        element.evaluate_script(GET_BOUNDING_CLIENT_RECT_SCRIPT).map { |point| point.negative? ? 0 : point.to_i }
+      end
+
+      private
+
+      def create_output_directory_for(file_name)
+        FileUtils.mkdir_p File.dirname(file_name)
+      end
+    end
+  end
+end

data/lib/capybara/screenshot/diff/drivers/chunky_png_driver.rb

@@ -12,6 +12,7 @@ module Capybara
           include ChunkyPNG::Color
 
           attr_reader :new_file_name, :old_file_name
+          attr_accessor :skip_area, :color_distance_limit, :shift_distance_limit
 
           def initialize(new_file_name, old_file_name = nil, options = {})
             options = old_file_name if old_file_name.is_a?(Hash)
@@ -69,7 +70,7 @@ module Capybara
             return nil, nil if new_image.pixels == old_image.pixels
 
             if fast_fail && !(color_distance_limit || shift_distance_limit || area_size_limit)
-              return [0, 0, width_for(new_image), height_for(new_image)], nil
+              return build_region_for_whole_image(new_image), nil
             end
 
             region = find_top(old_image, new_image)
@@ -90,12 +91,6 @@ module Capybara
             image.width
           end
 
-          def size(region)
-            return 0 unless region
-
-            (region[2] - region[0] + 1) * (region[3] - region[1] + 1)
-          end
-
           def max_color_distance
             calculate_metrics unless @max_color_distance
             @max_color_distance
@@ -114,8 +109,8 @@ module Capybara
             log.merge!(max_shift_distance: max_shift_distance) if max_shift_distance
           end
 
-          def crop(dimensions, i)
-            i.crop(*dimensions)
+          def crop(region, i)
+            i.crop(*region.to_top_left_corner_coordinates)
           end
 
           def from_file(filename)
@@ -183,20 +178,29 @@ module Capybara
             true
           end
 
-          def draw_rectangles(images, (left, top, right, bottom), (r, g, b))
+          def draw_rectangles(images, region, (r, g, b))
+            border_color = ChunkyPNG::Color.rgb(r, g, b)
+            border_shadow = ChunkyPNG::Color.rgba(r, g, b, 100)
+
             images.map do |image|
               new_img = image.dup
-              new_img.rect(left - 1, top - 1, right + 1, bottom + 1, ChunkyPNG::Color.rgb(r, g, b))
+              new_img.rect(region.left - 1, region.top - 1, region.right + 1, region.bottom + 1, border_color)
+              new_img.rect(region.left, region.top, region.right, region.bottom, border_shadow)
               new_img
             end
           end
 
           private
 
-          def find_diff_rectangle(org_img, new_img, region)
-            left, top, right, bottom = find_left_right_and_top(org_img, new_img, region)
+          def build_region_for_whole_image(new_image)
+            Region.from_edge_coordinates(0, 0, width_for(new_image), height_for(new_image))
+          end
+
+          def find_diff_rectangle(org_img, new_img, area_coordinates)
+            left, top, right, bottom = find_left_right_and_top(org_img, new_img, area_coordinates)
             bottom = find_bottom(org_img, new_img, left, right, bottom)
-            [left, top, right, bottom]
+
+            Region.from_edge_coordinates(left, top, right, bottom)
           end
 
           def find_top(old_img, new_img)
@@ -209,10 +213,13 @@ module Capybara
           end
 
           def find_left_right_and_top(old_img, new_img, region)
+            region = region.is_a?(Region) ? region.to_edge_coordinates : region
+
             left = region[0] || old_img.width - 1
             top = region[1]
             right = region[2] || 0
             bottom = region[3]
+
             old_img.height.times do |y|
               (0...left).find do |x|
                 next if same_color?(old_img, new_img, x, y)
@@ -230,6 +237,7 @@ module Capybara
                 end
               end
             end
+
             [left, top, right, bottom]
           end
 
@@ -241,13 +249,12 @@ module Capybara
                 end
               end
             end
+
             bottom
           end
 
           def same_color?(old_img, new_img, x, y)
-            @skip_area&.each do |skip_start_x, skip_start_y, skip_end_x, skip_end_y|
-              return true if skip_start_x <= x && x <= skip_end_x && skip_start_y <= y && y <= skip_end_y
-            end
+            return true if skipped_region?(x, y)
 
             color_distance =
               color_distance_at(new_img, old_img, x, y, shift_distance_limit: @shift_distance_limit)
@@ -266,6 +273,12 @@ module Capybara
             color_matches
           end
 
+          def skipped_region?(x, y)
+            return false unless @skip_area
+
+            @skip_area.any? { |region| region.cover?(x, y) }
+          end
+
           def color_distance_at(new_img, old_img, x, y, shift_distance_limit:)
             org_color = old_img[x, y]
             if shift_distance_limit