实验简介

针对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自动化测试脚本