前端测试代码怎么写

1. 前端该怎样实现自动化测试

首先,还是要强调一点:

前端是一种特殊的GUI软件

看过我最近一年内做前端工程方面相关分享的人可能有印象,我总是在强调这一点。前端测试也跟这个理论基础有所关联。

在这里,我还想吐槽一下:

API测试方法论在测试GUI时并不能解决所有问题。

与很多前端工程师讨论过前端测试,大家更多的还是盯着API测试方法论。诚然,前端有那么一小部分代码是可以用API测试保证质量的,但前端项目中的绝大多数代码是GUI界面,前端测试应该向传统GUI测试方法论需求解决方案:GUI软件测试_百度百科 ,这个百科词条介绍的很不错,大家可以感受一下GUI测试相关概念和方法。它的测试用例、覆盖率统计、测试方法等等都与API测试有着很大的不同。

2. 前端开发使用哪些工具来测试代码的性能

Chrome有一个插件叫PageSpeed,谷歌官方出品。以当前页面为例存在下面的问题

Suggestion Summary

Click on the rule names to see suggestions for improvement.

Minimize payload

(M)Serve scaled images, (L)Enable compression, (L)Minify HTML, (L)Optimize images

Minimize delay in page load

(L)Avoid CSS @import, (L)Minimize request size, (L)Specify image dimensions, (L)Specify a character set

Other

(L)Leverage browser caching/app/?L)Enable Keep-Alive, (L)Remove query

strings from static resources, (L)Specify a Vary: Accept-Encoding header

HML分别代表问题的严重程度,高、中、低

3. 问大家一个问题,我刚做前端一个月(实习)

今年5月开始前端之旅,学习近4个月之后,于9月底,参与了一个商城厂家后台的前端页面的开发,所做的内容并不多,但是在这段时间的收获却不少。接下来将详细谈谈这些收获。

1)参与项目之前应该做什么

在实习刚开始的时候,主要是从git上clone代码,然后自己在前辈的指导下查看代码结构,理解整个流程。当时花的时间不长,基本也把代码看的差不多了。这个是很重要的,你需要对整个前端的架构有一个大致的了解。

2)写第一行代码前应该做什么

仔细看产品原型,查看接口文档。这是非常重要的,特别是原型,需要仔细的查看原型,看看那些地方存在不合理的,需要及时找产品或相关负责人沟通,最终要确保你对整个产品原型有很详细的了解。这样子不至于在写页面,写交互的时候出现大问题。还有接口文档也是很重要的,前端和后端都需要一份共同的接口文档,大家根据这个文档进行数据交互。有了共同的接口文档,在开发过程中不用关注变量名这些无关紧要的细节。而且能确保前后端数据交互时不会有不一致的地方。

3)写代码时应该做什么

多思考,就能少写几行不必要的代码。这是很重要的一个问题,一般来说,在最开始的时候,需要将所需要的技术掌握,然后将页面分成几个小块,从整体到部分,要清楚代码的大致结构,脉络。先将大的东西做好,再慢慢细调。这样子不必时刻纠结于细节,浪费不少时间。写代码时要遵循代码规范,比如说Tab键还是空格缩进的问题,比如说是LF还是CTLF换行的问题,尽量采取和大家一致的开发环境,这样在别人看你的代码和你看别人的代码时会减少不必要的麻烦。

4)写完代码时应该做什么

单元测试,不用多说。如果是用RAP来进行单元测试的话,要注意测试用例设计的合理性。

5)前后端联调

前后端联调应该采取怎样的方式才是最好的?以前是一个前端搭配一个后端,他们用同一个分支。联调时,后端从git上pull代码,然后在本地跑一遍gulp,然后运行联调。这样有一个问题就是,当前端有问题时,如果是一个很小的问题,那么他也需要从他自己的机子上改,然后commit,push代码,然后后端在他的机子上重新pull,gulp,运行联调。这样子比较繁琐,效率不怎么高。现在的做法是前端将请求用nginx代理请求到后端的机子上,然后在前端进行测试。这样前端发现有问题,他自己修改就好。后端不用pull代码。后端发现有问题也是如此,这样前后端就分开了。

6)提交给测试人员

