capybara-lockstep 2.0.3 → 2.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bc0373be228e0d19b35174656617d256a469fb1f652728eaa031b91a9370aa38
-  data.tar.gz: 45a3b441340e1cf477564f47af7961799ac0cf37e533a42393c89a08744f1657
+  metadata.gz: fa4a510d3f4745ef60812fdf3ab03f6c3e8ede0c6ea4046cb87364d6664e2a7d
+  data.tar.gz: 78be38bdb5aa4fcb9147394ac3adb11f3112c18539ba53a096c214931be753cb
 SHA512:
-  metadata.gz: b3c3f17a3a6b1e32b43ee86106294b9351bc312234070f4308e93dce8dfeae4198831f04c50e20ca37fc533ecbf1f77b51fe11e24c1336f2866018380052e07a
-  data.tar.gz: 64b39c510daba699db4c0204caa5004e8d367c3e6208a9b2d0a7912925e4dd7c5223e3caf516633310c7f41dbf524af0520715c5051c1d0ead3f8494a0bb0a75
+  metadata.gz: 356df47acf01a2642769be49f54c48736ea030c803a92b3c059c587e5e82bb927fa0b4e5dcf7953060162a46491cf0122c6a2d0debd1f607cbd1b09cc8608ff2
+  data.tar.gz: c5d1189ee309d32197f19765dad9014cc59f13a8d9f6a17287537045cbf02664b480ce9d087e933b3fad1a2c63b4460b5dc5e61e20d3e0b98d76cde9d90eaff3

data/.github/workflows/test.yml

@@ -3,13 +3,13 @@ name: Tests
 on:
   push:
     branches:
-    - master
+    - main
   pull_request:
     branches:
-    - master
+    - main
   workflow_dispatch:
     branches:
-    - master
+    - main
 jobs:
   test:
     runs-on: ubuntu-20.04

data/CHANGELOG.md

@@ -3,9 +3,24 @@ All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 
+# 2.2.0
+
+- We now wait for `<video>` and `<audio>` elements to load their metadata. This addresses a race condition where a media element is inserted into the DOM, but another user action deletes or renames the source before the browser could load the initial metadata frames. 
+- We now wait for `<script type="module">`.
+- We no longer wait for `<img loading="lazy">` or `<iframe loading="lazy">`. This prevents a deadlock where we would wait forever for an element that defers loading until it is scrolled into the viewport.
+
+
+# 2.1.0
+
+- We now synchronize for an additional [JavaScript task](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) after `history.pushState()`, `history.replaceState()`, `history.forward()`, `history.back()` and `history.go()`.
+- We now synchronize for an additional JavaScript task after `popstate` and `hashchange` events.
+- We now synchronize for an additional JavaScript task when the window is resized.
+- You can now disable automatic synchronization for the duration of a block: `Capybara::Lockstep.with_mode(:manual) { ... }`.
+
+
 # 2.0.3
 
-- Fix a bug where we wouldn't wait for an additional JavaScript task after a tracked event or async job.
+- Fix a bug where we wouldn't wait for an additional [JavaScript task](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) after a tracked event or async job.
 - Fix a bug where the `Capybara::Lockstep.wait_tasks` configuration would be ignored.
 - Fix a bug where the `capybara_lockstep_js` helper (for use without Rails) would not include the current configuration. 
 

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    capybara-lockstep (2.0.3)
+    capybara-lockstep (2.2.0)
       activesupport (>= 4.2)
       capybara (>= 3.0)
       ruby2_keywords

data/README.md

