大家好，欢迎来到IT知识分享网。
selenium的定位元素方式是基于html语言构建的，所以学习web自动化是很有必要去学习html
HTML
HTML 全名 HyperText Markup Language(超文本标记语言),是一种用于创建网页的标准标记语言。常常和css js一起使用来构建漂亮的页面。
HTML构成
HTML的元素的以 标签、属性、text、内嵌标签 构成
下面以百度为例
在我们看到的页面上展示的内容都在内嵌标签有（head 头部信息、body 体信息）
在web自动化测试中重要的是body里内嵌标签中，因为展示的页面操作都是在body 中完成的
html脑图结构
常见HTML标签
p : 段落 文本，代表进行换行
h1-h6:标题从H1（最大） 到H6（最小） ,标题大小
div：对html页面进行布局，填充数据，容器，也有换行作用
span：对html页面进行布局，填充数据，容器，在一行独立设置样式
ul: 将 <ul> 标签与 <li> 标签一起使用，创建无序列表 组合：<ul><li></li></ul>
web自动化测试的重点
a：超链接跳转到页面，需要配合 href，一般都是<a href=’www.baidu.com’> </a>使用
img： 图片的超链接，组合<img src=”#图片链接#”>
iframe：
在html页面里面嵌套html页面 ，src 页面链接 width 宽度 height 长度
组合 <iframe src=”http://www.toutiao.com” width=”400″ height=”500″></iframe>
select标签：组合<form><selevct></select> </form>
select的作用下拉选择框
form标签：
form的作用form表单是前端和后端进行用户数据交互的一种方式，前端编写的数据可以通过form表单传递给后端
<form action=”http://httpbin.org/post” method=”post”> #数据内容#<from>
action:接口地址，根据需求更改请求的接口地址 method：请求方法
input： input:通常有name和value属性
格式：<input type=”” name=”” value=””>
代表输入，基本web自动化测试都必须要测的内容
<input name> ：默认属性输入框
组合：name 属性 <input name=”123″ value=“number”>
input name属性的作用：
当我们选择（输入）的数据传递给后端时会进行接收
input value值的作用：
后端接收的数据如果是json格式的话就会以接收{“name（123）”=”value（number）”}
input type 的作用：
设定输入格式，不设置格式，默认是text 文本输入
<input name=’password’ type=’password’>：
type=’password’：代表输入内容带*号，用于设置密码框
type=”text”：默认是text 文本输入
type=”checkbox”：代表多选
type=”radio”：代表单选框
type=”file”：选择文件
type=”submit” 提交按钮（配合form表单使用，将form内的数据提交到后端）
input placeholder的作用：输入框提示
input disable 的作用：
禁用输入框，输入框置灰，如果想输入在F12找到该元素并且去除
input readonly 的作用：只读输入框
样式代码与演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web自动化</title>
</head>
<form action="http://httpbin.org/post" method="post">
<div>div也是个容器，对html页面进行布局
<h4>标题h4<span>对html页面进行布局，这是个容器</span></h4>
<a href="http://www.toutiao.com">点击我，跳转头条<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANgAAAA2CAMAAACSsKctAAAANlBMVEVHcEzuQEDwRETyRUX3TEzvQkLuQEDuQUHuQUHvQEDuQUHuQEDvQkLuQEDuQUHwQUHxQkLtQEDKaksGAAAAEXRSTlMAxiweDlyo49Nri/F5+bhLOapXaIgAAATMSURBVGje7ZrpsqQqDIAb2VEE3/9lx263AAmu3XVv1cn8mFOtIh+JIQuvFyFSzdK8/jsSrbg7BG+HSdjPZi3iJPTchR7a7iYam7mGNvwKTM5vlOQd6n3Z37IhN6zSNhW1TsJqMt/TwQk6G3gxmt0DC5/LfpxS9U38wOJ9RJN38uG4KGBR0wRNxrcHtn4dlPjpv4pCYzqEEffBfAG2XDC9sxyCUbbfH3wVDdbkS2P4FzQGRR4As8NdsEYXy01Y4xMa28C6KljT3gUDXNtYOn5fY3UwNtwEA9+XA397+zONxR03fQ1MerjG0Is4QYK5riLzEMDdC4+CuQoY99sKoW9R20z5zsKwN0gAczDFUohdPzSKRpw4j9Yp0+Jg2GgCrHBf3sAVuIytC8u4RjIwYmGOh8AMvTutfLtgydR8ZjzCgeV32M7eFlyZj2T8GY3lfHwNmChTGmcP5tECNNFBf4m4AqEGhGt8rYEj2i+AwUhwFCocgOs+ok383MFfMecdoGYUHFwkW76Jz5kiHlmQ4TtPY48+iNAnfqgX1a+vtNMueXyjvqox5WTkJFgthq3t0i2ydhY+4MsbYhKMtEu6dxFseqw1Gd+s2raasylPRgCluoJJgnnU3SYaHbS8Y4rJBv3h42AFdN1gGzwWZtgcMHD3Xk5BfYOz67qlsWKDnq3G1DP74DTCZVwQVbA1X57WpWWqk40od4svgInKBrtUPJSpfGPGyYYC6zma/OjJm0RzBcwcBONltAzKIVYxfyBObJlbFAHAtKSyOla4x+c1FiuhAxvOiDcpWBKo4GDbp3sLDA2CJR07EGCaUZYJwUys5OGgBhdYCRYFIWHKzrjU/AXCUdQ8C0e0+Y295XwbSsFhiS4qLUC9hePsZ2QVT4I3NvtgvrfbXQLxkwsYUoWsgI37uX4GbOXj231+J332DPHsXKb+cknCkC2gkZ1iLQE2RtRPgiVJq6mAadVtUKL5CAea69v9qGxxs/KTMLFrVaozYLLi7UcwrVxWY3XYtjfu32q07cOF/Ob7YKpWLm0Emewj+7m43Ud5EGzdAvjJKnz/jTbCg2B2OBIpXgBzZl9a/xFdhBChwYWXYIEYe1GYzn6fHlPIE3rJDhBBTPxIPHYng5bDObEXQqrEK34PTP+B/c/A/kzxD+wUWLB1AXVJd8cUm3Jkv1W/SpmGlsiVOUw32GxPbMVbZtA9WwneGjo+Xun/34s8hEGLqQ+AgUaVff0cDHCpJ7stSZvKTVW//vNPoXVuNV3rVQ7WVR+juRjRfLqtMeuzkWOtG2SxdtrnuehrSc9utyBpwjwB5sp23eqdI33Og5Wm6IZan3eXKz/wcc8UYdl87ZOsrUtDZmzz6xIwoU9nB2CHKw5FLGBWVkQXzrTsu4Fvw1K+JGRWmjoPiTjto6eqysMeF08NFA0chRVu8jNRyzpogXpF6rF9LuSw2MVzHtnphMxRNLgj6IasdpCBNef8B+CKj53zyI5tWOqdATsP0VP7GPoYJd1QDQuuagw2f30xj9URaFF6MM8pMPSxfa7w4FmqxtTb4YgjCOVPReQRanvgKa5TGuvQ7j9+rq5QD6aNMqRa/LffKb9JvQoR6Al9XCQyrCZCIL5eX5Z4+QEscJfekj/2D7KhSDEKe9jHAAAAAElFTkSuQmCC">
</a>
<!-- 下面是html页面中嵌套另一个html页面-->
</div>
<div></div>
<iframe src="http://www.toutiao.com" width="400" height="500"></iframe>
<!-- 段落-->
<p>这是第一行段落</p>
<p>这是第二行段落</p>
<p>菜单标题</p>
<ul>无序列表
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
<!-- 用户输入-->
username:<input name="username" placeholder="输入账号" >
<p></p>
password:<input type="password" name="password" placeholder="输入密码">
<p></p>
禁用框 <input name="text" disabled>
<p></p>
只读框 <input name="text" placeholder="只能复制框内文字" readonly>
<p>choice you like color</p>
<div>
<!-- radio代表的意思是单选-->
<input type="radio" name="like_color" value="红色">red
<input type="radio" name="like_color" value="蓝色">blue
<input type="radio" name="like_color" value="绿色">green
</div>
<p>choice you not like color</p>
<div>
<!-- checkbox代表的意思是多选-->
<input type="checkbox" name="not_like_color">yellow
<input type="radio" name="not_like_color">white
<input type="radio" name="not_like_color">black
<p>选择文件</p>
<input type="file" name="file" >
</div>
<p>choice you not like animal</p>
<select name="dog">
<option>dog</option>
<option>cat</option>
<option>fish</option>
</select>
<p></p>
<input type="submit" width="50" height="20" value="点击提交">
</form>
</html>
作为web自动化测试 ，了解具体是什么意思，以及如何进行元素的定位调用即可，当然全能弄懂那当然是更好的
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/48550.html
