如何用HtmlUnitDriver点击元素并获取服务器返回的修改后文本？

没问题，我来帮你搞定这个点击元素获取服务器返回文本的需求！结合你描述的场景，我整理了几种实用的方法，一步步来：

方法1：原生JS监听点击+拦截请求（适合嵌入代码长期使用） #

这个方法可以在页面中嵌入代码，自动捕获点击后的服务器响应并提取目标文本：

// 第一步：拦截所有fetch请求，筛选我们需要的目标请求
const originalFetch = window.fetch;
window.fetch = async (...args) => {
  const response = await originalFetch(...args);
  // 根据请求的URL/参数特征，判断是不是点击按钮触发的请求
  if (args[0].includes('phone') || args[0].includes('z8rpg')) {
    // 克隆响应（响应流只能读取一次，克隆后不影响原有逻辑）
    const clonedResp = response.clone();
    // 读取响应内容，根据实际返回格式选text()或json()
    const respContent = await clonedResp.text();
    
    // 这里提取修改后的TEXT1：如果返回是HTML，就解析DOM获取；如果是JSON就直接取对应字段
    // 举个HTML返回的例子：
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = respContent;
    const updatedText = tempDiv.querySelector('.xx-large')?.textContent;
    console.log('服务器返回的修改后文本:', updatedText);
  }
  return response;
};

// 第二步：监听目标按钮的点击事件
const targetBtn = document.querySelector('.contact-button.link-phone[data-rel="phone"]');
targetBtn.addEventListener('click', (e) => {
  // 如果页面原有逻辑不需要跳转，可以加e.preventDefault()阻止默认行为
  // e.preventDefault();
});

方法2：浏览器DevTools快速捕获（临时调试首选） #

如果只是临时获取数据，不用写代码的话，用浏览器调试工具最方便：

• 按下F12打开开发者工具，切换到Network标签页
• 勾选面板顶部的「Preserve log」选项，防止点击后页面跳转丢失请求日志
• 点击目标div按钮，此时Network列表会出现新的请求
• 用搜索框输入phone或z8rpg筛选出目标请求，点击进入后查看Response或Preview标签，就能找到修改后的TEXT1内容

方法3：适配jQuery/其他前端框架的场景 #

如果页面用了jQuery，可以用下面的方式监听：

// 监听按钮点击
$('.contact-button.link-phone[data-rel="phone"]').on('click', function() {
  // 全局监听ajax请求完成事件
  $(document).ajaxComplete(function(event, xhr, settings) {
    if (settings.url.includes('phone') || settings.data.includes('z8rpg')) {
      const respContent = xhr.responseText;
      // 同样根据返回格式提取TEXT1
      console.log('修改后的文本:', $(respContent).find('.xx-large').text());
    }
  });
});

一些关键注意事项： #

• 先确认请求的URL/参数特征：比如是否包含phone或z8rpg，这样能精准定位到目标请求
• 根据服务器返回格式选择解析方式：如果是JSON就用json()解析，HTML/纯文本用text()
• 若点击后页面会跳转，一定要在Network面板勾选「Preserve log」，否则请求日志会被清空

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