写点什么

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

  • 2023-08-17
    北京
  • 本文字数:1168 字

    阅读完需:约 4 分钟

更多学习资料戳!!!

问题

元素属性可以被样式表或 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)数据。

用户头像

社区:ceshiren.com 微信:ceshiren2023 2022-08-29 加入

微信公众号:霍格沃兹测试开发 提供性能测试、自动化测试、测试开发等资料、实事更新一线互联网大厂测试岗位内推需求,共享测试行业动态及资讯,更可零距离接触众多业内大佬

评论

发布
暂无评论
软件测试 | web跟踪元素属性_测试_测吧(北京)科技有限公司_InfoQ写作社区