实验简介

针对Web窗体应用，通常我们也有两种机制来识别和操作其中的元素。第一种是使用JavaScript来完成DOM对象识别，JavaScript本身就可以定位页面的元素，甚至某一个控件，所以JS本身就内置这个功能，再由浏览器来解释和执行，它天生有这个作用。第二种是使用浏览器的内核API接口来完成识别，因为浏览器中的DOM对象都是由浏览器渲染出来的，所以我们直接调用浏览器的内核开放出来的这些API接口，当然也可以对这些Web页面元素进行操作。

事实上，Selenium的两个关键组件就实现了上述的两种对象识别的手段。第一种是使用Selenium RC基于JavaScript实现Web页面的对象识别和操作。第二种则是使用Selenium WebDriver基于浏览器内核实现Web页面的对象识别和操作。

本节实验主要为大家讲解如何利用JavaScript脚本来识别和操作Web页面的元素。

实验目的

(1) 掌握JavaScript识别和操作Web页面元素的几种方式。

(2) 利用JavaScript完成Web页面的自动化测试，理解其实现手段。

实验流程

1. JavaScript操作DOM元素？

由于JavaScript天生就是为浏览器和Web前面页面的交互而设计的，所以JavaScript直接在浏览器中执行。我们可以利用JavaScript很容易地操作Web页面中的所有元素，通常来说，JavaScript定位页面的元素有以下几种方式:

(1) 通过元素的ID属性来识别：在同一个Web页面中，ID属性是元素在页面中的唯一标识，不允许重复，所以ID属性是识别页面元素中效率最高的方式，也是最推荐使用的方式。我们可以使用JavaScript的document.getElementById(“MyID”)的方式来获取到这个唯一的元素，从而进行相应的操作。

(2) 通过元素的Name属性来识别：页面元素的Name属性是允许重复的，所以利用JavaScript获取到的元素是一个数组，我们可以使用document.getElementsByName(“MyName”)来获取到页面中所有的Name属性为MyName的元素。

(3) 通过元素的Tag标签来识别：获取到页面中所有的指定标签名称的元素。

(4) 通过元素的Class属性来识别：获取到页面中所有的指定Class属性的元素。

(5) 通过元素的Xpath路径来识别：通过XPath层层识别的方式进而定位到相应的元素。

2. 为页面注入JavaScript自动化测试脚本

现在我们不妨利用JavaScript操作DOM元素的原理，来实现Agileone系统中需求提案模块的新增功能的自动化测试。步骤如下：

(1) 找到需求提案模块对应的后台页面，在\agileone\App\View\Proposal.phtml。利用任意记事本或Web前端开发工具打开。

(2) 为了更好地模拟这个过程，我们在页面中添加一个按钮，当我们点击这个按钮时，才开始执行自动化测试脚本。所以编辑这个Proposal.phtml文件，在278行的位置后面，添加一个按钮，并调用JavaScript函数startTest()，代码如下：

保存上述代码，进入Agileone的需求提案模块，我们应该可以看到，该页面中新增了一个按钮，如图：

(3) 在Proposal.phtml页面的最后，添加如下JavaScript代码，实现自动化测试：

<script>
function startTest() {
document.getElementById("type").value = "Suggestion";
document.getElementById("importance").value = "High";
document.getElementById("headline").value = "这是需求提案标题-1000";
setKEContent("content", "这是一个重要的需求提案的内容-1000");
document.getElementById("add").click();
setTimeout(verifyResult, 3000);  // 延迟3秒钟后再验证结果，确保已提交
}
function verifyResult() {
var result = document.getElementById("msg").innerHTML;
if (result.indexOf("新增数据成功")>=0) {  // 标准的模糊匹配断言
alert("新增需求提案-测试成功");
}
else {
alert("新增需求提案-测试失败");
}
}
</script>

在上述代码中，有一个特殊的情况，就是我们在Agileone里面内置了一个KindEditor在线HTML编辑器，无法通过JS的原生代码直接操作其内容。所以我们使用了KindEditor提供的操作其内容的接口函数setKEContent进而实现往内容框里面输入需求提案的内容。后续我们在使用Selenium来操作该内容框时，也会遇到同样的问题，读者可以提前感受一下。

3. 运行代码确认执行效果

在Agileone中刷新页面，点击“开始”按钮，我们可以看到，代码成功被执行，且执行效率很高。一条新的需求探案正常新增。

思考练习

(1) 利用往页面注入JavaScript的方式，

(2) 自学理解浏览器渲染引擎的工作过程及渲染原理。

(3) 尝试利用C#或其它编程语言，试着去实践一下调用IE浏览器内核API接口操作Web页面。

为了答谢大家对蜗牛学院的支持，蜗牛学院将会定期对大家免费发放干货，敬请关注蜗牛学院的官方微信。