@haibun/web-playwright 1.59.0 → 1.60.0

package/build/web-playwright.js

@@ -3,78 +3,27 @@ import { pathToFileURL } from 'url';
 import { OK } from '@haibun/core/build/lib/defs.js';
 import { WEB_PAGE, WEB_CONTROL } from '@haibun/core/build/lib/domain-types.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 { actionNotOK, getStepperOption, boolOrError, intOrError, stringOrError, findStepperFromOption, optionOrError } from '@haibun/core/build/lib/util/index.js';
 import { EExecutionMessageType } from '@haibun/core/build/lib/interfaces/logger.js';
 import { EMediaTypes } from '@haibun/domain-storage/build/media-types.js';
-import { restSteps } from './rest-playwright.js';
 import { MonitorHandler } from './monitor/MonitorHandler.js';
-import { rmSync } from 'fs';
 import { AStepper } from '@haibun/core/build/lib/astepper.js';
+import { cycles } from './cycles.js';
+import { interactionSteps } from './interactionSteps.js';
+import { restSteps } from './rest-playwright.js';
+/**
+ * This is the infrastructure for web-playwright.
+ *
+ * @see {@link interactionSteps} for interaction steps
+ * @see {@link restSteps} for rest steps
+ */
 export const LAST_REST_RESPONSE = 'LAST_REST_RESPONSE';
 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 }) {
-        // 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);
-                wp.downloaded = [];
-            }
-            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 };
-                    const context = {
-                        incident: EExecutionMessageType.FEATURE_END,
-                        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 WebPlaywright.monitorHandler.writeMonitor();
-        }
-    },
-    async startExecution() {
-        if (wp.monitor === EMonitoringTypes.MONITOR_ALL) {
-            await wp.createMonitor();
-        }
-    },
-    async endExecution() {
-        if (wp.monitor === EMonitoringTypes.MONITOR_ALL) {
-            await wp.callClosers();
-            await WebPlaywright.monitorHandler.writeMonitor();
-        }
-    },
-});
-class WebPlaywright extends AStepper {
+export class WebPlaywright extends AStepper {
     cycles = cycles(this);
     static STORAGE = 'STORAGE';
     static PERSISTENT_DIRECTORY = 'PERSISTENT_DIRECTORY';
@@ -124,13 +73,10 @@ class WebPlaywright extends AStepper {
     downloaded = [];
     captureVideo;
     closers = [];
-    logElementError;
     monitor;
     static monitorHandler;
-    userAgentPages = {};
     apiUserAgent;
     extraHTTPHeaders = {};
-    BROWSER_STATE_PATH = undefined;
     expectedDownload;
     headless;
     async setWorld(world, steppers) {
@@ -216,512 +162,7 @@ class WebPlaywright extends AStepper {
     }
     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}`,
-            action: async ({ key }) => {
-                await this.withPage(async (page) => await page.keyboard.press(key));
-                return OK;
-            },
-        },
-        type: {
-            gwta: `type {text}`,
-            action: async ({ text }) => {
-                await this.withPage(async (page) => await page.keyboard.type(text));
-                return OK;
-            },
-        },
-        inputVariable: {
-            gwta: `input {what} for {field}`,
-            action: async ({ what, field }) => {
-                await this.withPage(async (page) => await page.locator(field).fill(what));
-                return OK;
-            },
-        },
-        selectionOption: {
-            gwta: `select {option} for {field: ${WEB_CONTROL}}`,
-            action: async ({ option, field }) => {
-                await this.withPage(async (page) => await page.selectOption(field, { label: option }));
-                // FIXME have to use id value
-                return OK;
-            },
-        },
-        //                ASSERTIONS
-        dialogIs: {
-            gwta: 'dialog {what} {type} says {value}',
-            action: async ({ what, type, value }) => {
-                const cur = this.getWorld().shared.get(what)?.[type];
-                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 Promise.resolve(!cur ? OK : actionNotOK(`${what} is ${cur}`));
-            },
-        },
-        seeTestId: {
-            gwta: 'has test id {testId}',
-            action: async ({ testId }) => {
-                const found = await this.withPage(async (page) => await page.getByTestId(testId));
-                return found ? OK : actionNotOK(`Did not find test id ${testId}`);
-            },
-        },
-        seeTextIn: {
-            gwta: 'in {selector}, see {text}',
-            action: async ({ text, selector }) => {
-                return await this.sees(text, selector);
-            },
-        },
-        seeText: {
-            gwta: 'see {text}',
-            action: async ({ text }) => {
-                return await this.sees(text, 'body');
-            },
-        },
-        waitFor: {
-            gwta: 'wait for {what}',
-            action: async ({ what }) => {
-                const selector = what.match(/^[.#]/) ? what : `text=${what}`;
-                const found = await this.withPage(async (page) => await page.waitForSelector(selector));
-                if (found) {
-                    return OK;
-                }
-                return actionNotOK(`Did not find ${what}`);
-            },
-        },
-        createMonitor: {
-            gwta: 'create monitor',
-            action: async () => {
-                await this.createMonitor();
-                return OK;
-            },
-        },
-        finishMonitor: {
-            gwta: 'finish monitor',
-            action: async () => {
-                await WebPlaywright.monitorHandler.writeMonitor();
-                return OK;
-            },
-        },
-        onNewPage: {
-            gwta: `on a new tab`,
-            action: async () => {
-                this.newTab();
-                return Promise.resolve(OK);
-            },
-        },
-        waitForTabX: {
-            gwta: `pause until current tab is {tab}`,
-            action: async ({ tab }) => {
-                const waitForTab = parseInt(tab, 10);
-                let timedOut = false;
-                setTimeout(() => {
-                    timedOut = true;
-                }, 5000);
-                while (this.tab !== waitForTab && !timedOut) {
-                    await sleep(100);
-                }
-                return this.tab === waitForTab ? OK : actionNotOK(`current tab is ${this.tab}, not ${waitForTab}`);
-            },
-        },
-        onTabX: {
-            gwta: `on tab {tab}`,
-            action: async ({ tab }) => {
-                this.tab = parseInt(tab, 10);
-                return Promise.resolve(OK);
-            },
-        },
-        beOnPage: {
-            gwta: `be on the {name} ${WEB_PAGE}`,
-            action: async ({ name }) => {
-                const nowon = await this.withPage(async (page) => {
-                    await page.waitForURL(name);
-                    return page.url();
-                });
-                if (nowon === name) {
-                    return OK;
-                }
-                return actionNotOK(`expected ${name} but on ${nowon}`);
-            },
-        },
-        extensionContext: {
-            gwta: `open extension popup for tab {tab}`,
-            action: async ({ tab }) => {
-                if (!this.factoryOptions?.persistentDirectory || this.factoryOptions?.launchOptions.headless) {
-                    throw Error(`extensions require ${WebPlaywright.PERSISTENT_DIRECTORY} and not HEADLESS`);
-                }
-                const browserContext = await this.getExistingBrowserContext();
-                if (!browserContext) {
-                    throw Error(`no browserContext`);
-                }
-                const background = browserContext?.serviceWorkers()[0];
-                if (!background) {
-                    // background = await context.waitForEvent("serviceworker");
-                }
-                console.debug('background', background, browserContext.serviceWorkers());
-                const extensionId = background.url().split('/')[2];
-                this.getWorld().shared.set('extensionContext', extensionId);
-                await this.withPage(async (page) => {
-                    const popupURI = `chrome-extension://${extensionId}/popup.html?${tab}`;
-                    return await page.goto(popupURI);
-                });
-                return OK;
-            },
-        },
-        cookieIs: {
-            gwta: 'cookie {name} is {value}',
-            action: async ({ name, value }) => {
-                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} from ${JSON.stringify(cookies)}`);
-            },
-        },
-        URIContains: {
-            gwta: 'URI includes {what}',
-            action: async ({ what }) => {
-                const uri = await this.withPage(async (page) => await page.url());
-                return uri.includes(what) ? OK : actionNotOK(`current URI ${uri} does not contain ${what}`);
-            },
-        },
-        URIQueryParameterIs: {
-            gwta: 'URI query parameter {what} is {value}',
-            action: async ({ what, value }) => {
-                const uri = await this.withPage(async (page) => await page.url());
-                const found = new URL(uri).searchParams.get(what);
-                if (found === value) {
-                    return OK;
-                }
-                return actionNotOK(`URI query ${what} contains "${found}"", not "${value}""`);
-            },
-        },
-        URIStartsWith: {
-            gwta: 'URI starts with {start}',
-            action: async ({ start }) => {
-                const uri = await this.withPage(async (page) => await page.url());
-                return uri.startsWith(start) ? OK : actionNotOK(`current URI ${uri} does not start with ${start}`);
-            },
-        },
-        URIMatches: {
-            gwta: 'URI matches {what}',
-            action: async ({ what }) => {
-                const uri = await this.withPage(async (page) => await page.url());
-                return uri.match(what) ? OK : actionNotOK(`current URI ${uri} does not match ${what}`);
-            },
-        },
-        caseInsensitiveURIMatches: {
-            gwta: 'URI case insensitively matches {what}',
-            action: async ({ what }) => {
-                const uri = await this.withPage(async (page) => await page.url());
-                const matcher = new RegExp(what, 'i');
-                return uri.match(matcher) ? OK : actionNotOK(`current URI ${uri} does not match ${what}`);
-            },
-        },
-        //                  CLICK
-        clickByAltText: {
-            gwta: 'click by alt text {altText}',
-            action: async ({ altText }) => {
-                await this.withPage(async (page) => await page.getByAltText(altText).click());
-                return OK;
-            },
-        },
-        clickByTestId: {
-            gwta: 'click by test id {testId}',
-            action: async ({ testId }) => {
-                await this.withPage(async (page) => await page.getByTestId(testId).click());
-                return OK;
-            },
-        },
-        clickByPlaceholder: {
-            gwta: 'click by placeholder {placeholder}',
-            action: async ({ placeholder }) => {
-                await this.withPage(async (page) => await page.getByPlaceholder(placeholder).click());
-                return OK;
-            },
-        },
-        clickByRole: {
-            gwta: 'click by role {roleStr}',
-            action: async ({ roleStr }) => {
-                const [role, ...restStr] = roleStr.split(' ');
-                let rest;
-                try {
-                    rest = JSON.parse(restStr.join(' '));
-                }
-                catch (e) {
-                    return actionNotOK(`could not parse role ${roleStr} as JSON: ${e}`);
-                }
-                await this.withPage(async (page) => await page.getByRole(role, rest || {}).click());
-                return OK;
-            },
-        },
-        clickByLabel: {
-            gwta: 'click by label {label}',
-            action: async ({ title: label }) => {
-                await this.withPage(async (page) => await page.getByLabel(label).click());
-                return OK;
-            },
-        },
-        clickByTitle: {
-            gwta: 'click by title {title}',
-            action: async ({ title }) => {
-                await this.withPage(async (page) => await page.getByTitle(title).click());
-                return OK;
-            },
-        },
-        clickByText: {
-            gwta: 'click by text {text}',
-            action: async ({ text }) => {
-                await this.withPage(async (page) => await page.getByText(text).click());
-                return OK;
-            },
-        },
-        clickOn: {
-            gwta: 'click on (?<name>.[^s]+)',
-            action: async ({ name }) => {
-                const what = this.getWorld().shared.get(name) || `text=${name}`;
-                await this.withPage(async (page) => await page.click(what));
-                return OK;
-            },
-        },
-        clickCheckbox: {
-            gwta: 'click the checkbox (?<name>.+)',
-            action: async ({ name }) => {
-                const what = this.getWorld().shared.get(name) || name;
-                this.getWorld().logger.log(`click ${name} ${what}`);
-                await this.withPage(async (page) => await page.click(what));
-                return OK;
-            },
-        },
-        clickShared: {
-            gwta: 'click `(?<id>.+)`',
-            action: async ({ id }) => {
-                const name = this.getWorld().shared.get(id);
-                await this.withPage(async (page) => await page.click(name));
-                return OK;
-            },
-        },
-        clickQuoted: {
-            gwta: 'click "(?<name>.+)"',
-            action: async ({ name }) => {
-                await this.withPage(async (page) => await page.click(`text=${name}`));
-                return OK;
-            },
-        },
-        clickLink: {
-            // TODO: generalize modifier
-            gwta: 'click( with alt)? the link {name}',
-            action: async ({ name }, featureStep) => {
-                const modifier = featureStep.in.match(/ with alt /) ? { modifiers: ['Alt'] } : {};
-                const field = this.getWorld().shared.get(name) || name;
-                await this.withPage(async (page) => await page.click(field, modifier));
-                return OK;
-            },
-        },
-        clickButton: {
-            gwta: 'click the button (?<id>.+)',
-            action: async ({ id }) => {
-                const field = this.getWorld().shared.get(id) || id;
-                await this.withPage(async (page) => await page.click(field));
-                return OK;
-            },
-        },
-        //                          NAVIGATION
-        // formerly On the {name} ${WEB_PAGE}
-        gotoPage: {
-            gwta: `go to the {name} ${WEB_PAGE}`,
-            action: async ({ name }) => {
-                const response = await this.withPage(async (page) => {
-                    return await page.goto(name);
-                });
-                const messageContext = {
-                    incident: EExecutionMessageType.ACTION,
-                    incidentDetails: { ...response?.allHeaders, summary: response?.statusText() }
-                };
-                return response?.ok ? OK : actionNotOK(`response not ok`, { messageContext });
-            },
-        },
-        reloadPage: {
-            gwta: 'reload page',
-            action: async () => {
-                await this.withPage(async (page) => await page.reload());
-                return OK;
-            },
-        },
-        goBack: {
-            gwta: 'go back',
-            action: async () => {
-                await this.withPage(async (page) => await page.goBack());
-                return OK;
-            },
-        },
-        blur: {
-            gwta: 'blur {what}',
-            action: async ({ what }) => {
-                await this.withPage(async (page) => await page.locator(what).evaluate((e) => e.blur()));
-                return OK;
-            },
-        },
-        //                         BROWSER
-        usingBrowserVar: {
-            gwta: 'using {browser} browser',
-            action: async ({ browser }) => {
-                if (!BROWSERS[browser]) {
-                    throw Error(`browserType not recognized ${browser} from ${BROWSERS.toString()}`);
-                }
-                return Promise.resolve(this.setBrowser(browser));
-            },
-        },
-        //  FILE DOWNLOAD/UPLOAD
-        uploadFile: {
-            gwta: 'upload file {file} using {selector}',
-            action: async ({ file, selector }) => {
-                await this.withPage(async (page) => await page.setInputFiles(selector, file));
-                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 download.saveAs(file);
-                    this.downloaded.push(file);
-                    return OK;
-                }
-                catch (e) {
-                    return actionNotOK(e);
-                }
-            },
-        },
-        waitForDownload: {
-            gwta: 'save download to {file}',
-            action: async ({ file }) => {
-                try {
-                    const download = await this.withPage(async (page) => page.waitForEvent('download'));
-                    await download.saveAs(file);
-                    this.downloaded.push(file);
-                    return OK;
-                }
-                catch (e) {
-                    return actionNotOK(e);
-                }
-            },
-        },
-        //                          MISC
-        withFrame: {
-            gwta: 'with frame {name}',
-            action: async ({ name }) => {
-                this.withFrame = name;
-                return Promise.resolve(OK);
-            },
-        },
-        captureDialog: {
-            gwta: 'Accept next dialog to {where}',
-            action: async ({ where }) => {
-                await this.withPage((page) => {
-                    return page.on('dialog', async (dialog) => {
-                        const res = {
-                            defaultValue: dialog.defaultValue(),
-                            message: dialog.message(),
-                            type: dialog.type(),
-                        };
-                        await dialog.accept();
-                        this.getWorld().shared.setJSON(where, res);
-                    });
-                });
-                return Promise.resolve(OK);
-            },
-        },
-        takeScreenshot: {
-            gwta: 'take a screenshot',
-            action: async (notUsed, featureStep) => {
-                try {
-                    await this.captureScreenshotAndLog(EExecutionMessageType.ACTION, featureStep);
-                    return OK;
-                }
-                catch (e) {
-                    return actionNotOK(e);
-                }
-            },
-        },
-        assertOpen: {
-            gwta: '{what} is expanded with the {using}',
-            action: async ({ what, using }) => {
-                const isVisible = await this.withPage(async (page) => await page.isVisible(what));
-                if (!isVisible) {
-                    await this.withPage(async (page) => await page.click(using));
-                }
-                return OK;
-            },
-        },
-        setToURIQueryParameter: {
-            gwta: 'save URI query parameter {what} to {where}',
-            action: async ({ what, where }) => {
-                const uri = await this.withPage(async (page) => await page.url());
-                const found = new URL(uri).searchParams.get(what);
-                this.getWorld().shared.set(where, found);
-                return OK;
-            },
-        },
-        resizeWindow: {
-            gwta: 'resize window to {width}x{height}',
-            action: async ({ width, height }) => {
-                await this.withPage(async (page) => await page.setViewportSize({ width: parseInt(width), height: parseInt(height) }));
-                return OK;
-            },
-        },
-        resizeAvailable: {
-            gwta: 'resize window to largest dimensions',
-            action: async () => {
-                await this.withPage(async (page) => {
-                    const { availHeight: height, availWidth: width } = await page.evaluate(() => ({ availHeight: window.screen.availHeight, availWidth: window.screen.availWidth }));
-                    return await page.setViewportSize({ width, height });
-                });
-                return OK;
-            },
-        },
+        ...interactionSteps(this),
     };
     setBrowser(browser) {
         this.factoryOptions.type = browser;