Skip to content

fix(highlight): resolve highlights in the frame of the locator #42854

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Ashraf Ali (ashrafiucse) wants to merge 1 commit into from
Closed

fix(highlight): resolve highlights in the frame of the locator #42854

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/playwright-core/src/server/dispatchers/frameDispatcher.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,11 +272,11 @@ export class FrameDispatcher extends Dispatcher<Frame, channels.FrameChannel, Br
}

async highlight(params: channels.FrameHighlightParams, progress: Progress): Promise<void> {
return await progress.race(this._frame._page.highlightController.addHighlight(params.selector, { style: params.style }));
return await progress.race(this._frame._page.highlightController.addHighlight(params.selector, { style: params.style, frame: this._frame }));
}

async hideHighlight(params: channels.FrameHideHighlightParams, progress: Progress): Promise<void> {
return await progress.race(this._frame._page.highlightController.removeHighlight(params.selector));
return await progress.race(this._frame._page.highlightController.removeHighlight(params.selector, this._frame));
}

async expect(params: channels.FrameExpectParams, progress: Progress): Promise<channels.FrameExpectResult> {
Expand Down
15 changes: 11 additions & 4 deletions packages/playwright-core/src/server/highlightController.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import type { ParsedSelector } from '@isomorphic/selectorParser';
export type HighlightOptions = {
style?: string;
anyFrame?: boolean; // Highlight in all the frames the selector could resolve to, instead of a single one.
frame?: Frame; // Resolve the selector relative to this frame, defaults to the main frame.
};

type HighlightEntry = HighlightOptions & {
Expand All @@ -40,15 +41,20 @@ export class HighlightController {
async addHighlight(selector: string, options: HighlightOptions = {}) {
// Validate the selector upfront, so that the caller gets a synchronous error.
this._page.browserContext.selectors().parseSelector(selector, false);
this._entries.set(selector, { selector, ...options });
this._entries.set(this._key(options.frame, selector), { selector, ...options });
await this._resolveNow();
}

async removeHighlight(selector: string) {
this._entries.delete(selector);
async removeHighlight(selector: string, frame?: Frame) {
this._entries.delete(this._key(frame, selector));
await this._resolveNow();
}

// The same selector may be highlighted from different frames, so key the entries by frame as well.
private _key(frame: Frame | undefined, selector: string): string {
return `${(frame ?? this._page.mainFrame()).guid}|${selector}`;
}

dispose() {
if (this._resolutionTimer) {
clearTimeout(this._resolutionTimer);
Expand Down Expand Up @@ -80,7 +86,8 @@ export class HighlightController {

const perFrame = new Map<Frame, { selector: ParsedSelector, cssStyle?: string }[]>();
for (const entry of this._entries.values()) {
const results = await this._page.mainFrame().selectors.resolveFramesForSelector(entry.selector, { strict: false, anyFrame: entry.anyFrame }).catch(() => []);
const owner = entry.frame ?? this._page.mainFrame();
const results = await owner.selectors.resolveFramesForSelector(entry.selector, { strict: false, anyFrame: entry.anyFrame }).catch(() => []);
for (const { frame, info } of results) {
let list = perFrame.get(frame);
if (!list) {
Expand Down
88 changes: 88 additions & 0 deletions tests/library/locator-highlight.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,3 +118,91 @@ test('Page.hideHighlight clears all locator highlights', async ({ browser, serve

await context.close();
});

test('highlight should resolve relative to the frame of the locator', async ({ browser, server }) => {
server.setRoute('/highlight/child.html', (req, res) => {
res.setHeader('Content-Type', 'text/html');
res.end('<button>foo</button>');
});
server.setRoute('/highlight/parent.html', (req, res) => {
res.setHeader('Content-Type', 'text/html');
res.end('<iframe name="frame" src="/highlight/child.html"></iframe><button>bar</button>');
});

const context = await browser.newContext();
const page = await context.newPage();
await page.goto(server.PREFIX + '/highlight/parent.html');
const frame = page.frame({ name: 'frame' })!;

await frame.locator('button').highlight();
await expect(frame.locator('x-pw-highlight')).toHaveCount(1);
await expect(page.locator('x-pw-highlight')).toHaveCount(0);

await frame.locator('button').hideHighlight();
await expect(frame.locator('x-pw-highlight')).toHaveCount(0);

await context.close();
});

test('highlight same selector in different frames', async ({ browser, server }) => {
server.setRoute('/highlight/child.html', (req, res) => {
res.setHeader('Content-Type', 'text/html');
res.end('<button>foo</button>');
});
server.setRoute('/highlight/parent.html', (req, res) => {
res.setHeader('Content-Type', 'text/html');
res.end([
'<iframe name="frame1" src="/highlight/child.html"></iframe>',
'<iframe name="frame2" src="/highlight/child.html"></iframe>',
'<button>bar</button>',
].join(''));
});

const context = await browser.newContext();
const page = await context.newPage();
await page.goto(server.PREFIX + '/highlight/parent.html');
const frame1 = page.frame({ name: 'frame1' })!;
const frame2 = page.frame({ name: 'frame2' })!;

await page.locator('button').highlight();
await frame1.locator('button').highlight();
await frame2.locator('button').highlight();
await expect(page.locator('x-pw-highlight')).toHaveCount(1);
await expect(frame1.locator('x-pw-highlight')).toHaveCount(1);
await expect(frame2.locator('x-pw-highlight')).toHaveCount(1);

await page.hideHighlight();
await expect(page.locator('x-pw-highlight')).toHaveCount(0);
await expect(frame1.locator('x-pw-highlight')).toHaveCount(0);
await expect(frame2.locator('x-pw-highlight')).toHaveCount(0);

await context.close();
});

test('frame highlight should survive frame navigation', async ({ browser, server }) => {
server.setRoute('/highlight/child.html', (req, res) => {
res.setHeader('Content-Type', 'text/html');
res.end('<button>foo</button>');
});
server.setRoute('/highlight/child2.html', (req, res) => {
res.setHeader('Content-Type', 'text/html');
res.end('<button>baz</button>');
});
server.setRoute('/highlight/parent.html', (req, res) => {
res.setHeader('Content-Type', 'text/html');
res.end('<iframe name="frame" src="/highlight/child.html"></iframe><button>bar</button>');
});

const context = await browser.newContext();
const page = await context.newPage();
await page.goto(server.PREFIX + '/highlight/parent.html');
const frame = page.frame({ name: 'frame' })!;

await frame.locator('button').highlight();
await expect(frame.locator('x-pw-highlight')).toHaveCount(1);

await frame.goto(server.PREFIX + '/highlight/child2.html');
await expect(frame.locator('x-pw-highlight')).toHaveCount(1);

await context.close();
});