经博客园网查询isindex不是html5中新增的标签,HTML5为了SEO将div语义化了,新增加结构标签如下:section元素、article元素、aside元素等,新增标签中没有isindex。
HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
URL: https://account.cnblogs.com/signin编写思路(入门级别)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.pngHTML5一个控件的写法一般是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%2Fwww.cnblogs.com%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自动化测试的定位工作。一:(理论)语义化标签是什么?语义化标签就是尽量使用有相对应的结构的含义的Html的标签,以Table为例:
<table>
<tr>
<td>消费项目</td>
<td>消费金额</td>
</tr>
<tr>
<td>吃饭</td>
<td>20元</td>
</tr>
</table>
你看出了上面的Table有什么毛病吗?嘿嘿,那你看这个语义化的标签
<table>
<caption>花费记账</caption>
<thead>
<tr>
<th>消费项目</th>
<th>消费金额</th>
</tr>
</thead>
<tbody>
<td>吃饭</td>
<td>20元</td>
</tbody>
</table>
这两块代码的标签不一样,第二个表格的这些标签代码,无疑更符合Web标准.
<caption>:表格的标题
<thead>:一表格的表头
<th>:表的某一列的列头。
再说我们习以为常的
<title>博客园简介</title><body>博客园是一个软件开发的技术乐园,它于2004年创办,这里...</body>
你看,为什么我们看一篇文章,一下就知道标题在哪呢?在浏览器的顶端。那为什么搜索引擎能抓取呢?就是它知道这个语义化标签<title>里的就是文章标题,要是我们不遵守这个,而是:
<span>博客园简介</span><span>博客园是一个软件开发的技术乐园,它于2004年创办,这里...<span>
那搜索引擎怎么就知道谁是标题,谁是内容了呢?它又靠什么去抓取标题呢?其实语义化不仅可以是标签语义化,还可以延伸成结构语义化.举例:
#left{float:leftmargging-left:50px}
#right{float:rightmargin-top:100px}
<div id="left">content..</div>
<div id="right">content..</div>
这个例子里对id的命名稍微有点夸张,但是类似的情况却使有的,当我们想把#left这个div放到页面的右边,和#right调换位置时,难道你可以把样式改成这样?
#left{float:rightmargin-left:50px}
#right{float:leftmargin-top:100px}
那样看着多别扭,多误导人这两个div的布局啊.
应该写成这样.
<div id="main">content..</div>
<div id="sidebar">content..</div>
那样既一目了然这几个div里是什么内容也方便对其中的样式进行修改.
二:(理论)语义化标签怎么样?
1.结构更好,更利于搜索引擎的抓取(SEO的优化)和开发人员的维护(可维护性更高,因为结构清晰,so易于阅读)。
2.更有利于特殊终端的阅读(手机,个人助理等)。
三:(行动)语义化标签怎么办?
尽量用有结构含义的,少用无语义的,如<span>,<div>无意义,看不出是什么东西,可是<address>一看就知道这里面的是地址,em标签一看就知道这个是强调的内容,区分于不同内容。
那么,怎么判断你的页面是否符合Web标准之一:语义化标签呢?你可以把你的页面暂时去掉样式后看可读性怎么样,如果这个时候感觉你的页面很乱,那就说明的的页面的语义化标签不怎么样,而如果你的页面去掉样式了感觉依然不是杂乱无章的,那么,就说明你的页面结构清晰,语义化标签比较可以了。