[Question] $eval vs getProperties

[JohnPucciarelli]

Hi,

I am a little confused as to what getProperties should return. I seem to be getting references to objects (react internals in my case) instead of elements as expected. I put together an example below:

const playwright = require('playwright');

(async () => {
  const browser = await playwright['chromium'].launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://www.instagram.com/XYZ');

  // WORKS AS EXPECTED
  console.log('Element "href" property via $eval: ');
  const hrefViaEval = await page.$eval('article a', result => {
    return { text: result.href }; 
  });
  console.log(hrefViaEval);

  // RETURNS JS-OBJECT INSTEAD OF ELEMENT
  console.log('Element property keys via getProperties: ');
  const anchorEl = await page.$('article a');
  const anchorProperties = await anchorEl.getProperties();
  for (key of anchorProperties.keys()) {
    console.log(key);
  }

  await browser.close();
})();

Output:

Element "href" property via $eval: 
{ text: 'https://www.instagram.com/p/B-AZ5nxjsgP/' }

Element property keys via getProperties: 
__reactInternalInstance$zppp5p7xcbe
__reactEventHandlers$zppp5p7xcbe

Any help is greatly appreciated.

[aslushnikov]

I am a little confused as to what getProperties should return.

@JohnPucciarelli the getProperties actually returns own properties of object, which is

const element = document.querySelector('article a');
console.log(Object.getOwnPropertyNames(element));

So thus the difference. It is actually confusing; at the very least we should clarify this in the documentation.

@dgozman: what do you think about renaming getProperties into getOwnProperties?

[JohnPucciarelli]

That makes sense now. I agree that getOwnProperties is more clear as I expected getProperty to be able to access properties present on the element's prototype chain.

Thanks for the help @aslushnikov 👍