Playwright 如何获取元素的outerHTML内容并保存为字符串

page.$$() 执行后返回的是ElementHandle 对象数组，对应所有匹配到的目标 DOM 元素，你可以通过 evaluate() 方法直接读取 DOM 元素的 outerHTML 属性，拿到字符串格式的结果。

单元素获取示例 #

// 先通过 page.$$ 拿到元素数组
const targetElements = await page.$$('你使用的目标选择器');
// 取下标为 0 的第一个元素的 outerHTML
const firstElementOuterHtml = await targetElements[0].evaluate(domNode => domNode.outerHTML);

批量获取所有匹配元素的 outerHTML 示例 #

const targetElements = await page.$$('你使用的目标选择器');
// 批量拿到所有元素的 outerHTML 字符串，存储为数组
const allOuterHtmlList = await Promise.all(
  targetElements.map(element => element.evaluate(domNode => domNode.outerHTML))
);

注意：如果没有匹配到任何元素，page.$$() 会返回空数组，访问前建议先判断 targetElements.length 是否大于 0，避免下标访问报错。

内容的提问来源于stack exchange，提问作者eeeeeeeeeeeeeeeeeeeeeeeeeeeeee