使用Nightmare JS无法定位并点击‘Start this parking’按钮求助

问题分析 #

你遇到的核心问题是Angular生成的动态类名（如ng-tns-c36-26）和_ngcontent-*属性会随应用编译变化，导致基于完整类名的定位失效。以下是几种可靠的解决方案：

方案1：通过按钮文本精准定位 #

直接用按钮的显示文本作为定位依据，这是最稳定的方式，不受动态属性影响：

.evaluate(function() {
  const buttons = document.querySelectorAll('button');
  for (const btn of buttons) {
    if (btn.textContent.trim() === 'Start this parking') {
      btn.click();
      break; // 找到目标按钮后停止循环
    }
  }
})

方案2：结合固定类名+文本定位 #

保留Angular不会修改的基础类名，再配合文本过滤，兼顾精度和稳定性：

.evaluate(function() {
  const targetButtons = document.querySelectorAll('button.btn.btn-primary.btn-block');
  for (const btn of targetButtons) {
    if (btn.textContent.trim() === 'Start this parking') {
      btn.click();
      break;
    }
  }
})

方案3：模糊匹配动态属性（备选） #

如果必须处理_ngcontent-*属性，可以用CSS属性选择器的模糊匹配规则：

.evaluate(function() {
  const button = document.querySelector('button.btn.btn-primary.btn-block[_ngcontent-*]');
  if (button && button.textContent.trim() === 'Start this parking') {
    button.click();
  }
})

额外注意事项 #

• 确保按钮已完成渲染：在evaluate前添加.wait()等待目标元素加载，比如：

  .wait('button.btn.btn-primary.btn-block')
  .evaluate(...)
  

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