From 5bd5cea7050eb3feea9f89306f7e1803900b1b4a Mon Sep 17 00:00:00 2001 From: Alex Neo Date: Tue, 9 May 2023 04:59:01 +0300 Subject: [PATCH] feat(html): describe labels (#22870) --- packages/html-reporter/src/testCaseView.tsx | 2 +- packages/html-reporter/src/testFileView.tsx | 2 +- tests/playwright-test/reporter-html.spec.ts | 89 +++++++++++++++++++++ 3 files changed, 91 insertions(+), 2 deletions(-) diff --git a/packages/html-reporter/src/testCaseView.tsx b/packages/html-reporter/src/testCaseView.tsx index cdaa35903a..f67de95b3a 100644 --- a/packages/html-reporter/src/testCaseView.tsx +++ b/packages/html-reporter/src/testCaseView.tsx @@ -36,7 +36,7 @@ export const TestCaseView: React.FC<{ const labels = React.useMemo(() => { if (!test) return undefined; - return matchTags(test.title).sort((a, b) => a.localeCompare(b)); + return matchTags(test.path.join(' ') + ' ' + test.title).sort((a, b) => a.localeCompare(b)); }, [test]); return
diff --git a/packages/html-reporter/src/testFileView.tsx b/packages/html-reporter/src/testFileView.tsx index d1fd8dcef3..25044c0132 100644 --- a/packages/html-reporter/src/testFileView.tsx +++ b/packages/html-reporter/src/testFileView.tsx @@ -32,7 +32,7 @@ export const TestFileView: React.FC void; filter: Filter; }>> = ({ file, report, isFileExpanded, setFileExpanded, filter }) => { - const labels = React.useCallback((test: TestCaseSummary) => matchTags(test?.title).sort((a, b) => a.localeCompare(b)), []); + const labels = React.useCallback((test: TestCaseSummary) => matchTags(test.path.join(' ') + ' ' + test?.title).sort((a, b) => a.localeCompare(b)), []); return { await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(1); await expect(page.locator('.chip', { hasText: 'c.test.js' })).toHaveCount(1); }); + + test('labels in describe title should be working', async ({ runInlineTest, showReport, page }) => { + const result = await runInlineTest({ + 'playwright.config.js': ` + module.exports = { + projects: [ + { name: 'chromium', use: { browserName: 'chromium' } }, + { name: 'firefox', use: { browserName: 'firefox' } }, + { name: 'webkit', use: { browserName: 'webkit' } }, + ], + }; + `, + 'a.test.js': ` + const { expect, test } = require('@playwright/test'); + test.describe('Root describe', () => { + test.describe('@Monitoring', () => { + test('Test passed -- @call @call-details @e2e @regression #VQ457', async ({}) => { + expect(1).toBe(1); + }); + }); + }); + `, + 'b.test.js': ` + const { expect, test } = require('@playwright/test'); + test.describe('Root describe', () => { + test.describe('@Notifications', () => { + test('Test failed -- @call @call-details @e2e @regression #VQ458', async ({}) => { + expect(1).toBe(0); + }); + }); + }); + `, + 'c.test.js': ` + const { expect, test } = require('@playwright/test'); + test('Test without describe -- @call @call-details @e2e @regression #VQ459', async ({}) => { + expect(1).toBe(0); + }); + `, + }, { reporter: 'dot,html' }, { PW_TEST_HTML_REPORT_OPEN: 'never' }); + + expect(result.exitCode).toBe(1); + expect(result.passed).toBe(3); + expect(result.failed).toBe(6); + + await showReport(); + await expect(page.locator('.test-file-test .label')).toHaveCount(51); + await expect(page.locator('.test-file-test .label').getByText('call', { exact: true })).toHaveCount(9); + await expect(page.locator('.test-file-test .label').getByText('call-details', { exact: true })).toHaveCount(9); + await expect(page.locator('.test-file-test .label').getByText('e2e', { exact: true })).toHaveCount(9); + await expect(page.locator('.test-file-test .label').getByText('regression', { exact: true })).toHaveCount(9); + await expect(page.locator('.test-file-test .label').getByText('Monitoring', { exact: true })).toHaveCount(3); + await expect(page.locator('.test-file-test .label').getByText('Notifications', { exact: true })).toHaveCount(3); + + const searchInput = page.locator('.subnav-search-input'); + + const monitoringLabelButton = page.locator('.label').getByText('Monitoring', { exact: true }); + await monitoringLabelButton.first().click(); + await expect(page.locator('.test-file-test')).toHaveCount(3); + await expect(page.locator('.test-file-test').getByText('Root describe › @Monitoring › Test passed -- @call @call-details @e2e @regression #VQ457', { exact: true })).toHaveCount(3); + await searchInput.clear(); + + const notificationsLabelButton = page.locator('.label').getByText('Notifications', { exact: true }); + await notificationsLabelButton.first().click(); + await expect(page.locator('.test-file-test')).toHaveCount(3); + await expect(page.locator('.test-file-test').getByText('Root describe › @Notifications › Test failed -- @call @call-details @e2e @regression #VQ458', { exact: true })).toHaveCount(3); + await searchInput.clear(); + await page.keyboard.press('Enter'); + + const notificationsChromiumTestCase = page.locator('.test-file-test', { hasText: 'Root describe › @Notifications › Test failed -- @call @call-details @e2e @regression #VQ458' }) + .filter({ has: page.locator('.label', { hasText: 'chromium' }) }); + await expect(notificationsChromiumTestCase).toHaveCount(1); + await notificationsChromiumTestCase.locator('.test-file-title').click(); + await expect(page).toHaveURL(/testId/); + await expect(page.locator('.test-case-path')).toHaveText('Root describe › @Notifications'); + await expect(page.locator('.test-case-title')).toHaveText('Test failed -- @call @call-details @e2e @regression #VQ458'); + await expect(page.locator('.label')).toHaveText(['chromium', 'call', 'call-details', 'e2e', 'Notifications', 'regression']); + + await page.goBack(); + await expect(page).not.toHaveURL(/testId/); + + const monitoringFirefoxTestCase = page.locator('.test-file-test', { hasText: 'Root describe › @Monitoring › Test passed -- @call @call-details @e2e @regression #VQ457' }) + .filter({ has: page.locator('.label', { hasText: 'firefox' }) }); + await expect(monitoringFirefoxTestCase).toHaveCount(1); + await monitoringFirefoxTestCase.locator('.test-file-title').click(); + await expect(page).toHaveURL(/testId/); + await expect(page.locator('.test-case-path')).toHaveText('Root describe › @Monitoring'); + await expect(page.locator('.test-case-title')).toHaveText('Test passed -- @call @call-details @e2e @regression #VQ457'); + await expect(page.locator('.label')).toHaveText(['firefox', 'call', 'call-details', 'e2e', 'Monitoring', 'regression']); + }); }); test('should list tests in the right order', async ({ runInlineTest, showReport, page }) => {