Error: Protocol error (Overlay.highlightNode): Could not find object with given id

[phileba]

Sorry 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?

[pavelfeldman]

const client = await context.newCDPSession(page) gave you a dedicated session. That session does not share object ids with Playwright's session. You can't pass object ids from one to another. Could you share more about your use case?

[phileba]

@pavelfeldman I just want to navigate to https://amazon.com then highlight some element likes this image below:

It used to work on puppeteer but I'm not sure how to make it work on playwright?

[pavelfeldman]

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?

[phileba]

that's sounds good

[aslushnikov]

I'll close this as a dupe of #2747