如何使用 JavaScript 查询为 facebook 自动化按钮?

Question

我正在尝试在下面自动化 facebook 捐赠按钮与 javascript 查询

"捐赠"按钮的屏幕截图

document.getElementById('pay_button').click();

但问题是我得到的回应是

Uncaught TypeError: Cannot read property 'click' of null

这意味着没有这样的ID，但Facebook源代码显示data-testid="pay_button"。任何人都可以帮助我如何自动化此捐赠按钮，也许我使用了错误的类 ID？我尝试使用其他类，但我得到的只是空，在这种情况下如何识别正确的类 ID？

    <div class="_39ge">
   <div class="_39gi">
      <button data-testid="pay_button" type="button" aria-disabled="false" class="_271k _1qjd _7tvm _7tv2 _7tv4" style="width: 100%; letter-spacing: normal; color: rgb(255, 255, 255); font-size: 12px; font-weight: bold; font-family: Arial, sans-serif; line-height: 34px; text-align: center; background-color: rgb(0, 164, 0); border-color: rgb(0, 164, 0); height: 36px; padding-left: 19px; padding-right: 19px; border-radius: 2px;">
         <div class="_43rl">
            <div data-hover="tooltip" data-tooltip-display="overflow" class="_43rm">
               <div class="_304_ clearfix">
                  <div class="_ohe lfloat">
                     <div class="_2pis">Donate</div>
                  </div>
                  <div class="_ohf rfloat">
                     <div class="_2pii"><span>$55.00</span></div>
                  </div>
               </div>
            </div>
         </div>
      </button>
   </div>
</div>

截图来自FB视图源

Answer 1

您可以尝试使用其他选择器。

$(function() {
  $("[data-testid='pay_button']").click(function() {
    console.log("Button Clicked.");
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="_39ge">
  <div class="_39gi">
    <button data-testid="pay_button" type="button" aria-disabled="false" class="_271k _1qjd _7tvm _7tv2 _7tv4" style="width: 100%; letter-spacing: normal; color: rgb(255, 255, 255); font-size: 12px; font-weight: bold; font-family: Arial, sans-serif; line-height: 34px; text-align: center; background-color: rgb(0, 164, 0); border-color: rgb(0, 164, 0); height: 36px; padding-left: 19px; padding-right: 19px; border-radius: 2px;">
         <div class="_43rl">
            <div data-hover="tooltip" data-tooltip-display="overflow" class="_43rm">
               <div class="_304_ clearfix">
                  <div class="_ohe lfloat">
                     <div class="_2pis">Donate</div>
                  </div>
                  <div class="_ohf rfloat">
                     <div class="_2pii"><span>$55.00</span></div>
                  </div>
               </div>
            </div>
         </div>
      </button>
  </div>
</div>

这是一个属性选择器，查看更多。