软件测试 | 修改特定的元素属性

更多学习资料戳！！！

问题

编码完成、正在测试的应用很少会为了测试人员的方便而进行修改。如果你可以在浏览器中实时地修改页面，那么你就无需向应用本身添加测试代码。

另外，开发人员通常信任网页的内容保持不变。违反这一假定可以揭示出安全设计缺陷。

解决方案

按照 2.3 节，安装 Firebug。Firebug 是如此复杂的一个附加组件，它居然有自己的附加组件用来增强和扩展其功能。我们只需要 Firebug 的基本安装。

浏览到你要编辑的页面，单击浏览器窗口右下角的绿色复选框。在某些情况下，网页上可能确实有 JavaScript 错误，因此这时显示的图标可能是在红色圆圈中带个白色的 X。

在 Firebug 中找出特定元素是很容易的。你的也可以在 HTML 选项卡中浏览，直到找到该元素，或者按 Inspect 按钮并在浏览器和 Firebug 的 HTML 显示中高亮显示这个元素。这个方法也适用于 CSS 和 DOM 属性，不过你必须手动选择要修改的属性。图 3-14 显示了这种高亮显示，请亲自试验一下，确实相当直观。

元素属性实时显示在 Firebug 右下区域中，分为 3 个面板：央视、布局和 DOM 信息各占一个。在每个面板中，你可以单击任意值，这样会在原地打开一个小的文本框。如果你更改了这个值，显示的页面将立即被更新。图 3-15 向我们演示了在 HTML 窗格中编辑，将 Yahoo!标识更改为 Google 的标识。注意，这并不会修改源代码，也不会对服务器做任何调整；这些更改只出现在你的浏览器上下文中，而别人完全看不到。

在这种情况下，Firebug 与 DOM Inspector 有相似的功能，但它还包含了一个 JavaScript 控制台。它使你能够从页面本身的上下文出发执行 JavaScript。3.10 节将深入利用利用这一点，但是对于初学者而言，通过使用常见的 JavaScript 方法（比如 document. getElementById）来获取基本的 JavaScript 和 CSS 信息已经是非常简单的了。

讨论

实时地编辑页面有优势也有劣势。就是说，如果你刷新或浏览到其他页面，更改将丢失。它的好处在于，你的测试不需要更改基本代码，而且不会干扰后续测试。对于再次运行同一测试而言，这一点又令人丧气，因为目前无法再 Firebug 中保存这些编辑。

本秘诀证明了这一格言：你不能信任浏览器。这些工具可以用来观察传送到客户端的每一段代码，然后更改代码的任意部分。虽然更改发送到其他用户的内容是非常困难的，但更改显示给你的内容是相当简单的。