甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
URL：
创新互联是一家专业从事网站设计、成都做网站的网络公司。作为专业网站制作公司,创新互联依托的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、全网营销推广及网站设计开发服务！
编写思路(入门级别)
1、打开谷歌浏览器
2、打开博客园登录网页地址
3、在用户名输入框内输入用户名
4、在密码输入框内输入密码
5、点击登录
6、检测是否跳转到了登录成功的页面
脚本如下图:
4feb5d799ae52eea8c1b063cc8c60f85.png
现在我们来分解下输入用户名这个动作
1、首先找到用户名输入框
2、在输入框中输入用户名
【找到用户名输入框】实现此步骤的前提就是需要掌握控件的定位。具体在脚本中实现也就是图中的第11行：
('//*[@autocomplete="username"]')
WEB控件定位所做的事情，就是通过特定的方式找到我们需要操作的页面控件
那么如何才能学会这个控件定位呢？第一步就是简单了解下前端的语言。和我一起往下看即可轻松学会。
二、WEB网页文本—HTML5
要想掌握WEB自动化测试的控件定位，我们首选要了解控件是什么。
控件就是浏览器展示的前端语言生成对象。
web前端的基础语言就是HTML5
依旧是老套路，拿博客园举例：
5faa8b60ca05f50f4c0d6430574214fd.png
用户打开浏览器，看到的用户名输入框、密码输入框、登陆按钮、立即注册等等所有，都是浏览器展示的HTML5语言的对象。
我们按下F12键即可打开浏览器的调试模式，来查看网页的HTML5源代码。
如下图：
按下F12后右边页面中Elements选项对应的就是网页的html5代码
第一次接触肯定觉得非常晦涩难懂、云里雾里。但是相信我，万事开头难！你在看我自动化测试思维的文章以前不也是觉得自动化测试非常高大上吗?
不了解什么是自动化测试思维？戳下方5分钟即可学会☟☟☟
【自动化测试入门】自动化测试思维
00a821b679ab09e913981cf6a655f861.png
HTML5一个控件的写法一般是2个尖括号成对出现。
一、第一个尖括号的第一个单次为控件类型，之后是控件属性。
二、第二个尖括号表示此控件的尾部。
三、2个尖括号中间为控件在前端显示的文字部分。
举例说明的话。控件类型是狗的类型(中华田园犬、哈巴狗、牧羊犬等)，控件属性就是这条狗的名字、性别、体重、毛发颜色等。2个尖括号中间的文字，就是你想在此页面上展示的这个狗的'名字'。
还是拿博客园的登陆界面举例来说：
点击'小箭头'定位控件，或者在控件处右键选中'检查元素'，即可定位到指定的控件
7b1de1397c71dcde07d8d9da72e61ab5.png 控件的源码为：
input _ngcontent-miv-c141=""matinput=""formcontrolname="username"placeholder="登录用户名 / 邮箱"autocomplete="username" id="mat-input-0" aria-describedby="mat-error-0" aria-invalid="true" aria-required="false"
input就是控件类型
input以外的就都是控件属性
这个输入框的控件属性有：
_ngcontent-miv-c141=""
matinput=""
formcontrolname="username"
placeholder="登录用户名 / 邮箱"
autocomplete="username"
id="mat-input-0"
aria-describedby="mat-error-0"
aria-invalid="true"
aria-required="false"
三、基于控件的唯一控件属性定位
了解了什么是控件，现在我们在上手控件的定位。
selenium有八种定位控件的方式，有6种都是基于HTML5原生控件的单一控件属性来定位的。
id定位：
find_element_by_id()
name定位：
find_element_by_name()
class定位：
find_element_by_class_name()
tag定位：
find_element_by_tag_name()
link定位：
find_element_by_link_text()
partial_link定位：
find_element_by_partial_link_text()
以下两种为特定的2种控件定位方法，下一篇文章再做详解。 xpath定位：find_element_by_xpath() CSS定位：find_element_by_css_selector()
下面我将举例来讲解这6种基于单一控件属性的定位方法。
还是拿博客园的登陆界面举例来说：
833005656b1e6d0fa4a7e2cc58d875a5.png
登陆用户名的输入框的HTML5源码为：
input _ngcontent-miv-c141=""matinput=""formcontrolname="username"placeholder="登录用户名 / 邮箱"autocomplete="username" id="mat-input-0" aria-describedby="mat-error-0" aria-invalid="true" aria-required="false"
这个输入框的控件属性有：
_ngcontent-miv-c141=""
matinput=""
formcontrolname="username"
placeholder="登录用户名 / 邮箱"
autocomplete="username"
id="mat-input-0"
aria-describedby="mat-error-0"
aria-invalid="true"
aria-required="false"
对应的定位方法：
id属性来定位此控件
写法为：
find_element_by_id(mat-input-0)
name属性来定位此控件
此控件前端开发没有定义name属性，则无法使用此定位方法
tag属性来定位此控件(控件的类型)
写法为：
find_element_by_tag_name('input')
class属性来定位此控件
写法为：
find_element_by_class_name(mat-input-0)
另外两种定位是针对link属性的控件，也就是链接控件。如下图：
依旧是老老路。使用博客园登陆页举例：
【立即注册】就是页面中的一个link控件，其作用就是跳转到注册页面。
fe0c7b4e9f770591aeaa13a7a9e5ec43.png
_ngcontent-arq-c141="" href="/signup?returnUrl=https:%2F%2F"立即注册
他的控件属性有
link定位(通过link控件的文本值)
find_element_by_link_text('立即注册')
但是部分页面会存在，link的文本值非常长，所以就发明了partial_link定位。
如下图中的百度文库的某一页面：
5ddb0ca6201cd203245824c06c9e7932.png link的文本值为：全国2018年10月04741计算机网络原理真题以及答案解析
定位的脚本就可以写成：(只取文本的某一段值即可)
find_element_by_link_text('04741计算机网络')
但是这样的定位方式存在一个致命且常见的问题：
随着前端的技术不断的发展，页面的复杂度越来越高。一个页面的控件越来越多(tag不唯一)，id、name、class_name可能有很多重名或者完全是动态的一串字母(id、name、class_name、link_name可能都不唯一)，我们基于唯一控件属性定位的在特别复杂的项目上可能完全无法完成UI自动化测试的定位工作。
在博客园看到了一个叫CefGlue的东东，也是对webkit的封装，但是这里博主对于整个浏览器的开发做了比较深刻的描述，并且解决了下载附件弹出保存的问题，于是我采用了这个内核，看了这几篇文章就能满足C#winform对html5的支持了，需要的朋友可以搜索 ‘ 基于.net开发chrome核心浏览器’，目前有7篇文章，其中第四篇有源码下载，比较完善了，解决了附件下载的问题和右键菜单和C#调用js的方法都有。
到这里应该就完了，不过，我们还忽略了一个问题，是js调用C#的方法，这个方法在博文中没有解决，不过小安查过资料，需要看这几篇文章，这几篇文章中的作者通过注册js和C#的反射实现了js调用C#,需要了解的请搜索标题：‘Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告’.
如果你看了是否无法看懂，是有点难以理解，但是没关系，他们提供了一个群号，我当时加入了进去，在群共享有个deme，演示js和C#互调的方法。不过他们这个demo直言是了js和C#的互调，对于文件下载的链接依然无效，需要修改一下文件，点击打开demo工程文件，我们只用到了CefGlue和CefGlue.WindowsForms。打开CefGlue.WindowsForms，新建一个类，取名：BsLifeSpanHandler.cs
代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xilium.CefGlue;
namespace Xilium.CefGlue.WindowsForms
{
public class BsLifeSpanHandler : CefLifeSpanHandler
{
private CefWebClient bClient;
public BsLifeSpanHandler(CefWebClient bc)
{
bClient = bc;
}
protected override void OnAfterCreated(Xilium.CefGlue.CefBrowser browser)
{
base.OnAfterCreated(browser);
bClient.Created(browser);
}
}
}
然后打开CefWebClient.cs文件，添加声明
protected override CefDownloadHandler GetDownloadHandler()
{
return downloadHandler;
}
这样就可以实现点击文档或附件自动弹出下载对话框了，同时又支持javascript和C#的调用。也就能支持绝大多数的客户端开发了。
河南新华电脑学院为您解答
w3c网站
w3cshool官网是全球最大的中文 Web 技术教程。其中包括w3c的标准技术:HTML、CSS、XML，在这上面可以轻松的学习html（html5）、css(css3)及JavaScript等知识，内附html参考手册、案例，在线测试，边写边运行十分直观，学习起来非常轻松。
html5视频网站
近年来在线教育非常火热，很多网站都开办了在线视频教程，很多视频都是免费的，风靡全球的html5自然也被各大在线教育网站作为主要视频教程之一，你可以搜索一下在线教育网站，有很多，比如：51CTO、极客学院、慕课网等等。
html5纸质书
如何你想要认认真真的学习html5，可以买基本比较热门的html5书籍，这类书籍你可以先去豆瓣、京东上看看排名，网友的评论，买一两本比较好的书，然后认真学习下。
百度网盘html资料
要会利用百度网盘，现如今百度网盘被很多学习者用于放置各种学习资料，可以利用百度网盘搜索引擎去百度网盘中搜索有关html5的资料，百度网盘中，包含了大量有关的电子书，案例、源码等，非常有助于学习。
html5百度贴吧
百度贴吧中一般都聚集很多学习爱好者，在里面不仅可以寻找到很多别人共享的资料，而且还能看多很多人遇到的问题，及解决方案，非常有助于帮助自己丰富阅历，解答疑惑。
html5的QQ群
在QQ上多搜索几个学习html5的QQ群，一般群里面有很多资料，大多数都是别人共享的，加入QQ群遇到问题可以请教群中的人，方面大家一起交流学习。
CSDN、博客园、51CTO等博客
这些博客中都是前辈们的一些总结及技巧，从中可以学习到高很多知识，也能解答很多疑问，让人受益无穷。
8
多动手练练
光看多读不练是没有效果的，只有多读多看多练才能把知识转化成自己的，现在就开始动手吧。
关于clientHeight、offsetHeight、scrollHeight
window.screen.availWidth 返回当前屏幕宽度(空白空间)
window.screen.availHeight 返回当前屏幕高度(空白空间)
window.screen.width 返回当前屏幕宽度(分辨率值)
window.screen.height 返回当前屏幕高度(分辨率值)
window.document.body.offsetHeight; 返回当前网页高度
window.document.body.offsetWidth; 返回当前网页宽度
我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。
这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。
clientHeight
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。
offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。
简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。
=======================================================================
clientHeight与offsetHeight的区别
许多文章已经介绍了clientHeight和offsetHeight的区别，就是clientHeight的值不包括scrollbar的高度，而offsetHeight的值包括了scrollbar的高度。然而，clientHeight和offsetHeight的值到底由什么组成的呢？如何计算这两个数的值？
1. clientHeight和offsetHeight的值由什么决定？
假如我们有以下的DIV，主要显示的文字为"This is the main body of DIV"。
如上图所示，clientHeight的值由DIV内容的实际高度和CSS中的padding值决定，而offsetHeight的值由DIV内容的实际高度，CSS中的padding值，scrollbar的高度和DIV的border值决定；至于CSS中的margin值，则不会影响clientHeight和offsetHeight的值。
2. CSS中的Height值对clientHeight和offsetHeight有什么影响？
首先，我们看一下CSS中Height定义的是什么的高度。如在本文最后部分“APPENDIX示例代码”（注：以下称为“示例代码”）中，innerDIVClass的Height值设定为50px，在IE下计算出来的值如下所示。也就是说，在IE里面，CSS中的Height值定义了DIV包括padding在内的高度（即offsetHeight的值）；在Firefox里面，CSS中的Height值只定义的DIV实际内容的高度，padding并没有包括在这个值里面(70 = 50 + 10 * 2)。
in IE:
innerDiv.clientHeight: 46
innerDiv.offsetHeight: 50
outerDiv.clientHeight: 0
outerDiv.offsetHeight: 264
in Firfox:
innerDiv.clientHeight: 70
innerDiv.offsetHeight: 74
outerDiv.clientHeight: 348
outerDiv.offsetHeight: 362
在上面的示例中，也许你会很奇怪，为什么在IE里面outerDiv.clientHeight的值为0。那是因为示例代码中，没有定义outerDIVClass的Height值，这时，在IE里面，则clientHeight的值是无法计算的。同样，在示例代码中，如果将innerDIVClass中的Height值去年，则innerDIV.clientHeight的值也为0。(注：在Firefox下不存在这种情况)。
如果CSS中Height值小于DIV要显示内容的高度的时候呢（当CSS中没有定义overflow的行为时）？在IE里面，整个clientHeight（或者offsetHeight）的值并没有影响，DIV会自动被撑大；而在Firefox里面，DIV是不会被撑开的。如在示例代码中，将innerDivClass的Height值设为0，则计算结果如下所示。IE里面的DIV被撑开，其clientHeight值等于内容的高度与padding*2的和；而Firefox里面，文字将溢出DIV的边界，其clientHeight值正好是padding值的两倍。
In IE:
innerDiv.clientHeight: 38
innerDiv.offsetHeight: 42
outerDiv.clientHeight: 0
outerDiv.offsetHeight: 256
In Firefox:
innerDiv.clientHeight: 20
innerDiv.offsetHeight: 24
outerDiv.clientHeight: 298
outerDiv.offsetHeight: 312
这是博客园里总结的，希望对你有帮助
把代码拿出来贴在head里或者自己本地写个html5.js，就像这样：
!DOCTYPE html
html
head lang="en"
meta charset="UTF-8"
title/title
script
(function(){if(!/*@cc_on!@*/0)return;var e ="abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
/script
style
/*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
section{color: red}
/style
/head
body
section试验下/section
/body
/html
header
header元素描述了文档的头部区域
nav
标签定义导航链接的部分。
section
section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
article
article 标签定义独立的内容。
aside
aside 标签定义页面主区域内容之外的内容（比如侧边栏）。
figcaption
figcaption 标签定义 figure 元素的标题.
figcaption元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
figure
figure标签规定独立的流内容（图像、图表、照片、代码等等）。
footer
footer 元素描述了文档的底部区域.