Playwright MCP with Jev

1.txt

// Input
1. Click americano and expresso
2. Check item in cart should = 2
3. Proceed to checkout with user=somkiat and email=somkiat@example.com
4. Check user=somkiat and email=somkiat@example.com in the checkout form

// Output
Extracted 8 task(s) from instruction: [
  { instruction: 'Click the americano item', fillValue: null },
  { instruction: 'Click the expresso item', fillValue: null },
  {
    instruction: 'Check that the item count in cart equals 2',
    fillValue: null
  },
  {
    instruction: 'Click the proceed to checkout button',
    fillValue: null
  },
  {
    instruction: "Fill in the user field with 'somkiat'",
    fillValue: 'somkiat'
  },
  {
    instruction: "Fill in the email field with 'somkiat@example.com'",
    fillValue: 'somkiat@example.com'
  },
  {
    instruction: "Check that the user field in the checkout form equals 'somkiat'",
    fillValue: null
  },
  {
    instruction: "Check that the email field in the checkout form equals 'somkiat@example.com'",
    fillValue: null
  }
]
 Task 1: Click the americano item
 Task 2: Click the expresso item
 Task 3: Check that the item count in cart equals 2
 Task 4: Click the proceed to checkout button
 Task 5: Fill in the user field with 'somkiat' (fillValue: "somkiat")
 Task 6: Fill in the email field with 'somkiat@example.com' (fillValue: "somkiat@example.com")
 Task 7: Check that the user field in the checkout form equals 'somkiat'
 Task 8: Check that the email field in the checkout form equals 'somkiat@example.com'

2.js

const { answers } = await this.jev.systemOne({
  state: `Instruction: ${testInstruction}\nAccessibility Snapshot:\n${accessibilityTree}`,
  questions: {
    isPageReady: noul(
      "Has the page finished loading, with no visible loading spinners?"
    ),
    blockingOverlay: noul(
      "Is a modal, popup, or consent banner blocking interaction with the page?"
    ),
    action: choice("What immediate UI action should be taken?", {
      CLICK: "Click an element",
      FILL: "Type text into an input",
      WAIT: "Wait for the page to settle before acting",
      ASSERT_SUCCESS: "The instruction's expected outcome is already satisfied",
      ASSERT_FAILURE: "The instruction's expected outcome has failed",
      REASON_WITH_LLM: "Too ambiguous for a fast decision; needs deeper reasoning",
    }),
    targetElement: choice("Which element ref should be acted on, if any?", {
      NONE: "No specific element needs to be acted on",
      ...elementRefs,
    }),
  },
});

2.txt

- generic [ref=e2]:
  - list [ref=e3]:
    - listitem [ref=e4]:
      - link "Menu page" [ref=e5] [cursor=pointer]:
        - /url: /coffee/
        - text: menu
    - listitem [ref=e6]:
      - link "Cart page" [ref=e7] [cursor=pointer]:
        - /url: /coffee/cart
        - text: cart (0)
    - listitem [ref=e8]:
      - link "GitHub page" [ref=e9] [cursor=pointer]:
        - /url: /coffee/github
        - text: github
  - generic [ref=e10]:
    - list [ref=e11]:
      - listitem [ref=e12]:
        - heading "Espresso $10.00" [level=4] [ref=e13]
        - generic "Espresso" [ref=e16]: espresso
      - listitem [ref=e18]:
        - heading "Espresso Macchiato $12.00" [level=4] [ref=e19]
        - generic "Espresso Macchiato" [ref=e22] [cursor=pointer]:
          - generic: espresso
          - generic: milk foam
      - listitem [ref=e24]:
        - heading "Cappuccino $19.00" [level=4] [ref=e25]
        - generic "Cappuccino" [ref=e28]:
          - generic: espresso
          - generic: steamed milk
          - generic: milk foam
      - listitem [ref=e30]:
        - heading "Mocha $8.00" [level=4] [ref=e31]
        - generic "Mocha" [ref=e34]:
          - generic: espresso
          - generic: chocolate syrup
          - generic: steamed milk
          - generic: whipped cream
      - listitem [ref=e36]:
        - heading "Flat White $18.00" [level=4] [ref=e37]
        - generic "Flat White" [ref=e40]:
          - generic: espresso
          - generic: steamed milk
      - listitem [ref=e42]:
        - heading "Americano $7.00" [level=4] [ref=e43]
        - generic "Americano" [ref=e46]:
          - generic: espresso
          - generic: water
      - listitem [ref=e48]:
        - heading "Cafe Latte $16.00" [level=4] [ref=e49]
        - generic "Cafe Latte" [ref=e52]:
          - generic: espresso
          - generic: steamed milk
          - generic: milk foam
      - listitem [ref=e54]:
        - heading "Espresso Con Panna $14.00" [level=4] [ref=e55]
        - generic "Espresso Con Panna" [ref=e58]:
          - generic: espresso
          - generic: whipped cream
      - listitem [ref=e60]:
        - heading "Cafe Breve $15.00" [level=4] [ref=e61]
        - generic "Cafe Breve" [ref=e64]:
          - generic: espresso
          - generic: steamed milk
          - generic: steamed cream
          - generic: milk foam
    - button "Proceed to checkout" [ref=e67]: "Total: $0.00"

3.js

if (
  decision.confidenceScore >= 0.80 &&
  decision.isPageReady &&
  !decision.blockingOverlayDetected
) {
  switch (decision.actionType) {
    case "CLICK":
      if (decision.targetSelector) {
        const clickResult = await this.mcpClient.callTool({
          name: "browser_click",
          arguments: {
            element: elementRefs[decision.targetSelector] ?? decision.targetSelector,
            target: decision.targetSelector,
          },
        });

        if (clickResult.isError) {
          console.error(
            `Click on ${decision.targetSelector} failed: ${JSON.stringify(clickResult.content)}`
          );
          return "FALLBACK";
        }
        return "DONE";
      }
      break;
      ...
  }
}