web自动化前置准备之html

2020-12-13 21:15:07 36 收藏 1
分类专栏： web自动化测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44885027/article/details/111133304
版权

什么是html？

html翻译过来是超文本标记语言。那么这里就需要解释下什么叫超文本，什么叫标记语言。
所谓超文本就是超越了普通文本的文本，它是文字、视频、图片、音频等的混合体，最关键的是含有超链接，能够从一个文本跳转至另一个文本。而正因为是超文本，它不像TCPIP协议中底层的复杂、普通人无法看懂的二进制包形式，它是完整的、有意义（正常人能看懂）的数据。
第二个要解释的是标记语言。标记语言是用来存储信息，但不具有任何行为，而编程语言是有行为的，也就是可以调用各种函数、方法等对信息进行各种灵活的处理。它跟编程语言的相同点是，都可以描述对象拥有哪些属性。
总结起来，html就是以标签的形式存储文字、视频、图片、音频等信息的语言。

html有什么作用？

html起到打标签的作用，而打标签的目的是为了方便查找。有点类似于python的字典及json，我们可以通过里面的key找到对应的信息。
举个例子，一个输入框，我们给它打个input标签，而当我们找到了类型为input的标签，我们就知道他代表的是文本框。

做UI自动化为什么要学html？

ui自动化需要定位元素，然后对元素进行操作，而html可以帮助我们认识网页有哪些元素以及这些元素有哪些特性、属性，方便我们更好地进行元素定位。

html构成

标签（元素）
子标签
属性
texe文本

如下面所示：

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

table就是一个标签（元素），它表示的是表格；就是它的子元素，而、是的子元素；border是table元素的属性，表示边框宽度；Month、Savings这些是text文本。

基础标签及属性

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<form action="http://httpbin.org/post" method="post">
用户名<input name="username" placeholder="请输入用户名">
密码<input type="password" name="pwd" placeholder="请输入密码">
<div>
    你最喜欢的书籍
    <input type="checkbox" name="favor_book" value="harrypotter">《哈利波特》
    <input type="checkbox" name="favor_book" value="dmbj">《盗墓笔记》
    <input type="checkbox" name="favor_book" value="santi">《三体》
</div>
<div>
    你所在的城市
    <input type="radio" name="city" value="guangdong">广东
    <input type="radio" name="city" value="guangxi">广西
    <input type="radio" name="city" value="beijing">北京
    <input type="radio" name="city" value="shanghai">上海
</div>
请上传一张你的照片<input type="file" name="photo">
<br>
请选择你投票的项目
    <select name="project">
    <option value="basketball">篮球</option>
    <option value="football">足球</option>
    <option value="badmintain">羽毛球</option>
    <option value="golf">高尔夫球</option>
</select>
<br>
<input type="submit">
</form>
    <!--注释-->
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h6>3级标题</h6>

    <p>床前明月光， <br>
        疑是地上霜。 <br>
        举头望明月， <br>
        低头思故乡。 <br>
    </p>

    <p>床前明月光， </p>
    <p>疑是地上霜。</p>
    <p>举头望明月，</p>
    <p>低头思故乡。</p>

<!--    水平线-->
    <hr>

    <!--    div 非常常见，因为经常使用他去进行页面排版和优化-->
    <div>床前明月光，</div>
    <div>疑是地上霜。</div>
    <div>举头望明月，</div>
    <div>低头思故乡。</div>

<!--    有序列表-->
    <ol>
        <li>tom</li>
        <li>jack</li>
        <li>john</li>
    </ol>

    <ul>
        <li>tom</li>
        <li>jack</li>
        <li>john</li>
    </ul>


<!--    表格-->
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>月薪</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>29</td>
            <td>男</td>
            <td>20k</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>19</td>
            <td>女</td>
            <td>50k</td>
        </tr>
        <tr></tr>
    </table>

    <!--超链接：经常会进行元素定位-->
    <div>
        <a href="http://www.baidu.com">进入百度</a>
    </div>

    <!--    图片地址可以是本地的地址，也可以网页地址-->
    <a href="http://www.baidu.com">
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1197759743,594720098&fm=26&gp=0.jpg"
            width="500px" height="342px"
        >
    </a>
</body>
</html>

input标签

input标签最常用的属性是name和value，还有id

name属性

如果没有name属性，如下面这段代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://httpbin.org/post" method="post">
<div>
    你所在的城市
    <input type="radio" value="guangdong">广东
    <input type="radio" value="guangxi">广西
    <input type="radio" value="beijing">北京
    <input type="radio" value="shanghai">上海
</div>
    <input type="submit">
</form>
</body>
</html>

