Synchronize media elements (and more)

CHANGELOG.md

@@ -3,6 +3,13 @@ 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()`.

Gemfile.lock

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

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.

lib/capybara-lockstep/helper.js

@@ -177,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 isRemoteImage(element) {
-    if (element.tagName === 'IMG' && !element.complete) {
-      let src = element.getAttribute('src')
-      let srcSet = element.getAttribute('srcset')
+  function isTrackableIFrame(element) {
+    return element.matches('iframe') &&
+      !hasDataSource(element) &&
+      element.getAttribute('loading') !== 'lazy'
+  }
+
+  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
     }
@@ -220,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)
     }
 
@@ -240,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.
@@ -256,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')
         }
       })
     })

lib/capybara-lockstep/version.rb

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