当联调完成之后就可以将代码提交给测试人员。测试人员通过模拟真实数据来进行功能测试。之所以在测试阶段会有这么多问题,是因为:前后端联调的时候,对联调数据没太在意,以为数据跑得通就OK。导致一上到真实环境出现一堆问题。另外一个原因是,测试人员往往不能够详细描述问题出现的情形,比如说:在什么情况下,做了什么操作之后,出现了什么样的结果。出现的频率。和预期的差别。实际得到的结果往往是:出现了某个问题,然后把错误一截图发给开发人员就没了。其实对于前端来说,需要知道做了哪些操作导致的bug往往是特别重要的。

4. 写前端代码,电脑是win10系统的,那应该怎么测试ie浏览器的兼容性

浏览器兼容性有以下几个测试点:

1、页面加载时间;

2、含有Fream、DIV、ActivX等对象插件的页面,做兼容性测试。

3、采用第三方工具做专业性能测试,比如:IETester、BrowserShots 、Multiple IEs、IE netrenderer等。

测试细节:

1、测试页面有无异常,加载时卡滞或无响应,左下角状态栏有无报错警示。

2、国内、外网站都需要针对性对比测试。

3、对各个页面框架及php\cgi\asp各个语言版本均做一遍兼容性测试,以示综合兼容性准确。

5. 如何写高质量的JS,Html5前端代码

首先,本人在前端开发方面有点心得,有什么不对的地方希望给出建议让我更好的进步1.命名在开发前必须有个命名规范来对代码统一规范团队代码结构,使代码可读性提高7a686964616fe4b893e5b19e313333633834382.注释我相信每个人看别人代码时看到密密麻麻的代码结构,相信每个人都会很头疼,即使想看也会看不下去,而且很耗时间,所以注释就变得尤其得重要,注释越清楚越详细我相信代码可维护性越高,而且更容易修改维护3.变量在js中变量无处不在,所以这么声明变量就变得尤其得重要,首先少使用全局变量,这样会增加加载速度,从而导致项目用户体验不好4.声明变量如果不用 var 会导致变量成为全局变量。

5.函数函数的参数数量函数的参数不应该超过 3 个。如果函数的参数超过 3 个,应该将一些参数进行封装。

6.函数参数传递只传函数需要的参数。如// 不推荐function greet(data){console.log('Hello, I am ' + data.name);}// 推荐function greet(name){console.log('Hello, I am ' + name);}7.函数的功能一个函数只做一件事。

这有助于测试和代码复用。函数尽可能无副作用。

无副作用指不修改传入的参数和全局变量。8.减少重复代码. 记得在某个文章中看到说,如果重复的代码出现 3 次,就应该重构重复的代码。

. 松耦合. 一个函数只做一件事. 缓存一些计算结果9.避免全局变量. 从分配置和离逻辑代码. 不要修改不属于你的对象. 不属于你的对象包括. 浏览器原生对象,如 Object,Array等DOM,如 documentBOM,如 window类库对象如果想拓展浏览器原生对象的功能,可以创建函数,函数中把浏览器原生对象传入。如 Underscore.js 做 的那样。

10.代码风格的统一11.尽可能的避免代码重复 . 如何减少重复的代码呢?. 在JS中,可以将重复的代码写成一个方法,如果是可通用的,可以写在独立的JS文件中。. 在CSS中,则需要借助Sass,Less之类的预处理语言的Mixins的功能。

将重复的部分写成一个Mixins。12.配置和逻辑分开 . JS中,对于整个站的通用配置,写在config.js里。

如果是某个js的配置,在文件的开头,用defaultParam 对象来存放可变的配置,用const来定义不可变的配置. CSS中,依旧要借助预处理语言。对于整站的配置,定 义在_variables.scss里。

对于某个具体CSS文件里,在文件开头用变量来定义13.减少代码的副作用1>JS中,方法中的沟通尽量不要用全局变量;不要在Array之类的全局对象的原型链上添加方法;尽量不要定义全局的方法和变量:如果确实有很多变量,方法放在全局上,可以学习jQuery,将很多变量,方法放在一个全局对象上;自定义事件,事件的名称也要有命名空间。2>CSS中,要做到无副作用,难度很大。

对于简单页面,一个方法是,把页面上的元素都分成一个个组件,写样式时,选择器要用组件选择器 当前元素选择器。当组件变的复杂时,组件也会包含很多子组件。

然后,选择器就会越来越长。

我的解决方案是用的BEM。

14.提高代码的可读性 . 变量,方法等的合理命名,通过名称可以知道这个大概做什么的。. 如果则要加注释来说明一下。

对于不容理解的代码加注释. 尽可能不用魔法数字 . 对于HTML,选择合适标签15.一个方法只做一件事一来提高代码的复用性,二来让调试也变的更容易,三来让测试变的更容易。

