Web页面组成

清菡

发布于 2020-12-02 15:51:44

1.9K0

发布于 2020-12-02 15:51:44

文章被收录于专栏：清菡软件测试清菡软件测试

学习目标

本章介绍部分内容，未完待续。

1.selenium-webdriver环境搭建

代码===驱动程序==浏览器

chrome chromedriver

ie ieserver driver

firefox geckodriver

selenium 是一个第三方库，不是个独立得工具。

安装的chromedriver必须和chrome浏览器版本匹配。

链接：

https://blog.csdn.net/chenmozhe22/article/details/80035871

http://chromedriver.storage.googleapis.com/index.html

2.Web网页由哪些东西实现的？

html+css+js

静态的：

html代表房子里的东西。

css代表装修风格。

动态的：

js 根据用户输入的数据，做的动态处理是js实现的。

例如登录成功就成功进入首页，登录失败就提示用户名和密码错误。

很多前端页面的数据从后台服务请求的。后台服务收到请求后去向我们的数据库进行交互操作，读到结果后再返回给前端页面。也就是接口。

html是套通用的描述页面的标准。

xml是用来存储数据的，html是用来表达网页内容的。

xml没有规定标签名应该是什么。

共同点是由尖括号包围关键字。一般来说是成双成对出现的。

html有些页面是不需要带结束标签也是可以的。

1）HTML标签对

开始结束

<html>子内容</html>

这是html页面的元素，顶层元素（祖先）。

2）HTML属性

3）HTML标签-属性

4）标签名

5）head部分：

6）head部分不代表页面中真正呈现的内容。它是些配置数据。

7）title是页面的标题。

8）keywords搜索引擎优化。

9）真正页面呈现的内容全部在body中。

10）标签对之间是允许插入其它的标签的。

11）type 属性

type="text" 表示是文本输入。

输入框的本质是用来收集用户的信息的。

type:表示按钮，单选框，复选框，文件上传等。

<input type="checkbox">萧亚轩</input_type>

<br> 换行

12）复选框

radio 复选框

<input type="radio">男

name="sex" 变成单选

<input type="radio" name="sex">男

13）input，div，body在html页面中叫做元素。

14）type和name表达了页面的一个内容，是属性。

15）html页面有元素，同时元素也是有属性。每个元素的属性不一样。

16）file 上传文件。

17）readonly 只读。

<input type="text" readonly></input>

18）placeholder 提示用户请输入的提示。

<input type="text" readonly placeholder="请输入你的名字"></input>

19）checked 默认勾选了。

<input type="checkbox" checked>毛不易</input_type>

20）selected 下拉列表。

不需要写成checked="True"，默认就是True。

小技巧：如果刷新不出来页面，可以把光标定位在地址处，再点击刷新。

21）disabled 按钮置灰。

<input type="button" value="hello html" disabled>

22）input 表示按钮。

button 也是表示按钮。

<button>点我就有惊喜</button>

23）a后面的都是属性。

24）a 就是链接。

25）href 跳转地址。

<a href="http://map.baidu.com">地图</a>

元素起始和结束之间的文字，不属于元素的属性，元素的属性只是在<>括号里面，叫做元素的文本内容，不叫作属性。

26）src 图片地址。

<img src="//www.baidu.com/img/bd_logo1.png">

27）设置高和宽:

height="129" width="270"

<img src="//www.baidu.com/img/bd_logo1.png" height="129" width="270">

28）div并没有明确表达页面是个什么元素，它是个容器。

div 分块布局，分块管理。

想把同一类型的放在一起，同一类型的元素有很多。想设置它们的大小，间距，高宽等等，可以用div统一设置，大家全部通用。

div就像一个盒子，例如div设置字体大小，其下的元素通用。

29）class是给不同的元素设置相同的样式。

第一，元素统一布局的时候可以设置间距，这个不是样式可以解决的，所以不能用class；

第二，div可以对同一块里面的元素做统一样式设计，但是没说所有元素一定样式风格一样，样式可以叠加，字体可以一样，可以额外进行加粗等等的一些处理，单独设置就用到了class。

有统一的管理方式，同样也可以各有各的风格。div和class组合起来用，可以对页面进行很多的布局和样式调整。

