Test email-subscription form

packages/drivers/puppeteer/examples/__pilot_cache__/emailComponent.test.json

@@ -0,0 +1,107 @@
+{
+  "{\"goal\":\"Open https://qatestrafal.wixsite.com/website-27/post/_demo and inspect **only** the email-subscription form on the page.\\n    This form has two possible versions: a broken one and a fixed one. Your task is to determine which version is currently displayed.\\n    Carefully examine the layout of the form. If you notice **any** of the following issues, assume it is the broken version:\\n    - Overlapping elements\\n    - Broken floats\\n    - Misalignment\\n    - Text that is unreadable, clipped, or poorly contrasted\\n    If you determine that the displayed version is broken, throw an error to fail the test.\\n    If the form looks visually correct (none of the issues above are present), do nothing and allow the test to pass.\",\"previousSteps\":[]}": [
+    {
+      "value": {
+        "screenDescription": "Initial Navigation State",
+        "plan": {
+          "action": "Navigate to https://qatestrafal.wixsite.com/website-27/post/_demo",
+          "thoughts": "Based on the goal, I need to *start by navigating to the specified URL* to inspect the email subscription form. Since there's currently **no active page** or view hierarchy visible, the first step is clearly to ***open the provided URL*** in the browser. This will allow us to access the page containing the form that needs to be inspected for potential visual issues."
+        },
+        "review": {},
+        "goalAchieved": false
+      },
+      "snapshotHashes": {
+        "ViewHierarchyHash": "3fec3b8808ef6d176aca23d3ad4e312a"
+      },
+      "creationTime": 1748242024124
+    }
+  ],
+  "{\"currentStep\":\"Navigate to https://qatestrafal.wixsite.com/website-27/post/_demo\",\"previousSteps\":[]}": [
+    {
+      "value": {
+        "code": "const browser = await puppeteer.launch({ \n    headless: false, \n    executablePath: \"/Users/lironsh/.cache/puppeteer/chrome/mac_arm-127.0.6533.88/chrome-mac-arm64/Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing\",\n    defaultViewport: null,\n    args: ['--start-maximized']\n});\nconst page = await browser.newPage();\nsetCurrentPage(page);\nawait page.goto('https://qatestrafal.wixsite.com/website-27/post/_demo');"
+      },
+      "creationTime": 1748242034744
+    }
+  ],
+  "{\"goal\":\"Open https://qatestrafal.wixsite.com/website-27/post/_demo and inspect **only** the email-subscription form on the page.\\n    This form has two possible versions: a broken one and a fixed one. Your task is to determine which version is currently displayed.\\n    Carefully examine the layout of the form. If you notice **any** of the following issues, assume it is the broken version:\\n    - Overlapping elements\\n    - Broken floats\\n    - Misalignment\\n    - Text that is unreadable, clipped, or poorly contrasted\\n    If you determine that the displayed version is broken, throw an error to fail the test.\\n    If the form looks visually correct (none of the issues above are present), do nothing and allow the test to pass.\",\"previousSteps\":[{\"screenDescription\":\"Initial Navigation State\",\"step\":\"Navigate to https://qatestrafal.wixsite.com/website-27/post/_demo\",\"review\":{}}]}": [
+    {
+      "value": {
+        "screenDescription": "Blog Post Page with Email Subscription Form",
+        "plan": {
+          "action": "error: Email subscription form displays broken layout with overlapping elements and misaligned components",
+          "thoughts": "I can see the email subscription form in the view hierarchy located on the right side of the blog post. Analyzing the form layout:\n\n***Layout Assessment:***\n- The email input field is overlapping with the submit button, creating a clear visual misalignment\n- The text \"Sí, suscríbeme a tu \" appears to be clipped or incomplete\n- The checkbox and its associated label text are not properly aligned\n- The email field's position interferes with other form elements\n\n**Issues Detected:**\n- *Overlapping elements* between form components\n- *Broken layout* with misaligned elements\n- *Clipped text* in the subscription confirmation message\n\nBased on the goal criteria, the presence of these layout issues indicates this is the ***broken version*** of the form, which should trigger a test failure."
+        },
+        "review": {},
+        "goalAchieved": false
+      },
+      "snapshotHashes": {
+        "BlockHash": "00000000fffffffff387f387f007f387ff87ff87ff87ff87ff87ff87ff87ff87",
+        "ViewHierarchyHash": "65fc8f288da8483ede978be5c446068a"
+      },
+      "creationTime": 1748242056607
+    }
+  ],
+  "{\"currentStep\":\"error: Email subscription form displays broken layout with overlapping elements and misaligned components\",\"previousSteps\":[{\"step\":\"Navigate to https://qatestrafal.wixsite.com/website-27/post/_demo\",\"code\":\"const browser = await puppeteer.launch({ \\n    headless: false, \\n    executablePath: \\\"/Users/lironsh/.cache/puppeteer/chrome/mac_arm-127.0.6533.88/chrome-mac-arm64/Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing\\\",\\n    defaultViewport: null,\\n    args: ['--start-maximized']\\n});\\nconst page = await browser.newPage();\\nsetCurrentPage(page);\\nawait page.goto('https://qatestrafal.wixsite.com/website-27/post/_demo');\"}]}": [
+    {
+      "value": {
+        "code": "const page = getCurrentPage();\n\n// Get the elements' bounding boxes\nconst emailInputBox = await emailInput.boundingBox();\nconst subscribeButtonBox = await subscribeButton.boundingBox();\nconst checkboxLabelBox = await checkboxLabel.boundingBox();\n\n// Validate layout issues\nif (emailInputBox && subscribeButtonBox && checkboxLabelBox) {\n    // Check for overlapping elements\n    const hasOverlap = (emailInputBox.y + emailInputBox.height > subscribeButtonBox.y) ||\n                      (checkboxLabelBox.y + checkboxLabelBox.height > subscribeButtonBox.y);\n                      \n    // Check for misalignment\n    const isNotAligned = Math.abs(emailInputBox.x - checkboxLabelBox.x) > 5 || // Allow 5px tolerance\n                        Math.abs(emailInputBox.width - checkboxLabelBox.width) > 10; // Allow 10px tolerance\n\n    if (hasOverlap || isNotAligned) {\n        throw new Error(\"Email subscription form layout is broken: Elements are overlapping and/or misaligned. Expected proper vertical spacing and consistent alignment between form elements.\");\n    }\n} else {\n    throw new Error(\"Unable to validate form layout - one or more elements are not visible\");\n}"
+      },
+      "validationMatcher": "const page = getCurrentPage();\nconst emailInput = await findElement(page, {\"class\": \"sL6G4EC  has-custom-focus\", \"aria-label\": \"Email\"}) ?? (() => { throw new Error('Email input not found'); })();\nconst subscribeButton = await findElement(page, {\"text\": \"Suscribirse\", \"class\": \"sVzjav9 sYwr5dA sGiRrcQ oQPZuzZ---paddingMode-16-explicitPaddings\"}) ?? (() => { throw new Error('Subscribe button not found'); })();\nconst checkboxLabel = await findElement(page, {\"class\": \"sM0fWZE s__9E6smh oI2E5n1---verticalAlignment-6-center\"}) ?? (() => { throw new Error('Checkbox label not found'); })();",
+      "creationTime": 1748242083661
+    }
+  ],
+  "{\"currentStep\":\"error: Email subscription form displays broken layout with overlapping elements and misaligned components\",\"previousSteps\":[{\"step\":\"Navigate to https://qatestrafal.wixsite.com/website-27/post/_demo\",\"code\":\"const browser = await puppeteer.launch({ \\n    headless: false, \\n    executablePath: \\\"/Users/lironsh/.cache/puppeteer/chrome/mac_arm-127.0.6533.88/chrome-mac-arm64/Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing\\\",\\n    defaultViewport: null,\\n    args: ['--start-maximized']\\n});\\nconst page = await browser.newPage();\\nsetCurrentPage(page);\\nawait page.goto('https://qatestrafal.wixsite.com/website-27/post/_demo');\"},{\"step\":\"error: Email subscription form displays broken layout with overlapping elements and misaligned components\",\"code\":\"const page = getCurrentPage();\\n\\n// Get the elements' bounding boxes\\nconst emailInputBox = await emailInput.boundingBox();\\nconst subscribeButtonBox = await subscribeButton.boundingBox();\\nconst checkboxLabelBox = await checkboxLabel.boundingBox();\\n\\n// Validate layout issues\\nif (emailInputBox && subscribeButtonBox && checkboxLabelBox) {\\n    // Check for overlapping elements\\n    const hasOverlap = (emailInputBox.y + emailInputBox.height > subscribeButtonBox.y) ||\\n                      (checkboxLabelBox.y + checkboxLabelBox.height > subscribeButtonBox.y);\\n                      \\n    // Check for misalignment\\n    const isNotAligned = Math.abs(emailInputBox.x - checkboxLabelBox.x) > 5 || // Allow 5px tolerance\\n                        Math.abs(emailInputBox.width - checkboxLabelBox.width) > 10; // Allow 10px tolerance\\n\\n    if (hasOverlap || isNotAligned) {\\n        throw new Error(\\\"Email subscription form layout is broken: Elements are overlapping and/or misaligned. Expected proper vertical spacing and consistent alignment between form elements.\\\");\\n    }\\n} else {\\n    throw new Error(\\\"Unable to validate form layout - one or more elements are not visible\\\");\\n}\",\"error\":\"emailInput is not defined\"}]}": [
+    {
+      "value": {
+        "code": "const page = getCurrentPage();\n\n// Get elements' bounding boxes\nconst emailBox = await page.evaluate(el => {\n    const rect = el.getBoundingClientRect();\n    return {x: rect.x, y: rect.y, width: rect.width, height: rect.height};\n}, emailInput);\n\nconst buttonBox = await page.evaluate(el => {\n    const rect = el.getBoundingClientRect();\n    return {x: rect.x, y: rect.y, width: rect.width, height: rect.height};\n}, subscribeButton);\n\nconst labelBox = await page.evaluate(el => {\n    const rect = el.getBoundingClientRect();\n    return {x: rect.x, y: rect.y, width: rect.width, height: rect.height};\n}, checkboxLabel);\n\n// Check for overlapping elements\nconst hasOverlap = (emailBox.y + emailBox.height > labelBox.y) || \n                  (labelBox.y + labelBox.height > buttonBox.y);\n\n// Check for misalignment (elements should be aligned within 5px tolerance)\nconst isNotAligned = Math.abs(emailBox.x - labelBox.x) > 5;\n\nif (hasOverlap || isNotAligned) {\n    throw new Error(\"Email subscription form layout is broken: Elements are overlapping and/or misaligned. Form elements should have proper vertical spacing and consistent horizontal alignment.\");\n}"
+      },
+      "validationMatcher": "const page = getCurrentPage();\nconst emailInput = await findElement(page, {\"class\": \"sL6G4EC  has-custom-focus\", \"data-category\": \"input\", \"data-index\": \"1\"}) ?? (() => { throw new Error('Email input not found'); })();\nconst subscribeButton = await findElement(page, {\"text\": \"Suscribirse\", \"class\": \"sVzjav9 sYwr5dA sGiRrcQ oQPZuzZ---paddingMode-16-explicitPaddings\"}) ?? (() => { throw new Error('Subscribe button not found'); })();\nconst checkboxLabel = await findElement(page, {\"class\": \"sM0fWZE s__9E6smh oI2E5n1---verticalAlignment-6-center\"}) ?? (() => { throw new Error('Checkbox label not found'); })();",
+      "creationTime": 1748242109120
+    }
+  ],
+  "{\"goal\":\"Open https://qatestrafal.wixsite.com/polishblogdemo/post/_demo and inspect **only** the email-subscription form on the page.\\n    This form has two possible versions: a broken one and a fixed one. Your task is to determine which version is currently displayed.\\n    Carefully examine the layout of the form. If you notice **any** of the following issues, assume it is the broken version:\\n    - Overlapping elements\\n    - Broken floats\\n    - Misalignment\\n    - Text that is unreadable, clipped, or poorly contrasted\\n    If you determine that the displayed version is broken, throw an error to fail the test.\\n    If the form looks visually correct (none of the issues above are present), do nothing and allow the test to pass.\",\"previousSteps\":[]}": [
+    {
+      "value": {
+        "screenDescription": "Initial Navigation State",
+        "plan": {
+          "action": "Navigate to https://qatestrafal.wixsite.com/polishblogdemo/post/_demo",
+          "thoughts": "Based on the goal, I need to *navigate to the specific URL* first to inspect the email subscription form. Since there's no active page shown in the view hierarchy, the **first step** must be to ***open the specified URL***. This will allow us to access the page containing the form that needs to be inspected for potential visual issues."
+        },
+        "review": {},
+        "goalAchieved": false
+      },
+      "snapshotHashes": {
+        "ViewHierarchyHash": "3fec3b8808ef6d176aca23d3ad4e312a"
+      },
+      "creationTime": 1748242136218
+    }
+  ],
+  "{\"currentStep\":\"Navigate to https://qatestrafal.wixsite.com/polishblogdemo/post/_demo\",\"previousSteps\":[]}": [
+    {
+      "value": {
+        "code": "const browser = await puppeteer.launch({ \n  headless: false, \n  executablePath: \"/Users/lironsh/.cache/puppeteer/chrome/mac_arm-127.0.6533.88/chrome-mac-arm64/Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing\",\n  defaultViewport: null,\n  args: ['--start-maximized']\n});\nconst page = await browser.newPage();\nsetCurrentPage(page);\nawait page.goto('https://qatestrafal.wixsite.com/polishblogdemo/post/_demo');"
+      },
+      "creationTime": 1748242141154
+    }
+  ],
+  "{\"goal\":\"Open https://qatestrafal.wixsite.com/polishblogdemo/post/_demo and inspect **only** the email-subscription form on the page.\\n    This form has two possible versions: a broken one and a fixed one. Your task is to determine which version is currently displayed.\\n    Carefully examine the layout of the form. If you notice **any** of the following issues, assume it is the broken version:\\n    - Overlapping elements\\n    - Broken floats\\n    - Misalignment\\n    - Text that is unreadable, clipped, or poorly contrasted\\n    If you determine that the displayed version is broken, throw an error to fail the test.\\n    If the form looks visually correct (none of the issues above are present), do nothing and allow the test to pass.\",\"previousSteps\":[{\"screenDescription\":\"Initial Navigation State\",\"step\":\"Navigate to https://qatestrafal.wixsite.com/polishblogdemo/post/_demo\",\"review\":{}}]}": [
+    {
+      "value": {
+        "screenDescription": "Blog Post Page with Email Subscription Form",
+        "plan": {
+          "action": "success",
+          "thoughts": "I've located the *email subscription form* on the page. Looking at the form's structure and layout:\n\n**Form Location**: The subscription form is positioned in the right sidebar under ***\"Recibe todas las entradas\"*** heading.\n\n**Form Elements Analysis**:\n1. Email input field is *properly aligned* and has clear spacing\n2. \"Suscribirse\" button is *correctly positioned* below the input\n3. Text elements are *readable and well-contrasted*\n4. No signs of *overlapping elements* or *broken floats*\n5. All elements maintain *proper alignment* and spacing\n\nAfter careful inspection of the form's visual presentation and structure through the view hierarchy, I can confirm that:\n- The form elements are ***properly aligned***\n- There are ***no overlapping components***\n- The text is ***clearly readable***\n- The layout is ***structurally sound***\n\nThis appears to be the *fixed version* of the form since none of the specified issues (overlapping elements, broken floats, misalignment, or text problems) are present."
+        },
+        "review": {},
+        "goalAchieved": true,
+        "summary": "The email subscription form has been ***successfully inspected*** and verified to be the *fixed version*. The form shows **proper alignment**, **clear text**, and **correct spacing** between all elements. No visual or structural issues were detected that would indicate this is the broken version."
+      },
+      "snapshotHashes": {
+        "BlockHash": "00000000fffffffff3bff387f007f387ff87ff87ff87ff87ff87ff87ff87ff87",
+        "ViewHierarchyHash": "a0086501a27d90715dab597a34fb62f3"
+      },
+      "creationTime": 1748242165481
+    }
+  ]
+}

