fix: added waitForElement step and pierceSelector

Author: pgagnidze

src/OwloopsStringifyExtension.ts

@@ -3,6 +3,7 @@ import {
   Schema,
   StringifyExtension,
   StepType,
+  WaitForElementStep,
 } from "@puppeteer/replay";
 
 import {
@@ -53,6 +54,8 @@ export class OwloopsStringifyExtension extends StringifyExtension {
         return this.#appendKeyDownStep(out, step);
       case StepType.Hover:
         return this.#appendHoverStep(out, step, flow);
+      case StepType.WaitForElement:
+        return this.#appendWaitForElementStep(out, step, flow);
     }
   }
 
@@ -65,6 +68,7 @@ export class OwloopsStringifyExtension extends StringifyExtension {
     const ariaSelector = ariaSelectors(step.selectors);
     const xpathSelector = xpathSelectors(step.selectors);
     const textSelector = textSelectors(step.selectors);
+    const pierceSelector = pierceSelectors(step.selectors);
 
     if (cySelector) {
       const props = [];
@@ -81,6 +85,9 @@ export class OwloopsStringifyExtension extends StringifyExtension {
       if (textSelector) {
         props.push(["textSelector", textSelector]);
       }
+      if (pierceSelector) {
+        props.push(["pierceSelector", pierceSelector]);
+      }
       formatOwlJson(out, "input", props);
     }
 
@@ -97,6 +104,7 @@ export class OwloopsStringifyExtension extends StringifyExtension {
     const ariaSelector = ariaSelectors(step.selectors);
     const xpathSelector = xpathSelectors(step.selectors);
     const textSelector = textSelectors(step.selectors);
+    const pierceSelector = pierceSelectors(step.selectors);
 
     const props = [];
     props.push(["querySelector", cySelector]);
@@ -111,6 +119,9 @@ export class OwloopsStringifyExtension extends StringifyExtension {
     if (textSelector) {
       props.push(["textSelector", textSelector]);
     }
+    if (pierceSelector) {
+      props.push(["pierceSelector", pierceSelector]);
+    }
     if (step.offsetX) {
       props.push(["offsetX", step.offsetX]);
     }
@@ -137,6 +148,7 @@ export class OwloopsStringifyExtension extends StringifyExtension {
     const ariaSelector = ariaSelectors(step.selectors);
     const xpathSelector = xpathSelectors(step.selectors);
     const textSelector = textSelectors(step.selectors);
+    const pierceSelector = pierceSelectors(step.selectors);
 
     const props = [];
     props.push(["querySelector", cySelector]);
@@ -151,6 +163,9 @@ export class OwloopsStringifyExtension extends StringifyExtension {
     if (textSelector) {
       props.push(["textSelector", textSelector]);
     }
+    if (pierceSelector) {
+      props.push(["pierceSelector", pierceSelector]);
+    }
     if (step.offsetX) {
       props.push(["offsetX", step.offsetX]);
     }
@@ -183,6 +198,27 @@ export class OwloopsStringifyExtension extends StringifyExtension {
     out.appendLine("");
   }
 
+  #appendWaitForElementStep(out: LineWriter, step: WaitForElementStep, flow: Schema.UserFlow): void {
+    const cySelector = handleSelectorsForWaitForElementStep(step.selectors as any, flow);
+    const props = [];
+    props.push(["for", `"querySelector"`]);
+    props.push(["querySelector", cySelector]);
+    if (cySelector) {
+      formatOwlJson(out, "wait", props);
+    } else {
+      console.log(
+        `Warning: The click on ${step.selectors[0]} was not able to be exported to Owloops. Please adjust your selectors and try again.`
+      );
+    }
+
+    out.appendLine("");
+    // out.appendLine(
+    //   `await waitForElement(${formatJSONAsJS(step, out.getIndent())}, ${
+    //     step.frame ? 'frame' : 'targetPage'
+    //   }, timeout);`
+    // );
+  }
+
   #appendKeyDownStep(out: LineWriter, step: Schema.KeyDownStep): void {
     const pressedKey = step.key.toLowerCase() as SupportedRecorderKeysKeys;
 
@@ -245,6 +281,14 @@ function filterArrayByString(selectors: Schema.Selector[], value: string) {
   );
 }
 
+function filterArrayByStringForWaitForElementStep(selectors: string[], value: string) {
+  return selectors.filter((selector) =>
+    value === "aria/"
+      ? !selector.includes(value)
+      : selector.includes(value)
+  );
+}
+
 function handleSelectors(
   selectors: Schema.Selector[],
   flow?: Schema.UserFlow
@@ -267,6 +311,30 @@ function handleSelectors(
   }
 }
 
+function handleSelectorsForWaitForElementStep(
+  selectors: string[],
+  flow?: Schema.UserFlow
+): string | undefined {
+  // Remove Aria selectors in favor of DOM selectors
+  const nonAriaSelectors = filterArrayByStringForWaitForElementStep(selectors, "aria/");
+
+  let preferredSelector;
+
+  // Give preference to user-specified selectors
+  if (flow?.selectorAttribute) {
+    preferredSelector = filterArrayByStringForWaitForElementStep(
+      nonAriaSelectors,
+      flow.selectorAttribute
+    );
+  }
+
+  if (preferredSelector && preferredSelector.length > 0) {
+    return formatAsJSLiteral(preferredSelector[0]);
+  } else {
+    return formatAsJSLiteral(nonAriaSelectors[0]);
+  }
+}
+
 function ariaSelectors(selectors: Schema.Selector[]): string | undefined {
   const ariaSelectors = selectors.filter((selector) =>
     selector[0].includes("aria/")
@@ -300,6 +368,17 @@ function textSelectors(selectors: Schema.Selector[]): string | undefined {
   return textSelector;
 }
 
+function pierceSelectors(selectors: Schema.Selector[]): string | undefined {
+  const pierceSelectors = selectors.filter((selector) =>
+    selector[0].includes("pierce/")
+  );
+  let pierceSelector;
+  if (pierceSelectors.length > 0) {
+    pierceSelector = formatAsJSLiteral(pierceSelectors[0][0]);
+  }
+  return pierceSelector;
+}
+
 function assertAllValidStepTypesAreHandled(step: Schema.Step): void {
   console.log(
     `Warning: Owloops does not currently handle migrating steps of type: ${step.type}. Please check the output to see how this might affect your test.`

src/test.ts

@@ -0,0 +1,5 @@
+import { owloopsStringifyChromeRecording } from "./main.js";
+
+const stringifiedFile = await owloopsStringifyChromeRecording(JSON.stringify({"title":"Recording 12/16/2023 at 1:39:01 AM","steps":[{"type":"setViewport","width":1374,"height":294,"deviceScaleFactor":1,"isMobile":false,"hasTouch":false,"isLandscape":false},{"type":"navigate","url":"https://duckduckgo.com/","assertedEvents":[{"type":"navigation","url":"https://duckduckgo.com/","title":"DuckDuckGo — Privacy, simplified."}]},{"type":"change","value":"owloops","selectors":[["#searchbox_input"],["xpath///*[@id=\"searchbox_input\"]"],["pierce/#searchbox_input"]],"target":"main"},{"type":"click","target":"main","selectors":[["button.searchbox_searchButton__F5Bwq"],["xpath///*[@id=\"searchbox_homepage\"]/div[1]/div/button[2]"],["pierce/button.searchbox_searchButton__F5Bwq"]],"offsetY":22.56818389892578,"offsetX":8.1448974609375,"assertedEvents":[{"type":"navigation","url":"https://duckduckgo.com/?hps=1&q=owloops&atb=v298-1","title":""}]},{"type":"waitForElement","target":"main","selectors":["li:nth-of-type(1) div.ikg2IXiCD14iVX7AdZo1 span","xpath///*[@data-testid=\"result-title-a\"]/span","pierce/li:nth-of-type(1) div.ikg2IXiCD14iVX7AdZo1 span"]}]}));
+
+console.log(stringifiedFile);

test/OwloopsStringifyExtension_test.ts

@@ -145,6 +145,25 @@ describe("OwloopsStringifyExtension", function () {
     );
   });
 
+  it("correctly exports Chrome Recorder waitForElement step", async function () {
+    const step = {
+      type: StepType.WaitForElement as const,
+      selectors: [
+        'li:nth-of-type(1) div.ikg2IXiCD14iVX7AdZo1 span',
+        'xpath///*[@data-testid="result-title-a"]/span',
+        'pierce/li:nth-of-type(1) div.ikg2IXiCD14iVX7AdZo1 span'
+      ],
+    };
+    const result = await stringifyStep(step, {
+      extension,
+    });
+
+    assert.equal(
+      result.toString(),
+      `{\n\"action\": \"wait\",\n\"options\": {\n\"for\": "querySelector",\n\"querySelector\": "li:nth-of-type(1) div.ikg2IXiCD14iVX7AdZo1 span",\n}\n},\n\n`
+    );
+  });
+
   it("correctly exports Chrome Recorder change step", async function () {
     const step = {
       type: StepType.Change as const,