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-reporter): hide annotations started with "_" (#31489)

Browse Source 
Fixes: https://github.com/microsoft/playwright/issues/30179
This commit is contained in:
Vitaliy Potapov 2024-07-03 03:46:24 +04:00 committed by GitHub
parent a62260a9f2
commit 1e55a084bc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/src/test-annotations-js.md
View File

@ -159,7 +159,7 @@ You can also filter tests in the configuration file via [`property: TestConfig.g
## Annotate tests ## Annotate tests
If you would like to annotate your tests with something more substantial than a tag, you can do that when declaring a test. Annotations have a `type` and a `description` for more context, and will be visible in the test report. If you would like to annotate your tests with something more substantial than a tag, you can do that when declaring a test. Annotations have a `type` and a `description` for more context and available in reporter API. Playwright's built-in HTML reporter shows all annotations, except those where `type` starts with `_` symbol.
For example, to annotate a test with an issue url: For example, to annotate a test with an issue url:

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

@ -54,6 +54,7 @@ const testCase: TestCase = {
annotations: [ annotations: [
{ type: 'annotation', description: 'Annotation text' }, { type: 'annotation', description: 'Annotation text' },
{ type: 'annotation', description: 'Another annotation text' }, { type: 'annotation', description: 'Another annotation text' },
{ type: '_annotation', description: 'Hidden annotation' },
], ],
tags: [], tags: [],
outcome: 'expected', outcome: 'expected',
@ -65,6 +66,7 @@ const testCase: TestCase = {
test('should render test case', async ({ mount }) => { test('should render test case', async ({ mount }) => {
const component = await mount(<TestCaseView projectNames={['chromium', 'webkit']} test={testCase} run={0} anchor=''></TestCaseView>); const component = await mount(<TestCaseView projectNames={['chromium', 'webkit']} test={testCase} run={0} anchor=''></TestCaseView>);
await expect(component.getByText('Annotation text', { exact: false }).first()).toBeVisible(); await expect(component.getByText('Annotation text', { exact: false }).first()).toBeVisible();
await expect(component.getByText('Hidden annotation')).toBeHidden();
await component.getByText('Annotations').click(); await component.getByText('Annotations').click();
await expect(component.getByText('Annotation text')).not.toBeVisible(); await expect(component.getByText('Annotation text')).not.toBeVisible();
await expect(component.getByText('Outer step')).toBeVisible(); await expect(component.getByText('Outer step')).toBeVisible();

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

@ -40,6 +40,10 @@ export const TestCaseView: React.FC<{
return test.tags; return test.tags;
}, [test]); }, [test]);
const visibleAnnotations = React.useMemo(() => {
return test?.annotations?.filter(annotation => !annotation.type.startsWith('_')) || [];
}, [test?.annotations]);
return <div className='test-case-column vbox'> return <div className='test-case-column vbox'>
{test && <div className='test-case-path'>{test.path.join(' › ')}</div>} {test && <div className='test-case-path'>{test.path.join(' › ')}</div>}
{test && <div className='test-case-title'>{test?.title}</div>} {test && <div className='test-case-title'>{test?.title}</div>}
@ -52,8 +56,8 @@ export const TestCaseView: React.FC<{
{test && !!test.projectName && <ProjectLink projectNames={projectNames} projectName={test.projectName}></ProjectLink>} {test && !!test.projectName && <ProjectLink projectNames={projectNames} projectName={test.projectName}></ProjectLink>}
{labels && <LabelsLinkView labels={labels} />} {labels && <LabelsLinkView labels={labels} />}
</div>} </div>}
{test && !!test.annotations.length && <AutoChip header='Annotations'> {!!visibleAnnotations.length && <AutoChip header='Annotations'>
{test?.annotations.map(annotation => <TestCaseAnnotationView annotation={annotation} />)} {visibleAnnotations.map(annotation => <TestCaseAnnotationView annotation={annotation} />)}
</AutoChip>} </AutoChip>}
{test && <TabbedPane tabs={ {test && <TabbedPane tabs={
test.results.map((result, index) => ({ test.results.map((result, index) => ({