packages/drivers/puppeteer/examples/emailComponent.test.ts

@@ -0,0 +1,65 @@
+import { Pilot } from "@wix-pilot/core";
+import puppeteer from "puppeteer";
+import * as puppeteerCore from "puppeteer-core";
+import { PromptHandler } from "../utils/promptHandler";
+import { PuppeteerFrameworkDriver } from "../index";
+import { AutoReviewSectionConfig } from "@wix-pilot/core/dist/types";
+
+describe("Example Test Suite", () => {
+  jest.setTimeout(300000);
+
+  let frameworkDriver: PuppeteerFrameworkDriver;
+  let pilot: Pilot;
+
+  beforeAll(async () => {
+    const promptHandler: PromptHandler = new PromptHandler();
+    frameworkDriver = new PuppeteerFrameworkDriver(puppeteer.executablePath());
+
+    pilot = new Pilot({
+      frameworkDriver,
+      promptHandler,
+    });
+  });
+
+  afterAll(async () => {
+    await (frameworkDriver.getCurrentPage() as puppeteerCore.Page)
+      ?.browser()
+      .close();
+  });
+
+  beforeEach(async () => {
+    pilot.start();
+  });
+
+  afterEach(async () => {
+    pilot.end();
+  });
+
+  it("test new version", async () => {
+    await pilot.autopilot(
+        `Open https://qatestrafal.wixsite.com/website-27/post/_demo and inspect **only** the email-subscription form on the page.
+    This form has two possible versions: a broken one and a fixed one. Your task is to determine which version is currently displayed.
+    Carefully examine the layout of the form. If you notice **any** of the following issues, assume it is the broken version:
+    - Overlapping elements
+    - Broken floats
+    - Misalignment
+    - Text that is unreadable, clipped, or poorly contrasted
+    If you determine that the displayed version is broken, throw an error to fail the test.
+    If the form looks visually correct (none of the issues above are present), do nothing and allow the test to pass.`,
+    );
+  });
+
+  it("test old version", async () => {
+    await pilot.autopilot(
+        `Open https://qatestrafal.wixsite.com/polishblogdemo/post/_demo and inspect **only** the email-subscription form on the page.
+    This form has two possible versions: a broken one and a fixed one. Your task is to determine which version is currently displayed.
+    Carefully examine the layout of the form. If you notice **any** of the following issues, assume it is the broken version:
+    - Overlapping elements
+    - Broken floats
+    - Misalignment
+    - Text that is unreadable, clipped, or poorly contrasted
+    If you determine that the displayed version is broken, throw an error to fail the test.
+    If the form looks visually correct (none of the issues above are present), do nothing and allow the test to pass.`,
+    );
+  });
+});

packages/drivers/puppeteer/utils/promptHandler.ts

@@ -39,10 +39,10 @@ export class PromptHandler {
     if (!imagePath) {
       try {
         const response: AxiosResponse<RunPromptResponseData> = await axios.post(
-          "https://bo.wix.com/mobile-infra-ai-services/v1/prompt",
+          "https://bo.wix.com/mobile-infra-ai-services/v2/prompt",
           {
             prompt,
-            model: "SONNET_3_5",
+            model: "SONNET_4_0",
             ownershipTag: "Detox OSS",
             project: "Detox OSS",
             images: [],