kyfx
/
playwright
mirror of https://github.com/microsoft/playwright.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(trace-viewer): add copy to clipboard button of snapshot url on hover (#35213) (#35255) 

Co-authored-by: Max Schmitt <max@schmitt.mx>
This commit is contained in:
alscotty 2025-03-28 06:39:29 -07:00 committed by GitHub
parent d0e0a60e0a
commit cb7f1121ee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/trace-viewer/src/ui/browserFrame.css
View File

@ -34,6 +34,16 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: center;
}
.browser-frame-address-bar > button {
visibility: hidden;
}
.browser-frame-address-bar:hover > button {
visibility: visible;
}
.browser-frame-menu-bar {

13
packages/trace-viewer/src/ui/browserFrame.tsx
View File

@ -16,17 +16,26 @@
import './browserFrame.css';
import * as React from 'react';
import { CopyToClipboard } from './copyToClipboard';
export const BrowserFrame: React.FunctionComponent<{
url?: string,
}> = ({ url }) => {
}> = ({ url }): React.ReactElement => {
return <div className='browser-frame-header'>
<div style={{ whiteSpace: 'nowrap' }}>
<span className='browser-frame-dot' style={{ backgroundColor: 'rgb(242, 95, 88)' }}></span>
<span className='browser-frame-dot' style={{ backgroundColor: 'rgb(251, 190, 60)' }}></span>
<span className='browser-frame-dot' style={{ backgroundColor: 'rgb(88, 203, 66)' }}></span>
</div>
<div className='browser-frame-address-bar' title={url || 'about:blank'}>{url || 'about:blank'}</div>
<div
className='browser-frame-address-bar'
title={url || 'about:blank'}
>
{url || 'about:blank'}
{url && (
<CopyToClipboard value={url} />
)}
</div>
<div style={{ marginLeft: 'auto' }}>
<div>
<span className='browser-frame-menu-bar'></span>

10
tests/library/trace-viewer.spec.ts
View File

@ -467,7 +467,15 @@ test('should show snapshot URL', async ({ page, runAndTrace, server }) => {
await page.evaluate('2+2');
});
await traceViewer.snapshotFrame('page.evaluate');
await expect(traceViewer.page.locator('.browser-frame-address-bar')).toHaveText(server.EMPTY_PAGE);
const browserFrameAddressBarLocator = traceViewer.page.locator('.browser-frame-address-bar');
await expect(browserFrameAddressBarLocator).toHaveText(server.EMPTY_PAGE);
const copySelectorLocator = browserFrameAddressBarLocator.getByRole('button', { name: 'Copy' });
await expect(copySelectorLocator).toBeHidden();
await browserFrameAddressBarLocator.hover();
await expect(copySelectorLocator).toBeVisible();
await traceViewer.page.context().grantPermissions(['clipboard-read', 'clipboard-write']);
await copySelectorLocator.click();
expect(await traceViewer.page.evaluate(() => navigator.clipboard.readText())).toBe(server.EMPTY_PAGE);
});
test('should popup snapshot', async ({ page, runAndTrace, server }) => {