检查元素在Node.js中的DOM中是否可见

Question

我想检查元素是否在Node.js的DOM中可见。我使用jsdom库获取DOM结构。有两种方法可以检查客户端javascript中元素的可见性，但是不适用于node.js中的jsdom。

1）即使对于可见元素，offsetParent属性也始终为null

2）dom.window.getComputedStyle(el).display返回block，但是元素的css规则是display: none

const request = require('request');
const jsdom = require("jsdom");
const { JSDOM } = jsdom;

request({ 'https://crooked.com/podcast-series/majority-54/', jar: true }, function (e, r, b) {
  const dom = new JSDOM(b);
  test(dom);
});

const test = (dom) => {
  const hiddenElement = dom.window.document.querySelector('.search-outer-lg');
  const visibleElement = dom.window.document.querySelector('.body-tag-inner');
  console.log(dom.window.getComputedStyle(hiddenElement).display); // block
  console.log(visibleElement.offsetParent); // null
}

是否有可能或另一种方式如何在node.js中检查DOM中元素的可见性？

Answer 1

我尝试了puppeteer而不是jsdom，我得到了正确的display值。这是代码段：

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto(uri);

  const searchDiv = await page.evaluate(() => {
    const btn = document.querySelector('.search-outer-lg');
    return getComputedStyle(btn).display;
  });

  console.log(searchDiv)
  await browser.close()
})()