补充：游戏测试有自己特定的工具。web自动化不适用于渲染画布类型的web游戏。

web自动化测试主要针对的是功能，游戏测试主要针对反应的速度，页面的质感，游戏的感觉，所以不是很合适。

3.想要在页面中找到一个元素

按f12，Elements中找到那个箭头。点下，松开，箭头会变成蓝色，把鼠标拖动到元素上。

1）select和option是个组合标签，有select就一定会有option。

2）select这个叫做下拉列表。

年龄：<select>
    <option>20岁以下</option>
    <option>20-25岁</option>
    <option>25-30岁</option>
    <option>30岁以上</option>
</select>

3）from表单。在很多系统中，涉及用户数据的时候，都用的是from表单。

from表单有个属性叫做action。你提交的一个动作。因为表单你填写完毕之后需要提交的，提交到后台数据中，后台服务会去处理，所以会有个action属性，这个东西不是其它东西都有的。

4）table就是表格。

<tr>行

<td>列

一个<tr>代表一行。

<form>

    <input type="text">
    <table>
        <tr>
            <td>11<td>
            <td>22</td>
            <td>33</td>
        </tr>
        <tr>
            <td>11<td>
            <td>22</td>
            <td>33</td>
        </tr>
        <tr>
            <td>11<td>
            <td>22</td>
            <td>33</td>
        </tr>
        <tr>
            <td>11<td>
            <td>22</td>
            <td>33</td>
        </tr>
    </table>
</form>

5）表格线。

border="2"

6）iframe是页面的一个元素，里面放的是另外一个html页面。

iframe在当前页面中再插入另外的页面。

不想把百度首页的html整个写一下，可以这样写代码：

<iframe src="http://www.baidu.com">

</iframe>

7）textarea 文本域

文本域可以输入很多行。

网页版印象笔记可能是个iframe，其它的可能是个大型的文本域，可以写很多行。

创建文本域。

<textarea></textarea>

8）html页面中用来表示标题的是h1-h6。

但是标题的大小是不一样的。

<h1>大家好！！！</h1>
<h2>大家好！！！</h2>
<h3>大家好！！！</h3>
<h4>大家好！！！</h4>
<h5>大家好！！！</h5>
<h6>大家好！！！</h6>

9）id是任何一个元素都可以有的，代表的是身份认证，表示在整个html页面中是绝对唯一的。

元素定位首选id，但是它也不是绝对一定可用的，现在有非常多的前端框架的id是变化的，而且还有很多人懒得写id。

如果id是随机变化的，就不要考虑了。

前端开发人员之所以不写id，是因为他们根本没考虑到后面有人要做自动化，每个人的编程水平也不同。

10）style属性是设置内联样式的（直接在元素上设置的）。

display 呈现。

display 块。

如果style="None"表示看不见，隐藏。

在html页面中可以把这个元素加载进来，但是不代表此刻让它显示在页面上。

html元素是存在的，但是用眼睛去看页面是看不到的。

visibility代表的是可见。

在html页面中可见是指元素有高和宽。

11）邮件发Html附件，样式失败的原因？

编辑邮件正文是html页面，发过去的样式都丢了，邮件只支持在元素中写style，除非把style样式全部写在它这里，它可以识别。如果外部引入或者写在Head这个地方，它都全部不认识。

未来做自动化的时候，写个表格，表格的背景色润色，设置字体大小，设置间距等等，然后作为邮件正文去发送。领导没时间看附件，可在正文中对测试情况做个总结，比如说现在有多少用例通过了，失败了多少，覆盖了哪些模块，通过率是多少等。

总结性的东西，自己写个html页面在邮件正文中发送，至于详情可以放在附件。

向更高级领导汇报，更高级的领导只看结果，只看个汇总信息。

name也是属性。

id，class,style这3个属性是所有元素共用的，其它有些属性是部分元素特有的。至于哪些元素特有什么，是需要细究的内容。

推荐个好用的链接：https://www.w3school.com.cn/html/index.asp

不需要长期写html页面，我们知道怎么回事就行。

登录的判断涉及后台数据校验，需校验账号密码在我当前的数据库当中是否存在的。如果存在，全部匹配，才会给你返回。

12）鼠标悬浮，通过js可以实现。

