前端基础+UI自动化测试元素定位方式

前言：做测试时也需要对前端的基础知识有所了解，了解下SAAS服务中前端是如何实现，在页面上呈现的元素以及操作的事件，有助于去做一个测试平台写个页面，或者做UI自动化测试，去更好地定位元素。前端三要素是html、css、js，本文主要从这三要素开始学起。 

一、前端基础

先来了解下html的标签：

下面写一个静态的网页，注意标签都是成对出现的，h标签表示标题，div标签：没有具体的含义，用来划分页面的区域，独占一行，span标签没有换行的效果，span标签和div标签的具体使用效果可参考下面的这篇博客：HTML＜DIV＞常用标签_div标签_朵朵宝的博客-CSDN博客

    
    


标题展示 自带换行效果
One
Two
Three
Four
Five
Six
这是div标签1 hello
这是div标签2 world


hello
span标签没有换行效果world

可以看到csdn社区分成很多区块，用到了大量的div标签

  

 用到span标签的例子：

 此处代码涉及到常用的以下标签的使用：

a标签、input标签、label标签、select标签、ul标签、ol标签、table标签

注意input标签里如果是单选框，则name的值要相等，否则可以多选。

涉及到链接、以及鼠标悬浮上去展示文字，常用的输入选择框，点击提交后页面的跳转，表格，网页的内嵌。

    
    

这是a标签 超链接








这是图片





    

    

    

    

    
    

    

    
    test1
    test2
        test3
    

    

    learn1
    learn2
    

    

    
        world1
        
        world2
        
        world3
        
    
    




    

        

            
learning1
            
learning2
            
learning3
        
        

            
admin
            
user1
            
user2
        
        

            

            

                
test1
                
test2
            
            
            

            
java
test1
            
python
tes2
            
        
    

 来看看csdn社区怎么写的，导航栏，用到了a标签、ul、li标签

 这样随便打开一个网站，可以打开控制台查看到用到了HTML的哪些标签，大致是怎么做的。

上面我们看到实际的网站标签里添加了一些key和value，使得样式很丰富，接下来我们来了解下css的样式。

如下图，先在样式里选中需要修改的范围，再去调整这个范围内的样式。可以看到代码的标签里加了一些样式的设置。

 js语法用于处理事件的响应，比如鼠标悬浮效果，点击事件等。

示例：找到元素并进行操作，这里找到登录的按钮，并进行点击操作。

前面我们大致了解了前端是怎么写页面，怎么去用开发者工具在网页端进行调试，但对QA，这些不是我们关注的重点，如果做UI自动化测试，最重要的是怎么去定位元素，那么如何去定位元素？可以根据元素名称、元素属性、元素的文本内容、元素的层级关系进行定位，当然用到最多的是xpath、css选择器。