Google Messages中.click()方法无效的技术求助

我出于学习目的，尝试仅用JavaScript实现Google Messages的消息发送自动化。目前已经成功用JS填充了textarea的消息内容，但发送按钮的.click()点击操作完全无效。

发送按钮的HTML代码 #

<button _ngcontent-ng-c1078039276="" mat-button-ripple-uninitialized="" mat-icon-button="" data-e2e-send-text-button="" class="send-button mdc-icon-button mat-mdc-icon-button mat-unthemed mat-mdc-button-base ng-star-inserted" aria-label="Send RCS message" mat-button-is-fab="false">
  <span class="mat-mdc-button-persistent-ripple mdc-icon-button__ripple"></span>
  <mws-icon _ngcontent-ng-c1078039276="" class="send-icon ng-star-inserted" _nghost-ng-c2331098597="">
    <svg viewBox="0 0 24 24" class="flip-in-rtl">
      <path d="M2,3v18l20,-9L2,3zM4,14l9,-2 -9,-2L4,6.09L17.13,12 4,17.91L4,14z"></path>
    </svg>
  </mws-icon>
  <!----><!----><!---->
  <span class="mat-mdc-focus-indicator"></span>
  <span class="mat-mdc-button-touch-target"></span>
</button>

我的尝试 #

我用以下代码选择按钮：

document.getElementsByClassName('send-button mdc-icon-button mat-mdc-icon-button mat-unthemed mat-mdc-button-base ng-star-inserted')

这段代码返回了2个元素，我分别尝试点击索引[0]和[1]：

document.getElementsByClassName('send-button mdc-icon-button mat-mdc-icon-button mat-unthemed mat-mdc-button-base ng-star-inserted')[1].click();

但两种操作都没有任何反应，只有手动点击按钮才能正常发送消息。请问我忽略了什么？

可能的原因及解决方法 #

• 选择器不够精准：你使用的类名包含Angular动态生成的ng-star-inserted，这类类名可能随页面渲染变化，且返回多个元素容易选错。建议使用按钮上专门给自动化测试用的data-e2e-send-text-button属性，选择器更稳定：

  document.querySelector('[data-e2e-send-text-button]').click();
  

• Angular事件绑定特性：Google Messages基于Angular构建，直接调用.click()可能无法触发组件内部绑定的事件。可以模拟真实用户的鼠标操作序列，触发完整的事件流程：

  const sendBtn = document.querySelector('[data-e2e-send-text-button]');
  // 创建并派发鼠标事件
  sendBtn.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, view: window }));
  sendBtn.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, view: window }));
  sendBtn.dispatchEvent(new MouseEvent('click', { bubbles: true, view: window }));
  

• 按钮状态检查：确认填充消息后按钮是否处于可点击状态，若按钮带有disabled属性或类，点击操作会无效：

  const sendBtn = document.querySelector('[data-e2e-send-text-button]');
  console.log(sendBtn.disabled); // 输出false代表按钮可点击
  

• 焦点缺失问题：部分应用要求输入框处于焦点状态才能触发发送逻辑，填充内容后可以先让textarea获取焦点：

  document.querySelector('textarea').focus();
  

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