鼠标悬浮，对html页面上的元素做了样式的改变。

4.DOM对象

1）HTML DOM树

动态效果：

填写一个表格，点击提交，等会刷新下，页面多了条数据。

查询页面输入各种查询条件点击搜索，页面发生变化了。

通过DOM对象做页面修改：新增元素，删除页面的元素，改元素的属性，样式。

javascript,java,python想操作一个html页面都是不能直接操作的。因为html不是编程语言，它是标记语言。

通过DOM对象，HTML DOM专门用来操作html页面，对html页面进行增删改查。

javascript,java,python都可以用DOM对象。

如果想在前端页面中使用DOM对象，是需要了解javascript的语法的。

什么是事件：用户的操作（点击，输入等等）。

5.Js基本语法

它没有Python那么简单，也没有Java那么难，也是面向对象的。

1）用Var声明变量，进行变量赋值。

2）在html页面中，javascript是放在

<script>
    
</script>

这个页面里面的。

3）`alert()` 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。

4）Python是严格的缩进和对齐，但是js不需要。js结尾需要加上分号`;`，Python是不需要的。

<script >
    var a=[1,2,3,4,555];
    alert(a[1]);
</script>

5）字典读取数据的时候，Python是名称加键名。但是js不一样，是`字典名.键名`。

图片，链接，输入框等等这些都是html页面表达的，网站的交互过程中，动态的内容全部都是js来实现的。

js也是通过DOM对象来实现的，DOM对象就是个桥梁。

js的函数和Python也很像。Python函数的关键字是def，javascript是用function。

javascript的参数用逗号隔开，可以有多个参数。

javascript区分代码块主要通过大括号{}

{}之内是函数体，也就是函数实现的功能。

返回值也是return，函数的调用也是函数名称(参数)

写个函数：

和Python一样，先定义后调用。

元素定位的时候也不需要用到这个函数实现，只需要写几行简单的代码就好了。

Javascript的赋值运算符和算术运算符都和Python是一样的。

只要掌握了1门编程语言，再去扩展别的编程语言，至少基础知识是差不多的，那么至于更高层的开发框架等等，这个还是有所差别的，不过它的实现思想基本上也差不了太多。

DOM对象可以改变网页的任何内容，可以访问它的页面属性，页面元素，也可以改变页面元素，页面元素的属性，页面元素的样式。

可以把html页面看成一个大家族，家族中html是祖先，head是它的首领配置，body就是它的各种子孙后代。

现在要对这个大家族中某个子孙做一些改变操作，先要找到这个人（元素），在整个html页面去找。

它会把html是个层级关系，第一层是body（父亲），head和body是它的两个儿子。

body里面有非常多的子级。

body里面的script是js脚本，不代表页面的元素。

div里面放的才是页面的元素。

每个元素都有两个东西，一个是属性，一个是文本内容。

拿到一个页面，不需要去研究它的层级关系。

提出要查找的条件是什么，然后根据这个条件将所有不符合的过滤掉，层级筛选，最后找到想要的东西。

每一个元素都是有自己的属性和文本方式。主要根据这些东西找，或者根据元素名称找。

6.查找元素

DOM对象针对查找对象，提供了以下几种方式：

当然没有全部覆盖。

1）通过id的形式找到。

2）class属性不是唯一的，你也有，我也有，就像性别。大家都是同一类人，它找的元素绝对不是唯一的。

也不是绝对不是唯一的，要看页面的布局，看开发人员当前页面中有没有多个元素class值是一样的。

获得所有符合这个class值的所有元素。

document.getElementsByClassName(里面填写class名称)

3）标签名就是元素类别。

4）元素的Name属性也是不唯一的。

有的时候，页面元素比较复杂，光靠以上4种方法不能找到它，可以用css选择器。

css选择器是元素定位的一种。

查找元素的方式当中，前面都带着个document，document代表整个html页面。

只要在浏览器中访问这个页面，它会把它加载成一棵文档树。

在这个文档树当中，直接按照我们的要求来筛选我们想要的元素。

5）文档树

控制台输入document，document隶属于windows下面的，也可以写成window.document。

window代表当前的窗口，实际上也可以不要window.。

一样的结果：

如果有特别的属性，特别的样式的地方，那我就根据你来找。

