feat: enable live preview tests in chromium in GitHub Actions

.github/workflows/playwright-firefox-integ.yml

@@ -14,8 +14,18 @@ jobs:
       run: npm run build
     - name: Install Playwright Browsers
       run: npx playwright install --with-deps
-    - name: Run Playwright integration tests in firefox
+    - name: Run Playwright integration tests in firefox Attempt 1
+      timeout-minutes: 30
+      id: attempt1
+      continue-on-error: true
       run: npm run testIntegFirefox
+
+    - name: Run Playwright integration tests in firefox Attempt 2
+      if: steps.attempt1.outcome == 'failure'
+      id: attempt2
+      continue-on-error: true
+      run: npm run testIntegFirefox
+
     - uses: actions/upload-artifact@v3
       if: always()
       with:

playwright.config.js

@@ -30,7 +30,7 @@ const config = {
     /* Retry on CI only */
     retries: 0, // no retries as it only makes it worse in GitHub Actions. see history.
     /* Opt out of parallel tests on CI. */
-    workers: process.env.CI ? 1 : undefined,
+    workers: 1,
     /* Reporter to use. See https://playwright.dev/docs/test-reporters */
     reporter: "list",
     /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */

src/LiveDevelopment/LiveDevMultiBrowser.js

@@ -69,8 +69,7 @@ define(function (require, exports, module) {
     // events
     const EVENT_OPEN_PREVIEW_URL = "openPreviewURL",
         EVENT_CONNECTION_CLOSE = "ConnectionClose",
-        EVENT_STATUS_CHANGE = "statusChange",
-        EVENT_LIVE_PREVIEW_CLICKED= "livePreviewClicked";
+        EVENT_STATUS_CHANGE = "statusChange";
 
     const Dialogs              = require("widgets/Dialogs"),
         DefaultDialogs       = require("widgets/DefaultDialogs"),
@@ -576,7 +575,10 @@ define(function (require, exports, module) {
                         _handleRelatedDocumentDeleted(msg.href);
                     })
                     .on(LiveDevProtocol.EVENT_LIVE_PREVIEW_CLICKED + ".livedev", function (event, msg) {
-                        exports.trigger(EVENT_LIVE_PREVIEW_CLICKED, msg);
+                        exports.trigger(LiveDevProtocol.EVENT_LIVE_PREVIEW_CLICKED, msg);
+                    })
+                    .on(LiveDevProtocol.EVENT_LIVE_PREVIEW_RELOAD + ".livedev", function (event, clients) {
+                        exports.trigger(LiveDevProtocol.EVENT_LIVE_PREVIEW_RELOAD, clients);
                     });
             } else {
                 console.error("LiveDevelopment._open(): No server active");
@@ -920,7 +922,8 @@ define(function (require, exports, module) {
     exports.EVENT_OPEN_PREVIEW_URL = EVENT_OPEN_PREVIEW_URL;
     exports.EVENT_CONNECTION_CLOSE = EVENT_CONNECTION_CLOSE;
     exports.EVENT_STATUS_CHANGE = EVENT_STATUS_CHANGE;
-    exports.EVENT_LIVE_PREVIEW_CLICKED = EVENT_LIVE_PREVIEW_CLICKED;
+    exports.EVENT_LIVE_PREVIEW_CLICKED = LiveDevProtocol.EVENT_LIVE_PREVIEW_CLICKED;
+    exports.EVENT_LIVE_PREVIEW_RELOAD = LiveDevProtocol.EVENT_LIVE_PREVIEW_RELOAD;
 
     // Export public functions
     exports.open                = open;

src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js

@@ -53,7 +53,8 @@ define(function (require, exports, module) {
     const LIVE_DEV_REMOTE_SCRIPTS_FILE_NAME = "phoenix_live_preview_scripts_instrumented_345Tt96G4.js";
     const LIVE_DEV_REMOTE_WORKER_SCRIPTS_FILE_NAME = "pageLoaderWorker_345Tt96G4.js";
 
-    const EVENT_LIVE_PREVIEW_CLICKED = "livePreviewClicked";
+    const EVENT_LIVE_PREVIEW_CLICKED = "livePreviewClicked",
+        EVENT_LIVE_PREVIEW_RELOAD = "livePreviewReload";
 
     /**
      * @private
@@ -344,6 +345,7 @@ define(function (require, exports, module) {
      *      to the method.
      */
     function reload(ignoreCache, clients) {
+        exports.trigger(EVENT_LIVE_PREVIEW_RELOAD, clients);
         return _send(
             {
                 method: "Page.reload",
@@ -406,4 +408,5 @@ define(function (require, exports, module) {
     exports.LIVE_DEV_REMOTE_SCRIPTS_FILE_NAME = LIVE_DEV_REMOTE_SCRIPTS_FILE_NAME;
     exports.LIVE_DEV_REMOTE_WORKER_SCRIPTS_FILE_NAME = LIVE_DEV_REMOTE_WORKER_SCRIPTS_FILE_NAME;
     exports.EVENT_LIVE_PREVIEW_CLICKED = EVENT_LIVE_PREVIEW_CLICKED;
+    exports.EVENT_LIVE_PREVIEW_RELOAD = EVENT_LIVE_PREVIEW_RELOAD;
 });

src/LiveDevelopment/main.js

@@ -292,6 +292,9 @@ define(function main(require, exports, module) {
         MultiBrowserLiveDev.on(MultiBrowserLiveDev.EVENT_LIVE_PREVIEW_CLICKED, function (_event, clickDetails) {
             exports.trigger(exports.EVENT_LIVE_PREVIEW_CLICKED, clickDetails);
         });
+        MultiBrowserLiveDev.on(MultiBrowserLiveDev.EVENT_LIVE_PREVIEW_RELOAD, function (_event, clientDetails) {
+            exports.trigger(exports.EVENT_LIVE_PREVIEW_RELOAD, clientDetails);
+        });
 
     });
 
@@ -316,6 +319,7 @@ define(function main(require, exports, module) {
     exports.EVENT_OPEN_PREVIEW_URL = MultiBrowserLiveDev.EVENT_OPEN_PREVIEW_URL;
     exports.EVENT_CONNECTION_CLOSE = MultiBrowserLiveDev.EVENT_CONNECTION_CLOSE;
     exports.EVENT_LIVE_PREVIEW_CLICKED = MultiBrowserLiveDev.EVENT_LIVE_PREVIEW_CLICKED;
+    exports.EVENT_LIVE_PREVIEW_RELOAD = MultiBrowserLiveDev.EVENT_LIVE_PREVIEW_RELOAD;
     exports.EVENT_LIVE_HIGHLIGHT_PREF_CHANGED = EVENT_LIVE_HIGHLIGHT_PREF_CHANGED;
 
     // Export public functions

src/extensions/default/Phoenix-live-preview/main.js

@@ -381,6 +381,14 @@ define(function (require, exports, module) {
         }, 1000);
         LiveDevelopment.on(LiveDevelopment.EVENT_OPEN_PREVIEW_URL, _openLivePreviewURL);
         LiveDevelopment.on(LiveDevelopment.EVENT_LIVE_HIGHLIGHT_PREF_CHANGED, _updateLiveHighlightToggleStatus);
+        LiveDevelopment.on(LiveDevelopment.EVENT_LIVE_PREVIEW_RELOAD, ()=>{
+            // Usually, this event is listened by live preview iframes/tabs and they initiate a location.reload.
+            // But in firefox, the embedded iframe will throw a 404 when we try to reload from within the iframe as
+            // in firefox security posture, the third party live preview iframe phcode.live itself cannot activate
+            // the service worker. So we have to reload the iframe from its parent- ie. phcode.dev. This is not
+            // required in chrome, but we just keep it just for all platforms behaving the same.
+            _loadPreview(true);
+        });
         StaticServer.on(IFRAME_EVENT_SERVER_READY, function (_evt, event) {
             serverReady = true;
             _loadPreview(true);

test/spec/LiveDevelopmentMultiBrowser-test.js

@@ -19,7 +19,7 @@
  *
  */
 
-/*global describe, xit, beforeAll, afterAll, afterEach, awaitsFor, it, awaitsForDone, expect, awaits */
+/*global describe, beforeAll, afterAll, awaitsFor, it, awaitsForDone, expect, awaits, Phoenix */
 
 define(function (require, exports, module) {
 
@@ -59,7 +59,12 @@ define(function (require, exports, module) {
         beforeAll(async function () {
             // Create a new window that will be shared by ALL tests in this spec.
             if (!testWindow) {
-                testWindow = await SpecRunnerUtils.createTestWindowAndRun();
+                // we have to popout a new window and cant use the embedded iframe for live preview integ tests
+                // as Firefox sandbox prevents service worker access from nexted iframes.
+                // In tauri, we use node server, so this limitation doesn't apply in tauri, and we stick to iframes.
+                const useWindowInsteadOfIframe = (Phoenix.browser.desktop.isFirefox && !window.__TAURI__);
+                testWindow = await SpecRunnerUtils.createTestWindowAndRun({
+                    forceReload: true, useWindowInsteadOfIframe});
                 brackets = testWindow.brackets;
                 DocumentManager = brackets.test.DocumentManager;
                 LiveDevMultiBrowser = brackets.test.LiveDevMultiBrowser;
@@ -75,7 +80,7 @@ define(function (require, exports, module) {
 
         afterAll(async function () {
             LiveDevMultiBrowser.close();
-            await SpecRunnerUtils.closeTestWindow();
+            await SpecRunnerUtils.closeTestWindow(true);
             testWindow = null;
             brackets = null;
             LiveDevMultiBrowser = null;
@@ -439,7 +444,7 @@ define(function (require, exports, module) {
             await _editFileAndVerifyLivePreview("simple1.html", {line: 11, ch: 45}, 'hello world ',
                 "testId", "Brackets is hello world hello world awesome!");
             await endPreviewSession();
-        }, 5000);
+        });
 
         it("should Markdown/image files be previewed and switched between live previews", async function () {
             await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]),
@@ -467,7 +472,7 @@ define(function (require, exports, module) {
             await _editFileAndVerifyLivePreview("simple1.html", {line: 11, ch: 45}, 'hello world ',
                 "testId", "Brackets is hello world hello world awesome!");
             await endPreviewSession();
-        }, 5000);
+        });
 
         it("should Markdown preview hyperlinks be proper", async function () {
             await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]),
@@ -490,7 +495,7 @@ define(function (require, exports, module) {
             // expect(href.endsWith("LiveDevelopment-MultiBrowser-test-files/sub/icon_chevron.png")).toBeTrue();
 
             await endPreviewSession();
-        }, 5000);
+        });
 
         it("should pin live previews ping html file", async function () {
             await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]),
@@ -519,7 +524,7 @@ define(function (require, exports, module) {
             expect(srcURL.searchParams.get("URL").endsWith("sub/icon_chevron.png")).toBeTrue();
 
             await endPreviewSession();
-        }, 5000);
+        });
 
         async function forRemoteExec(script, compareFn) {
             let result;
@@ -564,7 +569,7 @@ define(function (require, exports, module) {
                 });
 
             await endPreviewSession();
-        }, 5000);
+        });
 
         it("should live highlight css classes highlight all elements", async function () {
             await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple2.html"]),
@@ -606,7 +611,7 @@ define(function (require, exports, module) {
                 });
 
             await endPreviewSession();
-        }, 5000);
+        });
 
         it("should live highlight resize as window size changes", async function () {
             await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]),
@@ -643,7 +648,7 @@ define(function (require, exports, module) {
             });
 
             await endPreviewSession();
-        }, 5000);
+        });
 
         it("should reverse highlight on clicking on live preview", async function () {
             await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]),
@@ -669,7 +674,7 @@ define(function (require, exports, module) {
             expect(editor.getCursorPos()).toEql({ line: 12, ch: 0, sticky: null });
 
             await endPreviewSession();
-        }, 5000);
+        });
 
         it("should reverse highlight open previewed html file if not open on clicking live preview", async function () {
             await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]),
@@ -707,7 +712,7 @@ define(function (require, exports, module) {
             expect(editor.getCursorPos()).toEql({ line: 11, ch: 0, sticky: null });
 
             await endPreviewSession();
-        }, 5000);
+        });
 
         it("should ctrl-s to save page be disabled inside live preview iframes", async function () {
             await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]),
@@ -736,7 +741,7 @@ define(function (require, exports, module) {
             // expect(iFrame.contentDocument.savePageCtrlSDisabledByPhoenix).toBeTrue();
 
             await endPreviewSession();
-        }, 5000);
+        });
 
         it("should beautify and undo not corrupt live preview", async function () {
             await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]),
@@ -759,7 +764,7 @@ define(function (require, exports, module) {
                 "testId", "Brackets is hello world awesome!");
 
             await endPreviewSession();
-        }, 5000);
+        });
 
         it("should live preview not be able to access a non project file", async function () {
             await awaitsForDone(SpecRunnerUtils.openProjectFiles(["exploit1.html"]),
@@ -771,7 +776,7 @@ define(function (require, exports, module) {
             });
 
             await endPreviewSession();
-        }, 5000);
+        });
 
         it("should live preview rememberScrollPositions", async function () {
             await awaitsForDone(SpecRunnerUtils.openProjectFiles(["longPage.html"]),
@@ -808,6 +813,6 @@ define(function (require, exports, module) {
             });
 
             await endPreviewSession();
-        }, 5000);
+        });
     });
 });

