feat: upgrade playwright to 1.5.2

Bring back extension debug devtools 🚀
hugomrdias · Nov 8, 2020 · 0804e8b · 0804e8b
1 parent d0a95cc
commit 0804e8b
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 190 deletions.
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
         "meow": "^8.0.0",
         "merge-options": "^3.0.3",
         "ora": "^5.1.0",
-        "playwright-core": "0.11.1",
+        "playwright-core": "1.5.2",
         "polka": "^0.5.2",
         "resolve-cwd": "^3.0.0",
         "sirv": "^1.0.7",

diff --git a/src/runner-mocha.js b/src/runner-mocha.js
@@ -55,7 +55,7 @@ class MochaRunner extends Runner {
             case 'worker': {
                 await this.page.evaluate(addWorker(this.file));
                 const run = new Promise((resolve) => {
-                    this.page.on('workercreated', async (worker) => {
+                    this.page.on('worker', async (worker) => {
                         await delay(1000);
                         await worker.evaluate(runMochaWorker());
                         resolve();

diff --git a/src/runner-zora.js b/src/runner-zora.js
@@ -42,7 +42,7 @@ class ZoraRunner extends Runner {
             case 'worker': {
                 this.page.evaluate(addWorker(this.file));
                 const run = new Promise((resolve) => {
-                    this.page.on('workercreated', async (worker) => {
+                    this.page.on('worker', async (worker) => {
                         await delay(1000);
                         await worker.evaluate(runZoraWorker());
                         resolve();

diff --git a/src/runner.js b/src/runner.js
@@ -11,7 +11,7 @@ const tempy = require('tempy');
 const polka = require('polka');
 const sirv = require('sirv');
 const merge = require('merge-options');
-const envPaths = require('env-paths')('playwright-test');
+// const envPaths = require('env-paths')('playwright-test');
 const { redirectConsole, getPw, compile } = require('./utils');
 
 const defaultOptions = {
@@ -42,7 +42,7 @@ class Runner {
         );
     }
 
-    async launch(spinner) {
+    async launch() {
         // copy files to be served
         const files = [
             'index.html',
@@ -76,7 +76,7 @@ class Runner {
             .server;
 
         // download playwright if needed
-        const pw = await getPw(this.options.browser, envPaths.cache, spinner);
+        const pw = await getPw(this.options.browser);
         const pwOptions = {
             headless: !this.options.extension && !this.options.debug,
             devtools: this.options.browser === 'chromium' && this.options.debug,
@@ -87,36 +87,38 @@ class Runner {
             dumpio: process.env.PW_TEST_DUMPIO || false
         };
 
-        // extension only works in incognito for now
-        if (this.options.incognito || this.options.extension) {
+        if (this.options.incognito) {
             this.browser = await pw.launch(pwOptions);
             this.context = await this.browser.newContext();
         } else {
-            this.context = await pw.launchPersistent(undefined, pwOptions);
+            this.context = await pw.launchPersistentContext(tempy.directory(), pwOptions);
         }
 
         return this;
     }
 
     async setupPage() {
         if (this.options.extension) {
-            const targets = await this.browser.targets();
-            const backgroundPageTarget = targets.find(target => target.type() === 'background_page');
+            const backgroundPages = await this.context.backgroundPages();
+            const backgroundPage = backgroundPages.length ?
+                backgroundPages[0] :
+                await this.context.waitForEvent('backgroundpage').then(event => event);
 
-            this.page = await backgroundPageTarget.page();
-
-            // Open extension devtools window
-            // const extPage = await this.context.newPage();
+            this.page = backgroundPage;
+            if (this.options.debug) {
+                // Open extension devtools window
+                const extPage = await this.context.newPage();
 
-            // await extPage.goto(`chrome://extensions/?id=${backgroundPageTarget._targetInfo.url.split('/')[2]}`);
+                await extPage.goto(`chrome://extensions/?id=${this.page._mainFrame._initializer.url.split('/')[2]}`);
 
-            // const buttonHandle = await extPage.evaluateHandle('document.querySelector("body > extensions-manager").shadowRoot.querySelector("extensions-toolbar").shadowRoot.querySelector("#devMode")');
+                const buttonHandle = await extPage.evaluateHandle('document.querySelector("body > extensions-manager").shadowRoot.querySelector("extensions-toolbar").shadowRoot.querySelector("#devMode")');
 
-            // await buttonHandle.click();
+                await buttonHandle.click();
 
-            // const backgroundPageLink = await extPage.evaluateHandle('document.querySelector("body > extensions-manager").shadowRoot.querySelector("#viewManager > extensions-detail-view").shadowRoot.querySelector("#inspect-views > li:nth-child(2) > a")');
+                const backgroundPageLink = await extPage.evaluateHandle('document.querySelector("body > extensions-manager").shadowRoot.querySelector("#viewManager > extensions-detail-view").shadowRoot.querySelector("#inspect-views > li:nth-child(2) > a")');
 
-            // await backgroundPageLink.click();
+                await backgroundPageLink.click();
+            }
         } else {
             this.page = await this.context.newPage();
             await this.page.goto(this.url);

diff --git a/src/utils.js b/src/utils.js
@@ -135,85 +135,26 @@ const redirectConsole = async (msg) => {
     }
 };
 
-function toMegabytes(bytes) {
-    const mb = bytes / 1024 / 1024;
-
-    return `${Math.round(mb * 10) / 10} Mb`;
-}
-
-async function downloadBrowser(browserInstance, spinner) {
-    const browser = browserInstance.name();
-    const browserType = browserInstance;
-
-    function onProgress(downloadedBytes, totalBytes) {
-        const perc = Math.round((downloadedBytes / totalBytes) * 100);
-
-        if (perc === 100) {
-            spinner.text = `Unpacking ${browser} ${browserType._revision}`;
-        } else {
-            spinner.text = `Downloading ${browser} ${browserType._revision} - ${toMegabytes(totalBytes)} ${perc}%`;
-        }
-    }
-
-    const fetcher = browserType._createBrowserFetcher();
-    const revisionInfo = fetcher.revisionInfo();
-
-    // Do nothing if the revision is already downloaded.
-    if (revisionInfo.local) {
-        return revisionInfo;
-    }
-
-    spinner.text = `Downloading ${browser} ${browserType._revision}`;
-    await fetcher.download(revisionInfo.revision, onProgress);
-    spinner.text = `Browser ${browser} cached to ${revisionInfo.folderPath}`;
-
-    return revisionInfo;
-}
-
-const getPw = async (browserName, cachePath, spinner) => {
-    const packageJson = require('playwright-core/package.json');
-    const { helper } = require('playwright-core/lib/helper');
-    const api = require('playwright-core/lib/api');
-    const { Chromium } = require('playwright-core/lib/server/chromium');
-    const { WebKit } = require('playwright-core/lib/server/webkit');
-    const { Firefox } = require('playwright-core/lib/server/firefox');
-
-    for (const className in api) {
-        if (typeof api[className] === 'function') {
-            helper.installApiHooks(className, api[className]);
-        }
-    }
+const getPw = async (browserName) => {
+    const cachePath = path.join(process.cwd(), 'node_modules', '.cache');
 
     if (process.env.CI) {
-        cachePath = path.join(process.cwd(), 'node_modules', '.cache');
+        process.env.PLAYWRIGHT_BROWSERS_PATH = cachePath;
     }
-
-    if (!fs.existsSync(cachePath)) {
-        await fs.promises.mkdir(cachePath);
-    }
-    let browser = null;
-
-    switch (browserName) {
-        case 'chromium':
-            browser = new Chromium(cachePath, packageJson.playwright.chromium_revision);
-
-            break;
-        case 'webkit':
-            browser = new WebKit(cachePath, packageJson.playwright.webkit_revision);
-
-            break;
-        case 'firefox':
-            browser = new Firefox(cachePath, packageJson.playwright.firefox_revision);
-
-            break;
-
-        default:
-            throw new Error(`Browser ${browserName} not supported. Try chromium, webkit or firefox.`);
-    }
-
-    await downloadBrowser(browser, spinner);
-
-    return browser;
+    const { installBrowsersWithProgressBar } = require('playwright-core/lib/install/installer');
+    const { Playwright } = require('playwright-core/lib/server/playwright');
+    const { setupInProcess } = require('playwright-core/lib/inprocess');
+    const browsers = JSON.parse(fs.readFileSync('./node_modules/playwright-core/browsers.json').toString());
+
+    browsers.browsers[0].download = true; // chromium
+    browsers.browsers[1].download = true; // firefox
+    browsers.browsers[2].download = true; // webkit
+    fs.mkdirSync(cachePath, { recursive: true });
+    fs.writeFileSync(path.join(cachePath, 'browsers.json'), JSON.stringify(browsers, null, 2));
+    await installBrowsersWithProgressBar(cachePath);
+    const api = setupInProcess(new Playwright(cachePath, browsers.browsers));
+
+    return api[browserName];
 };
 
 const compile = async (compiler) => {