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

Increase click target for test report

Browse source
This commit is contained in:
Mark Skelton 2024-10-02 09:25:50 -05:00
parent 3a5bf1cc1d
commit 1ba2afc34f
No known key found for this signature in database
2 changed files with 26 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
packages/html-reporter/src/testFileView.css
View file

@ -14,18 +14,30 @@
limitations under the License.
*/
.hbox.static {
position: static;
}
.test-file-test {
line-height: 32px;
align-items: center;
padding: 2px 10px;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
}
.test-file-test:hover {
background-color: var(--color-canvas-subtle);
}
.test-file-link::before {
content: '';
display: block;
inset: 0;
position: absolute;
z-index: 0;
}
.test-file-title {
font-weight: 600;
font-size: 16px;
@ -45,14 +57,12 @@
text-overflow: ellipsis;
overflow: hidden;
color: var(--color-fg-subtle);
}
.test-file-path-link {
margin-right: 10px;
}
.test-file-badge {
flex: none;
position: relative;
}
.test-file-badge svg {
@ -70,3 +80,9 @@
.test-file-test-status-icon {
flex: none;
}
.label {
cursor: pointer;
margin: 6px 0 0 6px;
position: relative;
}

10
packages/html-reporter/src/testFileView.tsx
View file

@ -41,13 +41,13 @@ export const TestFileView: React.FC<React.PropsWithChildren<{
</span>}>
{file.tests.filter(t => filter.matches(t)).map(test =>
<div key={`test-${test.testId}`} className={clsx('test-file-test', 'test-file-test-outcome-' + test.outcome)}>
<div className='hbox' style={{ alignItems: 'flex-start' }}>
<div className='hbox'>
<div className='hbox static' style={{ alignItems: 'flex-start' }}>
<div className='hbox static'>
<span className='test-file-test-status-icon'>
{statusIcon(test.outcome)}
</span>
<span>
<Link href={`#?testId=${test.testId}`} title={[...test.path, test.title].join(' › ')}>
<Link className='test-file-link' href={`#?testId=${test.testId}`} title={[...test.path, test.title].join(' › ')}>
<span className='test-file-title'>{[...test.path, test.title].join(' › ')}</span>
</Link>
{report.projectNames.length > 1 && !!test.projectName &&
@ -58,9 +58,7 @@ export const TestFileView: React.FC<React.PropsWithChildren<{
<span data-testid='test-duration' style={{ minWidth: '50px', textAlign: 'right' }}>{msToString(test.duration)}</span>
</div>
<div className='test-file-details-row'>
<Link href={`#?testId=${test.testId}`} title={[...test.path, test.title].join(' › ')} className='test-file-path-link'>
<span className='test-file-path'>{test.location.file}:{test.location.line}</span>
</Link>
{imageDiffBadge(test)}
{videoBadge(test)}
{traceBadge(test)}
@ -102,7 +100,7 @@ const LabelsClickView: React.FC<React.PropsWithChildren<{
return labels.length > 0 ? (
<>
{labels.map(label => (
<span key={label} style={{ margin: '6px 0 0 6px', cursor: 'pointer' }} className={clsx('label', 'label-color-' + hashStringToInt(label))} onClick={e => onClickHandle(e, label)}>
<span key={label} className={clsx('label', 'label-color-' + hashStringToInt(label))} onClick={e => onClickHandle(e, label)}>
{label.slice(1)}
</span>
))}