When lazy iframes are hidden, visualdiff tests fail with timeouts (#16)

penyaskito · web-flow · commit 73161dbd5981 · 2025-02-24T21:54:11.000+01:00
If your page has hidden lazy iframes, visualdiff tests will fail with a
timeout.
diff --git a/lib/cli/drush.d.ts b/lib/cli/drush.d.ts
@@ -1,4 +1,3 @@
-/// <reference types="node" />
 /**
  * Run task either inside of the web container or from the host.
  *
diff --git a/lib/cli/drush.js b/lib/cli/drush.js
@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.drush = exports.drushSync = void 0;
+exports.drushSync = drushSync;
+exports.drush = drush;
 var exec_1 = require("./exec");
 /**
  * Run task either inside of the web container or from the host.
@@ -11,7 +12,6 @@ var exec_1 = require("./exec");
 function drushSync(command, options) {
     return (0, exec_1.execSync)('drush', command, options);
 }
-exports.drushSync = drushSync;
 /**
  * Run drush asynchronously. Console output is streamed.
  *
@@ -20,4 +20,3 @@ exports.drushSync = drushSync;
 function drush(command) {
     return (0, exec_1.exec)('drush', command);
 }
-exports.drush = drush;
diff --git a/lib/cli/exec.d.ts b/lib/cli/exec.d.ts
@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import child_process from "child_process";
 /**
  * Run a command either inside of the web container or from the host.
diff --git a/lib/cli/exec.js b/lib/cli/exec.js
@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.exec = exports.execSync = void 0;
+exports.execSync = execSync;
+exports.exec = exec;
 var child_process_1 = __importDefault(require("child_process"));
 /**
  * Run a command either inside of the web container or from the host.
@@ -19,7 +20,6 @@ function execSync(baseCommand, command, options) {
     options.cwd = process.env.DDEV_HOSTNAME ? '/var/www/html' : process.cwd();
     return child_process_1.default.execSync("".concat(ddev, " ").concat(command), options);
 }
-exports.execSync = execSync;
 /**
  * Run a command asynchronously. Console output is streamed.
  *
@@ -41,4 +41,3 @@ function exec(baseCommand, command) {
     }
     return childProcess;
 }
-exports.exec = exec;
diff --git a/lib/cli/task.d.ts b/lib/cli/task.d.ts
@@ -1,4 +1,3 @@
-/// <reference types="node" />
 /**
  * Run task either inside of the web container or from the host.
  *
diff --git a/lib/cli/task.js b/lib/cli/task.js
@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.task = exports.taskSync = void 0;
+exports.taskSync = taskSync;
+exports.task = task;
 var exec_1 = require("./exec");
 /**
  * Run task either inside of the web container or from the host.
@@ -11,7 +12,6 @@ var exec_1 = require("./exec");
 function taskSync(command, options) {
     return (0, exec_1.execSync)('task', command, options);
 }
-exports.taskSync = taskSync;
 /**
  * Run a task asynchronously. Console output is streamed.
  *
@@ -20,4 +20,3 @@ exports.taskSync = taskSync;
 function task(command) {
     return (0, exec_1.exec)('task', command);
 }
-exports.task = task;
diff --git a/lib/setup/global-setup.js b/lib/setup/global-setup.js
@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
diff --git a/lib/testcase/test.d.ts b/lib/testcase/test.d.ts
@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { expect, TestFixture } from '@playwright/test';
 /**
  * Set a simpletest cookie for routing the tests to a separate database.
diff --git a/lib/testcase/test.js b/lib/testcase/test.js
@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -32,8 +42,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
@@ -62,7 +72,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.execDrushInTestSite = exports.expect = exports.test = void 0;
+exports.expect = exports.test = void 0;
+exports.execDrushInTestSite = execDrushInTestSite;
 var test_1 = require("@playwright/test");
 Object.defineProperty(exports, "expect", { enumerable: true, get: function () { return test_1.expect; } });
 var task_1 = require("../cli/task");
@@ -77,18 +88,18 @@ var drupal_test_id;
  * Set a simpletest cookie for routing the tests to a separate database.
  */
 var test = test_1.test.extend({
-    context: function (_a, use) {
-        var context = _a.context, request = _a.request;
-        return __awaiter(this, void 0, void 0, function () {
+    context: function (_a, use_1) {
+        return __awaiter(this, arguments, void 0, function (_b, use) {
             var id, install;
             var _this = this;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
+            var context = _b.context, request = _b.request;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
                     case 0:
                         if (!process.env.PLAYWRIGHT_NO_TEST_ISOLATION) return [3 /*break*/, 2];
                         return [4 /*yield*/, use(context)];
                     case 1:
-                        _b.sent();
+                        _c.sent();
                         return [2 /*return*/];
                     case 2:
                         id = Math.round(Math.random() * 1000000);
@@ -146,24 +157,22 @@ exports.test = test;
 /**
  * Attach the PHP error log to the test results.
  */
-test.afterEach(function (_a, testInfo) {
-    var page = _a.page;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var logPath;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    logPath = '../../web/sites/simpletest/' + drupal_test_id + '/error.log';
-                    if (!fs.existsSync(logPath)) return [3 /*break*/, 2];
-                    return [4 /*yield*/, testInfo.attach('error.log', { path: logPath })];
-                case 1:
-                    _b.sent();
-                    _b.label = 2;
-                case 2: return [2 /*return*/];
-            }
-        });
+test.afterEach(function (_a, testInfo_1) { return __awaiter(void 0, [_a, testInfo_1], void 0, function (_b, testInfo) {
+    var logPath;
+    var page = _b.page;
+    return __generator(this, function (_c) {
+        switch (_c.label) {
+            case 0:
+                logPath = '../../web/sites/simpletest/' + drupal_test_id + '/error.log';
+                if (!fs.existsSync(logPath)) return [3 /*break*/, 2];
+                return [4 /*yield*/, testInfo.attach('error.log', { path: logPath })];
+            case 1:
+                _c.sent();
+                _c.label = 2;
+            case 2: return [2 /*return*/];
+        }
     });
-});
+}); });
 /**
  * Run a Drush command in a test site.
  *
@@ -194,4 +203,3 @@ function execDrushInTestSite(command) {
         });
     });
 }
-exports.execDrushInTestSite = execDrushInTestSite;
diff --git a/lib/testcase/visualdiff.js b/lib/testcase/visualdiff.js
@@ -9,8 +9,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
@@ -36,59 +36,57 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VisualDiffTestCases = exports.defaultTestFunction = exports.defineVisualDiffConfig = void 0;
+exports.VisualDiffTestCases = void 0;
+exports.defineVisualDiffConfig = defineVisualDiffConfig;
+exports.defaultTestFunction = defaultTestFunction;
 var test_1 = require("@playwright/test");
 var util_1 = require("../util");
 function defineVisualDiffConfig(cases) {
     return new VisualDiffTestCases(cases);
 }
-exports.defineVisualDiffConfig = defineVisualDiffConfig;
 function defaultTestFunction(testCase, group) {
     var _this = this;
     // @ts-ignore
-    return function (_a, testInfo) {
-        var page = _a.page, context = _a.context;
-        return __awaiter(_this, void 0, void 0, function () {
-            var representativeUrl, path;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        // Log any errors to the Playwright console too.
-                        context.on('weberror', function (webError) { return console.log(webError.error()); });
+    return function (_a, testInfo_1) { return __awaiter(_this, [_a, testInfo_1], void 0, function (_b, testInfo) {
+        var representativeUrl, path;
+        var page = _b.page, context = _b.context;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    // Log any errors to the Playwright console too.
+                    context.on('weberror', function (webError) { return console.log(webError.error()); });
+                    testInfo.annotations.push({
+                        type: 'Description',
+                        description: testCase.description,
+                    });
+                    representativeUrl = "";
+                    if (testCase.representativeUrl) {
+                        representativeUrl = testCase.representativeUrl;
+                    }
+                    else if (group.representativeUrl) {
+                        representativeUrl = group.representativeUrl;
+                    }
+                    if (representativeUrl) {
                         testInfo.annotations.push({
-                            type: 'Description',
-                            description: testCase.description,
+                            type: 'Representative URL',
+                            description: representativeUrl,
                         });
-                        representativeUrl = "";
-                        if (testCase.representativeUrl) {
-                            representativeUrl = testCase.representativeUrl;
-                        }
-                        else if (group.representativeUrl) {
-                            representativeUrl = group.representativeUrl;
-                        }
-                        if (representativeUrl) {
-                            testInfo.annotations.push({
-                                type: 'Representative URL',
-                                description: representativeUrl,
-                            });
-                        }
-                        path = testCase.path;
-                        if (group.pathPrefix) {
-                            path = group.pathPrefix + path;
-                        }
-                        return [4 /*yield*/, page.goto(path)];
-                    case 1:
-                        _b.sent();
-                        return [4 /*yield*/, (0, util_1.takeAccessibleScreenshot)(page, testInfo, { fullPage: true })];
-                    case 2:
-                        _b.sent();
-                        return [2 /*return*/];
-                }
-            });
+                    }
+                    path = testCase.path;
+                    if (group.pathPrefix) {
+                        path = group.pathPrefix + path;
+                    }
+                    return [4 /*yield*/, page.goto(path)];
+                case 1:
+                    _c.sent();
+                    return [4 /*yield*/, (0, util_1.takeAccessibleScreenshot)(page, testInfo, { fullPage: true })];
+                case 2:
+                    _c.sent();
+                    return [2 /*return*/];
+            }
         });
