Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

chore: html report ui fixes (#9522)

Browse source
This commit is contained in:
Pavel Feldman 2021-10-14 17:54:33 -08:00 committed by GitHub
parent 75cfe5d1f5
commit 7ee48febf9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/playwright-core/src/web/htmlReport/htmlReport.css
View file

@ -28,6 +28,11 @@ body {
overflow: auto; overflow: auto;
color: #616161; color: #616161;
background-color: #f3f3f3; background-color: #f3f3f3;
border-left: 1px solid #dfe1e5;
}
.test-case-column {
border-right: 1px solid #dfe1e5;
} }
.tree-item-title { .tree-item-title {
@ -44,12 +49,7 @@ body {
} }
.suite-tree-column .tree-item-title.selected { .suite-tree-column .tree-item-title.selected {
background-color: #0060c0; font-weight: bold;
color: white;
}
.suite-tree-column .tree-item-title.selected * {
color: white !important;
} }
.error-message { .error-message {
@ -89,7 +89,7 @@ body {
flex: auto; flex: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: 600px; padding: 0 16px;
overflow: auto; overflow: auto;
} }
@ -212,3 +212,8 @@ video, img {
min-width: 80%; min-width: 80%;
min-height: 300px; min-height: 300px;
} }
.columns {
max-width: 1280px;
margin: 0 auto;
}

24
packages/playwright-core/src/web/htmlReport/htmlReport.tsx
View file

@ -23,7 +23,7 @@ import { TabbedPane } from '../traceViewer/ui/tabbedPane';
import { msToString } from '../uiUtils'; import { msToString } from '../uiUtils';
import type { ProjectTreeItem, SuiteTreeItem, TestCase, TestResult, TestStep, TestTreeItem, Location, TestFile, Stats, TestAttachment } from '@playwright/test/src/reporters/html'; import type { ProjectTreeItem, SuiteTreeItem, TestCase, TestResult, TestStep, TestTreeItem, Location, TestFile, Stats, TestAttachment } from '@playwright/test/src/reporters/html';
type Filter = 'Failing' | 'All'; type Filter = 'failing' | 'all';
type TestId = { type TestId = {
fileId: string; fileId: string;
@ -46,22 +46,18 @@ export const Report: React.FC = () => {
} }
})(); })();
}, []); }, []);
const [filter, setFilter] = React.useState<Filter>('Failing'); const [filter, setFilter] = React.useState<Filter>('failing');
return <div className='hbox'> return <div className='hbox columns'>
<SplitView sidebarSize={300} orientation='horizontal' sidebarIsFirst={true}> <SplitView sidebarSize={300} orientation='horizontal' sidebarIsFirst={true}>
<TestCaseView key={testId?.testId} testId={testId}></TestCaseView> <TestCaseView key={testId?.testId} testId={testId}></TestCaseView>
<div className='suite-tree-column'> <div className='suite-tree-column'>
<div className='tab-strip'>{ <div className='tab-strip'>
(['Failing', 'All'] as Filter[]).map(item => { <div key='all' title='All tests' className={'tab-element' + ('all' === filter ? ' selected' : '')} onClick={() => setFilter('all')}>All</div>
const selected = item === filter; <div key='failing' title='Failing tests' className={'tab-element' + ('failing' === filter ? ' selected' : '')} onClick={() => setFilter('failing')}>Failing</div>
return <div key={item} className={'tab-element' + (selected ? ' selected' : '')} onClick={e => { </div>
setFilter(item); {!fetchError && filter === 'all' && report?.map((project, i) => <ProjectTreeItemView key={i} project={project} setTestId={setTestId} testId={testId} failingOnly={false}></ProjectTreeItemView>)}
}}>{item}</div>; {!fetchError && filter === 'failing' && report?.map((project, i) => <ProjectTreeItemView key={i} project={project} setTestId={setTestId} testId={testId} failingOnly={true}></ProjectTreeItemView>)}
})
}</div>
{!fetchError && filter === 'All' && report?.map((project, i) => <ProjectTreeItemView key={i} project={project} setTestId={setTestId} testId={testId} failingOnly={false}></ProjectTreeItemView>)}
{!fetchError && filter === 'Failing' && report?.map((project, i) => <ProjectTreeItemView key={i} project={project} setTestId={setTestId} testId={testId} failingOnly={true}></ProjectTreeItemView>)}
</div> </div>
</SplitView> </SplitView>
</div>; </div>;
@ -92,7 +88,7 @@ const SuiteTreeItemView: React.FC<{
depth: number, depth: number,
}> = ({ suite, testId, setTestId, failingOnly, depth }) => { }> = ({ suite, testId, setTestId, failingOnly, depth }) => {
return <TreeItem title={<div className='hbox'> return <TreeItem title={<div className='hbox'>
<div className='tree-text' title={suite.title}>{suite.title}</div> <div className='tree-text' title={suite.title}>{suite.title || '<untitled>'}</div>
<div style={{ flex: 'auto' }}></div> <div style={{ flex: 'auto' }}></div>
<StatsView stats={suite.stats}></StatsView> <StatsView stats={suite.stats}></StatsView>
</div> </div>