eyes_selenium 3.15.29 → 3.15.30

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 78bb86756a687165700f5eb9941acf74a90605715ba75417b242b390d07c9167
-  data.tar.gz: 9dea01979ae55abbb299119b78605ff7ddafb719e5319302a8f9f0805b9ec522
+  metadata.gz: f0a153b343d111f258a0628e29043634a0a000a6b28a0f46e338f2ee61d315dc
+  data.tar.gz: 056e78da5023f2f69d3056484b5b06c5c710bcaab45fce6c6af28af81cce1e4b
 SHA512:
-  metadata.gz: f3276fd649a1e5683696dbcfe2015b908420eeb3a3a42e0a511fad412c24e2ba7834f1189de45da11852d5a7c557e249937cba2ba8e2085dc1125915cf91d8ea
-  data.tar.gz: 2221ccfdda82b957cb838c1cd1127c2e88943099ff821812e9b7ca557e682cc8a59a7445ce9b6b9a2b4c0b34337d345051a2e926a8773af93154330da2f1084b
+  metadata.gz: dc23f5c1c1443b7a5d0c1b1296e9d75fdf0a0766ded52eff8321bfbabe224ba1215755a4d76b4020526233c75ec7fcd5aa9433669257111b9171a6c32e8cd002
+  data.tar.gz: 41131e9e97acf4848ee15a07aae65cc38c7f86ddc5b94b6054f5086a9f77280bad76ac8c66aba2105f321b9680724d1dd93e8bd174154693ecac31c2bb2f37df

data/lib/applitools/selenium/css_parser/find_embedded_resources.rb

@@ -0,0 +1,69 @@
+require 'crass'
+
+module Applitools
+  module Selenium
+    module CssParser
+      class FindEmbeddedResources
+        class << self
+        end
+
+        class CssParseError < Applitools::EyesError; end
+
+        attr_accessor :css
+
+        def initialize(css)
+          self.css = css
+        end
+
+        def imported_css
+          fetch_urls(import_rules)
+        end
+
+        def fonts
+          fetch_urls(font_face_rules)
+        end
+
+        def images
+          fetch_urls(images_rules)
+        end
+
+        private
+
+        def url(node)
+          url = node[:tokens].select { |t| t[:node] == :url }.first
+          return url[:value] if url && !url.empty?
+          url = node[:tokens].select { |t| t[:node] == :function && t[:value] == 'url' }.first
+          url_index = node[:tokens].index(url)
+          url_string_node = url_index && node[:tokens][url_index + 1]
+          url_string_node && url_string_node[:node] == :string && !url_string_node[:value].empty? && url_string_node[:value]
+        end
+
+        def fetch_urls(nodes)
+          nodes.map { |n| url(n) }.compact
+        end
+
+        def import_rules
+          css_nodes.select { |n| n[:node] == :at_rule && n[:name] == 'import' }
+        end
+
+        def font_face_rules
+          css_nodes.select { |n| n[:node] == :at_rule && n[:name] == 'font-face' }
+        end
+
+        def images_rules
+          css_nodes.select { |n| n[:node] == :style_rule }.map { |n| n[:children] }
+                   .flatten
+                   .select { |n| n[:node] == :property && (n[:name] == 'background' || n[:name] == 'background-image') }
+        end
+
+        def css_nodes
+          @css_nodes ||= parse_nodes
+        end
+
+        def parse_nodes
+          Crass.parse css
+        end
+      end
+    end
+  end
+end

data/lib/applitools/selenium/dom_capture/dom_capture.rb

