Merge pull request #170 from rubycdp/animations

route · web-flow · commit f30853660236 · 2021-03-06T17:08:45.000+03:00
Implement Animations
diff --git a/README.md b/README.md
@@ -49,6 +49,7 @@ Web design by [Evrone](https://evrone.com/), what else
 * [Frames](https://github.com/rubycdp/ferrum#frames)
 * [Frame](https://github.com/rubycdp/ferrum#frame)
 * [Dialog](https://github.com/rubycdp/ferrum#dialog)
+* [Animation](https://github.com/rubycdp/ferrum#animation)
 * [Thread safety](https://github.com/rubycdp/ferrum#thread-safety)
 * [Development](https://github.com/rubycdp/ferrum#development)
 * [Contributing](https://github.com/rubycdp/ferrum#contributing)
@@ -978,6 +979,28 @@ end
 browser.go_to("https://google.com")
 ```
 
+## Animation
+
+You can slow down or speed up CSS animations.
+
+#### playback_rate : `Integer`
+
+Returns playback rate for CSS animations, defaults to `1`.
+
+
+#### playback_rate = value
+
+Sets playback rate of CSS animations
+
+  * value `Integer`
+
+```ruby
+browser = Ferrum::Browser.new
+browser.playback_rate = 2000
+browser.go_to("https://google.com")
+browser.playback_rate # => 2000
+```
+
 
 ## Thread safety ##
 
diff --git a/lib/ferrum/browser.rb b/lib/ferrum/browser.rb
@@ -26,7 +26,8 @@ class Browser
                 frames frame_by main_frame
                 evaluate evaluate_on evaluate_async execute evaluate_func
                 add_script_tag add_style_tag bypass_csp
-                on goto position position=] => :page
+                on goto position position=
+                playback_rate playback_rate=] => :page
     delegate %i[default_user_agent] => :process
 
     attr_reader :client, :process, :contexts, :logger, :js_errors, :pending_connection_errors,
diff --git a/lib/ferrum/page.rb b/lib/ferrum/page.rb
@@ -9,6 +9,7 @@
 require "ferrum/network"
 require "ferrum/page/frames"
 require "ferrum/page/screenshot"
+require "ferrum/page/animation"
 require "ferrum/browser/client"
 
 module Ferrum
@@ -35,7 +36,7 @@ def reset
                 execution_id evaluate evaluate_on evaluate_async execute evaluate_func
                 add_script_tag add_style_tag] => :main_frame
 
-    include Frames, Screenshot
+    include Frames, Screenshot, Animation
 
     attr_accessor :referrer
     attr_reader :target_id, :browser,
diff --git a/lib/ferrum/page/animation.rb b/lib/ferrum/page/animation.rb
@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Ferrum
+  class Page
+    module Animation
+      def playback_rate
+        command("Animation.getPlaybackRate")["playbackRate"]
+      end
+
+
+      def playback_rate=(value)
+        command("Animation.setPlaybackRate", playbackRate: value)
+      end
+    end
+  end
+end
diff --git a/spec/page/animation_spec.rb b/spec/page/animation_spec.rb
@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Ferrum
+  describe Page::Animation do
+    it "gets default playback rate" do
+      browser.go_to("/animation")
+
+      expect(browser.playback_rate).to eq(1)
+    end
+
+    it "sets playback rate" do
+      browser.playback_rate = 2000
+
+      browser.go_to("/animation")
+
+      expect(browser.playback_rate).to eq(2000)
+    end
+  end
+end
diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb
@@ -30,6 +30,7 @@
   config.before(:all) do
     base_url = Ferrum::Server.server.base_url
     options = { base_url: base_url }
+    options.merge!(headless: false) if ENV["HEADLESS"] == "false"
 
     if ENV["CI"]
       FERRUM_LOGGER = StringIO.new
diff --git a/spec/support/views/animation.erb b/spec/support/views/animation.erb
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      .animated {
+        width: 100px;
+        height: 100px;
+        background-color: red;
+        position: relative;
+        animation-name: example;
+        animation-duration: 2s;
+        animation-iteration-count: infinite;
+      }
+
+      @keyframes example {
+        0%   {background-color:red; left:0px; top:0px;}
+        25%  {background-color:yellow; left:200px; top:0px;}
+        50%  {background-color:blue; left:200px; top:200px;}
+        75%  {background-color:green; left:0px; top:200px;}
+        100% {background-color:red; left:0px; top:0px;}
+      }
+    </style>
+  </head>
+  <body>
+    <div class="animated"></div>
+  </body>
+</html>
