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

软件测试面试刷题，这个小程序（永久刷题），靠它可以快速找到工作！https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502​编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502​编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502​编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502​编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502​编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502​编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502​编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502​编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502​编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502​编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502​编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502​编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502​编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502​编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502​编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502​编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502​编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502​编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502​编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502​编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502

所有测试人几乎都遇到这样的测试场景/测试点：测试不同分辨率下的前端样式是否有挤压变形，字体是否被显示不完整，或字体是否大小与分辨率不匹配等。

但是，所有人也知道该怎么测试——用眼看呗。这个答案很完美~毕竟，“我的眼就是尺”。可是，大家有没有想过一个问题：上百个页面，全靠人眼去辨别吗？如果这样，眼药水都得废掉几瓶吧。

所以，我们要快，还要准！能够机器做的事，就不要人肉。

解决问题

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

简单来讲：我们需要看看，在1280*800、1440*900、1680*1050、1920*1200等分辨率下，应用的字体是不是都是同一字号——分辨率越高，肉眼可见字体越小。

解决方案

如图所示，为51testing网站在1920*1200分辨率下的截图：

通过F12的elements面板可以看到，其中“Temu 因操纵行为”遭欧盟 17 国消费者组织投诉""咨询标题的字体大小是30px。

设置电脑分辨率为1280*800，这时明显可以看出网站字体没有缩小，字体显得格外“大”。

通过F12的elements面板查看，发现在1280*800的分辨率下，“Temu 因操纵行为”遭欧盟 17 国消费者组织投诉""咨询标题的字体大小仍是30px。

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

但是，我们是不是所有网页都要 这么排查呢？那得何年何月？！

为此，本文提供一种自动识别、检测前端代码中字体大小的方法。主流程包括：获取所有元素——>获取元素的计算样式——>检测元素是否包含中文字符——>获取元素的字体大小和字体名称——>打印结果。

js代码如下所示：

function scanChineseFontsAndSizes() {
  // 获取文档的所有元素，包括input元素
  var allElements = document.querySelectorAll('*');
  var chineseFontsAndSizes = [];

  // 遍历所有元素
  allElements.forEach(function(element) {
    // 获取元素的计算样式
    var computedStyle = window.getComputedStyle(element);
    // 检查元素是否包含中文字符
    var chineseText = extractChineseCharacters(element.textContent) || extractChineseCharacters(element.getAttribute('placeholder'));
    if (chineseText) {
      // 获取元素的字体大小和字体名称
      var fontSize = computedStyle.fontSize;
      var fontFamily = computedStyle.fontFamily;
      chineseFontsAndSizes.push({
        element: element,
        chineseText: chineseText,
        fontFamily: fontFamily,
        fontSize: fontSize
      });
    }
  });

  // 打印结果
  chineseFontsAndSizes.forEach(function(item) {
    console.log('Element:', item.element);
    console.log('Chinese Text:', item.chineseText);
    console.log('Font Family:', item.fontFamily);
    console.log('Font Size:', item.fontSize);
    console.log('---');
  });
}

function extractChineseCharacters(str) {
  // 正则表达式匹配中文字符
  var chineseRegex = /[\u4e00-\u9fff]+/g;
  var matches = str ? str.match(chineseRegex) : null;
  return matches ? matches.join('') : null;
}

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

检测结果

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

有了element和font size的打印后，我们能够快速地得到页面上字体（中文）的大小信息。

如何判断是否有自适应缺陷

一般来说，有自适应功能的前端设计，字体等大小会跟随分辨率的变化而计算出响应的值。不可能出现在1280*800、1440*900、1680*1050、1920*1200等分辨率下都是相同字体大小的情况。

如上样例所示，如果在不同分辨率情况下，字体大小保持一致，则会出现小屏字体挤满屏幕，大屏字体只占部分、留白很多的情况下。

一旦通过脚本检测到在不同分辨率情况下字体大小未发生变化，则可以大胆地怀疑存在分辨率缺陷。

如何排除误报

当然，脚本不可能时百分百准确，也有存在误报的情况。那么如何排除误报呢？只需我们简单的二次确认即可。

锁定可能存在的element，在element上右键，点击reveal in element pannel。

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

最后： 下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取【保证100%免费】

​​​软件测试面试文档

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。