[HTML 元素](#HTML 元素)

[基本 HTML 标签](#基本 HTML 标签)

DOM

[window & document](#window & document)

[DOM 操作](#DOM 操作)

[Selenium IDE](#Selenium IDE)

安装

[selenium IDE录制/回放](#selenium IDE录制/回放)

[第一步打开](#第一步打开)

[第二步填入工程的名字](#第二步填入工程的名字)

[第三步填写base URL](#第三步填写base URL)

[第四步点击START RECORDING](#第四步点击START RECORDING)

[第五步停止录制](#第五步停止录制)

[第六步填写本次测试用例名称](#第六步填写本次测试用例名称)

[第七步点击运行按钮实现自动执行录制的操作](#第七步点击运行按钮实现自动执行录制的操作)

关键命令及示例

辅助功能

HTML

HTML 是用来描述网页的一种语言

HTML 指的是超文本标记语言 (Hyper Text Markup Language)，HTML 不是一种编程语言，而是一种标记语言 (markup language)，Html包含静态html和动态html。

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如<b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML 元素

HTML 文档是由 HTML 元素定义的HTML 元素指的是从开始标签到结束标签的所有代码，通常和 Html 标签表达的是一个意思HTML 元素语法：

HTML 元素包含了开始标签和结束标签
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

元素与标签的区别：元素包括了标签之间的所有代码

div

页面顶部区域

页面左面区域

页面中部区域

页面底部区域

测试语文数学男生女生百度一下

111	222
333	444
555	666

复制代码

<img src="https://www.baidu.com/img/bd_logo1.png?where=super" width="400" height="200">

<textarea rows="10" cols="5"></textarea>
<b>测试</b>
<p>这是段落</p>
<!-- 这是注释-->
<iframe src="http://www.baidu.com" width="600" height="600"></iframe>
<br>
<div class="head">
    <h1>页面顶部区域</h1>
</div>
<div class="left">
    <h1>页面左面区域</h1>
</div>
<div class="middle">
    <h1>页面中部区域</h1>
</div>
<div class="foot">
    <h1>页面底部区域</h1>
</div>

加入CSS样式

复制代码

<style>
.head{
    background-color:blue;
    color:white;
    text-align:center;
    padding:5px;
}
.left{
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
.middle{
    width:350px;
    float:left;
    padding:10px;
}
.foot{
    background-color:blue;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
    .head{
        background-color:blue;
        color:white;
        text-align:center;
        padding:5px;
    }
    .left{
        line-height:30px;
        background-color:#eeeeee;
        height:300px;
        width:100px;
        float:left;
        padding:5px;
    }
    .middle{
        width:350px;
        float:left;
        padding:10px;
    }
    .foot{
        background-color:blue;
        color:white;
        clear:both;
        text-align:center;
        padding:5px;
    }
  </style>
</head>
<body>
    <input type="text" name="" value="test">
    语文<input type="checkbox" name="">
    数学<input type="checkbox" name="">
    男生<input type="radio" name="sex">
    女生<input type="radio" name="sex">
    <input type="button" name="" value="登录">
    <input type="file" name="">
    <input type="password" name="">
    <select>
        <option>语文</option>
        <option>数学</option>
        <option>英文</option>
    </select>
    <a href="http://www.baidu.com">百度一下</a>
  <table>
      <tr><td>111</td><td>222</td></tr>
      <tr><td>333</td><td>444</td></tr>
      <tr><td>555</td><td>666</td></tr>
  </table>
  
  <img src="https://www.baidu.com/img/bd_logo1.png?where=super" width="400" height="200">
  
  <textarea rows="10" cols="5"></textarea>
  <b>测试</b>
  <p>这是段落</p>
  <!-- 这是注释-->
  <iframe src="http://www.baidu.com" width="600" height="600"></iframe>
  <br>
  <div class="head">
      <h1>页面顶部区域</h1>
  </div>
  <div class="left">
      <h1>页面左面区域</h1>
  </div>
  <div class="middle">
      <h1>页面中部区域</h1>
  </div>
  <div class="foot">
      <h1>页面底部区域</h1>
  </div>
</body>
</html>

JavaScript&DOM

脚本位置：

位于<script>与</script>标签之间
<body>和<head>(推荐) 中

示例：

复制代码

<script>alert("Hello World")</script>

JavaScript 是可插入 HTML 页面的编程代码用来改进设计、验证表单、检测浏览器、创建 cookies，以及更多的应用JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行

轻量级、功能强大编程语言
因特网上最流行的脚本语言

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
    .head{
        background-color:blue;
        color:white;
        text-align:center;
        padding:5px;
    }
    .left{
        line-height:30px;
        background-color:#eeeeee;
        height:300px;
        width:100px;
        float:left;
        padding:5px;
    }
    .middle{
        width:350px;
        float:left;
        padding:10px;
    }
    .foot{
        background-color:blue;
        color:white;
        clear:both;
        text-align:center;
        padding:5px;
    }
  </style>
  <script type="text/javascript">
      // JavaScript代码写在这里
      alert("欢迎来到我的网站！");
    </script>
</head>
<body>
    <input type="text" name="" value="test">
    语文<input type="checkbox" name="">
    数学<input type="checkbox" name="">
    男生<input type="radio" name="sex">
    女生<input type="radio" name="sex">
    <input type="button" name="" value="登录">
    <input type="file" name="">
    <input type="password" name="">
    <select>
        <option>语文</option>
        <option>数学</option>
        <option>英文</option>
    </select>
    <a href="http://www.baidu.com">百度一下</a>
  <table>
      <tr><td>111</td><td>222</td></tr>
      <tr><td>333</td><td>444</td></tr>
      <tr><td>555</td><td>666</td></tr>
  </table>
  
  <img src="https://www.baidu.com/img/bd_logo1.png?where=super" width="400" height="200">
  
  <textarea rows="10" cols="5"></textarea>
  <b>测试</b>
  <p>这是段落</p>
  <!-- 这是注释-->
  <iframe src="http://www.baidu.com" width="600" height="600"></iframe>
  <br>
  <div class="head">
      <h1>页面顶部区域</h1>
  </div>
  <div class="left">
      <h1>页面左面区域</h1>
  </div>
  <div class="middle">
      <h1>页面中部区域</h1>
  </div>
  <div class="foot">
      <h1>页面底部区域</h1>
  </div>
</body>
</html>

DOM

HTML DOM（Document Object Model，文档对象模型）

DOM 是用于访问 HTML 元素的正式 W3C 标准
当网页被加载时，浏览器会创建页面的文档对象模型
通过 HTML DOM，可以使用 JavaScript 访问 HTML 文档的所有元素

（DOM 结构树）

通过可编程的对象模型，JavaScript 获得了足够的能力来改变 HTML

改变页面 HTML 元素
改变页面 HTML 属性
改变页面 CSS 样式，对页面中的所有事件做出反应
测试

window & document

window

表示浏览器中打开的窗口
JavaScript 层级中的顶层对象
window 是 document 的父节点

document

代表窗口中显示的当前文档（页面）
通过 document 节点可以遍历到文档里的所有子节点

DOM 操作

查找 HTML 元素

var element = document.getElementById("test");
var element = document.getElementsByClassName("test");
var element = document.getElementsByTagName("p");

操作 HTML 元素

var value = document.getElementById("test").value;
document.getElementById("test").value="测试";

测试

复制代码

<script type="text/javascript">
    window.onload=function(){
        var element = document.getElementById("username");
        alert(element.getAttribute("type"));
    }
  </script>

Selenium IDE

安装

Selenium IDE是一个firefox/chrome插件，用于记录和回放用户与浏览器的交互。使用它来创建简单的脚本或协助进行探索性测试。

Selenium IDE安装：

官网下载插件后本地安装http://www.seleniumhq.org/download/

浏览器搜索插件安装

查看Firefox版本

selenium IDE录制/回放

|----------|-------------|------------|--------------------------------------------------------------------------------------------|
| 步骤序号 | 命令 / 操作 | 功能说明 | 关键细节 |
| 第一步 | open（命令） | 打开指定网页 URL | 1. 若配置了 base url（基础地址），target 填斜杠/ 则打开 base url（如百度）；2. 未配置 base url 则直接打开 target 中的完整网址 |
| 第二步 | windowsize | 设置浏览器窗口尺寸 | 示例尺寸：1550x838（因录制时做了浏览器最大化处理，为适配的最优尺寸） |
| 第三步 | click | 点击页面中的某个元素 | （内容未提及具体点击对象，核心是对页面元素执行点击操作） |

第一步打开

选择第一个或第三个都可以，这里我们选择第一个。

第二步填入工程的名字

第三步填写base URL

去设置你的工程的base url，就是你要去录制的web项目的url地址比如说这里我要录制的地址http://www.baidu.com，我们输这个网址，这就是我们录制要要去录制的一个路径

第四步点击START RECORDING

开始录制

我这里录制的从百度搜索CSDN，并点击CSDN的百度百科

第五步停止录制

第六步填写本次测试用例名称

第七步点击运行按钮实现自动执行录制的操作

执行的时候能等待的时间，等待新的窗口出现的时间超过了2000ms，也就是两秒钟，现在的窗口等待时间太久了，这个错误的原因是因为firefox会阻止咱们的窗口弹出

取消勾选隐私设置

解释：

中间区域是录制的用例步骤，每一步包含Command（命令）、Target（目标元素）、Value（值），以下是示例步骤及功能：

|--------|---------------|---------------------|-----------|--------------------------------------------------------------|
| 步骤 | Command | Target | Value | 功能说明 |
| 1 | open | / | - | 打开基础 URL（需提前设置base url 为https://www.baidu.com ，实际打开百度首页） |
| 2 | window size | 1550x838 | - | 设置浏览器窗口尺寸（对应浏览器最大化后的尺寸） |
| 3 | click | id=kw | - | 定位百度搜索框（id 属性为kw 的 input 元素）并点击，使输入框获得焦点 |
| 4 | type | id=kw | 腾讯课堂 | 向 id 为kw 的搜索框中输入 "腾讯课堂" |
| 5 | click | id=su | - | 定位百度搜索按钮（id 属性为su 的 input 元素）并点击，执行搜索 |
| 6 | click | link text = 腾讯课堂... | - | 通过超链接文本（"腾讯课堂专业的在线教育平台"）定位搜索结果并点击 |
| 7 | select window | - | - | 切换到新打开的窗口（因步骤 6 点击后会打开新页面） |
| 8 | click | css=. 课堂元素选择器 | - | 通过 CSS 选择器定位新页面中的 "课堂" 元素并点击 |

关键命令及示例

Selenium IDE 提供多种命令，常见核心命令如下：

open

○ 功能：打开指定 URL（若设置了base url，Target可填相对路径）

○ 示例：Command=open + Target=/（结合base url=https://www.baidu.com，打开百度首页）

click

○ 功能：点击目标元素

○ 定位方式示例：

■ id=kw（通过 id 定位）

■ link text=腾讯课堂（通过超链接文本定位）

■ css=.chat-input-tool（通过 CSS 选择器定位）

type

○ 功能：向输入区域输入文本

○ 参数：Target（元素定位器） + Value（输入内容）

○ 示例：Command=type + Target=id=kw + Value=腾讯课堂（向百度搜索框输入内容）

window size

○ 功能：设置浏览器窗口尺寸

○ 示例：Command=window size + Target=1550x838（设置窗口宽 1550、高 838）

select window

○ 功能：切换到新打开的浏览器窗口

○ 示例：步骤 7 中用于切换到搜索结果打开的新页面

辅助功能

执行状态提示

○ 每步操作后会显示状态：成功显示ok，失败显示红色字体的fail。

Reference 区域

○ 显示当前命令的说明，例如：

■ click命令：说明是对目标元素（链接、按钮、复选框等）执行点击，参数为元素定位器（如id=kw）；

■ type命令：说明是向输入区域设置文本，参数为元素定位器 + 输入值。

断言命令（Assert）

○ 用于验证用例执行结果（如assertText验证元素文本），是判断用例是否成功的核心手段。

本期内容先更到这里，接下来可看后续博客。

Selenium(HTML+JavaScript&DOM+Selenium IDE)

HTML

HTML 元素

基本 HTML 标签

页面顶部区域

页面左面区域

页面中部区域

页面底部区域

JavaScript&DOM

DOM

window & document

DOM 操作

Selenium IDE

安装

selenium IDE录制/回放

第一步 打开

第二步 填入工程的名字

第三步 填写base URL

第四步 点击START RECORDING

第五步 停止录制

第六步 填写本次测试用例名称

第七步 点击运行按钮实现自动执行录制的操作

关键命令及示例

辅助功能

第一步打开

第二步填入工程的名字

第三步填写base URL

第四步点击START RECORDING

第五步停止录制

第六步填写本次测试用例名称

第七步点击运行按钮实现自动执行录制的操作