@@ -1,113 +1,167 @@
-# frozen_string_literal: false
-
-require 'benchmark'
-require 'timeout'
-
-require 'css_parser'
-include Benchmark
-module Applitools::Selenium
-  module DomCapture
-    CSS_DOWNLOAD_TIMEOUT = 2 # 2 seconds
-    DOM_CAPTURE_TIMEOUT = 10 # 10 seconds
-
-    extend self
-
-    def get_window_dom(driver, logger)
-      args_obj = {
-        'styleProps' => %w(
-          background-color background-image background-size color border-width
-          border-color border-style padding margin
-        ),
-        'attributeProps' => nil,
-        'rectProps' => %w(width height top left),
-        'ignoredTagNames' => %w(HEAD SCRIPT)
-      }
-      dom_tree = ''
-      if Timeout.respond_to?(:timeout)
-        Timeout.timeout(DOM_CAPTURE_TIMEOUT) do
-          dom_tree = driver.execute_script(Applitools::Selenium::DomCapture::DOM_CAPTURE_SCRIPT, args_obj)
-          get_frame_dom(driver, { 'childNodes' => [dom_tree], 'tagName' => 'OUTER_HTML' }, logger)
-        end
-      else
-        timeout(DOM_CAPTURE_TIMEOUT) do
-          dom_tree = driver.execute_script(Applitools::Selenium::DomCapture::DOM_CAPTURE_SCRIPT, args_obj)
-          get_frame_dom(driver, { 'childNodes' => [dom_tree], 'tagName' => 'OUTER_HTML' }, logger)
+module Applitools
+  module Selenium
+    module DomCapture
+      extend self
+      DOM_EXTRACTION_TIMEOUT = 300 #seconds
+      def full_window_dom(driver, server_connector, logger, position_provider = nil)
+        return get_dom(driver, server_connector, logger) unless position_provider
+        scroll_top_and_return_back(position_provider) do
+          get_dom(driver, server_connector, logger)
         end
       end
-      dom_tree
-    end
 
-    private
-
-    def get_frame_dom(driver, dom_tree, logger)
-      tag_name = dom_tree['tagName']
-      return unless tag_name
-      frame_index = 0
-      loop(driver, dom_tree, logger) do |dom_sub_tree|
-        # this block is called if IFRAME found
-        driver.switch_to.frame(index: frame_index)
-        get_frame_dom(driver, dom_sub_tree, logger)
-        driver.switch_to.parent_frame
-        frame_index += 1
+      def get_dom(driver, server_connector, logger)
+        original_frame_chain = driver.frame_chain
+        dom = get_frame_dom(driver, server_connector, logger)
+        unless original_frame_chain.empty?
+          driver.switch_to.default_content
+          driver.switch_to.frames(frame_chain: original_frame_chain)
+        end
+        # CSS processing
+
+        dom
       end
-    end
 
-    def loop(driver, dom_tree, logger)
-      child_nodes = dom_tree['childNodes']
-      return unless child_nodes
-      iterate_child_nodes = proc do |node_childs|
-        node_childs.each do |node|
-          if node['tagName'].casecmp('IFRAME') == 0
-            yield(node) if block_given?
+      def get_frame_dom(driver, server_connector, logger)
+        logger.info 'Trying to get DOM from driver'
+        start_time = Time.now
+        script_response = nil
+        loop do
+          result_as_string = driver.execute_script(CAPTURE_FRAME_SCRIPT + ' return __captureDomAndPoll();')
+          script_response = Oj.load(result_as_string)
+          status = script_response['status']
+          break if status == 'SUCCESS'
+          raise Applitools::EyesError, 'DOM extraction timeout!' if Time.now - start_time > DOM_EXTRACTION_TIMEOUT
+          raise Applitools::EyesError, "DOM extraction error: #{script_response['error']}" if script_response['error']
+          sleep(0.2)
+        end
+        response_lines = script_response['value'].split /\r?\n/
+        separators = Oj.load(response_lines.shift)
+        missing_css_list = []
+        missing_frame_list = []
+        data = []
+
+        puts separators
+
+        blocks = DomParts.new(missing_css_list, missing_frame_list, data)
+        collector = blocks.collectors.next
+        response_lines.each do |line|
+          if line == separators['separator']
+            collector = blocks.collectors.next
           else
-            node['css'] = get_frame_bundled_css(driver, logger) if node['tagName'].casecmp('HTML') == 0
-            iterate_child_nodes.call(node['childNodes']) unless node['childNodes'].nil?
+            collector << line
           end
         end
