Revert "cleanup"

This reverts commit c5f7391.

Author: michaelgoeke

README.md

@@ -1,3 +1,28 @@
+### v2.0.59
+* added basic support for #16 `Support 'global' page object` and #3 `support nested page object models`
+
+### v2.0.57
+* updated readme, recorded demo video
+
+### v2.0.56
+* cli command fix
+
+### v2.0.53
+* Display currently executing lines of code in repl on-screen
+* fix many issues after page navigation (tool only worked for SPAs previously)
+* changed (broken) postinstall to cli command `npx @dnvgl/playwright-live-recorder`
+
+### v2.0.52
+* UI rework
+* Now aware of Page Object Model helper methods
+
+### v2.0.48
+* Live code execution method much simplified and much more robust (todo: write tech doc about this)
+* bugfix: Make page object model tools build correct paths on non-windows filesystems
+
+----
+
+
 ![Playwright live recorder infographic](docs/playwright-live-recorder-infographic.png "Playwright live recorder infographic")
 
 

package.json

@@ -35,7 +35,7 @@
     "lodash": "^4.17.21",
     "ts-morph": "^16.0.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.8.3"
+    "typescript": "^4.8.2"
   },
   "packageManager": "yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
 }

src/main.ts

@@ -9,8 +9,9 @@ import { testFileWriter } from "./testFileWriter";
 import { hotModuleReload } from "./hotModuleReload";
 import { pageObjectModel } from "./pageObjectModel";
 import { getTestCallingLocation } from "./utility";
+import fs from 'fs/promises';
 import process from 'node:process';
-import { pathToFileURL } from 'node:url';
+import { ts } from "ts-morph";
 import { PlaywrightLiveRecorderConfig, PlaywrightLiveRecorderConfigFile, PlaywrightLiveRecorderConfig_recorder, PlaywrightLiveRecorderConfig_pageObjectModel, PlaywrightLiveRecorderConfig_diagnostic, TestCallingLocation } from "./types";
 export { PlaywrightLiveRecorderConfig, PlaywrightLiveRecorderConfigFile, PlaywrightLiveRecorderConfig_recorder, PlaywrightLiveRecorderConfig_pageObjectModel, PlaywrightLiveRecorderConfig_diagnostic, TestCallingLocation };
 
@@ -165,7 +166,7 @@ export class ${className} {
             await page.addScriptTag({ path: config.recorder.path });
             await page.addScriptTag({ path: config.diagnostic.browserCodeJSPath });
             await page.addStyleTag({ path: config.diagnostic.browserCodeCSSPath });
-            await pageObjectModel.reloadAll(page);
+            await pageObjectModel.reloadAll(config.pageObjectModel.path, page);
         });
 
         page.on('dialog', dialog => {/* allow user interaction for browser input dialog interaction */ });
@@ -183,15 +184,25 @@ export class ${className} {
 
     export let configFilePath = './live-recorder.config.ts';
     export async function _configFromFile() {
+        //todo - try rewriting to use dynamic import instead
         try {
-            const cacheBustedUrl = `${pathToFileURL(nodePath.resolve(configFilePath)).href}?t=${Date.now()}`;
-            return (await import(cacheBustedUrl)).default as PlaywrightLiveRecorderConfig | undefined;
-        } catch (err: any) {
-            if (err.code === 'ERR_MODULE_NOT_FOUND' || err.code === 'MODULE_NOT_FOUND') return;
-            console.error('Error loading config file:', err);
+            const fileContents = await fs.readFile(configFilePath, { encoding: 'utf8' });
+            const transpiled = ts.transpileModule(fileContents, { compilerOptions: { module: ts.ModuleKind.ESNext, strict: false } });
+            const cleanedUp = _cleanUpTranspiledSource(transpiled.outputText);
+            const obj = eval(cleanedUp);
+            return <PlaywrightLiveRecorderConfig | undefined>obj;
+        } catch (err) {
+            if ((<any>err).code === 'MODULE_NOT_FOUND') return;
+            console.error(err);
         }
     }
 
+    function _cleanUpTranspiledSource(transpiled: string) {
+        return transpiled
+            .replaceAll(/\bimport\b\s*({?\s*[^};]+}?)\s*from\s*([^;]*);?/g, '')
+            .replace('export default ', '');
+    }
+
 
 
 

src/pageObjectModel.ts