-    };
+    }); };
 }
-exports.defaultTestFunction = defaultTestFunction;
 /**
  * Execute a set of visual diffs against groups of test cases.
  */
@@ -112,14 +110,12 @@ var VisualDiffTestCases = /** @class */ (function () {
             var _this = this;
             if (typeof testCase.skip !== 'undefined' && (typeof testCase.skip.callback == 'undefined' || testCase.skip.callback(testCase))) {
                 // eslint-disable-ext-line @typescript-eslint/no-unused-vars
-                test_1.test.skip("".concat(testCase.name, ": ").concat(testCase.skip.reason, " <").concat(testCase.skip.willBeFixedIn, ">"), function (_a, testInfo) {
-                    var page = _a.page;
-                    return __awaiter(_this, void 0, void 0, function () {
-                        return __generator(this, function (_b) {
-                            return [2 /*return*/];
-                        });
+                test_1.test.skip("".concat(testCase.name, ": ").concat(testCase.skip.reason, " <").concat(testCase.skip.willBeFixedIn, ">"), function (_a, testInfo_1) { return __awaiter(_this, [_a, testInfo_1], void 0, function (_b, testInfo) {
+                    var page = _b.page;
+                    return __generator(this, function (_c) {
+                        return [2 /*return*/];
                     });
-                });
+                }); });
             }
         }
         this.config.groups.forEach(function (group) {
diff --git a/lib/util/accessible-screenshot.js b/lib/util/accessible-screenshot.js
diff --git a/lib/util/frames.js b/lib/util/frames.js
diff --git a/lib/util/images.js b/lib/util/images.js
diff --git a/src/util/frames.ts b/src/util/frames.ts

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-/// <reference types="node" />`
`2`	`1`	`/**`
`3`	`2`	`* Run task either inside of the web container or from the host.`
`4`	`3`	`*`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-/// <reference types="node" />`
`2`	`1`	`import child_process from "child_process";`
`3`	`2`	`/**`
`4`	`3`	`* Run a command either inside of the web container or from the host.`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) \|\| function (mod) {`
`3`	`3`	`return (mod && mod.__esModule) ? mod : { "default": mod };`
`4`	`4`	`};`
`5`	`5`	`Object.defineProperty(exports, "__esModule", { value: true });`
`6`		`-exports.exec = exports.execSync = void 0;`
	`6`	`+exports.execSync = execSync;`
	`7`	`+exports.exec = exec;`
`7`	`8`	`var child_process_1 = __importDefault(require("child_process"));`
`8`	`9`	`/**`
`9`	`10`	`* Run a command either inside of the web container or from the host.`
`@@ -19,7 +20,6 @@ function execSync(baseCommand, command, options) {`
`19`	`20`	`options.cwd = process.env.DDEV_HOSTNAME ? '/var/www/html' : process.cwd();`
`20`	`21`	`return child_process_1.default.execSync("".concat(ddev, " ").concat(command), options);`
`21`	`22`	`}`
`22`		`-exports.execSync = execSync;`
`23`	`23`	`/**`
`24`	`24`	`* Run a command asynchronously. Console output is streamed.`
`25`	`25`	`*`
`@@ -41,4 +41,3 @@ function exec(baseCommand, command) {`
`41`	`41`	`}`
`42`	`42`	`return childProcess;`
`43`	`43`	`}`
`44`		`-exports.exec = exec;`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-/// <reference types="node" />`
`2`	`1`	`import { expect, TestFixture } from '@playwright/test';`
`3`	`2`	`/**`
`4`	`3`	`* Set a simpletest cookie for routing the tests to a separate database.`