Get the CSS attribute of an element outside the DOM world

Question

I want to find out of the 'display' of an element outside the DOM world.

If in the DOM world, you can use getAttribute() , what would be its counter-part? I can't seem to get it using JSHandle.getProperties() or JSHandle.getProperty('display').jsonValue()

const loadingEl = await this.page.$('#app-container > main > div > div > div.infinite-loading-container > div:nth-child(1) > span')
const props = await loadingEl.getProperties()
const el = [] 
for (const property of props.values()) {
     const element = property.asElement();
           if (element) {
              el.push(element);
           }
}
console.log(el)

I'm trying to find out of the display is set to 'none'

Answer 1

I'd use getComputedStyle in an eval block to get the display value:

const puppeteer = require("puppeteer"); // ^19.1.0

const html = `<!DOCTYPE html><html><head>
<style>
p { display: none; }
</style>
</head>
<body>
<p>can't see me</p>
</body>
</html>`;

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  await page.setContent(html);
  const display = await page.$eval(
    "p",
    el => getComputedStyle(el).display
  );
  console.log(display); // => none
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

Get the CSS attribute of an element outside the DOM world

Question

1 answers

solution1
0 2023-01-08 16:26:07

Get the CSS attribute of an element outside the DOM world

Question

1 answers

solution1 0 2023-01-08 16:26:07

solution1
0 2023-01-08 16:26:07