test/spec/SpecRunnerUtils.js

@@ -556,7 +556,10 @@ define(function (require, exports, module) {
     // the phoenix test window is only created once, it should be reused for the full suite run.
     // subsequent calls to this function will only return the existing test window. This is to prevent
     // browser hangs that was quite frequent as we created and dropped iframes in the DOM.
-    async function createTestWindowAndRun(options={forceReload: false}) {
+    async function createTestWindowAndRun(options={
+        forceReload: false,
+        useWindowInsteadOfIframe: false // if this is set,
+    }) {
         let params = new UrlParams();
 
         // disable loading of sample project
@@ -581,13 +584,21 @@ define(function (require, exports, module) {
         }
 
         let _testWindowURL = getBracketsSourceRoot() + "?" + params.toString();
-        if(options.forceReload && _testWindow) {
+        if(_testWindow &&(
+            options.forceReload ||
+            (_testWindow.isActualWindow && !options.useWindowInsteadOfIframe)
+        )) {
             await closeTestWindow(true);
         }
 
         if(!_testWindow){
-            const testIframe = window.openIframeRunner(_testWindowURL);
-            _testWindow = testIframe.contentWindow;
+            if(options.useWindowInsteadOfIframe) {
+                _testWindow = window.open(_testWindowURL, "integTestWindow", "width=1500,height=1024");
+                _testWindow.isActualWindow = true;
+            } else {
+                const testIframe = window.openIframeRunner(_testWindowURL);
+                _testWindow = testIframe.contentWindow;
+            }
         } else if(!_testWindow.brackets){
             _testWindow.location.href = 'about:blank';
             _testWindow.location.href = _testWindowURL;
@@ -672,7 +683,11 @@ define(function (require, exports, module) {
                 _testWindow.location.href = "about:blank";
                 await awaits(2000); // UTS will crap without these time waits, esp in chromium. Browser freezes
             }
-            window.closeIframeRunner();
+            if(_testWindow.isActualWindow){
+                _testWindow.close();
+            } else {
+                window.closeIframeRunner();
+            }
             _testWindow = null;
             await awaits(2000); // UTS will crap without these time waits, esp in chromium. Browser freezes
         }

tests-playwright/integration/integration-test-suite.spec.js

@@ -33,8 +33,13 @@ test("Execute mainview tests", async ({ page }) => {
     await execTests(page, "http://localhost:5000/test/SpecRunner.html?spec=all&category=mainview");
 });
 
-// unfortunately live preview tests doesnt work in playwright :(
-// service workers are supported in playwright, debug this
-// test("Execute livepreview tests", async ({ page }) => {
-//     await execTests(page, "http://localhost:5000/test/SpecRunner.html?spec=all&category=livepreview");
-// });
+test("Execute livepreview tests", async ({ page, browserName }) => {
+    if(browserName !== 'firefox'){
+        // unfortunateley, we can run the live preview integ tests only in chrome
+        // In Firefox, sandbox prevents service worker access from nested iframes. So the virtual server itself will
+        // not be loaded in firefox tests in playwright.
+        // In tauri, we use node server, so this limitation doesn't apply in tauri test runners. This restriction is
+        // only there for firefox tests in playwright.
+        await execTests(page, "http://localhost:5000/test/SpecRunner.html?spec=all&category=livepreview");
+    }
+});