Puppeteer元素定位错误及UDP发送变量问题求助

.ng-binding是Angular框架的通用绑定类，页面中大量元素都会使用，自然会出现定位错误。可以用以下几种精准方式解决：

方式1：结合父元素缩小范围 #

先找到包裹目标文本的父容器，再定位内部的.ng-binding元素。假设目标文本在class为unbilled-section的容器内，示例代码：

// 先定位父容器，再筛选内部的绑定元素
const targetElement = await page.$('.unbilled-section .ng-binding');
if (targetElement) {
  // 提取元素文本
  const fullText = await page.evaluate(el => el.textContent.trim(), targetElement);
  // 从文本中提取价格部分（匹配$开头的金额）
  const priceMatch = fullText.match(/\$\d+\.\d+/);
  const price = priceMatch ? priceMatch[0] : null;
  console.log('获取到的未结费用:', price);
}

方式2：用XPath匹配文本内容 #

直接通过目标文本的特征片段定位元素，XPath支持文本包含匹配，示例代码：

// 查找包含"Total unbilled tariff charge"的元素
const [targetElement] = await page.$x('//*[contains(text(), "Total unbilled tariff charge")]');
if (targetElement) {
  const fullText = await page.evaluate(el => el.textContent.trim(), targetElement);
  const priceMatch = fullText.match(/\$\d+\.\d+/);
  const price = priceMatch ? priceMatch[0] : null;
  console.log('获取到的未结费用:', price);
}

方式3：利用元素唯一属性定位 #

打开浏览器开发者工具（F12），找到目标元素，查看是否有id、data-*这类唯一属性。比如元素有data-id="unbilled-total"，直接用该属性定位：

const targetElement = await page.$('[data-id="unbilled-total"]');
// 后续文本提取逻辑同上

核心是确保在成功获取到price变量后再执行UDP发送（Puppeteer是异步操作，避免变量未赋值就发送）。假设你的UDP基础代码如下：

const dgram = require('dgram');
const client = dgram.createSocket('udp4');

修改为发送price[0]的代码，把UDP逻辑嵌入到获取价格的代码块内：

// 放在获取到price数组的代码块里
if (price && price.length > 0) {
  const sendData = Buffer.from(price[0]);
  // 替换成你的UDP端口和目标地址
  client.send(sendData, 1234, '192.168.1.100', (err) => {
    if (err) {
      console.error('UDP发送失败:', err);
    } else {
      console.log('已发送费用数据:', price[0]);
    }
    client.close();
  });
} else {
  console.log('未获取到有效费用数据，跳过UDP发送');
}

内容的提问来源于stack exchange，提问作者Roger D.