1. 表格数据加载：用户打开包含ProTable组件页面时，首先会加载数据并显示在表格，数据源通过接口请求获取。
2. 条件筛选和重置：对ProTable进行条件筛选以便查看数据，也可以重置筛选条件以恢复初始状态。
3. 表格分页查询：使用分页器进行翻页等操作，以便展示更多的数据内容。

• 测试用例：通过DOM Class 或者ID查询判定是否存在元素。

• 测试用例: 验证表格的搜索功能是否正确响应用户输入，并能正确筛选和显示符合条件的数据。
• 测试用例：模拟点击重置按钮，并确保表单数据被成功重置为默认值。

• 测试用例：点击页面切换按钮或输入页码，验证表格切换 调用接口有无异常。

• 测试用例：请求到数据，列表元素正常渲染。

• 安全区域操作约束
  在测试环境中，一些删除或更改操作可能会导致测试数据的不一致性或损坏，因此需要对测试环境中的点击行为进行约束，确保在安全区域内进行操作。

• 
  

• 
  

• 
  

• 
  

• 
  

• 
  

• 
  

// 检查一个元素是否在另外一个元素中 原理类似于JQ   $("#container").has(".selector"); const isSafeArea = (parentElement, childElement) => {  const childClassNames = Array.from(childElement.classList);  return childClassNames.every(className => parentElement.querySelector(`.${className}`));};const layoutContentElement = document.querySelector('.layout-content');const isisSafeAreaResult =  isSafeArea(layoutContentElement,element)

• 优化导航栏点击
  许多B端系统中，导航栏是一个常见的元素。为了更加精确地进行测试并提高效率，我们需要规避导航栏的点击或者A链接点击跳转，专注于当前页面的操作。

• 
  

element.matches('a')

1. 数据加载或关闭：通过点击入口按钮显示弹窗，弹窗加载表单项：当用户完成操作后点击关闭按钮，弹窗关闭。
2. 表单操作：在弹窗表单项中可以进行数据输入、选择选项、上传文件等操作。
3. 数据校验：填写完表单数据后，ProForm组件会对表单数据进行校验，确保输入数据符合规定的格式要求。
4. 数据提交：填写完表单数据后，通过点击提交按钮将数据提交到后端接口进行保存或更新。

• 测试用例：通过DOM Class 或者ID查询 判定是否存在元素。

• 测试用例：表单项渐入数据
• 测试用例：验证表格的搜索功能是否正确响应用户输入，并能正确筛选和显示符合条件的数据。
• 测试用例：模拟点击重置按钮，并确保表单数据被成功重置为默认值。

• 测试用例：验证输入字段是否满足预期的格式，如邮箱地址格式、密码强度等。
• 测试用例：验证表单的必填字段是否被正确地标记，并且不能提交空值。

• 测试用例：模拟点击提交按钮拦截接口是有异常。

• 测试用例：模拟点击重置按钮，并确保表单数据被成功关闭。

• 前端准确提交率：确保表单项数据填充完整且点击提交按钮能触发提交接口(填写的数据能够通过前端校验)
• 业务准确提交率：前端准确提交基础上，要求提交接口返回的HTTP状态码为200且bsCode为200(填写的数据能够通过服务端校验)

1. 为每个巡检的页面 URL 分配唯一的 UID，并记录 UID 与 Page URL 的映射关系。
2. 当页面弹出新增弹窗时，填充完数据并点击提交，记录事件类型为 event_type = 'CLICK'，同时记录时间戳和 UID。
3. 劫持接口数据，并记录事件类型为 event_type = 'RESPONSE'。
4. 对 event_type = 'RESPONSE' 的时间戳进行分组统计，确保大于 event_type = 'CLICK' 的时间戳。

// input type 集合const defaultMapElements = {    textarea: fillTextAreaElement,    'input[type="text"]': fillTextElement,    'input[type="password"]': fillTextElement,    'input[type="number"]': fillNumberElement,    select: fillSelect,    'input[type="radio"]': fillRadio,    'input[type="checkbox"]': fillCheckbox,    'input[type="email"]': fillEmail,    'input:not([type])': fillTextElement,    };  // 填充逻辑 const fillTextElement = async (element, character) => {  const selectedCharacters = Array.from({ length: 5 }, () =>randomizer.getCharacter[Math.floor(Math.random() * randomizer.getCharacter.length)]).join('');  const newValue = element.value + (character ? character : selectedCharacters);  if (element) {    triggerSimulatedOnChange(element, newValue, window.HTMLInputElement.prototype);    return newValue;  } };  // Hacky function to trigger react, angular & vue.js onChange on input const triggerSimulatedOnChange = (element, newValue, prototype) => {      const lastValue = element.value;      element.value = newValue;      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;      nativeInputValueSetter.call(element, newValue);      const event = new Event('input', { bubbles: true }) as CustomEvent;      // React 15      event.simulated = true;      // React >= 16      let tracker = element._valueTracker;      if (tracker) {          tracker.setValue(lastValue);      }      element.dispatchEvent(event);  };