元素定位之CSS定位

要点:

1、为什么要进行元素定位？

在进行自动化时，所运行的脚本动作，是对页面对象的一种操作行为，每一个页面都有一个document，所以需要使用元素定位，使用元素定位的写法如使用原生态；document.getElementById('#ID');

2、进行元素定位的原则是什么？

元素定位的方式有很多，但宗旨只有1个，那就是能快速便捷的查找到唯一的元素，以及后期的方便维护；

主题：

1、CSS定位的延伸，本身就是CSS <style>所来，当你接触前端<style> CSS的编写方式，你就能发现其中的定位奥妙；

2、在HTML中的标签（下图）主要分为【块级标签】、【内联标签】，两者的区别在于一个会产生换行，一个不会产生换行.

比如：div是一个块级标签,会产生换行,span是一个内联标签,不产生换行；

3、CSS可以通过元素的id、class、标签（input）这三个常规属性直接定位到，而这三种编写方式，在HTML中编写style的时候，可以进行标识如：

#su

.class

input

比如：百度的登录页面

id === #su

class === .bg s_btn

标签 === input[type="submit"] 或者 input[value="百度一下"]

localxpath = "#su"   ||  localxpath = ".bg s_btn"

localxpath = "input[type="submit"]"   ||  localxpath = "input[value="百度一下"]"

driver.find_element_by_css_selector(localxpath)

4、在平时的工作中，若是仅依靠self（当前）的位置，来写脚本是不够的，还需要通过其他的定位方式：

比如：它的后代、子类、同级、父类来进行定位？

在进行定位前，补充点小知识，在HTML中标签的层级关系：

子类定位“>”：通过先定位父类（self）,再定位self下的子类

在#mHolder下有个子类#mCon，那么就可以这样写 #mHolder>#mCon （当然你也可以直接用#mCon，但必须保证是定位的原则）

同级定位“+”：通过先定位父类（self）,再定位self 同级的类

在多个列表同级的情况下，同样的道理，需要使用“+”进行同级定位；

后代定位 “ ”：通过先定位父类（self）,再定位self 后代的类

span [id="su"]

父类定位？目前CSS3样式暂时不支持，未研究，如大家有兴趣，可以在CSS4中进行研究。

如有疑问，大家可以加我QQ：403225435 进行互相学习

元素定位之CSS定位相关推荐

xpath定位和css定位对比
xpath定位和css定位对比 xpath常见的定位方法 xpath定位和css定位对比实际项目中使用较多的是xpath定位和css定位.XPath是XML文档中查找结点的语法,换句话就是通过元素的 ...
UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）...
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
CSS高级选择器+块级元素，行内元素的特点+CSS定位+logo的做法
CSS高级选择器 *是通配符选择器(样式的重置) *{ margin: 0; padding: 0; } 元素的样式的重置,紧贴左上角子选择器:父级>子级后代选择器: 祖先子级作用: 1 ...
css中img如何定位,使用CSS定位img
下面是我的HTML代码的简化.我想将div中的img C放在div A中而不考虑元素B. B有一个宽度为70px的背景图像,C的宽度为300px. div A的宽度是屏幕的50%.使用CSS定位img ...
css定位页面元素,页面元素定位-CSS元素基本定位
基本定位 """属性定位一 """ # #通过id # driver.find_element_by_css_selector(" ...
CSS 定位 (Positioning)
CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...
CSS学习总结3：CSS定位
CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...
selenium之css定位详解
css定位 css概述: 1.css(Cascading Style Sheets)是一种语言,它用来描述HTML和XML的元素显示样式. 2.css语言中有css选择器,在selenium中也可以使 ...

元素定位之CSS定位

元素定位之CSS定位相关推荐

最新文章

热门文章