【前端面试题】12—19道有关前端测试的面试题(附答案)

ゝ一纸荒年。 2022-11-16 01:50 180阅读 0赞

![eca0fa6002158a476b70c1b067179ce5.png][]

虽然工作中有专门的测试人员（QA工程师）帮我们实现对代码的测试，但是为保证开发的代码质量，我们还是要进行单测、自测。

测试部分的面试题主要考察应试者对前端测试的了解，主要涉及单测和自测部分，考察应试者平时都是如何做测试的，都用过哪些测试工具等。

**1、什么是mock测试？**

mock测试就是在测试过程中，对于某些不容易构造或者不容易获取的对象，创建一个虛拟的对象来测试，以便完成测试方法。

**2、什么是冒烟测试（ smoke test）？**

冒烟测试源自硬件行业，对一个硬件或者硬件组件改动后，直接给设备加电，看看设备会不会冒烟。如果没冒烟，就表示待测组件通过了测试。

在软件开发过程中，一直有高内聚、低耦合这样的说法，各个功能模块之间的耦合还是存在的。因此，一个功能的改动还是会影响到其他功能模块。如果在开发人员修复了先前测试中发现的Bug后，想知道这个Bug的修复是否会影响到其他功能模块，就需要做冒烟测试。

**3、平时工作中怎样进行数据交互？如果后台没有提供数据，怎样进行开发？mock数据与后台返回的格式不同怎么办？**

由后台编写接口文档、提供数据接口，由前台通过Ajax访问实现数据交互在没有数据的情况下，向后端索要一份静态数据，或者自己模拟一份mock数据。

当返回数据的格式不统一时，编写映射文件对数据进行映射。

**4、在iOS模拟器中，如何进行刷新？**

选择模拟器中的 Hardware→ Keyboard→ Connect Hardware Keyboard即可

**5、如何在 Chrome控制台中打开 paint flashing？**

打开开发者工具，按键盘上的Esc键打开控制台面板，选择 rendering标签栏，即可看到 paint flashing选项。

**6、Chrome开发者工具中，常用的面板有哪几个？**

有以下几个

*  Element：主要用来调试网页中的HTML标签代码和CSS样式代码。
 *  Network：查看网页的HTTP通信情况，包括Method、Type、Timeline（网络请求的时间响应情况）等。
 *  Source：查看 JavaScript文件，调试 JavaScript代码。
 *  Timeline：查看 JavaScript的执行时间、页面元素渲染时间等。
 *  Profiles：查看网页的性能，比如CPU和内存消耗。
 *  Resources：查看加载的各种资源文件，如 JavaScript文件、CSS文件、图片等。

Audits：分析当前网页，快速地分析出哪些资源被使用、哪些资源没有被使用，然后提出建议。

Console：查看错误信息，打印调试信息，调试 JavaScript代码，查看 JavaScript API。

**7、如何调试 JavaScript代码？**

调试方式如下

（1） Javascript断点调试。

断点可以让程序在需要的地方中断，从而方便程序员分析。也可以在一次调试中设置断点，下一次只须让程序自动运行到设置断点的位置，便可在上次设置断点的位置中断，这极大地方便了调试，同时节省了时间。

JavaScript断点调试，即是在浏览器开发者工具中为 JavaScript代码添加断点，让JavaScript执行到某一特定位置停住，方便开发者对该处代码段进行分析和调试。

（2） debugger断点调试。

通过在代码中添加“ debugger”语句，当代码执行到该语句的时候就会自动插入断点。

（3）DOM断点调试DOM断点就是在DOM元素上添加断点，进而达到调试的目的

**8、如何进行响应式测试？**

响应式测试特别简单，通过改变视窗大小（也就是缩放浏览器）即可测试。当然，当在CSS中设置 Media Queries判断条件时要使用max- width才行，如果使用max- device- width则会根据设备的屏幕尺寸来判断。

**9、如何用 Chrome模拟设备屏幕尺寸？**

如果需要测试某种明确的机型， Chrome新版的 Emulation就可以派上用场了。

如果 Emulation面板需要模拟地理位置、加速计等功能，打开 DevTools界面后按下Esc键即可打开分裂视图。打开 DevTools界面之后，单击“手机图标”即可进入 Chrome手机模拟器。

**10、如何进行 Android虚拟机测试？**

在计算机上安装 Android虛拟机，就可以用虚拟机打开进行测试，例如以下虚拟机。

*  Genymotion

Genymotion是一个优秀的 Android虛拟机。因为它基于VirtualBox内核，所以要先安装VirtualBox，然后注册账号 Genymotion，可以免费使用，但是功能有限制。

*  Parallels

Parallels是基于Mac平台的虚拟机，使用它创建虛拟机的时候，可以直接下载Android系统并安装。

**11、如何进行 Android真机调试？**

测试机安装 Chrome for Android后才可以使用 Chrome远程调试这项功能。

首先，用数据线将 Android测试机连接到计算机上，打开测试机上面“开发者选项”中的“USB调试”功能。在 Android4.2+系统上“开发者选项”默认是隐藏的，所以需要先开启“开发者选项”。