针对的是一个html页面，不是多个html页面。多个html页面之间有重复的元素，有重复的id是很正常的，我们找元素都只针对一个html。

看下这个页面中有没有人和input是一样的class。

0表示第一个，length是1，表示符合getElementsByClassName的元素只有一个。

6）通过标签名称来找元素。

document.getElementsByTagName("input")

以上这几种方式，除了标签名是大家都有的，html页面表达一个元素必须有标签名，但是class属性,id属性和name属性并不是每一个元素都有的，这个完全看开发如何实现这个页面的。

name="wd"

虽然name不是绝对唯一的，但是在很多情况下，开发在给页面的元素取名字的时候，是尽量不重复的。

找元素的时候id是优先的，其次可以看看name,再看看class，再看看别的有意思的特征。

不是元素的属性就是元素的名字，web自动化的元素定位中，这四种方式都有。

可能遇到不太规范的开发，就需要多种属性组合起来才能找到这个元素。就提供了css选择器和xpath选择器。

7.找到元素要干什么？

DOM对象是有操作权限的，可以随便操作元素。

首先，DOM对象可以获取元素的属性。

1）找元素通过元素的属性，但是元素的属性又非常的多，所以拿到元素之后可以获取它的属性值，也可以改变它的属性值。

属性的获取：

方式一：

方式二：

a.getAttribute("name")

通过getAttribute的名称来获取。

如何把maxlength改成200？获取属性之后还可以设置属性。

方式一：

a.setAttribute("maxlength","200")

这是设置啊，所以没有返回值。

方式二：

这个地方就变成了205，实时动态变化，当然并没有把这个操作提交给后台，是从百度服务器上获取这个页面内容的，只是在客户端做了个小小的调整。重新刷新页面，这个修改就不生效了，因为没有提交到百度服务器上把这个修改永久保存在html文件中。

2）DOM对象在获取元素之后对属性获取和修改。

3）style属性。

style属性里面有很多的值，包括边框等等。

这里并没有直接写style，所以先不管它。

可以改变元素的内容也可以删除元素。

4）第一种，如果这个元素是有子级的，可以在子级中添加元素，删除元素，改变元素等等。

DOM对象可以对html页面做全方位的操作的。

5）还有一种是只改变它的纯文字部分。

结束标签和起始标签之间，中文部分叫做这个元素的文本内容。当然英文也算，一个描述的信息，也不算是属性，就是夹在它们的中间。

想改变它的标题可以这样写：

innerText代表里面的文本内容。

innerHTML如果是有后代的，innerHTML会带上所有的标签。

html的表达方式就是标记元素，标签对存在的。

innerText和innerHTML是有区别的。

修改innerText。

innerText="11111111"

6）属性的修改获取，文本的修改获取，还有对样式进行处理。

怎样把title字体改成红色的？

在js中，在某些特定的条件下才会去做这些事情。

7）样式

获取元素的.style，style就是指样式设置。每一种样式都有对应的样式名称，比如字体的颜色，背景色，字体大小，字体的类型，什么字体这些都是对应的样式名称。

简单的改变下这个元素：

只要获取元素之后，想怎么改都可以的，只是每种改变元素的方式是不太一样的。

如果有子级，还可通过删除，新增操作，新增删除元素都可以实现页面的变更。

以上内容，知道语法怎么写即可。

用js做的最多的就是查找元素，然后对元素进行一些操作，我们的操作并不是去改变字体的颜色，最多是将某些属性去掉。比如去掉它的只读属性，方便我往里面输入东西。

为什么通过点击，页面就会发生变化呢？

因为点击之后，让这个元素变成可见的了，改变了它的不可见属性设置为可见。

这就是你的某个点击操作，触发了某一个事情的执行\某一个效果的展示。你的各种触发都叫做事件。

数据库中的触发器。就是某个一动作可以去触发某些sql语句的执行。这些都叫做事件。

点击事件，输入事件，对于整个窗口而言，整个html有个加载事件。

因为浏览器在访问一个页面之后，除了向服务器请求当前整个html页面，在请求到之后，它还要加载进来，渲染出来。这些都是需要时间的。

加载事件，同样是要从html的头部开始。慢慢地加载到尾部。

还有鼠标悬浮事件等等。

