Puppeteer：获取 innerHTML

Question

有人知道如何获取元素的 innerHTML 或文本吗？甚至更好；如何单击具有特定 innerHTML 的元素？这就是正常 JavaScript:

的工作方式

var found = false
$(selector).each(function() {
    if (found) return;
    else if ($(this).text().replace(/[^0-9]/g, '') === '5' {
        $(this).trigger('click');
        found = true
    }
});

在此先感谢您的帮助！

Answer 1

这就是我获取 innerHTML 的方式：

page.$eval(selector, (element) => {
  return element.innerHTML
})

Answer 2

<div id="innerHTML">Hello</div>


var myInnerHtml = document.getElementById("innerHTML").innerHTML;
console.log(myInnerHtml);

Answer 3

您可以利用 page.$$(selector) to get all your target elments and then use page.evaluate() 获取内容 (innerHTML)，然后应用您的条件。它应该看起来像：

const targetEls = await page.$$('yourFancySelector');
for(let target of targetEls){
  const iHtml = await page.evaluate(el => el.innerHTML, target); 
  if (iHtml.replace(/[^0-9]/g, '') === '5') {
    await target.click();
    break;
  }
}

Answer 4

这应该与木偶操纵者一起工作:)

const page = await browser.newPage();
const title = await page.evaluate(el => el.innerHTML, await page.$('h1'));

Answer 5

关于你这部分问题...

"Or even better; how to click an element with a specific innerHTML."

还有一些particulars around innerHTML, innerText, and textContent that might give you grief. Which you can work-around using a sufficiently loose XPath query with Puppeteer v1.1.1。

像这样：

const el = await page.$x('//*[text()[contains(., "search-text-here")]]');
await el[0].click({     
                button: 'left',
                clickCount: 1,
                delay: 50
            });

请记住，您将从该查询返回一个 ElementHandles 数组。所以...如果您的文本不是唯一的，您正在寻找的特定项目可能不在 [0]。

Options 如果您只需要一个 left-click.

，则不需要传递给 .click()

Answer 6

你可以简单地写成下面这样。 (不需要最后一句await)

const center = await page.$eval('h2.font-34.uppercase > strong', e => e.innerHTML);

Answer 7

我永远无法让 .innerHtml 可靠地工作。我总是这样做：

let els = page.$$('selector');
for (let el of els) {
  let content = await (await el.getProperty('textContent')).jsonValue();
}

那么您的文本就在 'content' 变量中。

Answer 8

返回元素的 innerHTML

您可以使用以下方法来return一个元素的innerHTML：

page.$eval()

const inner_html = await page.$eval('#example', element => element.innerHTML);

page.evaluate()

const inner_html = await page.evaluate(() => document.querySelector('#example').innerHTML);

page.$() / elementHandle.getProperty() / jsHandle.jsonValue()

const element = await page.$('#example');
const element_property = await element.getProperty('innerHTML');
const inner_html = await element_property.jsonValue();

单击具有特定 innerHTML 的元素

您可以使用以下方法根据元素中包含的 innerHTML 单击元素：

page.$$eval()

await page.$$eval('.example', elements => {
  const element = elements.find(element => element.innerHTML === '<h1>Hello, world!</h1>');
  element.click();
});

page.evaluate()

await page.evaluate(() => {
  const elements = [...document.querySelectorAll('.example')];
  const element = elements.find(element => element.innerHTML === '<h1>Hello, world!</h1>');
  element.click();
});

page.evaluateHandle() / elementHandle.click()

const element = await page.evaluateHandle(() => {
  const elements = [...document.querySelectorAll('.example')];
  const element = elements.find(element => element.innerHTML === '<h1>Hello, world!</h1>');
  return element;
});

await element.click();

Puppeteer：获取 innerHTML

Puppeteer: Get innerHTML

javascript

selenium

webautomation

node.js

puppeteer

返回元素的 innerHTML

page.$eval()

page.evaluate()

page.$() / elementHandle.getProperty() / jsHandle.jsonValue()

单击具有特定 innerHTML 的元素

page.$$eval()

page.evaluate()

page.evaluateHandle() / elementHandle.click()