@haibun/web-playwright 1.43.0 → 1.44.0

package/build/web-playwright.js

@@ -1,16 +1,86 @@
 import { resolve } from 'path';
+import { pathToFileURL } from 'url';
 import { OK, AStepper } from '@haibun/core/build/lib/defs.js';
 import { WEB_PAGE, WEB_CONTROL } from '@haibun/core/build/lib/domain-types.js';
-import { BrowserFactory } from './BrowserFactory.js';
-import { actionNotOK, getStepperOption, boolOrError, intOrError, stringOrError, findStepperFromOption, sleep } from '@haibun/core/build/lib/util/index.js';
+import { BrowserFactory, BROWSERS } from './BrowserFactory.js';
+import { actionNotOK, getStepperOption, boolOrError, intOrError, stringOrError, findStepperFromOption, sleep, optionOrError } from '@haibun/core/build/lib/util/index.js';
+import { EExecutionMessageType } from '@haibun/core/build/lib/interfaces/logger.js'; // Removed TArtifactMessageContext, added TMessageContext
 import { EMediaTypes } from '@haibun/domain-storage/build/media-types.js';
-import Logger from '@haibun/core/build/lib/Logger.js';
 import { restSteps } from './rest-playwright.js';
+import { createMonitorPageAndSubscriber, writeMonitor } from './monitor/monitorHandler.js';
+import { rmSync } from 'fs';
+export var EMonitoringTypes;
+(function (EMonitoringTypes) {
+    EMonitoringTypes["MONITOR_ALL"] = "all";
+    EMonitoringTypes["MONITOR_EACH"] = "each";
+})(EMonitoringTypes || (EMonitoringTypes = {}));
+const cycles = (wp) => ({
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async onFailure(result, step) {
+        if (wp.bf?.hasPage(wp.getWorld().tag, wp.tab)) {
+            await wp.captureFailureScreenshot(EExecutionMessageType.ON_FAILURE, step);
+        }
+    },
+    async startFeature() {
+        if (wp.monitor === EMonitoringTypes.MONITOR_EACH) {
+            await wp.createMonitor();
+        }
+    },
+    async endFeature({ shouldClose = true, world }) {
+        // leave web server running if there was a failure and it's the last feature
+        if (shouldClose) {
+            for (const file of wp.downloaded) {
+                wp.getWorld().logger.debug(`removing ${JSON.stringify(file)}`);
+                rmSync(file);
+            }
+            if (wp.hasFactory) {
+                if (wp.captureVideo) {
+                    const page = await wp.getPage();
+                    const path = await wp.storage.getRelativePath(await page.video().path());
+                    const artifact = { artifactType: 'video', path, runtimePath: await wp.runtimePath(world) };
+                    const context = {
+                        incident: EExecutionMessageType.FEATURE_END, // Use appropriate incident type
+                        artifact,
+                        tag: wp.getWorld().tag
+                    };
+                    wp.getWorld().logger.log('feature video', context);
+                }
+                // close the context, which closes any pages
+                if (wp.hasFactory) {
+                    await wp.bf?.closeContext(wp.getWorld().tag);
+                }
+                await wp.bf?.close();
+                wp.bf = undefined;
+                wp.hasFactory = false;
+            }
+        }
+        if (wp.monitor === EMonitoringTypes.MONITOR_EACH) {
+            await wp.callClosers();
+            await writeMonitor(wp.world, wp.storage, WebPlaywright.monitorPage);
+        }
+    },
+    async startExecution() {
+        if (wp.monitor === EMonitoringTypes.MONITOR_ALL) {
+            await wp.createMonitor();
+        }
+    },
+    async endExecution() {
+        if (wp.monitor === EMonitoringTypes.MONITOR_ALL) {
+            await wp.callClosers();
+            await writeMonitor(wp.world, wp.storage, WebPlaywright.monitorPage);
+        }
+    },
+});
 class WebPlaywright extends AStepper {
+    cycles = cycles(this);
     static STORAGE = 'STORAGE';
     static PERSISTENT_DIRECTORY = 'PERSISTENT_DIRECTORY';
     requireDomains = [WEB_PAGE, WEB_CONTROL];
     options = {
+        MONITOR: {
+            desc: `display a monitor with ongoing results (${EMonitoringTypes.MONITOR_ALL} or ${EMonitoringTypes.MONITOR_EACH})`,
+            parse: (input) => optionOrError(input, [EMonitoringTypes.MONITOR_ALL, EMonitoringTypes.MONITOR_EACH]),
+        },
         HEADLESS: {
             desc: 'run browsers without a window (true, false)',
             parse: (input) => boolOrError(input),
@@ -21,7 +91,7 @@ class WebPlaywright extends AStepper {
         },
         [WebPlaywright.PERSISTENT_DIRECTORY]: {
             desc: 'run browsers with a persistent directory (true or false)',
-            parse: (input) => boolOrError(input),
+            parse: (input) => stringOrError(input),
         },
         ARGS: {
             desc: 'pass arguments',
@@ -39,6 +109,7 @@ class WebPlaywright extends AStepper {
         [WebPlaywright.STORAGE]: {
             desc: 'Storage for output',
             parse: (input) => stringOrError(input),
+            required: true
         },
     };
     hasFactory = false;
@@ -49,28 +120,43 @@ class WebPlaywright extends AStepper {
     withFrame;
     downloaded = [];
     captureVideo;
+    closers = [];
+    logElementError;
+    monitor;
+    static monitorPage;
+    userAgentPages = {};
+    apiUserAgent;
+    extraHTTPHeaders = {};
+    BROWSER_STATE_PATH = undefined;
+    expectedDownload;
     async setWorld(world, steppers) {
         await super.setWorld(world, steppers);
+        const args = [...(getStepperOption(this, 'ARGS', world.moduleOptions)?.split(';') || ''),]; //'--disable-gpu'
         this.storage = findStepperFromOption(steppers, this, world.moduleOptions, WebPlaywright.STORAGE);
         const headless = getStepperOption(this, 'HEADLESS', world.moduleOptions) === 'true' || !!process.env.CI;
         const devtools = getStepperOption(this, 'DEVTOOLS', world.moduleOptions) === 'true';
-        const args = [...(getStepperOption(this, 'ARGS', world.moduleOptions)?.split(';') || ''), '--disable-gpu'];
-        const persistentDirectory = getStepperOption(this, WebPlaywright.PERSISTENT_DIRECTORY, world.moduleOptions) === 'true';
+        if (devtools) {
+            args.concat(['--auto-open-devtools-for-tabs', '--devtools-flags=panel-network', '--remote-debugging-port=9223']);
+        }
+        this.monitor = getStepperOption(this, 'MONITOR', world.moduleOptions);
+        const persistentDirectory = getStepperOption(this, WebPlaywright.PERSISTENT_DIRECTORY, world.moduleOptions);
         const defaultTimeout = parseInt(getStepperOption(this, 'TIMEOUT', world.moduleOptions)) || 30000;
-        this.captureVideo = getStepperOption(this, 'CAPTURE_VIDEO', world.moduleOptions);
+        this.captureVideo = getStepperOption(this, 'CAPTURE_VIDEO', world.moduleOptions) === 'true';
         let recordVideo;
         if (this.captureVideo) {
             recordVideo = {
-                dir: await this.getCaptureDir('video')
+                dir: await this.getCaptureDir('video'),
             };
         }
+        const launchOptions = {
+            headless,
+            args,
+            devtools,
+        };
         this.factoryOptions = {
-            browser: {
-                headless,
-                args,
-                devtools,
-            },
-            recordVideo,
+            options: { recordVideo, },
+            browserType: BROWSERS.chromium,
+            launchOptions,
             defaultTimeout,
             persistentDirectory,
         };
@@ -82,14 +168,14 @@ class WebPlaywright extends AStepper {
     }
     async getBrowserFactory() {
         if (!this.hasFactory) {
-            this.bf = await BrowserFactory.getBrowserFactory(this.getWorld().logger, this.factoryOptions);
+            this.bf = await BrowserFactory.getBrowserFactory(this.getWorld(), this.factoryOptions);
             this.hasFactory = true;
         }
         return this.bf;
     }
-    async getContext() {
-        const context = (await this.getBrowserFactory()).getExistingContext(this.getWorld().tag);
-        return context;
+    async getExistingBrowserContext(tag = this.getWorld().tag) {
+        const browserContext = (await this.getBrowserFactory()).getExistingBrowserContextWithTag(tag);
+        return browserContext;
     }
     async getPage() {
         const { tag } = this.getWorld();
@@ -108,42 +194,6 @@ class WebPlaywright extends AStepper {
         this.withFrame = undefined;
         return await f(page);
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async onFailure(result, step) {
-        if (this.bf?.hasPage(this.getWorld().tag, this.tab)) {
-            await this.captureFailureScreenshot('failure', 'onFailure', step);
-        }
-    }
-    async endFeature() {
-        // close the context, which closes any pages
-        if (this.hasFactory) {
-            if (this.captureVideo) {
-                const page = await this.getPage();
-                const path = await page.video().path();
-                const artifact = { type: 'video', path };
-                this.getWorld().logger.info('endFeature video', { artifact, topic: { event: 'summary', stage: 'endFeature' }, tag: this.getWorld().tag });
-            }
-            // await this.bf?.closeContext(this.getWorld().tag);
-        }
-    }
-    async close() {
-        // close the context, which closes any pages
-        if (this.hasFactory) {
-            await this.bf?.closeContext(this.getWorld().tag);
-        }
-        for (const file of this.downloaded) {
-            this.getWorld().logger.debug(`removing ${JSON.stringify(file)}`);
-            // rmSync(file);
-        }
-    }
-    // FIXME
-    async finish() {
-        if (this.hasFactory) {
-            await this.bf?.close();
-            this.bf = undefined;
-            this.hasFactory = false;
-        }
-    }
     async sees(text, selector) {
         let textContent = null;
         // FIXME retry sometimes required?
@@ -153,11 +203,27 @@ class WebPlaywright extends AStepper {
                 return OK;
             }
         }
-        const topics = { textContent: { summary: `in ${textContent?.length} characters`, details: textContent } };
-        return actionNotOK(`Did not find text "${text}" in ${selector}`, { topics });
+        const incident = { incident: EExecutionMessageType.ON_FAILURE, incidentDetails: { summary: `in ${textContent?.length} characters`, details: textContent } };
+        return actionNotOK(`Did not find text "${text}" in ${selector}`, incident);
+    }
+    async getCookies() {
+        const browserContext = await this.getExistingBrowserContext();
+        return await browserContext?.cookies();
     }
     steps = {
         ...restSteps(this),
+        openDevTools: {
+            gwta: `open devtools`,
+            action: async () => {
+                await this.withPage(async (page) => {
+                    await page.goto('about:blank');
+                    await sleep(2000);
+                    const targetId = await fetch('http://localhost:9223/json/list');
+                    await page.goto(`devtools://devtools/bundled/inspector.html?ws=localhost:9223/devtools/page/${targetId}&panel=network`);
+                });
+                return OK;
+            },
+        },
         //                                      INPUT
         press: {
             gwta: `press {key}`,
@@ -193,14 +259,14 @@ class WebPlaywright extends AStepper {
             gwta: 'dialog {what} {type} says {value}',
             action: async ({ what, type, value }) => {
                 const cur = this.getWorld().shared.get(what)?.[type];
-                return cur === value ? OK : actionNotOK(`${what} is ${cur}`);
+                return Promise.resolve(cur === value ? OK : actionNotOK(`${what} is ${cur}`));
             },
         },
         dialogIsUnset: {
             gwta: 'dialog {what} {type} not set',
             action: async ({ what, type }) => {
                 const cur = this.getWorld().shared.get(what)?.[type];
-                return !cur ? OK : actionNotOK(`${what} is ${cur}`);
+                return Promise.resolve(!cur ? OK : actionNotOK(`${what} is ${cur}`));
             },
         },
         seeTestId: {
@@ -233,11 +299,25 @@ class WebPlaywright extends AStepper {
                 return actionNotOK(`Did not find ${what}`);
             },
         },
+        createMonitor: {
+            gwta: 'create monitor',
+            action: async () => {
+                await this.createMonitor();
+                return OK;
+            },
+        },
+        finishMonitor: {
+            gwta: 'finish monitor',
+            action: async () => {
+                await writeMonitor(this.world, this.storage, WebPlaywright.monitorPage);
+                return OK;
+            },
+        },
         onNewPage: {
             gwta: `on a new tab`,
             action: async () => {
                 this.newTab();
-                return OK;
+                return Promise.resolve(OK);
             },
         },
         waitForTabX: {
@@ -258,7 +338,7 @@ class WebPlaywright extends AStepper {
             gwta: `on tab {tab}`,
             action: async ({ tab }) => {
                 this.tab = parseInt(tab, 10);
-                return OK;
+                return Promise.resolve(OK);
             },
         },
         beOnPage: {
@@ -277,18 +357,18 @@ class WebPlaywright extends AStepper {
         extensionContext: {
             gwta: `open extension popup for tab {tab}`,
             action: async ({ tab }) => {
-                if (!this.factoryOptions?.persistentDirectory || this.factoryOptions?.browser.headless) {
+                if (!this.factoryOptions?.persistentDirectory || this.factoryOptions?.launchOptions.headless) {
                     throw Error(`extensions require ${WebPlaywright.PERSISTENT_DIRECTORY} and not HEADLESS`);
                 }
-                const context = await this.getContext();
-                if (!context) {
-                    throw Error(`no context`);
+                const browserContext = await this.getExistingBrowserContext();
+                if (!browserContext) {
+                    throw Error(`no browserContext`);
                 }
-                const background = context?.serviceWorkers()[0];
+                const background = browserContext?.serviceWorkers()[0];
                 if (!background) {
                     // background = await context.waitForEvent("serviceworker");
                 }
-                console.debug('background', background, context.serviceWorkers());
+                console.debug('background', background, browserContext.serviceWorkers());
                 const extensionId = background.url().split('/')[2];
                 this.getWorld().shared.set('extensionContext', extensionId);
                 await this.withPage(async (page) => {
@@ -301,10 +381,9 @@ class WebPlaywright extends AStepper {
         cookieIs: {
             gwta: 'cookie {name} is {value}',
             action: async ({ name, value }) => {
-                const context = await this.getContext();
-                const cookies = await context?.cookies();
+                const cookies = await this.getCookies();
                 const found = cookies?.find((c) => c.name === name && c.value === value);
-                return found ? OK : actionNotOK(`did not find cookie ${name} with value ${value}`);
+                return found ? OK : actionNotOK(`did not find cookie ${name} with value ${value} from ${JSON.stringify(cookies)}`);
             },
         },
         URIContains: {
@@ -463,7 +542,12 @@ class WebPlaywright extends AStepper {
                 const response = await this.withPage(async (page) => {
                     return await page.goto(name);
                 });
-                return response?.ok ? OK : actionNotOK(`response not ok`, { topics: { response: { ...response.allHeaders, summary: response.statusText() } } });
+                return response?.ok
+                    ? OK
+                    : actionNotOK(`response not ok`, {
+                        incident: EExecutionMessageType.ACTION,
+                        incidentDetails: { ...response?.allHeaders, summary: response?.statusText() }
+                    });
             },
         },
         reloadPage: {
@@ -483,20 +567,7 @@ class WebPlaywright extends AStepper {
         blur: {
             gwta: 'blur {what}',
             action: async ({ what }) => {
-                await this.withPage(async (page) => await page.locator(what).evaluate(e => e.blur()));
-                return OK;
-            },
-        },
-        pressBack: {
-            gwta: 'press the back button',
-            action: async () => {
-                // FIXME
-                await this.withPage(async (page) => await page.evaluate(() => {
-                    console.debug('going back', globalThis.history);
-                    globalThis.history.go(-1);
-                }));
-                // await page.focus('body');
-                // await page.keyboard.press('Alt+ArrowRight');
+                await this.withPage(async (page) => await page.locator(what).evaluate((e) => e.blur()));
                 return OK;
             },
         },
@@ -504,7 +575,10 @@ class WebPlaywright extends AStepper {
         usingBrowserVar: {
             gwta: 'using {browser} browser',
             action: async ({ browser }) => {
-                return this.setBrowser(browser);
+                if (!BROWSERS[browser]) {
+                    throw Error(`browserType not recognized ${browser} from ${BROWSERS.toString()}`);
+                }
+                return Promise.resolve(this.setBrowser(browser));
             },
         },
         //  FILE DOWNLOAD/UPLOAD
@@ -515,6 +589,49 @@ class WebPlaywright extends AStepper {
                 return OK;
             },
         },
+        waitForFileChooser: {
+            gwta: 'upload file {file} with {selector}',
+            action: async ({ file, selector }) => {
+                try {
+                    await this.withPage(async (page) => {
+                        const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), page.locator('#uploadFile').click()]);
+                        const changeButton = page.locator(selector);
+                        await changeButton.click();
+                        await fileChooser.setFiles(file);
+                    });
+                    return OK;
+                }
+                catch (e) {
+                    return actionNotOK(e);
+                }
+            },
+        },
+        expectDownload: {
+            gwta: 'expect a download',
+            action: async () => {
+                try {
+                    this.expectedDownload = this.withPage(async (page) => page.waitForEvent('download'));
+                    return Promise.resolve(OK);
+                }
+                catch (e) {
+                    return Promise.resolve(actionNotOK(e));
+                }
+            },
+        },
+        receiveDownload: {
+            gwta: 'receive download as {file}',
+            action: async ({ file }) => {
+                try {
+                    const download = await this.expectedDownload;
+                    await await download.saveAs(file);
+                    this.downloaded.push(file);
+                    return OK;
+                }
+                catch (e) {
+                    return actionNotOK(e);
+                }
+            },
+        },
         waitForDownload: {
             gwta: 'save download to {file}',
             action: async ({ file }) => {
@@ -534,29 +651,36 @@ class WebPlaywright extends AStepper {
             gwta: 'with frame {name}',
             action: async ({ name }) => {
                 this.withFrame = name;
-                return OK;
+                return Promise.resolve(OK);
             },
         },
         captureDialog: {
             gwta: 'Accept next dialog to {where}',
             action: async ({ where }) => {
-                await this.withPage(async (page) => page.on('dialog', async (dialog) => {
-                    const res = {
-                        defaultValue: dialog.defaultValue(),
-                        message: dialog.message(),
-                        type: dialog.type(),
-                    };
-                    await dialog.accept();
-                    this.getWorld().shared.set(where, res);
-                }));
-                return OK;
+                await this.withPage(async (page) => {
+                    return page.on('dialog', async (dialog) => {
+                        const res = {
+                            defaultValue: dialog.defaultValue(),
+                            message: dialog.message(),
+                            type: dialog.type(),
+                        };
+                        await dialog.accept();
+                        this.getWorld().shared.set(where, res);
+                    });
+                    return Promise.resolve();
+                });
+                return Promise.resolve(OK);
             },
         },
         takeScreenshot: {
             gwta: 'take a screenshot',
             action: async (notUsed, featureStep) => {
-                await this.captureScreenshot('request', 'action', featureStep);
-                return OK;
+                try {
+                    await this.captureScreenshotAndLog(EExecutionMessageType.ACTION, featureStep);
+                }
+                catch (e) {
+                    return actionNotOK(e);
+                }
             },
         },
         assertOpen: {
@@ -593,24 +717,117 @@ class WebPlaywright extends AStepper {
     newTab() {
         this.tab = this.tab + 1;
     }
-    async captureFailureScreenshot(event, stage, step) {
-        return await this.captureScreenshot(event, stage, { step });
+    async captureFailureScreenshot(event, step) {
+        try {
+            return await this.captureScreenshotAndLog(event, { step });
+        }
+        catch (e) {
+            this.getWorld().logger.debug(`captureFailureScreenshot error ${e}`);
+        }
     }
-    async captureRequestScreenshot(event, stage, seq) {
-        return await this.captureScreenshot(event, stage, { seq });
+    async captureScreenshotAndLog(event, details) {
+        const { context, path } = await this.captureScreenshot(event, details);
+        this.getWorld().logger.log(`${event} screenshot to ${pathToFileURL(path)}`, context);
     }
-    async captureScreenshot(event, stage, details) {
+    async captureScreenshot(event, details) {
         const loc = await this.getCaptureDir('image');
         // FIXME shouldn't be fs dependant
         const path = resolve(this.storage.fromLocation(EMediaTypes.image, loc, `${event}-${Date.now()}.png`));
-        await this.withPage(async (page) => await page.screenshot({
-            path,
-        }));
-        const artifact = Logger.logArtifact({ type: 'picture', path });
-        const artifactTopic = { topic: { ...details, event, stage }, artifact, tag: this.getWorld().tag };
-        this.getWorld().logger.info('screenshot', artifactTopic);
+        await this.withPage(async (page) => await page.screenshot({ path }));
+        const artifact = { artifactType: 'image', path: await this.storage.getRelativePath(path), runtimePath: await this.runtimePath() };
+        const context = {
+            incident: EExecutionMessageType.ACTION,
+            artifact,
+            tag: this.getWorld().tag,
+            incidentDetails: { ...details, event } // Store original topic details if needed
+        };
+        return { context, path };
+    }
+    async setExtraHTTPHeaders(headers) {
+        await this.withPage(async () => {
+            const browserContext = await this.getExistingBrowserContext();
+            await browserContext.setExtraHTTPHeaders(headers);
+            this.extraHTTPHeaders = headers;
+        });
+    }
+    async withPageFetch(endpoint, method = 'get', requestOptions = {}) {
+        const { headers, postData, userAgent } = requestOptions;
+        const ua = userAgent || this.apiUserAgent;
+        const page = await this.getPage();
+        // FIXME Part I this could suffer from race conditions
+        if (ua) {
+            const browserContext = await this.getExistingBrowserContext();
+            const headers = { ...this.extraHTTPHeaders || {}, ...{ 'User-Agent': ua } };
+            await browserContext.setExtraHTTPHeaders(headers);
+        }
+        try {
+            const pageConsoleMessages = [];
+            try {
+                page.on('console', (msg) => {
+                    pageConsoleMessages.push({ type: msg.type(), text: msg.text() });
+                });
+                const ret = await page.evaluate(async ({ endpoint, method, headers, postData }) => {
+                    const fetchOptions = {
+                        method,
+                    };
+                    fetchOptions.headers = headers ? headers : {};
+                    if (postData)
+                        fetchOptions.body = postData;
+                    const response = await fetch(endpoint, fetchOptions);
+                    const capturedResponse = {
+                        status: response.status,
+                        statusText: response.statusText,
+                        headers: Object.fromEntries(response.headers.entries()),
+                        url: response.url,
+                        json: await response.json().catch(() => null),
+                        text: await response.text().catch(() => null),
+                    };
+                    return capturedResponse;
+                }, { endpoint, method, headers, postData });
+                return ret;
+            }
+            catch (e) {
+                throw new Error(`Evaluate fetch error: ${JSON.stringify({ endpoint, method, headers, ua })} : ${e.message}. Page console messages: ${pageConsoleMessages.map(msg => `[${msg.type}] ${msg.text}`).join('; ')}`);
+            }
+        }
+        catch (e) {
+            const ua = userAgent || this.apiUserAgent;
+            throw new Error(`Evaluate fetch error: ${JSON.stringify({ endpoint, method, headers, ua })} : ${e.message}`);
+        }
+        finally {
+            // FIXME Part II this could suffer from race conditions
+            if (ua) {
+                const browserContext = await this.getExistingBrowserContext();
+                await browserContext.setExtraHTTPHeaders(this.extraHTTPHeaders);
+            }
+        }
+    }
+    async callClosers() {
+        if (this.closers) {
+            for (const closer of this.closers) {
+                await closer();
+            }
+        }
+    }
+    createMonitor = async () => {
+        if (WebPlaywright.monitorPage && !WebPlaywright.monitorPage.isClosed()) {
+            console.log("Monitor page already exists.");
+            await WebPlaywright.monitorPage.bringToFront();
+            return OK;
+        }
+        const { monitorPage, subscriber } = await (await createMonitorPageAndSubscriber())(); // Removed runtimePath argument
+        WebPlaywright.monitorPage = monitorPage;
+        this.getWorld().logger.addSubscriber(subscriber);
+        this.closers.push(async () => {
+            console.log("Removing monitor logger subscriber.");
+            this.getWorld().logger.removeSubscriber(subscriber);
+            return Promise.resolve();
+        });
+        return OK;
+    };
+    async runtimePath(world) {
+        return pathToFileURL(await this.storage.getCaptureLocation({ ...(world || this.getWorld()), mediaType: EMediaTypes.html })).pathname;
     }
 }
-;
 export default WebPlaywright;
 //# sourceMappingURL=web-playwright.js.map