前端E2E自动化测试方案

// myPage.tsx
const pageTestid = 'my-page'
export function MyPage() {
  return <div>
    <ChildComponent testid={`${pageTestid}--child-component`} />
    <input name="value" data-testid={`${pageTestid}--value=input`} />
  </duv>
}

// child-component.tsx
export function ChildComonent({testid}) {
  const dataList = [{id: 357, value: 1}, {id: 958, value: 1}]
  return <div>
    <GrandchildComponent testid={testid && `${testid}--grand-child-component`} />
    {
      dataList.map(({id}, index) => (
        <Button
          data-testid={testid && `${testid}--data-btn-${index}`}
          key={id}
        >{id}</Button>
      ))
    }
  </div>
}

function addUiTestId (className, testid, flag?){
  if (testid) {
    const elements: any = document.getElementsByClassName(className) || [];
    Array.from(elements)?.forEach((el, i) => {
      setAttributeRecursively(
        el,
        'data-testid',
        generateId,
        !flag ? `${testid}--${className}` : className, // flag 为true，表示className已经包括testid了
        0,
        `${i}`,
      );
    });
  }
};
 
function setAttributeRecursively(
  element,
  attrName,
  attrValueGenerator,
  testid,
  depth = 0,
  index = '',
) {
  // 为当前元素设置属性，attrValueGenerator是一个函数，用于生成属性值
  if (shouldAddTestid(element, attrName)) {
    element.setAttribute(attrName, attrValueGenerator(testid, depth, index));
  }
 
  // 遍历所有子元素并递归调用此函数
  Array.from(element.children).forEach((child, i) => {
    setAttributeRecursively(
      child,
      attrName,
      attrValueGenerator,
      testid,
      depth + 1,
      `${index}-${i}`,
    );
  });
}
export function Component ({testid}) {
  useEffect({
    setTimeout(() => {
      addUiTestId(`ui-component--${testid}`, testid, true);
    }, 400)
  }, [])
  useEffect({
    if (open) {
      setTimeout(() => {
        addUiTestId(`ui-component--${testid}--dropdown`, testid, true);
      }, 400)
    }
  }, [open])
  return <div className={testid && `ui-component--${testid}`}>
    <Select dropdownClassName={testid && `ui-component--${testid}--dropdown`} />
    ...
  </div>
}

// background.js
// 插件启动，监听tabs激活就直接插入进去
chrome.tabs.onActivated.addListener(async function (activeInfo) {
  chrome.tabs.get(activeInfo.tabId, function (tab) {
    if (!tab.url.startsWith("chrome://")) {
      chrome.scripting.executeScript({
        target: { tabId: activeInfo.tabId },
        files: ["content.js"],
      });
    }
  });
});
// 
// 负责与content.js通信
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  if (message.action === 'xxx') {}
})

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
	const { tag, action } = request;
	const ul = window.location.host;
	switch (action) {
		case 'startRecord':
			const element = document.getElementById('e2e-testing-extend-container');
			if (element) {
				return;
			}
      appendModal();
      addResScript();
			break;
  }
})
 
function appendModal() {
  const pickerDiv = document.createElement("div");
  pickerDiv.id = "e2e-testing-extend-container";
  document.body.appendChild(pickerDiv);
}
 
function addResScript() {
	let script = document.createElement('script');
	script.setAttribute('defer', 'defer');
	script.src = chrome.runtime.getURL('embedded/embedded_main.js');
	document.body.appendChild(script);
}

const addEventListenerToDom = () => {
  document.addEventListener('click', handleClickEvent, true);
  document.addEventListener('mouseover', handleMouseOverEvent);
  document.addEventListener('mouseout', handleMouseOutEvent);
};

const lastTargetRef = useRef(null)
const lastTargetStyle = useRef(null)
function handleMouseOverEvent(event) {
  let targetElement: any = event.target;
  // 对于一些特殊的元素进行过滤
  if (checkShouldExcludeNode(targetElement)) {
    return;
  }
  const nodeInfo = getElement(targetElement, true);
  const {
    son: {type},
  } = nodeInfo;
  if (type === undefined) {
    return;
  }
  setCurrentTarget(targetElement)
}
 
useEffect(() => {
  if (lastTargetRef.current) {
    lastTargetRef.current.style = lastTargetStyle.current
  }
  lastTargetRef.current = currentTarget, lastTargetRef.current.style = currentTarget.style;
  const txt = getFindTxt(nodeInfo),
    rect = targetElement.getBoundingClientRect();
  currentTarget.style = {...}
  globalTooltip.innerText = txt;
  globalTooltip.style.top = rect.top - 10 // something like that
  globalTooltip.style.left = rect.left - 10 // something like that
}, [currentTarget])

function getClickText(node: ActList) {
  const pathStr = nodePathForPlay(node);
  return `await page.${pathStr}.click();\n`;
}
 
function getHoverText(node: ActList) {
  const pathStr = nodePathForPlay(node);
  return `await page.${pathStr}.hover();\n`;
}
function getFillText(node: ActList) {
  const {fillTxt} = node;
  const pathStr = nodePathForPlay(node);
  return `await page.${pathStr}.fill('${fillTxt}');\n`;
}
function getTimeText(time = '1') {
  const num = parseInt(time, 10) * 1000;
  return `await page.waitForTimeout(${num});\n`;
}
function getWaitElementText(node: ActList) {
  const pathStr = nodePath(node);
  return `await page.waitForSelector('${pathStr}');\n`;
}
function getWaitBtnText(node: ActList) {
  const pathStr = nodePath(node);
  return `await page.waitForSelector('${pathStr}[data-active="true"]');\n`;
}
function getPageResult() {
  return `const v1 = await page.evaluate(() => {
      return window.__getPageResult();
  });\n`;
}