用于动态有效测试的虚拟DOM覆盖 Web

vlambda
2021-06-04

用于动态有效测试的虚拟DOM覆盖 Web

引用

Yunxiao Zou, Zhenyu Chen, Yunhui Zheng, Xiangyu Zhang, and Zebao Gao.Virtual DOM Coverage for Effective Testing of Dynamic Web Applications

摘要

测试充分性标准是软件测试的基础。其中，代码覆盖准则因其简单、有效而得到广泛的应用。然而，在动态 web 应用程序测试中，仅仅覆盖服务器端脚本代码是不够的，因为它忽略了客户端执行，而客户端执行在触发客户机-服务器交互以达到重要的执行状态方面扮演着重要的角色。类似地，旨在覆盖客户端页面上的 UI 元素的标准忽略了服务器端执行，导致不足。在本文中，我们提出了虚拟 DOM (V-DOM)覆盖，一种新的有效的 web 应用程序测试标准。使用静态分析，我们首先聚合可能由一段服务器脚本生成的所有 DOM 对象来构造 V-DOM 树。该树模型同时在客户端和服务器端执行，因此在 web 应用程序测试中，V-DOM 覆盖比现有的覆盖标准更有效。我们对五个真实世界的动态 web 应用程序进行了实证研究。我们发现 V-DOM 树可以比基于 web 爬行技术建模更多的 DOM 对象。基于 V-DOM 树准则的测试选择通过检测更多的故障，大大超过了现有的代码覆盖率和 UI 元素覆盖率。

研究背景

近年来，随着人们越来越倾向于通过互联网互动以开展日常活动，Web 应用程序变得越来越重要，例如浏览、购物、游戏、工作和社交。与传统桌面应用程序相比，开发和部署 Web 应用程序的门槛相对较低。在某种程度上，任何人都可以从互联网服务提供商处租用一些空间并发布自己的 Web 应用程序。一方面，这极大促进了互联网和 Web 应用程序的繁荣。另一方面，它接受许多未经充分验证或测试的 Web 应用程序。这些应用程序可能会引起各种问题，其中一些还会产生财务影响。因此，Web 应用程序测试对于 Web 应用程序工程的健康是一个非常重要的挑战。

本文提出了一种新的覆盖标准：虚拟文档对象模型(V-DOM)覆盖。网页内部由浏览器表示为 DOM 树。树的根表示整个文档(即该页面)。其他对象，如框架、文本框和按钮，根据它们的嵌套结构被组织成一棵树。在某种意义上，我们可以认为显示给客户端的每个页面本质上都是一个 DOM 树。V-DOM 树是由服务器脚本生成的所有可能的 DOM 树的逻辑聚合。一个 V-DOM 树中的每个对象在实际中可能出现在一个页面中，但是树中的多个 DOM 对象可能不会同时出现在同一个页面中。

为了构造服务器脚本的 V-DOM 树，我们对服务器端代码(例如 PHP) 进行静态分析，以识别服务器代码可能向返回客户端的页面发出的所有 DOM 对象，并将它们像真正的 DOM 树一样组织在树中。因此，它表示脚本的所有可能行为，并可以作为测试期间覆盖的合理的通用工件集。

本文主要贡献

1.提出了一种新的覆盖准则 V-DOM 覆盖，以方便有效测试动态 Web 应用程序。

2.我们在服务器脚本上开发了一种静态分析技术来构造 Web 应用程序的 V-DOM 树。

3.通过实证研究，评价了 V-DOM 覆盖在五个真实世界网络应用中的有效性。

结果表明，与传统的代码覆盖 UI 元素覆盖相比，我们的方法可以比使用爬虫更多地建模 DOMObjects，并且 V-DOM 树覆盖在驱动测试选择中更有效地用于 bug 检测。

虚拟 DOM 覆盖

我们可以观察到服务器端代码覆盖率在 web 应用程序测试中不是最优的。根本原因是该标准没有对客户端执行进行建模，从而导致客户端页面中的错误无法充分暴露(例如，第 2 节中的第一个例子中有缺陷的 DOM 对象和参数)。代码覆盖也很难发现缺失的代码问题。然而某些客户端输入可能会暴露它们。(例如，第二节中的第二个例子)。