然后，在桌面版 Chrome中打开 chrome://inspect即可查找你的设备，在设备上的Chrome中打开网页即可。接下来，就可以用桌面版 Chrome Devtools调试移动设备上的页面了。

此外，在本地用 Node. js或者其他语言开启一个本地服务器，通过端口转接让移动设备直接访问本机IP地址上的页面，再配合 LiveReload、 Browser Sync之类的工具，自动刷新。

**12、你使用过 Weinre调试工具吗？**

Weinre是一个简单、好用的调试工具。它会在本地创建一个监听服务器，并提供一个 JavaScript程序，你只用在需要测试的页面中加载这段 JavaScript程序，就可以被Weinre监听到，在 Inspect面板中调试这个页面。

**13、你使用过 OS Simulator调试工具吗？**

ios Simulator是 Xcode开发工具内置的ioS模拟器，该功能仅能在Mac系统下使用。

**14、如何对OS设备进行真机调试？**

首先需要在 iPhone等设备上设置一下 Safari浏览器，开启调试功能。然后，使用数据线连接计算机，在设备上用 Safari浏览器打开需要调试的页面。接下来，在桌面版的 Safari开发选项中即可看到此页面，并进行调试但是要调试本地网站，你可能要将手机与计算机连在一个局域网内，然后输入局域网IP地址进行调试。

**15、如何使用MIHToo进行远程调试？**

MIHTool是一个App，可以直接安装到你的iOS设备里，然后内置一个简单的浏览器就可以打开测试页面。当它开启时，它会自动向页面中插入 Weinre的 JavaScript程序，并告知 Weinre控制台URL等信息，让你可以访问并进行调试该页面。它还提供了一个公共的 Weinre调试服务，生成对应的链接，打开即可调试。

**16、如何对IE浏览器进行网页调试？**

可以通过以下工具进行调试。

SuperPreview，主要用于HTML代码、CSS代码的调试和各个浏览器（目前只能针对IE6~IE8）的页面呈现测试。

Internet Explorer Collection，主要用于 Internet Explorer浏览器（IEl~IE8）各个版本的页面呈现测试。

Developer Toolbar，主要用于HTML代码、CSS代码和 JavaScript代码的调试。

IE WebDeveloper，主要用于HTML代码、CSS代码和 JavaScript代码的调试。

IE Web Developer可以让你检查和编辑 HTML DOM，显示错误信息、日志信息，显网站源代码，监视DHTML事件和HTTP流量。它的功能可以和火狐中的Firebug相媲美，甚至有些功能还强于 Firebug。

IETester，主要用于 Internet Explorer浏览器各个版本的页面呈现测试。

VS2008，主要用于 JavaScript代码的调试。

DebugBar，主要用于HTML代码、CSS代码和 JavaScript代码的调试。

**17、你知道哪些开发工具？**

开发工具一般分为两种类型：文本编辑器和集成开发环境（IDE）

常用的文本编辑器有 Sublime text、 Notepad++、 EditPlus等。

常用的IDE有 WebStorm、 Intellij IDEA、 Eclipse等。

**18、请介绍一下YSlow。**

首先， YSlow是一个工具，也可以认为它是一个插件，它是基于 Mozilla Firefox上 Firebug插件的一个插件。

它出现的主要目的就是检测页面的性能。它让用户可以就近取得所需的内容，解决网络拥挤的状况，提髙用户访问网站的响应速度。其次，雅虎在 Etags的配置上也有独特之处，它声明网页对象过期。

也就是说，当用户从服务器取数据的时候，如果文件变化了，就给他反馈新的文件。如果文件没有变化，只须告诉客户端没有变化即可，不必再把文件取回来，这样就节省了大量的网络带宽和资源。

另外只要将那些在加载过程中要执行的脚本放到底部，就可以实现最大数量的并行下载。

**19、如何让 WebStrom忽略 node\_modules的索引？**

WebStrom在打开一个项目的时候会有一个索引过程。如果计算机配置不高，打开一个带有 node\_modules文件夹的项目，那简直就是一场“灾难”。为了提高打开速度，避免每次“灾难”的重现，可以在菜单栏中选择File→ Setting→ Editor→ File types→ Ignore files and folders。

在 Ignore files and folders 选项最后加上 node\_modules并保存就可以了，然后重启WebStorm。

本文完〜

**相关推荐**

[【前端面试题】01—42道常见的HTML5面试题(附答案][01_42_HTML5])

[【前端面试题】02—59道CSS面试题(附答案)][02_59_CSS]

[【前端面试题】03—200+道常见JavaScript基础面试题上（附答案）][03_200_JavaScript]

[【前端面试题】04—33道基础CSS3面试题(附答案)][04_33_CSS3]

[【前端面试题】05—17道面向对象的面试题(附答案)][05_17]

[【前端面试题】06—16道设计模式面试题（附答案）][06_16]

[【前端面试题】07—47道基础的VueJS面试题(附答案)][07_47_VueJS]

