在WebDriverIO中模拟/冻结时间解决动态年龄测试失败问题

针对你遇到的动态年龄每月更新触发快照验证失败、构建终止的问题，以下几种方案可以解决：

1. 全局冻结浏览器的日期时间 #

通过browser.execute在浏览器上下文篡改全局Date对象，让页面所有日期计算都基于固定值，这样年龄就不会随真实时间变化：

// 在测试前置钩子（如before）中执行，固定日期为2024-01-01
browser.execute(() => {
  const fixedDate = new Date('2024-01-01T00:00:00Z');
  window._originalDate = window.Date;
  
  // 替换Date构造函数，无参数时返回固定日期
  window.Date = function(...args) {
    return args.length ? new window._originalDate(...args) : new window._originalDate(fixedDate);
  };
  // 覆盖Date.now()方法
  window.Date.now = () => fixedDate.getTime();
  // 继承静态属性
  Object.assign(window.Date, window._originalDate);
});

// 测试结束后在后置钩子（如after）恢复原始Date，避免影响其他测试
browser.execute(() => {
  window.Date = window._originalDate;
  delete window._originalDate;
});

2. 直接修改页面年龄元素的显示文本 #

虽然元素不可编辑，但可以通过JS强制修改其文本内容，绕过动态计算逻辑：

// 定位年龄元素的选择器，替换成你实际的选择器
const ageSelector = '[data-testid="user-age"]';

// 执行JS修改文本为固定值
browser.execute((selector) => {
  const ageElement = document.querySelector(selector);
  if (ageElement) {
    ageElement.textContent = '30岁'; // 设置固定年龄
  }
}, ageSelector);

// 等待元素文本更新后再执行快照验证
await $(ageSelector).waitForDisplayed();
await browser.checkFullPageScreen('user-profile');

如果之前修改DOM无效，可能是修改后页面重新渲染覆盖了内容，可以尝试在页面初始化阶段注入修改逻辑：

browser.executeAsync((done) => {
  // 监听DOM加载完成前的事件
  document.addEventListener('DOMContentLoaded', () => {
    const ageElement = document.querySelector('[data-testid="user-age"]');
    if (ageElement) {
      ageElement.textContent = '30岁';
    }
    done();
  });
});

3. 在快照验证中忽略年龄元素 #

如果不想修改日期或DOM，可以在快照工具中配置忽略年龄元素的区域，避免动态内容影响验证结果。以wdio-image-comparison-service为例：

await browser.checkFullPageScreen('dashboard', {
  ignoreElements: [
    await $('[data-testid="user-age"]') // 忽略该元素的所有内容
  ]
});

如果是DOM快照验证（如wdio-screenshot的文档快照），可以在生成快照前替换年龄元素：

browser.execute(() => {
  const ageElement = document.querySelector('[data-testid="user-age"]');
  if (ageElement) {
    ageElement.replaceWith(document.createTextNode('30岁'));
  }
});
await browser.saveDocumentSnapshot('user-profile');

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