Javascript 木偶演员：获取innerHTML

有人知道如何获取元素的

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
    }
});

---

提前感谢您的帮助

这就是我获取innerHTML的方式：

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

你好 var myInnerHtml=document.getElementById（“innerHTML”）.innerHTML； log（myInnerHtml）； 您可以利用获取所有目标元素，然后使用获取内容（

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;
  }
}

---

这应该适用于木偶演员：）

---

关于你问题的这一部分

“或者更好；如何单击具有特定innerHTML的元素。”

关于innerHTML、innerText和textContent，有一些可能会让你感到悲伤。您可以使用足够松散的XPath查询来解决此问题

大概是这样的：

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

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

---

如果只需单击一次鼠标左键，则不需要传递给.click（）。

您只需按以下方式编写即可。（无需等待最后一部分的判决）

---

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

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

然后在“content”变量中输入文本。

返回元素的innerHTML 可以使用以下方法返回元素的名称：

/ /

---

单击具有特定innerHTML的元素 可以使用以下方法基于元素中包含的元素单击元素：

等待页面。$$eval（'.example'，元素=>{
const element=elements.find（element=>element.innerHTML==='Hello，world！'）；
元素。单击（）；
});

等待页面。评估（（）=>{
常量元素=[…document.querySelectorAll（'.example'）；
const element=elements.find（element=>element.innerHTML==='Hello，world！'）；
元素。单击（）；
});

/

const元素=等待页面。evaluateHandle（（）=>{
常量元素=[…document.querySelectorAll（'.example'）；
const element=elements.find（element=>element.innerHTML==='Hello，world！'）；
返回元素；
});
等待元素。单击（）；

我这样做，然后控制台log element.innerHTML，它会打印出承诺{}。即使元素已渲染到浏览器（headless false）。你知道为什么会发生这种情况吗？请也尝试一下

wait page.goto（'https://example.com');                                                   const textContent=wait page.evaluate（（）=>document.querySelector（'p'）.textContent）；const innerText=wait page.evaluate（（）=>document.querySelector（'p'）.innerText）；console.log（textContent）；log（innerText）无关答案必须使用木偶你在这里评估两次。这似乎是个坏主意。如果
wait page.$（'h1'）
在前面被调用，并且您计划多次使用元素句柄，那么这可能很有用。
const el = await page.$x('//*[text()[contains(., "search-text-here")]]');
await el[0].click({     
                button: 'left',
                clickCount: 1,
                delay: 50
            });

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

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

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

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

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

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

await page.evaluate(() => {
  const elements = [...document.querySelectorAll('.example')];
  const element = elements.find(element => element.innerHTML === '<h1>Hello, world!</h1>');
  element.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();