如何使用Puppeteer和纯JavaScript检查元素是否可见？

Question

如何使用Puppeteer和纯JavaScript检查元素是否可见？

26

我希望用纯JavaScript（而不是jQuery）和Puppeteer来检查DOM元素是否可见，该怎么做？在这里“可见”指的是该元素通过CSS呈现，而不是隐藏的（例如通过display: none）。例如，我可以通过以下方式确定我的元素#menu是否未被CSS规则display: none隐藏：

const isNotHidden = await page.$eval('#menu', (elem) => {
  return elem.style.display !== 'none'
})

我怎样一般性地确定元素是否隐藏，而不只是通过 display: none 属性？

- aknuds1

1

我不知道对于其他的隐藏方法它是否能够一直正常工作，但是elem.getBoundingClientRect()返回了可以进行测试的独特数据。 - AuxTaco

@AuxTaco 使用elem.getBoundingClientRect()在控制台上返回一个{}，无论元素是否准备好:( - PayamB.

由于Puppeteer始终可以运行正常的JS，因此应链接规范线程检查DOM中元素是否可见，因为它具有大量资源，可以通过.evaluate()在Puppeteer中使用。 - ggorlen

@PayamB. 你试过返回 JSON.stringify(elem.getBoundingClientRect()) 吗？这很重要的原因是 elem.getBounding... 是一个只读的 DOMRect 而不是一个普通对象，所以 Puppeteer 的序列化似乎受到影响，无法捕获完整的对象。 - ggorlen

13个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mr Z · Answer 1

如果您只想知道一个元素是否可见，那么可以使用此函数。在调用此函数之前，请确保页面已准备就绪。您可以通过在其他您期望可见的元素上使用waitForSelector来实现这一点。

async function isVisible(page, selector) {
  return await page.evaluate((selector) => {
    var e = document.querySelector(selector);
    if (e) {
      var style = window.getComputedStyle(e);

      return style && style.display !== 'none' && style.visibility !== 'hidden' && style.opacity !== '0';
    }
    else {
      return false;
    }
  }, selector);
}


// Example usage:
page.waitForSelector('#otherPeerElement');
var myElementIsVisible = await isVisible(page, '#visibleOrNot');

if (myElementIsVisible) {
// Interact with #visibleOrNot
}

- Salman Srabon · Answer 2

const firstName= await page.$('[name=firstName]')
expect(firstName!=null).equal(true)

- Antuan · Answer 3

我会使用@aknuds1的方法，但你也可以这样做。

expect((await page.$('#element')) !== null).toEqual(true)

如果您正在异步获取资源，请注意以上期望可能不会通过，因为它不会等待UI上反映的更改。这就是为什么在这种情况下可能不首选此方法的原因。