6. 求前端验证js代码

在VB6.0里要先在最前面进行如下声明Private Declare Function SetWindowPos Lib "user32" (ByVal hwnd As Long, ByVal hWndInsertAfter As Long, ByVal x As Long, ByVal y As Long, ByVal cx As Long, ByVal cy As Long, ByVal wFlags As Long) As Long在过程中加入SetWindowPos Me.hwnd, -1, 0, 0, 0, 0, 3就可以了,还原把 -1 改为 -2 。

如果是VB.net就容易了,直接在窗体属性中设置TopMost属性就行了要显示窗体.Show 0,主窗体希望能帮助到你 祝你好运!如果帮助到您,请记得采纳为满意答案哈,谢谢!祝您生活愉快! vae.la。

前端测试代码怎么写

转载请注明出处育才学习网 » 前端测试代码怎么写

知识

日记怎么写三年级100字

阅读(198)

本文主要为您介绍日记怎么写三年级100字,内容包括日记怎么写三年级100字,三年级日记怎么写100字,三年级的100个字的日记怎么写。日记顾名思义就是一日一记。那么日记是不是只能写当天的事呢?不是的。日记也可以写以前的事,如果单篇幅的日记,或

知识

劳动合同法怎么写

阅读(218)

本文主要为您介绍劳动合同法怎么写,内容包括劳动合同法怎么写,劳动合同怎么写,劳动合同书怎么写。你是要劳动合同的格式吧?给个空白的格式,你可以根据自己的需要自行修改。 劳动合同格式范本 来源: 合同编号 甲方:***(通常为用工单位

知识

关于书的论文怎么写

阅读(231)

本文主要为您介绍关于书的论文怎么写,内容包括读书论文怎么写,我是个初中生谁能告诉我关于书的论文怎么写,求两篇读书小论文,要求原创,500字左右。读《人性的弱点》有感 《人性的弱点》一书作者是被誉为“成人教育之父”的来自美国的卡耐基

知识

违犯怎么写

阅读(163)

本文主要为您介绍违犯怎么写,内容包括违犯怎么造句,怎么写检讨书(关于违反纪律的),违犯怎么造句。(1)检讨书的观点(2)检讨书的布局及写作要领+1已赞过千淘万漉虽辛苦,吹尽黄沙始到金。老师,我们为有您这样一位好老师而兴奋!而幸福!老

知识

检查材料怎么写

阅读(180)

本文主要为您介绍检查材料怎么写,内容包括对照检查材料怎样写,怎么写检查范文,检查怎么写。照检查材料首先要夯实材料的基础,就是要认真征求和了解意见建议。撰写对照检查材料的目的是要查摆问题、解决问题,所以问题导向是写好对照检查材

知识

扎风筝拼音怎么写的

阅读(1055)

本文主要为您介绍扎风筝拼音怎么写的,内容包括扎风筝的拼音是什么,“扎风筝”的拼音是什么,“扎风筝”的“扎”怎么读。读音:zā 扎风筝:zā fēng zheng意思:用各种工具和工艺制作风筝的过程。笔划:

知识

初恋的英语怎么写

阅读(192)

本文主要为您介绍初恋的英语怎么写,内容包括初恋的英语怎么写,初恋英语怎么写,初恋英语怎么写。Once I was reading a book, and I noticed Mamun come to their roof an

知识

吴字行书怎么写

阅读(201)

本文主要为您介绍吴字行书怎么写,内容包括钢笔字,姚景夕,三字行书怎么写,张智涵三个字的行书写法,书法美字的写法姓名,朱字建字春字。首先 写行书一定要有比较好的正书基础 熟悉笔性 当你对结构 笔画 空白 造型都可以很好的掌握 之后 就有

知识

红枣的枣怎么写

阅读(194)

本文主要为您介绍红枣的枣怎么写,内容包括枣子的枣怎么写,作文,红枣怎么写,红枣的早怎么写。枣 【zǎo】Chinese date;会意。从双朿(cì)。朿,木芒。枣树多刺。本义:枣树 枣,羊枣也。――《说文》 枣有十一名,羊枣

知识

左耳英文怎么写

阅读(245)

本文主要为您介绍左耳英文怎么写,内容包括左耳的英文怎么写,《左耳》中的吧啦英文怎么写,有关于电影左耳的英文作文。电影左耳的英文作文总的说来,这是一场被架空的青春戏。让我先来用考据的方法来证明:《左耳》出版于2006年,描写的是高三到大

知识

过程与计划怎么写

阅读(154)

本文主要为您介绍过程与计划怎么写,内容包括教案中过程与方法怎么写,工作总结和计划怎么写,学期计划,怎么写。原发布者:李鹏亚教案过程与方法怎么写【篇一:怎么写教案】1.教学目的。所谓教学目的是指教师在教学中所要达到的最终效果。教师只

知识

心得结束怎么写

阅读(163)

本文主要为您介绍心得结束怎么写,内容包括心得体会结尾怎么写,学习心得体会结尾怎么写,读书心得体会的结尾怎么写。结尾: 可以把正文中讲述的学习方法在进行概括总结一下作为结尾,同时也可以对某个学科的学习提供一些建设性的意见,亦或者是一

知识

雏鹰的拼音怎么写的

阅读(146)

本文主要为您介绍雏鹰的拼音怎么写的,内容包括雏鹰两个字怎么写,看拼音写词语,雏鹰组的组号,组徽怎么写。蔡童童同学是实验小学六(2)班的班长,朝气蓬勃的新世纪,孕育了她性格开朗,热爱生活的好品质,她爱好广泛,喜爱写作、演讲、唱歌、弹琴、电脑

知识

黄蝶的蝶怎么写

阅读(137)

本文主要为您介绍黄蝶的蝶怎么写,内容包括蝴蝶的蝶怎么写,写有“黄蝶”的诗,儿童急走追黄蝶,的诗全诗是怎么写的。宿新市徐公店 南宋杨万里 篱落疏疏一径深, 树头花落未成阴。 儿童急走追黄蝶, 飞入菜花无处寻。 这首诗把春天写得活灵活现,特

知识

vb退出的代码怎么写

阅读(263)

本文主要为您介绍vb退出的代码怎么写,内容包括单击退出程序的VB代码怎么写,单击退出程序的VB代码怎么写,VB中清除和退出代码各是什么。最简单的:Private Sub Command1_Click()End End SubEnd语句帮助你关闭所有已经打开的文件,显示的窗

知识

淘宝装修怎么写代码

阅读(207)

本文主要为您介绍淘宝装修怎么写代码,内容包括如何给淘宝店装修,怎么写装修代码,淘宝装修代码怎么用,淘宝店怎么自己写代码装修。用Dreamwearver就好,至于你css的问题,就直接把style写进body里面就好,例:<table style="width:

知识

matlab怎么写代码

阅读(1414)

本文主要为您介绍matlab怎么写代码,内容包括matlab怎么自己写代码,matlab在哪里输入代码,数学实验matlab的准确编写代码。% 首先可以构造网格数据,然后plot3绘图。% % 代码:clc; clear all; close all;% 构造x数据x = l

知识

字体滚动的代码怎么写

阅读(193)

本文主要为您介绍字体滚动的代码怎么写,内容包括怎样写一个可控制左右滚动的的字体左右滚动代码,给滚告栏滚动的字体加个颜色代码怎么写,文字滚动代码。如果您懂得Jquery。 Code: <html><head><title>Test</title><script src="jquer

知识

居中代码怎么写

阅读(179)

本文主要为您介绍居中代码怎么写,内容包括html中使图片居中的代码是什么,文字和图片居中的HTML代码怎么写,图片居中代码。html中使图片居中的代码是:

知识

html页面跳转代码怎么写

阅读(177)

本文主要为您介绍html页面跳转代码怎么写,内容包括如何用html代码实现页面跳转,网页内部跳转代码怎么写,求html页面跳转代码。代码如下:<html><head><title> page A </title><script type="text/javascrip

知识

响应式代码怎么写

阅读(166)

本文主要为您介绍响应式代码怎么写,内容包括响应式布局代码怎么写,Dreamweaver中响应式网页代码如何写,Dreamweaver中响应式网页代码如何写。默认一个固定宽度为980px的网页,当浏览器窗口比980px小的时候,这个布局就变为100%比宽度的液态布局

知识

html上下滚动代码怎么写

阅读(189)

本文主要为您介绍html上下滚动代码怎么写,内容包括html中上下滚动的文字代码,举例,html中上下滚动的文字代码,举例,上下滚动代码怎么写啊。在要实现滚动的地方,加入此代码: <marquee direction=up&gt;要输入的文字</marquee> UP是向上, DO

[/e:loop]