+        logger.info "Missing CSS: #{missing_css_list.count}"
+        logger.info "Missing frames: #{missing_frame_list.count}"
+        #fetch_css_files(missing_css_list)
+
+        frame_data = recurse_frames(driver, server_connector, logger, missing_frame_list)
+        result = replace(separators['iframeStartToken'], separators['iframeEndToken'], data.first, frame_data)
+        css_data = fetch_css_files(missing_css_list, server_connector)
+        replace(separators['cssStartToken'], separators['cssEndToken'], result, css_data)
+      rescue StandardError
+        logger.error(e.class)
+        logger.error(e.message)
+        logger.error(e)
+        return ''
       end
-      iterate_child_nodes.call(child_nodes)
-    end
 
-    def get_frame_bundled_css(driver, logger)
-      base_url = URI.parse(driver.current_url)
-      parser = CssParser::Parser.new import: true, absolute_paths: true
-      css_threads = []
-      css_items = []
-      driver.execute_script(Applitools::Selenium::DomCapture::CSS_CAPTURE_SCRIPT).each_with_index do |item, i|
-        if (v = item['text'])
-          css_items[i] = [v]
-        elsif (v = item['href'])
-          target_url = URI.parse(v)
-          url_to_load = target_url.absolute? ? target_url : base_url.merge(target_url)
-          css_threads << Thread.new(url_to_load) do |url|
-            if Timeout.respond_to?(:timeout)
-              Timeout.timeout(CSS_DOWNLOAD_TIMEOUT) do
-                css_string, = parser.send(:read_remote_file, url)
-                css_items[i] = [css_string, { base_uri: url }]
-              end
-            else
-              timeout(CSS_DOWNLOAD_TIMEOUT) do
-                css_string, = parser.send(:read_remote_file, url)
-                css_items[i] = [css_string, { base_uri: url }]
-              end
+      def fetch_css_files(missing_css_list, server_connector)
+        result = {}
+        missing_css_list.each do |url|
+          next if url.empty?
+          next if /^blob:/ =~ url
+
+          begin
+            missing_css_response = server_connector.download_resource(url)
+            response_headers = missing_css_response.headers
+            raise Applitools::EyesError, "Wrong response header: #{response_headers['content-type']}" unless
+                %r{^text/css.*}i =~ response_headers['content-type']
+
+            css = missing_css_response.body
+
+            found_and_missing_css = Applitools::Selenium::CssParser::FindEmbeddedResources.new(css).imported_css.map do |found_url|
+              base_url(url).merge(found_url).to_s
             end