@@ -179,7 +179,7 @@ export module pageObjectModel {
     function classNameFromPath(path: string) { return /([^/]+).ts/.exec(path)![1]; }
     function fullRelativePath(path: string, config: { path: string }) { return nodePath.normalize(nodePath.join(config.path, path)); }
 
-    export async function reloadAll(page: Page) {
+    export async function reloadAll(configPath: string, page: Page) {
         if (!currentPageFilePath) return;
         await reload(page);
     }

src/types.d.ts

@@ -49,27 +49,26 @@ export type PlaywrightLiveRecorderConfig_pageObjectModel = {
     /**
      * @remarks use to override/alias url fragments to page object model name
      * @example { '': 'home', 'login/corporate' : 'login', 'login/personal' : 'login' } //redirect from root address to 'home' pom. use same pom for login/corporate and login/personal
-     * @default {}
     */    aliases: {[key: string]: string},
     /** @remarks Use this to find list of all selectors, and lookup method from selector @default /(.+)_selector\b/*/
     propertySelectorRegex: RegExp,
     /** @remarks Use this to find list of nested page objects within a given page object model file @default /(.+)_page\b/*/
     propertyNestedTypeRegex: RegExp,
-    /** @remarks Use this to specify the text appended when LEFT clicked on in record mode @default [ ['input[type="text"], input[type=""], textarea', 'await $1.fill("");'], ['*', 'await $1.click();'] ] */
+    /** @remarks Use this to specify the text appended when LEFT clicked on in record mode @default [ ["input[type="text"]", 'fill()'], ["textarea", 'fill()'], ["/.*\/", "click()"] ] */
     primaryActionByCssSelector: [string, string][],
-    /** @remarks Use this to specify the text appended when RIGHT clicked on in record mode @default [ ['input[type="text"], textarea', 'await expect($1.innerText()).toContain("");'], ['*', 'await expect($1.innerText()).toContain("");'], ['*', 'await expect($1).toBeVisible();'], ['*', 'await expect($1).toBeEnabled();'] ]*/
+    /** @remarks Use this to specify the text appended when RIGHT clicked on in record mode @default [ ["input[type="text"]", "await expect($1.innerText()).toContain('')"], ["textarea", "innerText().toContain('')"], ["/.*\/", ""]]*/
     secondaryActionByCssSelector: [string, string][],
     /** @default (className) => 
-    `import type { Page } from '@playwright/test';
+    `import { Page } from "@playwright/test";
 
-export class ${className} {
+    export class ${className} {
 
-}`,
+    }`,
     */
     generateClassTemplate: (className: string) => string,
     /** @default  (name, selector) => 
     `    private static ${name}_selector = \`${selector}\`;\r\n` + 
-    `    static ${name}(page: Page) { return page.locator(this.${name}_selector); }\r\n\r\n`,
+    `    static ${name}(page: Page) { return page.locator(\`this.${name}_selector\`); }\r\n\r\n`,
     */
     generatePropertyTemplate: (name: string, selector: string) => string,
 
@@ -81,42 +80,14 @@ export class ${className} {
         /** @default 'salmon' */
         color: string,
         /** @default (el, color) => {
-            if (el.getAttribute('data-background') == null) el.setAttribute('data-background', el.style.background);
-            el.style.background = color ?? 'salmon';
+            el.setAttribute('data-background', el.style.background);
+            el.style.background = color;
         },
         */
         on: (el: HTMLElement, color: string) => void,
         /** @default (el) => el.style.background = el.getAttribute('data-background') ?? '', */
         off: (el: HTMLElement) => void,
     },
-    /** @default `data:text/javascript,
-                import { promises as fs } from 'fs';
-                import { fileURLToPath } from 'url';
-                
-                const resolvedFilenames = new Set();
-                
-                export async function resolve(specifier, context, nextResolve) {
-                  const resolved = await nextResolve(specifier, context);
-                  if (!resolved.url.endsWith('.ts')) return resolved;
-                
-                  const urlFilename = fileURLToPath(resolved.url);
-                  const modifyMs = await fs.stat(urlFilename).then(stat => Math.floor(stat.mtimeMs));
-                  resolved.url = resolved.url.replace(/.ts$/, '.cachebust.' + modifyMs + '.ts');
-                  return resolved;
-                }
-                
-                export async function load(url, context, nextLoad) {
-                  const original = url.replace(/\\.cachebust\\.\\d+.ts$/, '.ts');
-                  if (original === url || resolvedFilenames.has(url)) return await nextLoad(url, context);
-                  const urlFilename = fileURLToPath(url);
-                  const originalFilename = fileURLToPath(original);
-                  await fs.copyFile(originalFilename, urlFilename);
-                  const result = await nextLoad(url, context);
-                  await fs.rm(urlFilename);
-                  resolvedFilenames.add(url);
-                  return result;
-                }
-                ` */
     importerCustomizationHooks: string,
 }
 

yarn.lock

@@ -2091,10 +2091,10 @@ tsutils@^2.29.0:
   dependencies:
     tslib "^1.8.1"
 
-typescript@^5.8.3:
-  version "5.8.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.8.3.tgz#92f8a3e5e3cf497356f4178c34cd65a7f5e8440e"
-  integrity sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==
+typescript@^4.8.2:
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.2.tgz#e3b33d5ccfb5914e4eeab6699cf208adee3fd790"
+  integrity sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw==
 
 undici-types@~6.20.0:
   version "6.20.0"