面向测试的前端知识

面向测试的前端知识云谦 ([email protected])http://www.chencheng.org/

11年3月4日星期五

mailto:[email protected]

mailto:[email protected]

http://www.chencheng.org

http://www.chencheng.org

浏览器原理

http://www.cn-cuckoo.com/2011/02/18/how-broswers-work-2257.html

从服务端接收到 HTML

1




浏览器原理



1解析

HTML构建DOM树

2




浏览器原理



1解析

HTML构建DOM树

2解析CSS 构建渲染树

3




浏览器原理



1解析

HTML构建DOM树


3

为渲染树生成布局

4




浏览器原理



1解析

HTML构建DOM树


3


4

绘制渲染树

5




浏览器原理



1解析

HTML构建DOM树


3


4

绘制渲染树

5

遇到 JS 时调用 JS 引擎解析

2.1




HTML, CSS, JavaScript

http://www.alistapart.com/articles/understandingprogressiveenhancement/




#content div.box { position: absolute; color: red;}


声明

• 盒模型• 布局• 颜色、背景• 排版• 其它

(宽高、内外边距、边框、圆角等)

(显示隐藏、绝对相对定位、浮动、溢出控制等)

(文字大小、行高、文本对齐等)

(鼠标手势、表格控制等)


引入

<link rel=”stylesheet” href=”” />

<style></style>

渲染引擎解析中...


position: fixed


http://blog-imgs-42-origin.fc2.com/s/h/o/shopdd/dora_css3.html




兼容型 Bug


兼容型 Bug

• 表现• 仅在少数几个浏览器上出问题


兼容型 Bug

• 表现• 仅在少数几个浏览器上出问题• 原因• 浏览器解析不一致• 前端不细心• 前端太过自信


兼容型 Bug

• 表现• 仅在少数几个浏览器上出问题• 原因• 浏览器解析不一致• 前端不细心• 前端太过自信• 解决• 加强前端素质建设


业务型 Bug


业务型 Bug

• 表现• 在所有浏览器下都有问题


业务型 Bug

• 表现• 在所有浏览器下都有问题• 原因• 前端对业务不熟悉


业务型 Bug

• 表现• 在所有浏览器下都有问题• 原因• 前端对业务不熟悉• 解决• 测试帮助前端熟悉业务• 能直观地测试到所有业务可能性


内容型 Bug

http://www.chencheng.org/blog/archives/css-overflow-test-script.html




内容型 Bug

• 表现• 前端自测时是好的，在运营或用户填入内容后，出现错误、内容消失等

Bug





内容型 Bug


Bug

• 原因• 前端不小心遗漏• 主观认为这里不需要扩展性





内容型 Bug


Bug

• 原因• 前端不小心遗漏• 主观认为这里不需要扩展性• 解决• Auto Overflow Test





定义

JavaScript是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。它最初由网景公司的Brendan Eich设计，是一种动态、弱类型、基于原型的语言，内置支持类。


http://zh.wikipedia.org/wiki/%E5%AE%A2%E6%88%B7%E7%AB%AF

http://zh.wikipedia.org/wiki/%E5%AE%A2%E6%88%B7%E7%AB%AF

http://zh.wikipedia.org/w/index.php?title=Web%E5%BC%80%E5%8F%91&action=edit&redlink=1

http://zh.wikipedia.org/w/index.php?title=Web%E5%BC%80%E5%8F%91&action=edit&redlink=1

http://zh.wikipedia.org/wiki/%E8%85%B3%E6%9C%AC%E8%AA%9E%E8%A8%80

http://zh.wikipedia.org/wiki/%E8%85%B3%E6%9C%AC%E8%AA%9E%E8%A8%80

http://zh.wikipedia.org/wiki/%E7%BD%91%E6%99%AF%E5%85%AC%E5%8F%B8

http://zh.wikipedia.org/wiki/%E7%BD%91%E6%99%AF%E5%85%AC%E5%8F%B8

http://zh.wikipedia.org/wiki/Brendan_Eich

http://zh.wikipedia.org/wiki/Brendan_Eich

引入<script src=””></script>

<script>...</script>

script injection

脚本引擎解析中...


Array.forEach


JS Error

• EvalError

• RangeError

• ReferenceError

• SyntaxError

• TypeError

• URIError


他们会报错


一些有趣的话题


什么 Bug 不是 Bug?

IE6 Chrome

• 渐进增强• Chrome/FF 内部错误

• 浏览器之间的像素级差异• 不好看


什么 Bug 不是 Bug?

• 渐进增强• Chrome/FF 内部错误

• 浏览器之间的像素级差异• 不好看


判断 Bug 属于开发 or 前端?

• HTML, CSS, JavaScript

• 回调请求内容


Thanks!


面向测试的前端知识

Technology

Transcript of 面向测试的前端知识