From 325fe71bb9d13ddc0e1ead8be3e1fce80b23ced4 Mon Sep 17 00:00:00 2001 From: Pavel Feldman Date: Fri, 21 Feb 2025 13:49:23 -0800 Subject: [PATCH] chore: minor html report polish (#34864) --- packages/html-reporter/src/common.css | 20 ++++++++++++++ packages/html-reporter/src/testErrorView.css | 26 ------------------ packages/html-reporter/src/testErrorView.tsx | 8 +++--- packages/web/src/components/prompts.ts | 28 +++++++------------- tests/playwright-test/reporter-html.spec.ts | 2 +- 5 files changed, 34 insertions(+), 50 deletions(-) diff --git a/packages/html-reporter/src/common.css b/packages/html-reporter/src/common.css index 12241fd861..63ad3cd70f 100644 --- a/packages/html-reporter/src/common.css +++ b/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; diff --git a/packages/html-reporter/src/testErrorView.css b/packages/html-reporter/src/testErrorView.css index 7cc9e88a79..5b6b10389b 100644 --- a/packages/html-reporter/src/testErrorView.css +++ b/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); -} - diff --git a/packages/html-reporter/src/testErrorView.tsx b/packages/html-reporter/src/testErrorView.tsx index 4f19869833..42ec8d9ff6 100644 --- a/packages/html-reporter/src/testErrorView.tsx +++ b/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 ( -
+
@@ -58,7 +57,8 @@ const PromptButton: React.FC<{ const [copied, setCopied] = React.useState(false); return ; }; diff --git a/packages/web/src/components/prompts.ts b/packages/web/src/components/prompts.ts index d446dfa17d..8f57ac2dd5 100644 --- a/packages/web/src/components/prompts.ts +++ b/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.`, - `Please give me a suggestion how to fix it, and then explain what went wrong. Be very concise and apply 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:', - '\n', + `My Playwright test failed.`, + `Explain why, be concise, respect Playwright best practices.`, + '', + 'Error:', + '', '```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' ); } diff --git a/tests/playwright-test/reporter-html.spec.ts b/tests/playwright-test/reporter-html.spec.ts index 1f6f8c4180..9783194073 100644 --- a/tests/playwright-test/reporter-html.spec.ts +++ b/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);`);