第1步:打开Chrome浏览器,访问某网站。在网页任意位置鼠标右键,点击”检查“。
第2步:进入开发者工具界面,按Ctrl+F,调出查找界面。
第3步:在搜索框输入选择器定位网页元素。
那什么是选择器呢?这里的选择器主要是指CSS选择器。
CSS:Cascading Style Sheets,层叠样式表。知道是这个意思就行,没什么luan用
选择器:用来选择网页元素的工具。
选择器长什么样?
打开该链接,查看各个选择器的语法:www.runoob.com/cssref/css-…
我今天教大家用3个选择器。
元素选择器(标签选择器)
用法:在搜索框里输入元素名(或者叫标签名),如div、span、h2、img等。例如,我输入h2,寻找网页里的<h2>元素。
因为是模糊查找的关系,你会定位到许多不是<h2>的元素,如下图。因此,我们一般会使用多个选择器去定位元素,而不是仅用一个元素选择器。
类选择器
上一节讲属性的时候, class属性也可以叫类。类选择器的用法:.类名。例如,输入.a-cardui-header,寻找带有”class=a-cardui-header“属性的元素,如下图所示
在某些场景,用类选择器定位元素比元素选择器会更精准。大家可以自己练习用类选择器,看看自己想定位的按钮、图片能否用类选择器定位到。
id选择器
如果你看到类似 id="xxx"的代码,那么此元素就可以用id选择器来定位。id选择器的用法:#id值。如下图,如果我要定位该元素,即输入#twotabsearchtextbox。
从名字得知,id类似我们的身份证号码,每个人的身份证号码都是唯一的。而在网页的HTML代码里也一样,id的属性值是唯一的,每一个id的值都不一样。大家可以在网页的HTML代码里找找,看看是否能找到两个一样的id值。
由于id属性的特殊性,在大多数场景下,我们用ID选择器可以直接定位到元素。但是,由于不是每个元素的HTML代码都有id属性,所以,且用且珍惜啊。
最后总结今天学习的3个选择器:
- 元素选择器
一般用来定位大概的范围,需要搭配其他选择器来使用。
用法:元素名,如h2、p、div、img
- 类选择器
在网页代码里,有很多类的值是一样的。
用法:.类值,如.nav-right、.button-nav、.row-a-type
- id选择器
id属性的值是唯一的,用id选择器可以定位到许多
用法:#id值,如#twotabsearchtextbox、#nav-search
注意、注意、注意
除了元素选择器是填元素名,其他的选择器如类选择器、id选择器都需要依据实际的网页代码去使用,而不是我这里填#twotabsearchtextbox,你也直接复制粘贴去用,然后在网页里半天都定位不到一个元素。要实际去看你的网页代码啊,千万要利用好老师说的这个资料啊:www.runoob.com/cssref/css-…
课后作业
用【模板商店】里的【Amazon搜索加购】创建一个RPA流程。你可以试着运行一遍,然后看看为啥快捷模板里是否有这节课学习的3个选择器、并且尝试利用开发者工具,输入模板里面用的选择器,看看是否能定位到相关页面的元素。
例如,其中一个【点击元素】的步骤,需要点击”搜索“按钮,模板里的”搜索“按钮用的是这个选择器:.nav-search-submit .nav-input。那是否还有其他选择器可以定位到这个搜索按钮呢?大家可以自己用现在所学的3个选择器试一试。