yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(html report): linkify test annotations (#31521)

Browse Source
This commit is contained in:
Joe-Hendley 2024-07-03 00:45:16 +01:00 committed by GitHub
parent 9caf3b5f72
commit a62260a9f2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 68 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/html-reporter/src/testCaseView.spec.tsx
View File

@ -74,3 +74,42 @@ test('should render test case', async ({ mount }) => {
await expect(component.getByText('test.spec.ts:42')).toBeVisible(); await expect(component.getByText('test.spec.ts:42')).toBeVisible();
await expect(component.getByText('My test')).toBeVisible(); await expect(component.getByText('My test')).toBeVisible();
}); });
const linkRenderingTestCase: TestCase = {
testId: 'testid',
title: 'My test',
path: [],
projectName: 'chromium',
location: { file: 'test.spec.ts', line: 42, column: 0 },
annotations: [
{ type: 'more info', description: 'read https://playwright.dev/docs/intro and https://playwright.dev/docs/api/class-playwright' },
{ type: 'related issues', description: 'https://github.com/microsoft/playwright/issues/23180, https://github.com/microsoft/playwright/issues/23181' },
],
tags: [],
outcome: 'expected',
duration: 10,
ok: true,
results: [result]
};
test('should correctly render links in annotations', async ({ mount }) => {
const component = await mount(<TestCaseView projectNames={['chromium', 'webkit']} test={linkRenderingTestCase} run={0} anchor=''></TestCaseView>);
// const container = await(component.getByText('Annotations'));
const firstLink = await component.getByText('https://playwright.dev/docs/intro').first();
await expect(firstLink).toBeVisible();
await expect(firstLink).toHaveAttribute('href', 'https://playwright.dev/docs/intro');
const secondLink = await component.getByText('https://playwright.dev/docs/api/class-playwright').first();
await expect(secondLink).toBeVisible();
await expect(secondLink).toHaveAttribute('href', 'https://playwright.dev/docs/api/class-playwright');
const thirdLink = await component.getByText('https://github.com/microsoft/playwright/issues/23180').first();
await expect(thirdLink).toBeVisible();
await expect(thirdLink).toHaveAttribute('href', 'https://github.com/microsoft/playwright/issues/23180');
const fourthLink = await component.getByText('https://github.com/microsoft/playwright/issues/23181').first();
await expect(fourthLink).toBeVisible();
await expect(fourthLink).toHaveAttribute('href', 'https://github.com/microsoft/playwright/issues/23181');
});

34
packages/html-reporter/src/testCaseView.tsx
View File

@ -65,11 +65,35 @@ export const TestCaseView: React.FC<{
}; };
function renderAnnotationDescription(description: string) { function renderAnnotationDescription(description: string) {
try { const CONTROL_CODES = '\\u0000-\\u0020\\u007f-\\u009f';
if (['http:', 'https:'].includes(new URL(description).protocol)) const WEB_LINK_REGEX = new RegExp('(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\\/\\/|www\\.)[^\\s' + CONTROL_CODES + '"]{2,}[^\\s' + CONTROL_CODES + '"\')}\\],:;.!?]', 'ug');
return <a href={description} target='_blank' rel='noopener noreferrer'>{description}</a>;
} catch {} const result = [];
return description; let currentIndex = 0;
let match;
while ((match = WEB_LINK_REGEX.exec(description)) !== null) {
const stringBeforeMatch = description.substring(currentIndex, match.index);
if (stringBeforeMatch)
result.push(stringBeforeMatch);
const value = match[0];
result.push(renderLink(value));
currentIndex = match.index + value.length;
}
const stringAfterMatches = description.substring(currentIndex);
if (stringAfterMatches)
result.push(stringAfterMatches);
return result;
}
function renderLink(text: string) {
let link = text;
if (link.startsWith('www.'))
link = 'https://' + link;
return <a href={link} target='_blank' rel='noopener noreferrer'>{text}</a>;
} }
function TestCaseAnnotationView({ annotation: { type, description } }: { annotation: TestCaseAnnotation }) { function TestCaseAnnotationView({ annotation: { type, description } }: { annotation: TestCaseAnnotation }) {