Error: Protocol error (Overlay.highlightNode): Could not find object with given id
See original GitHub issueSorry for re-post this issue cause the last one was closed and I can not reopen, I have the context:
- Playwright
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://amazon.com')
const context = (await page.context()) as ChromiumBrowserContext
const client = await context.newCDPSession(page)
const element = await page.$('h1,h2,h3,p');
const objectId = element['_objectId']
await client.send('Overlay.highlightNode', {
highlightConfig: {
showInfo: true,
borderColor: {
r: 76,
g: 175,
b: 80,
a: 1
},
contentColor: {
r: 76,
g: 175,
b: 80,
a: 0.24
},
shapeColor: {
r: 76,
g: 175,
b: 80,
a: 0.24
},
},
objectId,
})
the objectId has value {"injectedScriptId":3,"id":1} but I got the error: Error: Protocol error (Overlay.highlightNode): Could not find object with given id.
I can do this action on Puppeteer as the following:
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto('https://amazon.com')
const element = await page.$('h1,h2,h3,p');
const client = element['_client']
const objectId = element['_remoteObject']['objectId']
await client.send('Overlay.highlightNode', {
highlightConfig: {
showInfo: true,
borderColor: {
r: 76,
g: 175,
b: 80,
a: 1
},
contentColor: {
r: 76,
g: 175,
b: 80,
a: 0.24
},
shapeColor: {
r: 76,
g: 175,
b: 80,
a: 0.24
},
},
objectId,
})
So I’m not sure how to do this on playwright?
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Protocol error (Overlay.highlightNode): Could not find object ...
I have the context: const browser = await chromium.launch(); const page = await browser.newPage(); await page.goto('https://amazon.com') ...
Read more >Highlight current DOM element in Chrome Extension using ...
The command is likely DOM. highlightNode - to see the exact syntax try "Listening to the protocol" as described in the documentation.
Read more >third_party/blink/public/devtools_protocol/browser_protocol.pdl
JavaScript object id of the node wrapper to get the partial accessibility ... is specified, or the DOM node does not exist, the...
Read more >Overlay domain - Chrome DevTools Protocol - GitHub Pages
Overlay.highlightNode #. Highlights DOM node with given id or with the given JavaScript object wrapper. Either nodeId or objectId must be specified.
Read more >cdp - Go Packages - The Go Programming Language
Package cdp provides type-safe bindings for the Chrome DevTools Protocol (CDP) and can be used with any debug target that implements it.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

In Puppeteer, you were reaching out to a private property to get a hold of the session that Puppeteer itself used. You can do the same in Playwright, it is just harder to find and abuse it here.
But I would encourage you to think in the browser-neutral way since that’s what we want for Playwright in the end of the day and request a feature where you can trigger inspector (or any other) highlight. Something like
handle.inspect()that would highlight and reveal in devtools if those are opened. Would that work for you?I’ll close this as a dupe of https://github.com/microsoft/playwright/issues/2747