refactor(e2e): replace with cy-ai

https://www.npmjs.com/package/cy-ai

Author: remarkablemark

README.md

@@ -2,7 +2,7 @@
 
 [![cypress](https://github.com/ai-action/cypress-ai-demo/actions/workflows/cypress.yml/badge.svg)](https://github.com/ai-action/cypress-ai-demo/actions/workflows/cypress.yml)
 
-[Cypress](https://www.cypress.io/) AI Demo.
+[Cypress AI](https://github.com/ai-action/cy-ai) demo.
 
 ## Prerequisites
 
@@ -35,13 +35,13 @@ npm install
 
 ## Run
 
-Start Ollama:
+Start Ollama server:
 
 ```sh
 ollama serve
 ```
 
-Download [model](https://ollama.com/library/qwen2.5-coder):
+Download the [LLM](https://ollama.com/library/qwen2.5-coder):
 
 ```sh
 ollama pull qwen2.5-coder

cypress/e2e/__generated__/home.cy.ts.json …ess/e2e/__generated__/example.cy.ts.jsoncypress/e2e/__generated__/home.cy.ts.json renamed to cypress/e2e/__generated__/example.cy.ts.json cypress/e2e/__generated__/home.cy.ts.json renamed to cypress/e2e/__generated__/example.cy.ts.json

@@ -1,5 +1,5 @@
-describe('template spec', () => {
-  it('passes', () => {
+describe('example.cypress.io', () => {
+  it('submits form', () => {
     cy.ai('go to example.cypress.io and see heading "Kitchen Sink"');
     cy.ai('click on "Commands" nav dropdown and click on link "Actions"');
     cy.ai('find label "Coupon Code" and type "HALFOFF" in text field');

cypress/e2e/home.cy.ts cypress/e2e/example.cy.tscypress/e2e/home.cy.ts renamed to cypress/e2e/example.cy.ts

@@ -36,119 +36,4 @@
 //   }
 // }
 
-import { PromptTemplate } from '@langchain/core/prompts';
-import { Ollama } from '@langchain/ollama';
-import { sanitize } from 'dompurify';
-import { resolve } from 'path';
-
-const llm = new Ollama({
-  model: 'qwen2.5-coder',
-  numCtx: 16384, // truncating input prompt limit=4096
-});
-
-const template = `
-You're a QA engineer writing an E2E test step with Cypress
-
-Rules:
-1. Return raw JavaScript code with "cy" commands without "describe" and "it"
-2. Write the minimum number of "cy" commands
-3. Don't perform an action or assertion unless the element is visible in the DOM
-4. Prefer locating with text or accessible label
-5. Ensure selectors are unique and specific enough to select 1 element
-
-Task: {task}
-
-DOM:
-\`\`\`html
-{html}
-\`\`\`
-`;
-
-const prompt = PromptTemplate.fromTemplate(template.trim());
-const chain = prompt.pipe(llm);
-
-function minutesToMilliseconds(minutes: number) {
-  return 1000 * 60 * minutes;
-}
-
-function getGeneratedFilePath(): string {
-  return resolve(
-    Cypress.spec.absolute,
-    `../__generated__/${Cypress.spec.name}.json`,
-  );
-}
-
-const noop = () => {};
-
-function readGeneratedFile() {
-  return cy.readFile(getGeneratedFilePath(), { log: false }).should(noop);
-}
-
-function getTestKey(): string {
-  return Cypress.currentTest.titlePath.join(' ');
-}
-
-function saveGeneratedCode(task: string, code: string) {
-  readGeneratedFile().then((contents) => {
-    contents = contents || {};
-
-    const key = getTestKey();
-    contents[key] = contents[key] || {};
-    contents[key][task] = code;
-
-    cy.writeFile(getGeneratedFilePath(), JSON.stringify(contents, null, 2), {
-      log: false,
-    });
-  });
-}
-
-Cypress.Commands.add('ai', (task) => {
-  Cypress.log({ displayName: 'ai', message: task });
-
-  return readGeneratedFile().then((json) => {
-    try {
-      const code = json[getTestKey()][task];
-
-      if (code) {
-        return eval(code);
-      }
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-empty
-    } catch (error) {}
-
-    cy.document({ log: false }).then(
-      { timeout: minutesToMilliseconds(2) },
-      async (doc) => {
-        const response = await chain.invoke({
-          task,
-          // html: sanitize(doc.documentElement.outerHTML),
-          html: sanitize(doc.body.innerHTML),
-        });
-        // console.log(response)
-
-        const error = "I'm sorry, but I can't assist with that request.";
-        if (response.includes(error)) {
-          throw new Error(error);
-        }
-
-        const code = response
-          .match(/```(javascript|js)?([\s\S]+?)```/)?.[2]
-          ?.trim();
-        if (code) {
-          eval(code);
-          saveGeneratedCode(task, code);
-        }
-      },
-    );
-  });
-});
-
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace Cypress {
-    interface Chainable {
-      ai(task: string): Chainable<void>;
-    }
-  }
-}
-
-export {};
+import 'cy-ai';

cypress/support/commands.ts

@@ -12,10 +12,8 @@
     "test": "cypress run"
   },
   "dependencies": {
-    "@langchain/core": "0.3.57",
-    "@langchain/ollama": "0.2.0",
-    "cypress": "14.4.0",
-    "dompurify": "3.2.6"
+    "cy-ai": "0.5.0",
+    "cypress": "14.4.0"
   },
   "devDependencies": {
     "@commitlint/cli": "19.8.1",