Different results in Chrome's F12 and CDP

[MilnerAlex]

The page https://www.bbc.co.uk/iplayer/live/bbcone
I can query element “div.p_playerControls” in Chrome's F12 console:

document.querySelector('div.p_playerControls')
div class=​"p_playerControls" style=​"display:​ block;​ clip:​ rect(1px, 1px, 1px, 1px)​;​"

...but cannot via remote interface (div is null, please see attached image):

var div = await page.QuerySelectorAsync("div.p_playerControls");
var player = await page.QuerySelectorAsync(".player__container");

Am I do something wrong?.. :) Thanks!

[kblok]

Did you try adding a WaitForSelectorAsync before that?

[MilnerAlex]

Just tried it, just freeze on wait. The page persistent opened in Chrome! I can switch to Chrome and document.querySelector return element OK...

await page.WaitForSelectorAsync("div.p_playerControls");
var div = await page.QuerySelectorAsync("div.p_playerControls");

[kblok]

I'm getting a login wall on that page.

[MilnerAlex]

Just signup, it's free :) Then you will need select "I have license for watch TV". You will not able see TV if you not in UK, but you will able see "div_p_payerControls" in F12.
If you will have some ideas, what's going wrong, it will very valuable for me :) Thanks!

[kblok]

Are you signing up and selecting "I have license for watch TV" using Puppeteer sharp?

[MilnerAlex]

No of course, I'm signup in browser. Browser then store login in cookies, and I can re-run Chrome in dev mode.

[kblok]

@MilnerAlex are you launching puppeteer passing the ExecutablePath option targeting to the browser you used to log in?

[MilnerAlex]

No, I'm use connecting to running instance (for keep page unchanged):
var coptions = new ConnectOptions
{
AppMode = true,
BrowserURL = "http://localhost:9222"
};
var browser = await Puppeteer.ConnectAsync(coptions);

[kblok]

Can't test that

[MilnerAlex]

Hi Dario,

Yes, as I mentioned, you will not able see TV :) But you WILL be able retrieve div as below:

Thanks!

Alex.

[MilnerAlex]

I'm just got a point in another thread that it can be related to frame, please see here:

cyrus-and/chrome-remote-interface#415

I will investigate it now, but maybe you already know), how to get access to this frame?.. Thanks! :)

[kblok]

That DIV is inside an iframe. You would need to get the frame first and then query inside the frame.

[MilnerAlex]

Thanks Dario, I will start digging in this way :) Can you please do not close this issue for a while, I'll close tomorrow myself - thanks!

[kblok]

You could infer the frame based on the URL :)

var frame Page.Frames.First(f => f.Url.Contains("iframe.html")

[MilnerAlex]

I'll try it tomorrow! Thanks a lot again! :)

[MilnerAlex]

The problem is solved (get frames and query on each). Thanks a lot Dario! :)