如何在Puppeteer中测试navigator.share()函数的运行情况？

因为navigator.share()依赖浏览器原生分享弹窗，无头模式下无法直接交互验证弹窗行为，所以自动化测试的核心是验证该函数是否被正确调用、传入参数是否符合预期，以及页面在分享成功/失败时的逻辑是否正常。下面是具体实现方案：

方法1：替换navigator.share并记录调用信息 #

通过注入脚本覆盖浏览器原生的navigator.share，记录调用状态和传入的数据，之后验证这些信息即可。

示例代码： #

const puppeteer = require('puppeteer');
const assert = require('assert');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('你的测试页面URL');

  // 注入脚本，替换navigator.share并记录调用
  await page.evaluate(() => {
    // 全局变量存储调用状态和数据
    window.shareInvocation = {
      called: false,
      data: null,
      error: null
    };

    navigator.share = async (shareData) => {
      window.shareInvocation.called = true;
      window.shareInvocation.data = shareData;
      // 模拟分享成功（如需测试失败，替换为Promise.reject(new Error('用户取消分享'))）
      return Promise.resolve();
    };
  });

  // 触发页面上的分享按钮点击
  await page.click('#share-btn'); // 替换为你的分享按钮选择器

  // 等待分享函数调用完成（如果是异步操作，确保等待完成）
  await page.waitForFunction(() => window.shareInvocation.called);

  // 获取调用信息并验证
  const shareInvocation = await page.evaluate(() => window.shareInvocation);
  
  // 断言验证
  assert.ok(shareInvocation.called, 'navigator.share未被调用');
  assert.deepStrictEqual(shareInvocation.data, {
    title: '预期的分享标题',
    text: '预期的分享内容',
    url: '预期的分享链接'
  }, '分享参数不符合预期');

  await browser.close();
})();

方法2：测试分享失败场景 #

如果需要验证页面在用户取消分享（即navigator.share返回reject）时的处理逻辑，只需要修改模拟的navigator.share返回reject，然后检查页面的错误提示或状态：

// 修改注入的脚本部分
navigator.share = async (shareData) => {
  window.shareInvocation.called = true;
  window.shareInvocation.data = shareData;
  // 模拟用户取消分享
  return Promise.reject(new Error('AbortError'));
};

// 点击后，验证页面的错误处理逻辑，比如是否显示提示
const hasErrorToast = await page.$eval('.error-toast', el => el.style.display !== 'none');
assert.ok(hasErrorToast, '分享失败时未显示错误提示');

关键说明 #

• 无需测试原生分享弹窗的显示：这属于浏览器本身的功能，不在自动化测试的范围内，我们只需要确保页面正确触发了navigator.share并传入了正确参数。
• 异步等待：如果分享按钮的点击是异步触发navigator.share，一定要用waitForFunction等待调用状态更新，避免断言时机过早导致失败。

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