如何用Playwright获取h1元素中的订单号并排除子元素内容？

问题场景 #

对应的HTML结构：

<h1 class="FulfillmentHeaderstyles__FulfillmentHeaderTitle-sc-1ges29w-3 PjsJX">
   Order #1004066
   <div aria-label="promise time" class="FulfillmentHeaderstyles__FulfillmentPromiseTime-sc-1ges29w-7 elUWJn">7:09 PM</div>
</h1>

尝试代码：

const orderNumber = await window.locator('[class*=FulfillmentHeaderTitle]').textContent();
console.log(orderNumber);

输出结果为 Order #10040657:09 PM，希望仅获取订单号 Order #1004065。

解决方案 #

方法1：直接操作DOM获取目标文本节点

通过evaluate方法访问原生DOM元素，提取H1下的直接文本节点内容：

const orderNumber = await window.locator('[class*=FulfillmentHeaderTitle]').evaluate(el => {
  // 获取第一个文本节点并去除首尾空白字符
  return el.firstChild.textContent.trim();
});
console.log(orderNumber);

方法2：正则匹配提取固定格式的订单号

如果订单号格式固定为Order #加数字，用正则从完整文本中精准匹配：

const fullText = await window.locator('[class*=FulfillmentHeaderTitle]').textContent();
const orderMatch = fullText.match(/Order #\d+/);
const orderNumber = orderMatch ? orderMatch[0] : '';
console.log(orderNumber);

方法3：按换行分割文本

利用HTML结构中订单号与时间分属不同行的特点，分割后取第一部分：

const fullText = await window.locator('[class*=FulfillmentHeaderTitle]').textContent();
const orderNumber = fullText.split('\n')[0].trim();
console.log(orderNumber);

说明 #

原代码的textContent()会获取元素及其所有子元素的文本内容，导致订单号和子div的时间文本被拼接。上述方法通过DOM节点定位、正则匹配或文本分割，可精准提取目标订单号。

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