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

前端面试题1年前 (2023)发布 admin
2,378 0

虽然工作中有专门的测试人员(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。

© 版权声明

相关文章

暂无评论

暂无评论...