fix(recorder): show action point in main frame only (#27719)

This commit is contained in:
Dmitry Gozman 2023-10-20 20:58:09 -07:00 committed by GitHub
parent d67515f6c1
commit d1d5fc67dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 10 deletions

View File

@ -130,8 +130,6 @@ export class Highlight {
this._actionPointElement.style.top = y + 'px';
this._actionPointElement.style.left = x + 'px';
this._actionPointElement.hidden = false;
if (this._isUnderTest)
console.error('Action point for test: ' + JSON.stringify({ x, y })); // eslint-disable-line no-console
}
hideActionPoint() {

View File

@ -545,6 +545,12 @@ export class PollingRecorder implements RecorderDelegate {
this._pollRecorderModeTimer = setTimeout(() => this._pollRecorderMode(), pollPeriod);
return;
}
const win = this._recorder.document.defaultView!;
if (win.top !== win) {
// Only show action point in the main frame, since it is relative to the page's viewport.
// Otherwise we'll see multiple action points at different locations.
state.actionPoint = undefined;
}
this._recorder.setUIState(state, this);
this._pollRecorderModeTimer = setTimeout(() => this._pollRecorderMode(), pollPeriod);
}

View File

@ -158,25 +158,36 @@ it.describe('pause', () => {
await scriptPromise;
});
it('should highlight pointer', async ({ page, recorderPageGetter }) => {
const actionPointPromise = waitForTestLog<{ x: number, y: number }>(page, 'Action point for test: ');
await page.setContent('<button>Submit</button>');
it('should highlight pointer, only in main frame', async ({ page, recorderPageGetter }) => {
await page.setContent(`
<iframe
style="margin: 100px;"
srcdoc="<button style='margin: 80px;'>Submit</button>">
</iframe>
`);
const scriptPromise = (async () => {
await page.pause();
await page.click('button');
await page.frameLocator('iframe').locator('button').click();
})();
const recorderPage = await recorderPageGetter();
await recorderPage.click('[title="Step over (F10)"]');
const { x, y } = await actionPointPromise;
const button = await page.waitForSelector('button');
const iframe = page.frames()[1];
const button = await iframe.waitForSelector('button');
const box1 = await button.boundingBox();
const actionPoint = await page.waitForSelector('x-pw-action-point');
const box2 = await actionPoint.boundingBox();
const iframeActionPoint = await iframe.$('x-pw-action-point');
expect(await iframeActionPoint?.boundingBox()).toBeFalsy();
const x1 = box1.x + box1.width / 2;
const y1 = box1.y + box1.height / 2;
const x2 = box2.x + box2.width / 2;
const y2 = box2.y + box2.height / 2;
expect(Math.abs(x1 - x) < 2).toBeTruthy();
expect(Math.abs(y1 - y) < 2).toBeTruthy();
expect(Math.abs(x1 - x2) < 2).toBeTruthy();
expect(Math.abs(y1 - y2) < 2).toBeTruthy();
await recorderPage.click('[title="Resume (F8)"]');
await scriptPromise;