Clarify script generation guidelines for UI-only interactions

[DeDuckProject]

Summary

Updated the script generation prompt to provide clearer guidance on how generated Playwright scripts should interact with applications, emphasizing user-like behavior through the UI only.

Key Changes

• Added explicit instruction to act as a real user and only interact through the UI using standard Playwright actions (navigate, click, type, hover)
• Added prohibition against code injection methods (page.evaluate, page.addInitScript, inline <script>/<style> tags) to prevent scripts from simulating application features
• Clarified that the recording infrastructure handles visual overlays, so scripts should not attempt to inject them

Details

These changes reinforce best practices for generated test/demo scripts by ensuring they:

1. Mimic real user behavior rather than programmatic manipulation
2. Avoid brittle implementation-dependent code injection
3. Rely on the platform's built-in capabilities for visual enhancements

https://claude.ai/code/session_01UQthhi9Ez6uoif4UVAb1sL

[github-actions]

🎬 UI Demo Preview

Changes detected in: packages/core/src/generator/prompts.ts

What changed: No visible UI changes were made. This diff updates internal prompt instructions for the script generator, restricting it to real user interactions via Playwright and prohibiting code injection into the page.

Demo script (auto-generated)

import type { Page } from '@playwright/test';

export async function demo(page: Page): Promise<void> {
  await page.goto('http://localhost:3000', { waitUntil: 'networkidle' });
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(1500);

  // Look for a diff or code input area and fill it with a sample diff
  const diffInput = page.locator('textarea').first();
  await diffInput.click();
  await diffInput.fill(`diff --git a/src/button.tsx b/src/button.tsx
index 1234567..abcdefg 100644
--- a/src/button.tsx
+++ b/src/button.tsx
@@ -1,5 +1,10 @@
 export function Button({ label }: { label: string }) {
-  return <button>{label}</button>;
+  return (
+    <button
+      className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+      onClick={() => console.log('clicked')}
+    >
+      {label}
+    </button>
+  );
 }`);

  await page.waitForTimeout(1500);

  // Try to find and click a generate button
  const generateButton = page.getByRole('button', { name: /generate/i }).first();
  const hasGenerateButton = await generateButton.isVisible().catch(() => false);

  if (hasGenerateButton) {
    await generateButton.click();
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);
  } else {
    // Try submit or run button
    const submitButton = page.getByRole('button').first();
    const hasSubmit = await submitButton.isVisible().catch(() => false);
    if (hasSubmit) {
      await submitButton.click();
      await page.waitForLoadState('networkidle');
      await page.waitForTimeout(2000);
    }
  }

  // Observe the generated output area
  const outputArea = page.locator('pre, code, [data-testid="output"], .output').first();
  const hasOutput = await outputArea.isVisible().catch(() => false);

  if (hasOutput) {
    await outputArea.scrollIntoViewIfNeeded();
    await page.waitForTimeout(1500);

    // Check output text to visually confirm it uses standard Playwright actions
    const outputText = await outputArea.textContent().catch(() => '');
    const hasNavigate = outputText?.includes('goto') || outputText?.includes('navigate');
    const hasClick = outputText?.includes('click');

    if (hasNavigate || hasClick) {
      await page.waitForTimeout(1500);
    }
  }

  // Scroll through the page to show the result
  await page.evaluate(() => window.scrollTo({ top: document.body.scrollHeight / 2, behavior: 'smooth' }));
  await page.waitForTimeout(1500);

  await page.evaluate(() => window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }));
  await page.waitForTimeout(1500);

  await page.evaluate(() => window.scrollTo({ top: 0, behavior: 'smooth' }));
  await page.waitForTimeout(1000);
}

---

Generated by git-glimpse