chore: minor html report polish (#34864)

packages/html-reporter/src/common.css

@@ -267,6 +267,26 @@ article, aside, details, figcaption, figure, footer, header, main, menu, nav, se
   flex: none;
 }
 
+.button {
+  flex: none;
+  height: 24px;
+  border: 1px solid var(--color-btn-border);
+  outline: none;
+  color: var(--color-btn-text);
+  background: var(--color-btn-bg);
+  padding: 4px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.button:not(:disabled):hover {
+  border-color: var(--color-btn-hover-border);
+  background-color: var(--color-btn-hover-bg);
+}
+
 @media only screen and (max-width: 600px) {
   .subnav-item, .form-control {
     border-radius: 0 !important;

packages/html-reporter/src/testErrorView.css

@@ -34,29 +34,3 @@
 .test-error-text {
   font-family: monospace;
 }
-
-.prompt-button {
-  flex: none;
-  height: 24px;
-  width: 80px;
-  border: 1px solid var(--color-btn-border);
-  outline: none;
-  color: var(--color-btn-text);
-  background: var(--color-btn-bg);
-  padding: 4px;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-}
-
-.prompt-button svg {
-  color: var(--color-fg-subtle);
-}
-
-.prompt-button:not(:disabled):hover {
-  border-color: var(--color-btn-hover-border);
-  background-color: var(--color-btn-hover-bg);
-}
-

packages/html-reporter/src/testErrorView.tsx

@@ -17,7 +17,6 @@
 import { ansi2html } from '@web/ansi2html';
 import * as React from 'react';
 import './testErrorView.css';
-import * as icons from './icons';
 import type { ImageDiff } from '@web/shared/imageDiffView';
 import { ImageDiffView } from '@web/shared/imageDiffView';
 import type { TestResult } from './types';
@@ -27,7 +26,7 @@ import { useGitCommitInfo } from './metadataView';
 export const TestErrorView: React.FC<{ error: string; testId?: string; result?: TestResult }> = ({ error, testId, result }) => {
   return (
     <CodeSnippet code={error} testId={testId}>
-      <div style={{ float: 'right', padding: '5px' }}>
+      <div style={{ float: 'right', margin: 10 }}>
         <PromptButton error={error} result={result} />
       </div>
     </CodeSnippet>
@@ -58,7 +57,8 @@ const PromptButton: React.FC<{
   const [copied, setCopied] = React.useState(false);
 
   return <button
-    className='prompt-button'
+    className='button'
+    style={{ minWidth: 100 }}
     onClick={async () => {
       await navigator.clipboard.writeText(prompt);
       setCopied(true);
@@ -66,7 +66,7 @@ const PromptButton: React.FC<{
         setCopied(false);
       }, 3000);
     }}>
-    {copied ? <span className='prompt-button-copied'>Copied <icons.copy/></span> : 'Copy as Prompt'}
+    {copied ? 'Copied' : 'Copy as Prompt'}
   </button>;
 };
 

packages/web/src/components/prompts.ts

@@ -19,45 +19,35 @@ function stripAnsiEscapes(str: string): string {
   return str.replace(ansiRegex, '');
 }
 
-function enumerate(items: string[]) {
-  if (items.length === 0)
-    return '';
-  if (items.length === 1)
-    return items[0];
-  return items.slice(0, -1).join(', ') + ' and ' + items[items.length - 1];
-}
-
 export function fixTestPrompt(error: string, diff?: string, pageSnapshot?: string) {
-  const includedData = ['the error', diff && 'a code diff', pageSnapshot && 'a snapshot of the page'].filter((v): v is string => Boolean(v));
   const promptParts = [
-    `My Playwright test failed, what's going wrong? I've included ${enumerate(includedData)} below.`,
+    `My Playwright test failed.`,
-    `Please give me a suggestion how to fix it, and then explain what went wrong. Be very concise and apply Playwright best practices.`,
+    `Explain why, be concise, respect Playwright best practices.`,
-    `Don't include many headings in your output. Make sure what you're saying is correct, and take into account whether there might be a bug in the app.`,
+    '',
-    'Here is the error:',
+    'Error:',
-    '\n',
+    '',
     '```js',
     stripAnsiEscapes(error),
     '```',
-    '\n',
   ];
 
   if (pageSnapshot) {
     promptParts.push(
-        'This is how the page looked at the end of the test:\n',
+        '',
+        'Page snapshot:',
         '```yaml',
         pageSnapshot,
         '```',
-        '\n'
     );
   }
 
   if (diff) {
     promptParts.push(
-        'And this is the code diff:\n',
+        '',
+        'Local changes:',
         '```diff',
         diff,
         '```',
-        '\n'
     );
   }
 

tests/playwright-test/reporter-html.spec.ts

@@ -2804,7 +2804,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
       await page.getByRole('link', { name: 'sample' }).click();
       await page.getByRole('button', { name: 'Copy as Prompt' }).click();
       const prompt = await page.evaluate(() => navigator.clipboard.readText());
-      expect(prompt, 'first line').toContain(`My Playwright test failed, what's going wrong? I've included the error, a code diff and a snapshot of the page below.`);
+      expect(prompt, 'first line').toContain(`Playwright test failed.`);
       expect(prompt, 'contains error').toContain('expect(received).toBe(expected)');
       expect(prompt, 'contains snapshot').toContain('- button "Click me"');
       expect(prompt, 'contains diff').toContain(`+            expect(2).toBe(3);`);