深入分析WebKit之Layout Tests

本是古典 何须时尚 2022-06-10 08:28 270阅读 0赞

转载请注明出处:http://blog.csdn.net/horkychen

来自内部一个分享PPT整理过程的知识点,没有特别组织。

Layout Test主流程:

1341408461_5086.png

运行的指令:

run-webkit-tests [选项] 测试脚本文件或所在的目录
主要的参数有:

  1. --verbose 显示详细的信息
  2. --no-build 不要尝试重新编译dumprendertree
  3. --debug 使用Debug版本进行测试
  4. --help 显示所有选项信息
  1. 测试方法的归纳

    i. 静态测试 (测试结果是通过比对最终网页输出来决定的。)

四种检测方法:

Render tree, Body Text, Pixel Data, Ref Test

(Body Text没有格式信息,而Pixel Data没有文本信息,所以两者是配合使用,以Body Text为主。)

Ref Test是以HTML页面的形式比对。不匹配的结果以图片形式存储。

ii. 动态测试 (测试结果在执行过程中动态决定。但仍输出到网页,通过静态测试的方式报告出来。)

  1. 动态测试的判断方法和静态测试相同。差异在于比对的内容已经是测试的结果。就是JavaScript脚已经根测试条件和数据,判断出测试成功或失败。然后静态测试的机制输出结果。

1341408685_2041.png

测试用例的构成:

a.测试用HTML文件 (必须在LayoutTests目录下)

{testname}.html

b.基准文件 (Baseline)

. {testname}-expected.txt -> Body Text

. {testname}-expected.png -> Pixel Test

. {testname}-expected.html -> Ref Test

. {testname}-expected-mismatch.html -> Ref Test

c.说明

. missmatch类型的测试只有Ref Test支持

. Ref Test具有排它性,如果当前CaseRef Test, 不会再对其它内容检测。

*关于Audio的比对,脚本里相关内容,但没有再分析。

*第一次跑测试时,没有比较标准,LayoutTest会自动生成xxx-expected.txt 或xxxx-expected.png。

*所有测试的网页必须放到LayoutTests目录下。

  1. 不要在网页中输出日期或时间。

    (动态变化的内容是不可以拿来比对的)

  1. 整个Test Case运行时间不能超过30s。详见另一篇文章。
  1. js-test-re.js (配合js-test-post.js使用) 中定义了若干结果确认的函数,如shouldBeTrue.

    如:

运行的结果:

FAIL totalCount == 3 should be true. Was false.

其它函数有:shouldBe,shouldBeCloseTo,shouldNotBe,shouldBeFalse,sholdBeNaN,shouldBeNull,shouldBeZero,

shouldBeEqualToString,shouldBeEmptyString,shouldBeDefined,shouldBeUndefined,shouldThrow…

详细地内容可以查看js-test-pre.js脚本。

  1. LayoutTests/canvas/tests/23.canvas.reference.html

    FAIL (fallback content)

    _assertSame定义在LayoutTests/canvas/test.js中.

    所有canvas 2D测试使用同相同的id以方便测试脚本执行。

    工作方式 (test.js中的实现):

    1341408900_7708.png

    测试成功就在网页输出一个Pass, 否则输出错误信息。这样达到比对结果的目的。

    另一个函数:_assertPixel (2d.clearRect.nonfinite.html)

    _assertPixel(canvas, 50,25, 0,255,0,255, “50,25”, “0,255,0,255”);

    函数定义:

    _assertPixel(canvas, x,y, r,g,b,a, pos, colour)

    1. poscolors是代表坐标和颜色的两个字串。函数内没有使用。
    2. pos : "x,y"
    3. color: "r,g,b,a"

    函数列表:

    _assert

    _assertSame (===)

    _assertDifferent (!==)

    _assertEqual (==)

    _assertMatch (match) 正则表达式匹配

    _assertPixel

    _assertPixelApprox <-可以允许颜色有一点偏差

    _requireManualCheck 因为一些原因取不到数据,可能需要人工检查确认。

    5.对于pixel test,除了dumpAsText()参数设为true, 在运行run-webkit-tests也要指定—pixel参数。 Expected的图像以PNG存储。PNG文件会被保存到对应的platform目录下。

    a. 抓下的图像仅限于可视区域。

    b. 因为字体渲染的原因,尽量不要涉及文本内容。

    c. 因为原生控件(native control)是由系统绘制,不同系统间有差异性。

    参考WebKit的这篇文章。

    1. overridePreference (key, value)

      用于在脚本中动态修改Preference的值。可用的Keys:

      WebKitEnableCaretBrowsing

      WebKitUsePreHTML5ParserQuirks

      *更多的定义在WebPreferencesPrivate.h

    1. Windows下使用LayoutTest的字体问题

      参考:http://trac.webkit.org/wiki/BuildingOnWindows (Font-metric-related failures)

    1. 完整的testController方法列表:

      对照代码LayoutTestController.cpp中LayoutTestController::staticFunctions()的定义

    1. 默认的网页视图大小 (DumpRenderTree)

      W3C SVG测试: 480x360

      其它测试:800x600

      *定义在LayoutTestController.cpp:2563 lines, 在函数sizeWebViewForCurrentTest中使用。

      都是常量定义,没有参数可以修改。

    1. 自带DOM测试用例。使用selfhtml.js 和 同html同名的js文件。

      selfhtml.js 提供测试入口函数startTest和9个assert operation供使用: assertSize, assertEqualsCollectionAutoCase…

      xxxx.js则提供runTest的实现供startTest调用。

      startTest执行:

      a. waitUntilDone

      b. runTest

      c. notifyDone

    1. 黄金法则:

      a. 对于Pixel Test, 尽量不要涉及文本。

      b. 测试内容不要涉及动态内容,如时间、日期等。

    发表评论

    表情:
    评论列表 (有 0 条评论,270人围观)

    还没有评论,来说两句吧...

    相关阅读

      相关 AB test 分析经验

      最近做了一个AB,有几点经验值得记录一下。 背景 用户每日都可以打卡到微信,引导关注公众号。近期关注率有下降,怀疑与微信屏蔽有关,(微信抵制诱导分享引流到公众号)。

      相关 二分查找深入分析

      二分搜索算法是运用分治法的经典例子,给定已排好序的n个元素,现在要在这n个元素中找到一个特定的素,注意使用二分查找的时候要知道已排序的n个元素是升序还是降序还有你使用的数据类型

      相关 WebKit模块化分析

      模块化       软件的首要技术使命是管理复杂度(Complexity)。这是<<代码大全>>中的一个标题。软件本质性困难的根源都在于复杂性。Dijkstra指出没有谁