8.事件

浏览器或者用户的一些事件，导致页面有不同的响应。

页面加载完成事件。

希望页面加载完成之后，弹出一个警示框。

1）`window.onload`就是加载事件。

至于元素有没有实现这个加载事件，肯定是根据业务需求的呀。

文件加载之后弹出窗口：

<script></script>没有限定要放在哪里，放在head里面也行，放在body里面也行。在html页面当中，哪个地方都可以放。

 window.onload=function(){
        alert("everything is ready")
    }

想在加载之后对某个元素进行操作，应该把它放在页面的最下面。

因为所谓的加载就是等它将整个html页面从头到尾，从第一行到最后一行，整个文档加载之后，才去做的事情。

所以将它放在后面，页面都加载完毕了，加载完毕自然就弹出弹框。

onload需要注意用法，想要在加载完成后操纵某个元素的时候一定要放在末尾哦。

2）如果onload加在前面会有什么问题？

如果想在加载完成之后操纵<h1></h1>，将它的字体变成红色，如果把onload放在head或者是body的第一行，会有什么问题？

它加载到onload后就去加载<script></script>脚本了，<script></script>就会提示找不到元素，因为元素还没有加载出来呢，它还不认识呢，<h1></h1>在后面。

注意：Pycharm社区版不支持右键运行html文件。

id="title"

onmouseover

想对这个元素进行鼠标操作，鼠标划上来就变成红色。

但是没有做鼠标离开的处理，所以变成红色就没有然后了。一次性改变没有恢复它。

温馨提示，不知道对应事件的名字就百度！！！

定义了另外一个，当鼠标离开后，字体颜色就变成了绿色。

    a=document.getElementById("title");
    a.onmouseover=function(){
    a.style.color="red";
};
a.onmouseout=function(){
    a.style.color="green";
};

在代码中定义好了什么样的事件，触发什么样的效果，鼠标悬浮触发它的颜色变化，鼠标再次离开，再次触发它的颜色变化。

所以在百度页面一点击就弹出一个输入框，这就是点击事件引发的。点击事件引发了弹出框的出现，鼠标悬浮事件，引发了下拉列表的出现，鼠标离开，下拉列表就收起来了。

3）把用户输入的数据存入数据库中，方法也可以这么做嘛？

如果想将你的用户数据写入数据库，提交之后，js通过DOM手段获取你提交的数据，再调用它自己与后台交互的模块去提交，让后台接口发起请求。

调用的接口就是注册的接口，然后将数据提交给后台服务，后台服务在收到后，由后台服务自己去判断这个账号是否有过，有没有什么问题，没有问题就把它存储到数据库。在这些操作完成后，返回结果给到我们的前端页面。

js在收到它的返回结果后，就知道这个注册有没有成功，如果成功了，自然给页面做一些跳转并给你适当的提示“恭喜你，注册成功！！！”。

数据库的操作，js是不直接参与的。js用接口和后端服务进行交互的。

前端开发和后端开发经常在开发应用时候做一件事，就是前后端联调。

为什么联调？主要测试下这个接口能不能通，你的请求能否得到正确的响应，页面能否做到对应的响应。

这个问题和DOM事件关系不大。

测试工程师要多了解系统的结构。

要明白你做的接口测试是在哪一层？有什么关系？

在前台提交一个数据，它在整个系统中，数据流向是怎么走的？

接口-->后台--->数据库，然后再回到你的前端。

MVC模式：分层设计。

了解基本用法，知道怎么找元素，怎么做事件的触发。

用的是最原始的js语言，前端框架jquery，无论是什么样的东西来做元素定位啊，中心思想，不是元素的属性就是元素的特征。

当然还有些结合自己的祖先，自己的父辈人际关系中的一些特点，从人际网中找到你也是可以的。

自动化的元素定位xpath，是一样的套路，只是表现方式不一样而已。

4）如果在控制台输入`$`。

表示支持jquery。

当然它不支持，你也可以把它引进来，让它支持jquery，但是套路比较多，不是很复杂。

需要掌握DOM对象的基本用法，以后可能用得上。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-02-29，如有侵权请联系 cloudcommunity@tencent.com 删除

java

javascript

html

python

本文分享自清菡软件测试微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！