在选择时，并不知道这个选项是属于哪个问题的，所以明明是单选框却能多选，因为html会把每个选项的问题都分别独立开来了：
在这里插入图片描述
而当提交表单后，后台也无法收到数据：
在这里插入图片描述
加上name属性后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://httpbin.org/post" method="post">
<div>
    你所在的城市
    <input type="radio" name="city" value="guangdong">广东
    <input type="radio" name="city" value="guangxi">广西
    <input type="radio" name="city" value="beijing">北京
    <input type="radio" name="city" value="shanghai">上海
</div>
    <input type="submit">
</form>
</body>
</html>

html才能区分每一个选项分别属于哪一个问题：
在这里插入图片描述
提交的时候，后台才能接收到数据。
在这里插入图片描述
所以name属性不仅决定页面上单选框、复选框等选项元素属于哪个元素下的选项，而且决定了这些选项传到后台时是属于哪个列表下面的。

value属性

如果没有value属性，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://httpbin.org/post" method="post">
<div>
    你最喜欢的书籍
    <input type="checkbox" name="favor_book">《哈利波特》
    <input type="checkbox" name="favor_book">《盗墓笔记》
    <input type="checkbox" name="favor_book">《三体》
</div>
    <input type="submit">
</form>
</body>
</html>
```在这里插入图片描述

html展示的效果如下，实际上并无变化：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201213204321303.png)

但在提交之后就能看出来了：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201213204351264.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg4NTAyNw==,size_16,color_FFFFFF,t_70)
而如果我们加上value属性：
```html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://httpbin.org/post" method="post">
<div>
    你最喜欢的书籍
    <input type="checkbox" name="favor_book" value="harrypotter">《哈利波特》
    <input type="checkbox" name="favor_book" value="dmbj">《盗墓笔记》
    <input type="checkbox" name="favor_book" value="santi">《三体》
</div>
    <input type="submit">
</form>
</body>
</html>

传到后台时就能看出这个选项具体的值是什么，后端程序员也能方便地拿着这个value去做相应的处理。
在这里插入图片描述

readonly和disable属性

这两个属性并不属于元素定位的依据，但会阻碍我们进行元素定位，它们都不能允许用户自由地输入。因此如果我们想在输入框输入字符而碰巧有这两个属性中的其中一个，我们需要通过js去掉该属性后才能正常输入字符。
readonly表示输入框只读不可写，一般会和value属性连用，可以被focus，用户会看到输入框中value的值但不能进行修改；提交表单时会把value的值传到后台去：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://httpbin.org/post" method="post">
用户名<input name="username" value="jack" readonly="true">
    <input type="submit">
</form>
</body>
</html>

在页面上可看到value的值，但不能进行修改：
在这里插入图片描述
点击提交后，会把value的值传到后台：
在这里插入图片描述
disabled属性会令输入框置灰不能输入，不可focus；提交表单时不会提交该元素的值过去：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://httpbin.org/post" method="post">
用户名<input name="username" disabled="true">
    <input type="submit">
</form>
</body>
</html>

页面上可看到输入框置灰不可输入，连光标都没有：
在这里插入图片描述
提交表单后，不会提交该元素的数据过去：
在这里插入图片描述

a标签

href属性

href属性需要和a标签绑定起来用，它表示链接的目的地址，这是我们以后进行元素定位时一个比较重要的定位方法。
另外，img标签也可加入到href标签里并进行超链接。

iframe标签

这个标签里面会嵌套另外的html的代码，这在以后进行元素定位时需要格外注意。

div标签

div标签也叫块元素，它可以把一连串的标签（也包括div）集合起来，方便进行排版及使用样式。它下面的元素都是它的子元素，因此在元素定位时可通过父子关系等层次进行定位。

id属性

id属性是一个非常重要的属性，任何元素都可使用该属性，这个id在当前页面是唯一值。多个页面可存在重复的id，但同一个页面上是不可能有重复的id的，因此进行元素定位的时候，如果通过属性如name等能找出好几个元素时，我们可以通过id属性来定位，肯定能找到当前页面里唯一的元素。

