4.3　JavaScript相关知识

在实施自动化测试过程中的某些场景下，我们需要借助JavaScript来操作页面元素。因此，本节我们先来了解一下JavaScript的基础概念，然后学习一下JavaScript HTML DOM相关的知识。

4.3.1　JavaScript基础概念

JavaScript是一种具有函数优先的轻量级、解释型或即时编译型的脚本语言，被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供流畅愉悦的浏览体验。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

（1）JavaScript的特点

●是一种解释性脚本语言（代码不进行预编译）。

●主要用来向HTML页面添加交互行为。

●可以直接嵌入HTML页面，但写成单独的JS文件有利于结构和行为的分离。

●具有跨平台特性，在绝大多数浏览器的支持下可以在多个平台下运行（如Windows、Linux、macOS、Android、iOS等）。

●JavaScript脚本语言同其他语言一样，有它自身的基本数据类型、表达式、算术运算符及程序的基本程序框架。JavaScript提供了4种基本的数据类型和两种特殊的数据类型用来处理数据与文字。变量提供了存放信息的地方，表达式则可以完成较复杂的信息处理。

●可以实现Web页面的人机交互。

（2）JavaScript的组成部分

●ECMAScript，描述了该语言的语法和基本对象。

●文档对象模型（Document Object Model，DOM），描述了处理网页内容的方法和接口。

●浏览器对象模型（Browser Object Model，BOM），描述了与浏览器进行交互的方法和接口。

4.3.2　JavaScript HTML DOM

通过JavaScript HTML DOM，用户可以访问HTML文档的所有元素，这一特性在某些情况下对Web UI自动化测试有很大帮助。

（1）HTML DOM

当页面被加载时，浏览器会创建页面的DOM。HTML DOM被构造为对象的树，如图4-15所示。

通过可编程的DOM，JavaScript获得了足够的能力来创建动态的HTML。

●JavaScript能够改变页面中的所有HTML元素。

●JavaScript能够改变页面中的所有HTML属性。

●JavaScript能够改变页面中的所有CSS样式。

●JavaScript能够对页面中的所有事件做出反应。

（2）寻找HTML元素

假如我们想通过JavaScript来操作HTML元素，首先必须找到想要操作的元素，可以使用以下3种方法。

●通过id寻找HTML元素，例如查找id="intro"元素。

var x=document.getElementById("intro");

●通过标签名寻找HTML元素，例如查找id="main"的元素，然后寻找id="main"的元素中的所有p元素。

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

●通过类名寻找HTML元素，例如通过getElementsByClassName函数来寻找class="intro"的元素。

var x=document.getElementsByClassName("intro");

（3）改变HTML元素的属性

如需改变HTML元素的属性，请使用下面的语法。

document.getElementById(id).attribute=新属性值