promptfoo--promptfoo/examples/integration-browser/headless/calculator-example.yaml

# yaml-language-server: $schema=https://promptfoo.dev/config-schema.json
description: 'Calculator demo for browser automation'

prompts:
  - 'Calculate {{num1}} {{operation}} {{num2}}'

providers:
  - id: browser
    config:
      headless: false # See the browser in action
      steps:
        # Navigate to the demo
        - action: navigate
          args:
            url: 'http://localhost:7860'

        # Wait for initial page load
        - action: wait
          args:
            ms: 3000

        # Navigate to calculator tab
        - action: click
          args:
            selector: 'button[role="tab"]:nth-child(2)'

        # Wait for tab to load
        - action: wait
          args:
            ms: 2000

        # Enter numbers and perform calculation
        - action: type
          args:
            selector: '#num1 input'
            text: '{{num1}}'

        - action: type
          args:
            selector: '#num2 input'
            text: '{{num2}}'

        # Select operation
        - action: click
          args:
            selector: '{{operationSelector}}'

        # Perform calculation
        - action: click
          args:
            selector: '#calculate'

        # Wait for calculation
        - action: wait
          args:
            ms: 2000

        # Extract entire result area for debugging
        - action: extract
          args:
            selector: '#result'
          name: resultArea

      # For demo purposes, we'll just check that we got something
      transformResponse: 'extracted.resultArea && extracted.resultArea.includes("Result") ? "Calculator interaction successful" : "No result found"'

# Simple demo tests
tests:
  - vars:
      num1: '10'
      num2: '5'
      operation: Add
      operationSelector: '#operation label:nth-child(1)'
    assert:
      - type: contains
        value: 'successful'

  - vars:
      num1: '20'
      num2: '4'
      operation: Multiply
      operationSelector: '#operation label:nth-child(3)'
    assert:
      - type: contains
        value: 'successful'