软件测试 | web 跟踪元素属性

更多学习资料戳！！！

问题

元素属性可以被样式表或 JavaScript 动态更改。测试高度动态的 Web 应用需要使用更加强大、灵活的方法来跟踪元素属性。无论多深入的静态信息，通常都不足以用于测试由 JavaScript 事件驱动的 Web 应用。

解决方案

一旦找到你希望长时间跟踪的元素，请在 DOM 面板中找出它的 id 或其他标识属性（如果它没有 id，你可以为它创建一个，请参考 3.9 节，然后，打开 Firebug 中的控制台面板）。

在下面的例子中，我们将演示如何跟踪现有元素中一切新添加的内容。向现有元素添加内容正是许多 AJAX 驱动应用实时更新的工作原理。

首先，找到并记住你希望跟踪的元素：

var test_element = document.getEleniumById('your_id')

接着，创建一个函数来显示你希望探测的元素属性：

function display_attribute(){       alert("New Element! \n ID:" + test_element.lastChid.id +       "\n HTML:" + test_element.lastChild.innerHTML);}

为所有可能更改这个属性的事件添加一个事件监听程序：

test_element.addEventListener('DOMModeInserted',display_attribute,'false')

初始化这个事件（通过应用逻辑或手动方式）：

new_element = document.getElementById('some_other_element')test_element.appendChid(new_element)

在http://oreilly.com的某页面上运行这些步骤，我们获得了图 3-16 所示的结果。

讨论

本秘诀只有在你拥有 JavaScript 驱动的应用时才真正有用，并且需要对 JavaScript 非常熟悉。它可能不适合你的应用。不过，对于许多启用 AJAX 的网站来说，JavaScript 事件的结果是由服务器而不是客户端来决定。这种方法仍然是测试这种事件驱动的站点的主要工具之一。而且，如果它能够帮助你调试 AJAX 代码，那么也能够帮助基于 AJAX 的攻击。

这是一种相当灵活的方法。无论是事件类型还是测试输出，都有许多的选项。例如，在运行许多这样的事件监听程序时，你可能更愿意创建一个调试输出区，并将文本附加到该结点。例如：

Function debug_attribute() { debug_node.innerHTML += "<br />      new Elenium ID:  " +test_element.lastChild.id }

在非常复杂的应用中，可能有许多动作绑定到许多节点上。JavaScript 支持每个结点对应不限数量的事件监听程序。同样也有许多类型的事件。所有的 Firefox 事件都可以在以下网址找到：http://www.xulplanet.com/references/elemref/ref_EventHandlers.html。

如果对于你的 Web 应用来说，没用必要编写自己的事件监听程序，那么 Firebug 也包含了一个非常好的 JavaScript 调试器，它能够查看并记录特定的函数调用，还能够设置断电。

当心哪些启动其他 AJAX 请求和（通过 eval（）函数）运行评估代码的动态 JavaScript 函数。如果你的 Web 应用评估是从服务器接收到的内容，那么它可能特别容易受到 JavaScript 注入攻击。这一点甚至也适用于仅仅载入数据的情况，比如由客户端进行评估的 JavaScript 对象符号（JSON）数据。