告别肉眼检测！测试必会的自动识别检测字体大小的方法

梦幻小丑灯

所有测试人几乎都遇到这样的测试场景/测试点：测试不同分辨率下的前端样式是否有挤压变形，字体是否被显示不完整，或字体是否大小与分辨率不匹配等。
但是，所有人也知道该怎么测试——用眼看呗。这个答案很完美~毕竟，“我的眼就是尺”。可是，大家有没有想过一个问题：上百个页面，全靠人眼去辨别吗？如果这样，眼药水都得废掉几瓶吧。
所以，我们要快，还要准！能够机器做的事，就不要人肉。




解决问题
本篇文章我们要解决的问题是：如何识别不同分辨率情况下，浏览器加载应用后字体大小与分辨率不匹配的问题。

简单来讲：我们需要看看，在1280*800、1440*900、1680*1050、1920*1200等分辨率下，应用的字体是不是都是同一字号——分辨率越高，肉眼可见字体越小。
通过F12的elements面板可以看到，其中“Temu 因操纵行为”遭欧盟 17 国消费者组织投诉""咨询标题的字体大小是30px。


设置电脑分辨率为1280*800，这时明显可以看出网站字体没有缩小，字体显得格外“大”。
通过F12的elements面板查看，发现在1280*800的分辨率下，“Temu 因操纵行为”遭欧盟 17 国消费者组织投诉""咨询标题的字体大小仍是30px。

由此可见，该网页没有做自适应处理。


但是，我们是不是所有网页都要 这么排查呢？那得何年何月？！
为此，本文提供一种自动识别、检测前端代码中字体大小的方法。主流程包括：获取所有元素——>获取元素的计算样式——>检测元素是否包含中文字符——>获取元素的字体大小和字体名称——>打印结果。

js代码如下所示：

1. <font face="微软雅黑" size="3">
   
2. function scanChineseFontsAndSizes() {
   
3.   // 获取文档的所有元素，包括input元素
   
4.   var allElements = document.querySelectorAll('*');
   
5.   var chineseFontsAndSizes = [];
   
6. 
   
7.   // 遍历所有元素
   
8.   allElements.forEach(function(element) {
   
9.     // 获取元素的计算样式
   
10.     var computedStyle = window.getComputedStyle(element);
    
11.     // 检查元素是否包含中文字符
    
12.     var chineseText = extractChineseCharacters(element.textContent) || extractChineseCharacters(element.getAttribute('placeholder'));
    
13.     if (chineseText) {
    
14.       // 获取元素的字体大小和字体名称
    
15.       var fontSize = computedStyle.fontSize;
    
16.       var fontFamily = computedStyle.fontFamily;
    
17.       chineseFontsAndSizes.push({
    
18.         element: element,
    
19.         chineseText: chineseText,
    
20.         fontFamily: fontFamily,
    
21.         fontSize: fontSize
    
22.       });
    
23.     }
    
24.   });
    
25. 
    
26.   // 打印结果
    
27.   chineseFontsAndSizes.forEach(function(item) {
    
28.     console.log('Element:', item.element);
    
29.     console.log('Chinese Text:', item.chineseText);
    
30.     console.log('Font Family:', item.fontFamily);
    
31.     console.log('Font Size:', item.fontSize);
    
32.     console.log('---');
    
33.   });
    
34. }
    
35. 
    
36. function extractChineseCharacters(str) {
    
37.   // 正则表达式匹配中文字符
    
38.   var chineseRegex = /[\u4e00-\u9fff]+/g;
    
39.   var matches = str ? str.match(chineseRegex) : null;
    
40.   return matches ? matches.join('') : null;
    
41. }</font>

复制代码

如何使用呢？！——打开应用页面，F12打开开发者面板，console面板输入以下代码，运行即可。




检测结果

如下图所示，代码运行后console结果会打印出现中文字体的元素位置、中文字、字体大小等：

有了element和font size的打印后，我们能够快速地得到页面上字体（中文）的大小信息。
如何判断是否有自适应缺陷


一般来说，有自适应功能的前端设计，字体等大小会跟随分辨率的变化而计算出响应的值。不可能出现在1280*800、1440*900、1680*1050、1920*1200等分辨率下都是相同字体大小的情况。
如上样例所示，如果在不同分辨率情况下，字体大小保持一致，则会出现小屏字体挤满屏幕，大屏字体只占部分、留白很多的情况下。
一旦通过脚本检测到在不同分辨率情况下字体大小未发生变化，则可以大胆地怀疑存在分辨率缺陷。


如何排除误报
当然，脚本不可能时百分百准确，也有存在误报的情况。那么如何排除误报呢？只需我们简单的二次确认即可。
锁定可能存在的element，在element上右键，点击reveal in element pannel。

会直接返回element面板，对应应用页面会呈现选中状态，可肉眼二次确认，排除误报。



总结
本文提供了一种可以辅助确认不同分辨率情况下字体大小自适应检测的方法，可以提高测试效率。工欲善其事必先利其器~