[【前端面试题】08—31道有关前端工程化的面试题(附答案)][08_31]

[【前端面试题】9—21道关于性能优化的面试题(附答案)][9_21]

[【前端面试题】10—18道有关模块化开发的面试题(附答案)][10_18]

[【前端面试题】11—26道HTTP和HTTPS的面试题(附答案)][11_26_HTTP_HTTPS]

![4a21be044aaa6cf42be607e66fe1b162.png][]

[eca0fa6002158a476b70c1b067179ce5.png]: /images/20221022/f85cbe22eac944a99fd43c0971031146.png
[01_42_HTML5]: http://mp.weixin.qq.com/s?__biz=MjM5MjU2NDk0Nw%3D%3D&chksm=a6a50bf091d282e6e7c59a2a1b0b640e952ac9827a55537b3644dad881310046b3ade9c4cb79&idx=2&mid=2247489612&scene=21&sn=2dd761cedc057e77bd275364ef1b8368#wechat_redirect
[02_59_CSS]: http://mp.weixin.qq.com/s?__biz=MjM5MjU2NDk0Nw%3D%3D&chksm=a6a50bde91d282c83244b91b760eab1fdd3ad55d6cd59828ed2e39b26a36de02953dbdc5ac35&idx=2&mid=2247489634&scene=21&sn=8dd1d419797334527f25e5557640d44a#wechat_redirect
[03_200_JavaScript]: http://mp.weixin.qq.com/s?__biz=MjM5MjU2NDk0Nw%3D%3D&chksm=a6a50bd791d282c14daddc021d81c318668d413d3a70e5b7df2961b5ac4b8e6c6522ff2a0552&idx=2&mid=2247489643&scene=21&sn=e6ee5cb16ba037c07d46e2ebff307c63#wechat_redirect
[04_33_CSS3]: http://mp.weixin.qq.com/s?__biz=MjM5MjU2NDk0Nw%3D%3D&chksm=a6a50b1a91d2820c97a9bb64660d976142803fae64b057558cd929d6ff8c0ac5804156e05223&idx=2&mid=2247489702&scene=21&sn=fee60291e758fd38b046d5a172d4bacd#wechat_redirect
[05_17]: http://mp.weixin.qq.com/s?__biz=MjM5MjU2NDk0Nw%3D%3D&chksm=a6a50b6991d2827fd746f36312c618ec81d207e96e24de5b55f72eab627b5c51c2b9bf75810d&idx=2&mid=2247489749&scene=21&sn=a56f548511c23b8a20708b2bfd770ea4#wechat_redirect
[06_16]: http://mp.weixin.qq.com/s?__biz=MjM5MjU2NDk0Nw%3D%3D&chksm=a6a50b5191d28247273a0ccb2a490126bf180085d6ad2a3b03c9d72f99d56761a30ca545dc93&idx=2&mid=2247489773&scene=21&sn=a85268e0998b3be5c71e029d565eea0f#wechat_redirect
[07_47_VueJS]: http://mp.weixin.qq.com/s?__biz=MjM5MjU2NDk0Nw%3D%3D&chksm=a6a50aa891d283be6f09ce96ff7acc4838b3adb1f4e61e366d1b9c240b84a757fe52af68f27d&idx=2&mid=2247489812&scene=21&sn=4f86459e58b63d71cd40562e3c3fafd5#wechat_redirect
[08_31]: http://mp.weixin.qq.com/s?__biz=MjM5MjU2NDk0Nw%3D%3D&chksm=a6a50a8991d2839f0fbd5c7926f5482b8372545aa52e2f6f9c1dc01f0ff99741318889df30aa&idx=2&mid=2247489845&scene=21&sn=90caea2110636f375a459c26ea9cd539#wechat_redirect
[9_21]: http://mp.weixin.qq.com/s?__biz=MjM5MjU2NDk0Nw%3D%3D&chksm=a6a50aed91d283fbf21f3a54700a81406ac5e6e913d17823525052f7efee6f38c4b20ae2210a&idx=2&mid=2247489873&scene=21&sn=fb60015ec168c2988a015ea47612a5d9#wechat_redirect
[10_18]: http://mp.weixin.qq.com/s?__biz=MjM5MjU2NDk0Nw%3D%3D&chksm=a6a50a1991d2830f38e5e1602edb7e0ac317f460f9104972cddddec1b4e1be887ebf3a8bcede&idx=2&mid=2247489957&scene=21&sn=3aee5638c58cea4a0e0ec893425bacae#wechat_redirect
[11_26_HTTP_HTTPS]: http://mp.weixin.qq.com/s?__biz=MjM5MjU2NDk0Nw%3D%3D&chksm=a6a509ae91d280b83f484c319ba806a669fe52bc48fbcb9a8fc8b53c3ae5ca2efa7804d5cbf9&idx=2&mid=2247490066&scene=21&sn=14e452f916d0df24835ab6ab2a96931f#wechat_redirect
[4a21be044aaa6cf42be607e66fe1b162.png]: /images/20221022/5a96ddf1d5964030b435e61c3939a2d3.png