I'm trying to run a test against a tool with an embedded form. I'm using css data selectors for the form input and elements, it works for the initial search; however, it timesout for future follow-ups despite the form field existing on the page. This is my browser config:

yaml

  - id: browser
    label: search-copilot
    config:
      persistSession: true
      connectOptions:
        debuggingPort: 9222 
      steps:
        # Wait before navigating to look more like a human
        - action: wait
          runOnce: true
          args:
            ms: 2000
        # Navigate to the search copilot page
        - action: navigate
          runOnce: true
          args:
            url: https://<REDACTED>/analytics/search
        # Wait for the page to load
        - action: wait
          runOnce: true
          args:
            ms: 5000
        # Type the prompt into the search copilot input
        - action: type
          args:
            selector: 'div[data-test-id="search-copilot-input"]'
            text: '{{prompt}}<enter>'
            delay: 100
        # Wait for the new chat entry to appear
        - action: wait
          args:
            ms: 1000 # Wait for the new chat entry to appear
        - action: waitForNewChildren
          args:
            parentSelector: 'div[data-test-id="search-copilot-latest-chat-entry"]'
            delay: 500 # Check every 500ms
            timeout: 30000 # Max wait time 30 seconds
        # Extract the text from the new chat entry and store it in the response variable
        - action: extract
          args:
            script: |
              const entry = document.querySelector('div[data-test-id="search-copilot-latest-chat-entry"]');

              if (!entry) {
                console.warn('Latest chat entry not found');
              } else {
                // Heuristic: paragraphs that appear in the main content stack (first block of p.MuiTypography-root after the title span)
                // 1) Find the title span (user prompt) within the entry
                const title = entry.querySelector('span.MuiTypography-root');

                // 2) From the title’s next siblings, find the first block that contains paragraph typography
                let contentRoot = null;
                for (let el = title?.parentElement?.nextElementSibling; el; el = el.nextElementSibling) {
                  const candidate = el.querySelector('p.MuiTypography-root');
                  if (candidate) {
                    contentRoot = el;
                    break;
                  }
                }

                const paras = contentRoot
                  ? Array.from(contentRoot.querySelectorAll('p.MuiTypography-root'))
                  : [];

                const paragraphs = paras.map(p => p.textContent.trim());
                const fullText = paragraphs.join('\n\n');

                return fullText || '';
              }
          name: aiResponse
        - action: wait
          args:
            ms: 1000
        - action: screenshot
          args:
            path: 'debug-{{sessionId}}-{{_attempt}}.png'
        - action: wait
          args:
            ms: 2000
    delay: 3000
    transformResponse: 'extracted.aiResponse'

The timeout error is:

text
Timeout waiting for selector: div[data-test-id="search-copilot-input"]

But the element is visible on the page when the timeout error presents. I'm not sure what I'm doing wrong or how to get it to recognize the input box repopulating on the page after the mui stream completes