microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-01-05 19:04:43 +03:00
Code Issues Projects Releases Wiki Activity

fix(trace viewer): replace blue dot with red dot+warning (#29380)

Browse Source 
Also how the explanation on hover.

Fixes #29263.
This commit is contained in:
Dmitry Gozman 2024-02-06 08:27:45 -08:00 committed by GitHub
parent cfefac74ab
commit 18ce0fa370
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/trace-viewer/src/snapshotRenderer.ts
View File

@ -214,6 +214,10 @@ function snapshotNodes(snapshot: FrameSnapshot): NodeSnapshot[] {
function snapshotScript(...targetIds: (string | undefined)[]) {
function applyPlaywrightAttributes(unwrapPopoutUrl: (url: string) => string, ...targetIds: (string | undefined)[]) {
const kPointerWarningTitle = 'Recorded click position in absolute coordinates did not' +
' match the center of the clicked element. This is likely due to a difference between' +
' the test runner and the trace viewer operating systems.';
const scrollTops: Element[] = [];
const scrollLefts: Element[] = [];
const targetElements: Element[] = [];
@ -323,6 +327,9 @@ function snapshotScript(...targetIds: (string | undefined)[]) {
pointElement.style.borderRadius = '10px';
pointElement.style.margin = '-10px 0 0 -10px';
pointElement.style.zIndex = '2147483646';
pointElement.style.display = 'flex';
pointElement.style.alignItems = 'center';
pointElement.style.justifyContent = 'center';
if (hasTargetElements) {
// Sometimes there are layout discrepancies between recording and rendering, e.g. fonts,
// that may place the point at the wrong place. To avoid confusion, we just show the
@ -332,9 +339,17 @@ function snapshotScript(...targetIds: (string | undefined)[]) {
const centerY = (box.top + box.height / 2);
pointElement.style.left = centerX + 'px';
pointElement.style.top = centerY + 'px';
// "Blue dot" to indicate that action point is not 100% correct.
if (Math.abs(centerX - pointX) >= 2 || Math.abs(centerY - pointY) >= 2)
pointElement.style.backgroundColor = '#3646f4';
// "Warning symbol" indicates that action point is not 100% correct.
if (Math.abs(centerX - pointX) >= 10 || Math.abs(centerY - pointY) >= 10) {
const warningElement = document.createElement('x-pw-pointer-warning');
warningElement.textContent = '⚠';
warningElement.style.fontSize = '19px';
warningElement.style.color = 'white';
warningElement.style.marginTop = '-3.5px';
warningElement.style.userSelect = 'none';
pointElement.appendChild(warningElement);
pointElement.setAttribute('title', kPointerWarningTitle);
}
} else {
// For actions without a target element, e.g. page.mouse.move(),
// show the point at the recorder location.