+            fetch_css_files(found_and_missing_css, server_connector).each do |_k, v|
+              css += v
+            end
+
+            result[url] = Oj.dump("\n/** #{url} **/\n" + css).gsub(/^\"|\"$/, '')
+          rescue StandardError
+            result[url] = ''
           end
         end
+        result
       end
-      begin
-        css_threads.each(&:join)
-      rescue CssParser::CircularReferenceError => e
-        logger.respond_to?(:error) && logger.error("Got a circular reference error! #{e.message}")
-      rescue CssParser::RemoteFileError => e
-        logger.respond_to?(:error) && logger.error("File download error - #{e.message}")
-      rescue StandardError => e
-        logger.respond_to?(:error) && logger.error("#{e.class} - #{e.message}")
+
+      def recurse_frames(driver, server_connector, logger, missing_frame_list)
+        return if missing_frame_list.empty?
+        frame_data = {}
+        frame_chain = driver.frame_chain
+        origin_location = driver.execute_script('return document.location.href')
+        missing_frame_list.each do |missing_frame_line|
+          logger.info "Switching to frame line: #{missing_frame_line}"
+          missing_frame_line.split(/,/).each do |xpath|
+            logger.info "switching to specific frame: #{xpath}"
+            frame_element = driver.find_element(:xpath, xpath)
+            frame_src = frame_element.attribute('src')
+            driver.switch_to.frame(frame_element)
+            logger.info "Switched to frame ( #{xpath} ) with src( #{frame_src} )"
+          end
+          location_after_switch = driver.execute_script('return document.location.href')
+
+          if origin_location == location_after_switch
+            logger.info "Switch to frame (#{missing_frame_line}) failed"
+            frame_data[missing_frame_line] = ''
+          else
+            result = get_frame_dom(driver, server_connector, logger)
+            frame_data[missing_frame_line] = result
+          end
+        end
+        driver.switch_to.default_content
+        driver.switch_to.frames(frame_chain: frame_chain)
+        frame_data
+      end
+
+      def scroll_top_and_return_back(position_provider)
+        original_position = position_provider.current_position
+        return yield if block_given? && original_position.nil?
+        position_provider.scroll_to Applitools::Location.new(0, 0)
+        result = yield if block_given?
+        position_provider.scroll_to original_position
+        result
+      end
+
+      def replace(open_token, close_token, input, replacements)
+        pattern = /#{open_token}(?<key>.+?)#{close_token}/
+        input.gsub(pattern) { |_m| replacements[Regexp.last_match(1)] }
       end
 
-      css_items.each { |css| parser.add_block!(*css) if css && css[0] }
-      css_result = ''
-      parser.each_rule_set { |s| css_result.concat(s.to_s) }
-      css_result
+      def base_url(url)
+        uri = URI.parse(url)
+        uri.query = uri.fragment = nil;
+        uri.path = ''
+        uri
+      end
+
+      class DomParts
+        attr_accessor :dom_part_collectors
+        def initialize(*args)
+          self.dom_part_collectors = args
+          @index = 0
+        end
+
+        def collectors
+          @collectors ||= Enumerator.new(dom_part_collectors.length) do |y|
+            loop do
+              y << dom_part_collectors[@index]
+              @index += 1
+            end
+          end
+        end
+      end
     end
   end
 end

data/lib/applitools/selenium/dom_capture/dom_capture_script.rb

@@ -1,103 +1,462 @@
-# frozen_string_literal: true
-#
-module Applitools::Selenium
-  module DomCapture
-    CSS_CAPTURE_SCRIPT = <<-SCRIPT
-      function extractCssResources() {
-        return Array.from(document.querySelectorAll('link[rel="stylesheet"],style')).map(el => {
-          if (el.tagName.toUpperCase() === 'LINK') {
-              return {"href": el.getAttribute('href')};
-          } else {
-              return {"text": el.textContent};
+module Applitools
+  module Selenium
+    module DomCapture
+      CAPTURE_FRAME_SCRIPT = <<'SCRIPT'
+/* @applitools/dom-capture@7.0.14 */
+
+function __captureDomAndPoll() {
+  var captureDomAndPoll = (function () {
+  'use strict';
+
+  const styleProps = [
+    'background-repeat',
+    'background-origin',
+    'background-position',
+    'background-color',
+    'background-image',
+    'background-size',
+    'border-width',
+    'border-color',
+    'border-style',
+    'color',
+    'display',
+    'font-size',
+    'line-height',
+    'margin',
+    'opacity',
+    'overflow',
+    'padding',
+    'visibility',
+  ];
+
+  const rectProps = ['width', 'height', 'top', 'left'];
+
+  const ignoredTagNames = ['HEAD', 'SCRIPT'];
+
+  var defaultDomProps = {
+    styleProps,
+    rectProps,
+    ignoredTagNames,
+  };
+
+  const bgImageRe = /url\((?!['"]?:)['"]?([^'")]*)['"]?\)/;
+
+  function getBackgroundImageUrl(cssText) {
+    const match = cssText ? cssText.match(bgImageRe) : undefined;
+    return match ? match[1] : match;
+  }
+
+  var getBackgroundImageUrl_1 = getBackgroundImageUrl;
+
+  const psetTimeout = t =>
+    new Promise(res => {
+      setTimeout(res, t);
+    });
+
+  async function getImageSizes({bgImages, timeout = 5000, Image = window.Image}) {
+    return (await Promise.all(
+      Array.from(bgImages).map(url =>
+        Promise.race([
+          new Promise(resolve => {
+            const img = new Image();
+            img.onload = () => resolve({url, width: img.naturalWidth, height: img.naturalHeight});
+            img.onerror = () => resolve();
+            img.src = url;
+          }),
+          psetTimeout(timeout),
+        ]),
+      ),
+    )).reduce((images, curr) => {
+      if (curr) {
+        images[curr.url] = {width: curr.width, height: curr.height};
+      }
+      return images;
+    }, {});
+  }
+
+  var getImageSizes_1 = getImageSizes;
+
+  function genXpath(el) {
+    if (!el.ownerDocument) return ''; // this is the document node
+
+    let xpath = '',
+      currEl = el,
+      doc = el.ownerDocument,
+      frameElement = doc.defaultView.frameElement;
+    while (currEl !== doc) {
+      xpath = `${currEl.tagName}[${getIndex(currEl)}]/${xpath}`;
+      currEl = currEl.parentNode;
+    }
+    if (frameElement) {
+      xpath = `${genXpath(frameElement)},${xpath}`;
+    }
+    return xpath.replace(/\/$/, '');
+  }
+
+  function getIndex(el) {
+    return (
+      Array.prototype.filter
+        .call(el.parentNode.childNodes, node => node.tagName === el.tagName)
+        .indexOf(el) + 1
+    );
+  }
+
+  var genXpath_1 = genXpath;
+
+  function absolutizeUrl(url, absoluteUrl) {
+    return new URL(url, absoluteUrl).href;
+  }
+
+  var absolutizeUrl_1 = absolutizeUrl;
+
+  function makeGetBundledCssFromCssText({
+    parseCss,
+    CSSImportRule,
+    absolutizeUrl,
+    fetchCss,
+    unfetchedToken,
+  }) {
+    return async function getBundledCssFromCssText(cssText, resourceUrl) {
+      let unfetchedResources;
+      let bundledCss = '';
+
+      try {
+        const styleSheet = parseCss(cssText);
+        for (const rule of Array.from(styleSheet.cssRules)) {
+          if (rule instanceof CSSImportRule) {
+            const nestedUrl = absolutizeUrl(rule.href, resourceUrl);
+            const nestedResource = await fetchCss(nestedUrl);
+            if (nestedResource !== undefined) {
+              const {
+                bundledCss: nestedCssText,
+                unfetchedResources: nestedUnfetchedResources,
+              } = await getBundledCssFromCssText(nestedResource, nestedUrl);
+
+              nestedUnfetchedResources && (unfetchedResources = new Set(nestedUnfetchedResources));
+              bundledCss = `${nestedCssText}${bundledCss}`;
+            } else {
+              unfetchedResources = new Set([nestedUrl]);
+              bundledCss = `\n${unfetchedToken}${nestedUrl}${unfetchedToken}`;
+            }
           }
-        });
+        }
+      } catch (ex) {
+        console.log(`error during getBundledCssFromCssText, resourceUrl=${resourceUrl}`, ex);
       }
-      return extractCssResources();
-    SCRIPT
-    DOM_CAPTURE_SCRIPT = <<-SCRIPT
-      function captureFrame({ styleProps, attributeProps, rectProps, ignoredTagNames }) {
-        const NODE_TYPES = {
-          ELEMENT: 1,
-          TEXT: 3,
-        };
-        function filter(x) {
-          return !!x;
+
+      bundledCss = `${bundledCss}${getCss(cssText, resourceUrl)}`;
+
+      return {
+        bundledCss,
+        unfetchedResources,
+      };
+    };
+  }
+
+  function getCss(newText, url) {
+    return `\n/** ${url} **/\n${newText}`;
+  }
+
+  var getBundledCssFromCssText = makeGetBundledCssFromCssText;
+
+  function parseCss(styleContent) {
+    var doc = document.implementation.createHTMLDocument(''),
+      styleElement = doc.createElement('style');
+    styleElement.textContent = styleContent;
+    // the style will only be parsed once it is added to a document
+    doc.body.appendChild(styleElement);
+
+    return styleElement.sheet;
+  }
+
+  var parseCss_1 = parseCss;
+
+  function makeFetchCss(fetch) {
+    return async function fetchCss(url) {
+      try {
+        const response = await fetch(url, {cache: 'force-cache'});
+        if (response.ok) {
+          return await response.text();
         }
-        function notEmptyObj(obj) {
-          return Object.keys(obj).length ? obj : undefined;
+        console.log('/failed to fetch (status ' + response.status + ') css from: ' + url + '/');
+      } catch (err) {
+        console.log('/failed to fetch (error ' + err.toString() + ') css from: ' + url + '/');
+      }
+    };
+  }
+
+  var fetchCss = makeFetchCss;
+
+  function makeExtractCssFromNode({fetchCss, absolutizeUrl}) {
+    return async function extractCssFromNode(node, baseUrl) {
+      let cssText, resourceUrl, isUnfetched;
+      if (isStyleElement(node)) {
+        cssText = Array.from(node.childNodes)
+          .map(node => node.nodeValue)
+          .join('');
+        resourceUrl = baseUrl;
+      } else if (isLinkToStyleSheet(node)) {
+        resourceUrl = absolutizeUrl(getHrefAttr(node), baseUrl);
+        cssText = await fetchCss(resourceUrl);
+        if (cssText === undefined) {
+          isUnfetched = true;
         }
-        function iframeToJSON(el) {
-          const obj = elementToJSON(el);
-          try {
-            if (el.contentDocument) {
-              obj.childNodes = [captureNode(el.contentDocument.documentElement)];
-            }
-          } catch (ex) {
-          } finally {
-            return obj;
+      }
+      return {cssText, resourceUrl, isUnfetched};
+    };
+  }
+
+  function isStyleElement(node) {
+    return node.nodeName && node.nodeName.toUpperCase() === 'STYLE';
+  }
+
+  function getHrefAttr(node) {
+    const attr = Array.from(node.attributes).find(attr => attr.name.toLowerCase() === 'href');
+    return attr && attr.value;
+  }
+
+  function isLinkToStyleSheet(node) {
+    return (
+      node.nodeName &&
+      node.nodeName.toUpperCase() === 'LINK' &&
+      node.attributes &&
+      Array.from(node.attributes).find(
+        attr => attr.name.toLowerCase() === 'rel' && attr.value.toLowerCase() === 'stylesheet',
+      )
+    );
+  }
+
+  var extractCssFromNode = makeExtractCssFromNode;
+
+  function makeCaptureNodeCss({extractCssFromNode, getBundledCssFromCssText, unfetchedToken}) {
+    return async function captureNodeCss(node, baseUrl) {
+      const {resourceUrl, cssText, isUnfetched} = await extractCssFromNode(node, baseUrl);
+
+      let unfetchedResources;
+      let bundledCss = '';
+      if (cssText) {
+        const {
+          bundledCss: nestedCss,
+          unfetchedResources: nestedUnfetched,
+        } = await getBundledCssFromCssText(cssText, resourceUrl);
+
+        bundledCss += nestedCss;
+        unfetchedResources = new Set(nestedUnfetched);
+      } else if (isUnfetched) {
+        bundledCss += `${unfetchedToken}${resourceUrl}${unfetchedToken}`;
+        unfetchedResources = new Set([resourceUrl]);
+      }
+      return {bundledCss, unfetchedResources};
+    };
+  }
+
+  var captureNodeCss = makeCaptureNodeCss;
+
+  const NODE_TYPES = {
+    ELEMENT: 1,
+    TEXT: 3,
+  };
+  const API_VERSION = '1.0.0';
+
+  async function captureFrame(
+    {styleProps, rectProps, ignoredTagNames} = defaultDomProps,
+    doc = document,
+  ) {
+    const start = Date.now();
+    const unfetchedResources = new Set();
+    const iframeCors = [];
+    const iframeToken = '@@@@@';
+    const unfetchedToken = '#####';
+    const separator = '-----';
+
+    const fetchCss$$1 = fetchCss(fetch);
+    const getBundledCssFromCssText$$1 = getBundledCssFromCssText({
+      parseCss: parseCss_1,
+      CSSImportRule,
+      fetchCss: fetchCss$$1,
+      absolutizeUrl: absolutizeUrl_1,
+      unfetchedToken,
+    });
+    const extractCssFromNode$$1 = extractCssFromNode({fetchCss: fetchCss$$1, absolutizeUrl: absolutizeUrl_1});
+    const captureNodeCss$$1 = captureNodeCss({
+      extractCssFromNode: extractCssFromNode$$1,
+      getBundledCssFromCssText: getBundledCssFromCssText$$1,
+      unfetchedToken,
+    });
+
+    // Note: Change the API_VERSION when changing json structure.
+    const capturedFrame = await doCaptureFrame(doc);
+    capturedFrame.version = API_VERSION;
+
+    const iframePrefix = iframeCors.length ? `${iframeCors.join('\n')}\n` : '';
+    const unfetchedPrefix = unfetchedResources.size
+      ? `${Array.from(unfetchedResources).join('\n')}\n`
+      : '';
+    const metaPrefix = JSON.stringify({
+      separator,
+      cssStartToken: unfetchedToken,
+      cssEndToken: unfetchedToken,
+      iframeStartToken: `"${iframeToken}`,
+      iframeEndToken: `${iframeToken}"`,
+    });
+    const ret = `${metaPrefix}\n${unfetchedPrefix}${separator}\n${iframePrefix}${separator}\n${JSON.stringify(
+    capturedFrame,
+  )}`;
+    console.log('[captureFrame]', Date.now() - start);
+    return ret;
+
+    function filter(x) {
+      return !!x;
+    }
+
+    function notEmptyObj(obj) {
+      return Object.keys(obj).length ? obj : undefined;
+    }
+
+    function captureTextNode(node) {
+      return {
+        tagName: '#text',
+        text: node.textContent,
+      };
+    }
+
+    async function doCaptureFrame(frameDoc) {
+      const bgImages = new Set();
+      let bundledCss = '';
+      const ret = await captureNode(frameDoc.documentElement);
+      ret.css = bundledCss;
+      ret.images = await getImageSizes_1({bgImages});
+      return ret;
+
+      async function captureNode(node) {
+        const {bundledCss: nodeCss, unfetchedResources: nodeUnfetched} = await captureNodeCss$$1(
+          node,
+          frameDoc.location.href,
+        );
+        bundledCss += nodeCss;
+        if (nodeUnfetched) for (const elem of nodeUnfetched) unfetchedResources.add(elem);
+
+        switch (node.nodeType) {
+          case NODE_TYPES.TEXT: {
+            return captureTextNode(node);
           }
-        }
-        function elementToJSON(el) {
-          const tagName = el.tagName.toUpperCase();
-          if (ignoredTagNames.indexOf(tagName) > -1) return null;
-          const computedStyle = window.getComputedStyle(el);
-          const boundingClientRect = el.getBoundingClientRect();
-          const style = {};
-          for (const p of styleProps) style[p] = computedStyle.getPropertyValue(p);
-          const rect = {};
-          for (const p of rectProps) rect[p] = boundingClientRect[p];
-          const attributes = {};
-          if (!attributeProps) {
-            if (el.hasAttributes()) {
-              var attrs = el.attributes;
-              for (const p of attrs) {
-                attributes[p.name] = p.value;
-              }
+          case NODE_TYPES.ELEMENT: {
+            const tagName = node.tagName.toUpperCase();
+            if (tagName === 'IFRAME') {
+              return await iframeToJSON(node);
+            } else {
+              return await await elementToJSON(node);
             }
           }
-          else {
-            if (attributeProps.all) {
-              for (const p of attributeProps.all) {
-                if (el.hasAttribute(p)) attributes[p] = el.getAttribute(p);
-              }
-            }
-            if (attributeProps[tagName]) {
-              for (const p of attributeProps[tagName]) {
-                if (el.hasAttribute(p)) attributes[p] = el.getAttribute(p);
-              }
-            }
+          default: {
+            return null;
           }
-          return {
-            tagName,
-            style: notEmptyObj(style),
-            rect: notEmptyObj(rect),
-            attributes: notEmptyObj(attributes),
-            childNodes: Array.prototype.map.call(el.childNodes, captureNode).filter(filter),
-          };
         }
-        function captureTextNode(node) {
-          return {
-            tagName: '#text',
-            text: node.textContent,
-          };
+      }
+
+      async function elementToJSON(el) {
+        const childNodes = (await Promise.all(
+          Array.prototype.map.call(el.childNodes, captureNode),
+        )).filter(filter);
+
+        const tagName = el.tagName.toUpperCase();
+        if (ignoredTagNames.indexOf(tagName) > -1) return null;
+
+        const computedStyle = window.getComputedStyle(el);
+        const boundingClientRect = el.getBoundingClientRect();
+
+        const style = {};
+        for (const p of styleProps) style[p] = computedStyle.getPropertyValue(p);
+
+        const rect = {};
+        for (const p of rectProps) rect[p] = boundingClientRect[p];
+
+        const attributes = Array.from(el.attributes)
+          .map(a => ({key: a.name, value: a.value}))
+          .reduce((obj, attr) => {
+            obj[attr.key] = attr.value;
+            return obj;
+          }, {});
+
+        const bgImage = getBackgroundImageUrl_1(computedStyle.getPropertyValue('background-image'));
+        if (bgImage) {
+          bgImages.add(bgImage);
+        }
+
+        return {
+          tagName,
+          style: notEmptyObj(style),
+          rect: notEmptyObj(rect),
+          attributes: notEmptyObj(attributes),
+          childNodes,
+        };
+      }
+
+      async function iframeToJSON(el) {
+        const obj = await elementToJSON(el);
+        let doc;
+        try {
+          doc = el.contentDocument;
+        } catch (ex) {
+          markFrameAsCors();
+          return obj;
         }
-        function captureNode(node) {
-          switch (node.nodeType) {
-            case NODE_TYPES.TEXT:
-              return captureTextNode(node);
-            case NODE_TYPES.ELEMENT:
-              if (node.tagName.toUpperCase() === 'IFRAME') {
-                return iframeToJSON(node);
-              } else {
-                return elementToJSON(node);
-              }
-            default:
-              return null;
+        try {
+          if (doc) {
+            obj.childNodes = [await doCaptureFrame(el.contentDocument)];
+          } else {
+            markFrameAsCors();
           }
+        } catch (ex) {
+          console.log('error in iframeToJSON', ex);
+        }
+        return obj;
+
+        function markFrameAsCors() {
+          const xpath = genXpath_1(el);
+          iframeCors.push(xpath);
+          obj.childNodes = [`${iframeToken}${xpath}${iframeToken}`];
         }
-        return captureNode(document.documentElement);
       }
-      return captureFrame(arguments[0]);
-    SCRIPT
+    }
+  }
+
+  var captureFrame_1 = captureFrame;
+
+  const EYES_NAME_SPACE = '__EYES__APPLITOOLS__';
+
+  function captureFrameAndPoll(...args) {
+    if (!window[EYES_NAME_SPACE]) {
+      window[EYES_NAME_SPACE] = {};
+    }
+    if (!window[EYES_NAME_SPACE].captureDomResult) {
+      window[EYES_NAME_SPACE].captureDomResult = {
+        status: 'WIP',
+        value: null,
+        error: null,
+      };
+      captureFrame_1(...args)
+        .then(r => ((resultObject.status = 'SUCCESS'), (resultObject.value = r)))
+        .catch(e => ((resultObject.status = 'ERROR'), (resultObject.error = e.message)));
+    }
+
+    const resultObject = window[EYES_NAME_SPACE].captureDomResult;
+    if (resultObject.status === 'SUCCESS') {
+      window[EYES_NAME_SPACE].captureDomResult = null;
+    }
+
+    return JSON.stringify(resultObject);
+  }
+
+  var captureFrameAndPoll_1 = captureFrameAndPoll;
+
+  return captureFrameAndPoll_1;
+
+}());
+
+  return captureDomAndPoll.apply(this, arguments);
+}
+SCRIPT
+    end
   end
-end
+end