为了开发一个能够在服务器端和客户端建模执行的测试标准，我们提出了虚拟 DOM (V-DOM)树的符号。在本节中，我们将定义 V-DOM 树和 V-DOM 覆盖。

1. 虚拟 DOM 树

在客户端，页面表示为 DOM(文档对象模型)对象树。页面中的接口构件，如框架、文本框和按钮，称为 DOM 对象。

在 web 应用程序执行期间，一段服务器脚本可能会生成许多不同的客户机页面(或 DOM 树)。这些页面是客户端和服务器端执行的结果。我们引入虚拟 DOM (V-DOM)树来表示所有这类页面的全域集，它本质上编码了两边可能执行的全域。直观上，V-DOM 树与真正的 DOM 树相似，树中的 DOM 对象是具体的、有效的。不同的是，V-DOM 树包含了服务器脚本生成的所有可能的 DOM 对象，这些 DOM 对象与它们的容器(例如

)保持相同的相对位置，就像在实际的 DOM 树中由一些执行生成的一样。。声明性定义如下。

定义 1 给定服务器脚本 P，其 V-DOM 树是满足以下条件的树<N,E>。

•节点 n∈n 当且仅当在执行 P 时，生成的客户端页面中出现一个 DOM 对象 n;

•边 n→m∈E 当且仅当在 P 的某些执行中，DOM 对象 m 直接驻留在生成的客户端页面中的另一个 DOM 对象 n 中。

用于动态有效测试的虚拟DOM覆盖 Web

图 1 V-DOM 树示例

考虑图 1(a)中的服务器脚本。包含的 PHP 脚本有两条执行路径。根据$p 的值，脚本可以向结果客户机页面发出一个按钮或一个包含按钮的表。这两种具体执行的结果如图 1(b)所示。它显示了真实的 DOM 树及其相应的外观。V-DOM 树及相应的网页如图 1(c)所示。它集成了所有出现的 DOM 对象在具体的运行中，并在实际执行中保留其相对位置。请注意，button1 和 button2 不能在任何具体执行的结果中共存。在本文中，我们也将 V-DOM 树对应的 HTML 页面称为虚拟 HTML 页面。V-HTML 页面可以由浏览器呈现为普通的 HTML 页面。

1. V-DOM 覆盖

如果在测试运行中呈现 DOM 对象，则它是一个显示的对象。因此，我们将 V-DOM 显示覆盖率定义为一个测试集显示的对象与 V-DOM 树中所有对象的比率。在客户端，用户可以通过操作用户控件(如按钮或输入文本框)来与 web 应用程序交互。这些操作可以触发可能会改变执行状态的事件。我们将带有事件监听器的 DOM 对象称为交互式对象，如果一个交互对象的特定事件在测试运行中被触发，我们说这个事件被覆盖了。因此，V-DOM 事件覆盖就是 V-DOM 树中触发事件的数量与所有可触发事件的比例。它根据用户交互来度量测试集的完整性。

模型生成和覆盖计算。

1. 预处理在这一步中，web 应用程序将为以后的静态分析做好准备。特别是，脚本包含是通过包含目标脚本的内容来处理的。然后将生成的服务器脚本转换为 C 代码

算法 1 构造虚拟 DOM 树

用于动态有效测试的虚拟DOM覆盖 Web

2. 控制流和数据流分析。在这一步中，对已翻译的 C 代码执行静态控制流和数据流分析，以识别和提取脚本可能发出的所有 DOM 对象。这一步的输出是一个分析记录文件。

3. 模型生成和覆盖计算。此步骤是工具根据上一步的程序分析结果生成 V-DOM 树。在测试用例执行期间，将收集与覆盖标准相关的运行时数据。

用于动态有效测试的虚拟DOM覆盖 Web

图 2 V-DOM 构造概述。灰盒是三个主要步骤。白色圆角矩形和一个小盒子是我们使用的工具。白色矩形是中间数据或分析结果。

算法 2 静态变量逼近

用于动态有效测试的虚拟DOM覆盖 Web

算法 1 描述了 V-DOM 树的构造算法。它的输入是前一步得到的程序分析结果，包括 CFGs 和编译后程序的数据依赖关系。它的输出是一个虚拟 HTML 页面，本质上就是 V-DOM 树。