@@ -71,7 +71,8 @@ When capybara-lockstep synchronizes it will:
 - wait for client-side JavaScript to render or hydrate DOM elements.
 - wait for any pending AJAX requests to finish and their callbacks to be called.
 - wait for dynamically inserted `<script>`s to load (e.g. from [dynamic imports](https://webpack.js.org/guides/code-splitting/#dynamic-imports) or Analytics snippets).
-- waits for dynamically inserted `<img>` or `<iframe>` elements to load.
+- waits for dynamically inserted `<img>` or `<iframe>` elements to load (ignoring [lazy-loaded](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#lazy) elements).
+- waits for dynamically inserted `<audio>` and `<video>` elements to load their [metadata](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event)
 
 In summary Capybara can no longer observe or interact with the page while HTTP requests are in flight.
 This covers most async work that causes flaky tests.
@@ -158,7 +159,23 @@ use Capybara::Lockstep::Middleware
 # Other middleware here
 ```
 
+### Configuring Selenium WebDriver (recommended)
 
+By default, webdrivers will automatically dismiss any user prompts (like alerts) when trying to perform an action.
+While capybara-lockstep carefully detects alerts before synchronizing, and will skip interaction with the browser to avoid accidentally dismissing alerts, it can not synchronize around some rare race conditions.
+
+[We recommend](https://makandracards.com/makandra/617366-how-to-configure-selenium-webdriver-to-not-automatically-close-alerts-or-other-browser-dialogs) you configure your webdriver to not automatically dismiss user prompts by setting the "unhandled prompt behavior" capability to [`ignore`](https://w3c.github.io/webdriver/#dfn-known-prompt-handling-approaches-table). Using "ignore", errors are raised like with the default behavior, but user prompts are kept open.
+
+For example, the Chrome driver can be configured like this:
+```ruby
+Capybara.register_driver(:selenium) do |app|
+  options = Selenium::WebDriver::Chrome::Options.new(
+    unhandled_prompt_behavior: 'ignore',
+    # ...
+  )
+  Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
+end
+```
 
 ### Verify successful integration
 
@@ -349,7 +366,23 @@ ensure
 end
 ```
 
-In the `:manual` mode you may still force synchronization by calling `Capybara::Lockstep.synchronize` manually.
+You can also disable automatic synchronization for the duration of a block:
+
+```ruby
+Capybara::Lockstep.with_mode(:manual) do
+  do_unsynchronized_work
+end
+```
+
+In the `:manual` mode you may still force synchronization by calling `Capybara::Lockstep.synchronize` manually:
+
+```ruby
+Capybara::Lockstep.with_mode(:manual) do
+  do_some_work
+  Capybara::Lockstep.synchronize
+  do_other_work
+end
+```
 
 To completely disable synchronization, even when `Capybara::Lockstep.synchronize` is called:
 
@@ -360,6 +393,8 @@ Capybara::Lockstep.synchronize # will not synchronize
 
 
 
+
+
 ## Handling legacy promises
 
 Legacy promise implementations (like jQuery's `$.Deferred` and AngularJS' `$q`) work using [tasks instead of microtasks](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/). Their AJAX implementations (like `$.ajax()` and `$http`) use task-based promises to signal that a request is done.

data/capybara-lockstep.gemspec

@@ -15,7 +15,7 @@ Gem::Specification.new do |spec|
   spec.metadata["source_code_uri"] = spec.homepage
 
   spec.metadata["bug_tracker_uri"] = "https://github.com/makandra/capybara-lockstep/issues"
-  spec.metadata["changelog_uri"] = "https://github.com/makandra/capybara-lockstep/blob/master/CHANGELOG.md"
+  spec.metadata["changelog_uri"] = "https://github.com/makandra/capybara-lockstep/blob/main/CHANGELOG.md"
   spec.metadata["rubygems_mfa_required"] = 'true'
 
   # Specify which files should be added to the gem when it is released.

data/lib/capybara-lockstep/configuration.rb

@@ -58,7 +58,7 @@ module Capybara
         self.mode = temporary_mode
         block.call
       ensure
-        self.mode = temporary_mode
+        self.mode = old_mode
       end
 
       def enabled=(enabled)

data/lib/capybara-lockstep/helper.js

@@ -4,14 +4,14 @@ window.CapybaraLockstep = (function() {
   let jobCount
   let idleCallbacks
   let finishedWorkTags
-  let waitTasks
+  let defaultWaitTasks
   reset()
 
   function reset() {
     jobCount = 0
     idleCallbacks = []
     finishedWorkTags = []
-    waitTasks = 1
+    defaultWaitTasks = 1
     debug = false
   }
 
@@ -57,8 +57,9 @@ window.CapybaraLockstep = (function() {
     promise.then(taggedStopWork, taggedStopWork)
   }
 
-  function stopWork(tag) {
-    afterWaitTasks(stopWorkNow.bind(this, tag))
+  function stopWork(tag, waitAdditionalTasks = 0) {
+    let effectiveWaitTasks = defaultWaitTasks + waitAdditionalTasks
+    afterWaitTasks(stopWorkNow.bind(this, tag), effectiveWaitTasks)
   }
 
   function stopWorkNow(tag) {
@@ -92,6 +93,27 @@ window.CapybaraLockstep = (function() {
     }
   }
 
+  function trackHistory() {
+    // Wait an additional task because some browsers seem to require additional
+    // time before the URL changes.
+    trackEvent(document, 'popstate', 1)
+    trackEvent(document, 'hashchange', 1)
+
+    // API: https://developer.mozilla.org/en-US/docs/Web/API/History
+    for (let method of ['pushState', 'popState', 'forward', 'back', 'go']) {
+      let workTag = `history.${method}()`
+      let nativeImpl = history[method]
+      history[method] = function(...args) {
+        try {
+          startWork(workTag)
+          return nativeImpl.apply(history, args)
+        } finally {
+          stopWork(workTag, 1)
+        }
+      }
+    }
+  }
+
   function trackXHR() {
     let oldOpen = XMLHttpRequest.prototype.open
     let oldSend = XMLHttpRequest.prototype.send
@@ -135,7 +157,7 @@ window.CapybaraLockstep = (function() {
     // CapybaraLockstep.track() is called as the first script in the head.
     // jQuery will be loaded after us, so we wait until DOMContentReady.
     whenReady(function() {
-      if (!window.jQuery || waitTasks > 0) {
+      if (!window.jQuery || defaultWaitTasks > 0) {
         return
       }
 
@@ -155,39 +177,47 @@ window.CapybaraLockstep = (function() {
   }
 
   function isRemoteScript(element) {
-    if (element.tagName === 'SCRIPT') {
-      let src = element.getAttribute('src')
-      let type = element.getAttribute('type')
+    return element.matches('script[src]') && !hasDataSource(element)
+  }
 
-      return src && (!type || /javascript/i.test(type))
-    }
+  function isTrackableImage(element) {
+    return element.matches('img') &&
+      !element.complete &&
+      !hasDataSource(element) &&
+      element.getAttribute('loading') !== 'lazy'
+  }
+
+  function isTrackableIFrame(element) {
+    return element.matches('iframe') &&
+      !hasDataSource(element) &&
+      element.getAttribute('loading') !== 'lazy'
   }
 
-  function isRemoteImage(element) {
-    if (element.tagName === 'IMG' && !element.complete) {
-      let src = element.getAttribute('src')
-      let srcSet = element.getAttribute('srcset')
+  function hasDataSource(element) {
+    // <img> can have <img src> and <img srcset>
+    // <video> can have <video src> or <video><source src>
+    // <audio> can have <audio src> or <audio><source src>
+    return element.matches('[src*="data:"], [srcset*="data:"]') ||
+      !!element.querySelector('source [src*="data:"], source [srcset*="data:"]')
+  }
 
-      let localSrcPattern = /^data:/
-      let localSrcSetPattern = /(^|\s)data:/
+  function isTrackableMediaElement(element) {
+    return element.matches('audio, video') &&
+      element.readyState === 0 && // no metadata known
+      !hasDataSource(element) &&
+      element.getAttribute('preload') !== 'none'
+  }
 
-      let hasLocalSrc = src && localSrcPattern.test(src)
-      let hasLocalSrcSet = srcSet && localSrcSetPattern.test(srcSet)
+  function trackRemoteElement(element, condition, workTag) {
+    trackLoadingElement(element, condition, workTag, 'load', 'error')
 
-      return (src && !hasLocalSrc) || (srcSet && !hasLocalSrcSet)
-    }
   }
 
-  function isRemoteInlineFrame(element) {
-    if (element.tagName === 'IFRAME') {
-      let src = element.getAttribute('src')
-      let localSrcPattern = /^data:/
-      let hasLocalSrc = src && localSrcPattern.test(src)
-      return (src && !hasLocalSrc)
-    }
+  function trackMediaElement(element, condition, workTag) {
+    trackLoadingElement(element, condition, workTag, 'loadedmetadata', 'error')
   }
 
-  function trackRemoteElement(element, condition, workTag) {
+  function trackLoadingElement(element, condition, workTag, loadEvent, errorEvent) {
     if (!condition(element)) {
       return
     }
@@ -198,8 +228,8 @@ window.CapybaraLockstep = (function() {
 
     let doStop = function() {
       stopped = true
-      element.removeEventListener('load', doStop)
-      element.removeEventListener('error', doStop)
+      element.removeEventListener(loadEvent, doStop)
+      element.removeEventListener(errorEvent, doStop)
       stopWork(workTag)
     }
 
@@ -218,11 +248,11 @@ window.CapybaraLockstep = (function() {
     }
 
     let scheduleCheckCondition = function() {
-      setTimeout(checkCondition, 200)
+      setTimeout(checkCondition, 150)
     }
 
-    element.addEventListener('load', doStop)
-    element.addEventListener('error', doStop)
+    element.addEventListener(loadEvent, doStop)
+    element.addEventListener(errorEvent, doStop)
 
     // We periodically check whether we still think the element will
     // produce a `load` or `error` event.
@@ -234,8 +264,9 @@ window.CapybaraLockstep = (function() {
       change.addedNodes.forEach(function(addedNode) {
         if (addedNode.nodeType === Node.ELEMENT_NODE) {
           trackRemoteElement(addedNode, isRemoteScript, 'Script')
-          trackRemoteElement(addedNode, isRemoteImage, 'Image')
-          trackRemoteElement(addedNode, isRemoteInlineFrame, 'Inline frame')
+          trackRemoteElement(addedNode, isTrackableImage, 'Image')
+          trackRemoteElement(addedNode, isTrackableIFrame, 'Inline frame')
+          trackMediaElement(addedNode, isTrackableMediaElement, 'Media element')
         }
       })
     })
@@ -255,11 +286,11 @@ window.CapybaraLockstep = (function() {
     }
   }
 
-  function afterWaitTasks(fn, tasksLeft = waitTasks) {
-    if (tasksLeft > 0) {
+  function afterWaitTasks(fn, waitTasks = defaultWaitTasks) {
+    if (waitTasks > 0) {
       // Wait 1 task and recurse
       setTimeout(function() {
-        afterWaitTasks(fn, tasksLeft - 1)
+        afterWaitTasks(fn, waitTasks - 1)
       })
     } else {
       fn()
@@ -282,14 +313,16 @@ window.CapybaraLockstep = (function() {
     })
   }
 
-  function trackInteraction(eventType) {
-    document.addEventListener(eventType, function() {
+  function trackEvent(eventTarget, eventType, waitAdditionalTasks = 0) {
+    eventTarget.addEventListener(eventType, function() {
       // Only litter the log with interaction events if we're actually going
       // to be busy for at least 1 task.
-      if (waitTasks > 0) {
+      let effectiveWaitTasks = defaultWaitTasks + waitAdditionalTasks
+
+      if (effectiveWaitTasks > 0) {
         let tag = eventType
         startWork(tag)
-        stopWork(tag)
+        stopWork(tag, waitAdditionalTasks)
       }
     })
   }
@@ -297,17 +330,19 @@ window.CapybaraLockstep = (function() {
   function track() {
     trackOldUnpoly()
     trackFetch()
+    trackHistory()
     trackXHR()
     trackRemoteElements()
     trackJQuery()
-    trackInteraction('touchstart')
-    trackInteraction('mousedown')
-    trackInteraction('click')
-    trackInteraction('keydown')
-    trackInteraction('focusin')
-    trackInteraction('focusout')
-    trackInteraction('input')
-    trackInteraction('change')
+    trackEvent(document, 'touchstart')
+    trackEvent(document, 'mousedown')
+    trackEvent(document, 'click')
+    trackEvent(document, 'keydown')
+    trackEvent(document, 'focusin')
+    trackEvent(document, 'focusout')
+    trackEvent(document, 'input')
+    trackEvent(document, 'change')
+    trackEvent(window, 'resize', 1)
   }
 
   function synchronize(callback) {
@@ -327,7 +362,7 @@ window.CapybaraLockstep = (function() {
     synchronize: synchronize,
     reset: reset,
     set debug(value) { debug = value },
-    set waitTasks(value) { waitTasks = value }
+    set waitTasks(value) { defaultWaitTasks = value }
   }
 })()
 

data/lib/capybara-lockstep/version.rb

@@ -1,5 +1,5 @@
 module Capybara
   module Lockstep
-    VERSION = "2.0.3"
+    VERSION = "2.2.0"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: capybara-lockstep
 version: !ruby/object:Gem::Version
-  version: 2.0.3
+  version: 2.2.0
 platform: ruby
 authors:
 - Henning Koch
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2024-01-08 00:00:00.000000000 Z
+date: 2024-02-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: capybara
@@ -107,7 +107,7 @@ metadata:
   homepage_uri: https://github.com/makandra/capybara-lockstep
   source_code_uri: https://github.com/makandra/capybara-lockstep
   bug_tracker_uri: https://github.com/makandra/capybara-lockstep/issues
-  changelog_uri: https://github.com/makandra/capybara-lockstep/blob/master/CHANGELOG.md
+  changelog_uri: https://github.com/makandra/capybara-lockstep/blob/main/CHANGELOG.md
   rubygems_mfa_required: 'true'
 post_install_message: 
 rdoc_options: []