已标记关键词 清除标记
web自动化前置准备之selenium原理
weixin_44885027的博客
01-16 44
原理初探 我们使用python语言来写selenium代码，目的是为了让网页按照我们的预期来自动化实现一些效果，比如：自动点击、自动输入字符、自动提交表单等。而我们操作网页的方式跟我们实际上网操作的那样，用鼠标定位到需要操作的地方，然后通过鼠标或键盘的一些动作来执行操作；但又有点不太一样，不一样的地方在于，我们定位到需要操作的地方是通过元素，也就是html中对应的标签去定位；而执行操作的方式，就是通过修改dom对象的属性来实现。所以，我们通过selenium来使网页自动化进行操作，实际上操作的是网页的htm
表情包
插入表情
还能输入1000个字符
相关推荐
Web自动化之Unittest框架
limy_liu的博客
12-20 411
文章目录UnitTest 框架1. TestCase(测试用例)2. TestSuite(测试套件)3.TextTestRunner(测试用例执行)4. TestLoader(组装测试用例)5. Fixture6. 断言定位不到元素怎么处理？ 今日目标 能够使用UnitTest定义测试用例并运行 记住TestSuite作用及使用方式 记住TextTestRunner作用及使用方式 了解TestL...
Python3 接口自动化测试项目实战一（WEB项目）
weixin_33946605的博客
07-01 1850
1.1 接口测试项目搭建 1.1.1 教育局招生管理系统部署 教育局招生管理系统是基于java+mysql,下面介绍它的部署过程。 1.从我的网盘下载部署文件。 2.安装jdk以及配置环境变量。 点击文件进行安装。 下一步下一步直接安装。 本人的安装路径是C:\Program Files\Java\jdk1.7.0_17。 安装完成后需要设置环境变量从而使编译器正常使...
Web自动化元素定位之高阶用法
xuanyuanouyangdan的博客
09-01 137
版本迭代周期越来越短？需求越来越多？测试工作量越来越大？怎么保证质量？怎么保证上线周期？ 随着互联网的快速发展，越来越多的测试人员遇到上述所说的问题。如何实现既提高测试效率和覆盖率，又节约测试成本，是每一个企业追求的目标。为了解决上述的问题，越来越多的公司开始加入自动化测试。现在小编和大家分享下web自动化中必须知道的一些高阶用法。 1.常用方法 1）通过class属性定位 driver.findElement(By.className("spread")).sendKeys("你好"); .
web自动化测试总结
微信
11-03 565
1.测试用例（操作步骤，熟读需求文档，web项目先用手工研究，前置条件，预期结果） 接口自动化测试中数据功能最适合作为数据驱动，数据放在excel中需要操作excel 为什么web自动化测试中不能完全使用数据驱动？ web页面中步骤不一样，而接口完全不关心操作步骤理清思路 2.自动化测试测试典型： 逻辑单一 业务稳定 非多端交互，多端交互涉及到多个子系统这种不适合做web自动化测试 ...
web自动化测试-pytest-前置后置-fixtrue
zhenzhen9059的专栏
01-07 356
关键字：usefixtures、fixture、yield 前置后置四个级别：session\module\class\function pytest用例执行顺序：1、文件名称的顺序，2、再就是测试用例代码顺序 功能讲解： fixtrue功能--共享前置后置 1、共享的方式：conftest.py文件（可以有多个conftest.py文件）。共享的范围：他爸爸下所有的测试用例 2、实现...
Web自动化常用方法封装（不定时更新）
dieleiyan9113的博客
06-28 284
/** * JScript实现鼠标悬停 */public void mouseHoverJScript(By by,WebElement HoverElement) { // TODO Auto-generated method stub try { if (isElementPresent(by)) { //isElementPresent() ：自己封装的判断元...
Python + Selenium 为什么要做web自动化 和 web 自动化基础
05-06 318
web 自动化基础 js操作页面 获取页面标签 获取标签的方式 通常，通过JS操作HTML元素，可以使用内置对象document的方法来找到该标签。 通过id找到HTML元素（常用） document.getElementById() 通过标签名找到HTML元素 获取出来的是列表 getElementByTagName() 通过类名找到HTML元素（通过类名查找HTML元素在IE 5...
自动化用例设计原则+web自动化框架
seanyang_的博客
06-27 140
自动化用例设计原则 web自动化框架 PO模式就是页面对象和测试用例的分离。 PageObjects放页面对象，封装元素定位和元素操作（也可以单独把元素定位放到PageLocators层） basepage：封装最基本的元素操作，执行日志logging，异常处理，失败截图， TestDatas放测试数据 common_datas放公共数据 比如网址，登录账号，密码 其他数据分模块，分文件放 ModeA，ModeB 一个测试用例文件对应一个测试数据文件 TestCases放测试用例 分ModeA,Mode
web自动化流程总结
anywen5590的博客
07-29 151
一. 了解需求，什么是系统的核心业务 二. 编写测试用例：用例名称，前置条件，测试数据，测试步骤，期望结果 三. 自动化代码的初步构建：所有的元素定位、元素操作、测试用例都写在一个模块中 问题： 1. 层次混乱，一旦页面元素调整，需要挨个寻找对应的测试模块，测试类，测试用例函数，不便于后期维护 2. 不便于代码的复用 四. 引入PO模式，进行分层设计：实现测试用例和页面对象分离...
web自动化前置准备之selenium环境准备
weixin_44885027的博客
12-04 25
python中selenium库安装 通过pip install selenium即可安装selenium库 浏览器驱动 使用谷歌浏览器，就需下载chromeDriver 使用火狐浏览器，就需下载firefoxDriver 由于chromeDriver的官方下载需要科学上网访问国外的网下，所以这边提供一个国内的镜像网站： https://npm.taobao.org/mirrors/chromedriver 那这么多版本，应该下哪个呢？规则是，最好与浏览器版本对应。 如下，我这边浏览器版本是这个： 所
Web自动化测试中的接口测试
violet82的博客
05-25 4524
Web自动化测试中的接口测试 1、背景 1.1 Web程序中的接口 1.1.1 典型的Web设计架构 web是实现了基于网络通信的浏览器客户端与远程服务器进行交互的应用，通常包括两部分：web服务器和web客户端。web客户端的应用有html，JavaScript，ajax，flash等；服务器端的应用非常丰富，比如java的servlet，jsp，ssh框架，.net的aspx，还包括
Web项目的 UI 自动化测试方案
小+的博客
08-08 1577
Web项目的 UI 自动化测试方案 有用的链接： 自动化Selenium的Python文档 http://www.jianshu.com/p/4ce5ecef5f6c 自动化Selenium的Java文档 http://www.jianshu.com/p/00616647ddae 自动化Selenium的源代码 https://coding.net/u/lintyleo/p/
web自动化pytest框架--mark
qq_38889350的博客
08-18 113
一、 pytest是基于unittest之上的单元测试框架 自动发现测试模块和测试方法 断言使用assert+表达式即可 可以设置会话级、模块级、类级、函数级的fixture，数据准备+清理工作 有丰富的插件库 安装pytest命令 pip install pytest 安装html报告的插件 pip install pytest-html pytest插件地址 pytest插件地址 二、 pytest收集测试用例规则 默认从当前目录中搜集测试用例，即在那个目录下运行pytest命令，则从那个目录当中
web测试前置步骤代理工具
上帝De助手
02-19 2855
做GUI自动化测试失败的原因常见的大致有2种： 1、测试元素被修改了，导致被测试元素无法识别；这个是硬伤暂时还没有什么要的方法，看到百度qa有一篇文章说的是关于动态获取客户端元素信息的文章，可能不是适应所有的场景，但是理念还是可以借鉴一下，日后可能会运用到web上来。原文章在这http://qa.baidu.com/blog/?p=206 2、测试过程较复杂导致过程中由于网络等不定因素影响测试
web UI自动化元素定位不到的问题汇总
幸福的丝丝的博客
12-16 314
在编写ui自动化时，定位元素大概是最烦的问题。经常发生定位不到元素的情况。 总结了以下几种情况及解决办法： 1. 表单嵌套原因 找到原因 顺着定位元素往上找，查看是否有<iframe>标签，找到说明要定位此元素，需先切换到此表单，在定位元素。 解决方法 需使用switch_to_frame("name值")switch_to_frame("id值") driver = webdriver.Chrome() driver.switch_to_frame("n..
selenium+chrome+python+jenkins实现ui自动化（学会webui自动化运用到项目测试）
hdandan2015的博客
07-05 791
# -*- coding:utf-8 -*- from selenium import webdriver from selenium.webdriver.support.ui import Select import time def jenk_autobuild(): wd = webdriver.Chrome() wd.get("http://jenkins.goodibe...
Selenium自动化测试入门（基于Python）
baby_hua的专栏
06-04 6万+
该系列文章系个人读书笔记及总结性内容，任何组织和个人不得转载进行商业活动！ 本人小白 最近在尝试学习Python 开篇记录 只为交流 相互学习O(∩_∩)O~~ Selenium，化学元素硒的英文示意，对于软件测试来书，则是一个主要用于Web应用程序自动化测试的工具集合； 之前有这个计划来学习和使用自动化测试到项目中去，以满足公司需求，所以闲时就买了本书，内容较简洁，实践学习中； 前言： ...
小白RF自动化实战
pansaky的博客
05-21 1万+
RF自动化脚本编写简介（上传图片太麻烦 文档原件不能附件么？） 简介： RF是RobotFrameWork的简称，一个以python为底层语言编写的自动化测试框架，因其自带很多已经编好的类库，能够很好地适应不同python基础的人来学习及使用，甚至不懂python都可以完成脚本编写 详细介绍参考： CSDN博客园：https://www.cnblogs.com/tinghai8/p...
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页