算法 2 定义 computeVar()方法，在给定评估上下文的情况下计算变量的可能值集。在第 3 行，获得了变量的数据依赖集。

例子图 3 为 V-DOM 构造的示例。PHP 脚本是 Timeclock 1.0.2 中的代码片段的简化版本，用于输出页面的页脚。输出 PHP 语言的官方网方链接。

用于动态有效测试的虚拟DOM覆盖 Web

图 3 V-DOM 构造示例

在这一步中，我们收集具体执行的 DOM 对象，并使用上一步中构建的 V-DOM 树计算测试集的覆盖率。

理论上，如果两个 DOM 对象匹配，它们应该共享相同的属性集。然而，由于我们在构造 V-DOM 树时使用了静态值近似，因此并不总是能够实现全词匹配。为了解决这个问题，我们将 V-DOM 树构造过程中引入的符号变量视为可以与任何字符串匹配的通配符。另外，如果 VDOM 树中有多个匹配项，则使用第一个匹配项。

实验

在我们的实证研究中，我们主要回答以下研究问题：

RQ1 ：与基于最先进的爬虫程序 crawljax[22]的动态方法相比，V-DOM 树能建模更多的 DOM 对象吗?

RQ2 ：在故障检测中，V-DOM 树覆盖比基于 crawljax 生成的动态模型的服务器端代码覆盖和 UI 覆盖性能更好吗?

我们选择了五个项目作为我们的实验。它们是从现有的 web 应用程序测试中收集的。

表 1：HTML 元素提取计算

用于动态有效测试的虚拟DOM覆盖 Web

• appkb 0.95.5 是一个知识库管理系统

• faqforge 1.3.2 是一个基于 web 的文档创建和管理工具。

• newspro 1.4.0 是一个先进的新闻管理系统。

• schoolmate 1.5.4 是一个面向中小学管理的 PHP 解决方案。

• timeclock 1.0.2 是一个有效的基于 web 的时钟系统，它取代了人工签到表。

1.V-DOM 树模型与动态模型

在第一个实验中，我们生成了课题程序的 V-DOM 树模型，并与最先进的爬虫程序 crawljax[22]生成的动态 UI 模型进行了比较。结果表明，所提出的 V-DOM 树方法比使用爬虫可以建模更多的 DOM 对象。这表明，即使是像 crawljax 这样的高级爬虫也只能抓取所有可能的客户端页面的一小部分，因为这些页面严重依赖于客户端输入、服务器端状态(例如数据库状态)和用户交互的顺序。在实践中，所有可能的输入和序列的搜索空间太大，无法通过动态执行进行探索。

2.V-DOM 树的构造成本

在第二个实验中，我们评估了 V-DOM 树构造的运行时性能，并将其与运行 crawljax 的成本进行了比较。结果如表 2 所示。实验是在 Intel Core i3 3.07GHz CPU 和 4GB RAM 的机器上进行的。注意，由于执行的各种分析，V-DOM 树的构造更加昂贵。当前的实现还没有被优化。我们相信，通过优化可能的变量值的计算，效率可以大大提高。此外，我们认为性能开销只是一次性成本。

表 2：运行时性能（以秒为单位）

t1 、t2、t3 分别为构建 VDOM 三个步骤的次数。这是总时间

3. 故障检测有效性比较

在第三个实验中，我们比较了 V-DOM 树覆盖、服务器端代码覆盖和 UI 元素覆盖(基于 crawljax 生成的动态模型)的故障检测能力。我们使用五个学科项目的三个覆盖标准进行测试选择。

图 4：故障检测率

图 4 显示了随着所选测试用例数量的增长，检测到的故障的平均数量是如何增长的。由 V-DOM 覆盖选择的测试可以比由其他两个覆盖标准选择的测试更快地检测故障。对于这五个程序来说，V-DOM 覆盖的性能明显优于 UI 覆盖(Crawljax)。对于 faqforge、schoolmate 和 timeclock 来说，V-DOM 覆盖的性能明显优于代码覆盖。对于 aphpkb 和 newspro, V-DOM 选择的测试可以检测更多的错误，尽管代码覆盖可以使用更多的测试来实现相同的目标。结果表明，V-DOM 的故障检测率高于代码覆盖和 UI 覆盖的故障检测率。