chore(screenshotter): Improve screenshotter for Safari (#3015)

* Fix when Docker returns IPv4 and IPv6 addresses

* Ensure images load before screenshotting

* Fix bugs from review

* Update test/screenshotter/test.html

Co-authored-by: ylemkimon <y@ylem.kim>

dockers/screenshotter/screenshotter.js

@@ -172,7 +172,8 @@ if (!seleniumURL && opts.container) {
         guessDockerIPs();
     }
     seleniumPort = cmd("docker", "port", opts.container, seleniumPort);
-    seleniumPort = seleniumPort.replace(/^.*:/, "");
+    // Docker can output two lines, such as "0.0.0.0:49156\n:::49156"
+    seleniumPort = seleniumPort.replace(/[^]*:([0-9]+)[^]*/, "$1");
 }
 if (!seleniumURL && seleniumIP) {
     seleniumURL = "http://" + seleniumIP + ":" + seleniumPort + "/wd/hub";
@@ -493,7 +494,7 @@ function takeScreenshot(key) {
     function loadFonts() {
         driver.executeAsyncScript(
                 "var callback = arguments[arguments.length - 1]; " +
-                "load_fonts(callback);")
+                "load_fonts_and_images(callback);")
             .then(waitThenScreenshot);
     }
 

test/screenshotter/test.html

@@ -31,14 +31,16 @@
     <span id="math"></span>
     <span id="post"></span>
     <script type="text/javascript">
-      function load_fonts(callback) {
-        if (!document.fonts || !document.fonts.load) {
+      function load_fonts_and_images(callback) {
+        if (typeof Promise === "undefined") {
           callback();
           return;
         }
 
         var results = [];
+
         function load_font(name, style) {
+          if (!document.fonts || !document.fonts.load) return;
           // 10px is arbitrarily selected value
           results.push(document.fonts.load((style || "") + " 10px " + name));
         }
@@ -56,6 +58,18 @@
         load_font("Mincho");
         load_font("Batang");
 
+        for (var i = 0; i < document.images.length; i++) {
+          var img = document.images[i];
+          results.push(new Promise(function (done, error) {
+            if (img.complete) {
+              done();
+            } else {
+              img.addEventListener('load', done);
+              img.addEventListener('error', error);
+            }
+          }));
+        };
+
         Promise.all(results).then(callback)
       }