影刀RPA新手教程CSS选择器第一课——另一种找网页元素的方法大家好我是林焱。今天教你用CSS选择器找到网页元素。这是XPath的兄弟有时候比XPath还好用。先搞懂什么是CSS选择器你已经学了XPath现在学CSS选择器。XPath像什么像从公司大门出发上3楼左转第2个房间——这是按路径找人。CSS选择器像什么像找一个穿红衣服、戴眼镜、拿着保温杯的人——这是按特征找人。两种都能找到人只是思路不一样。在有些网页上用CSS选择器比XPath更短、更快。12大核心模块先认识一下学影刀RPA总共就这12个核心模块打开网页点击元素输入文字读取文字等待元素出现网页截图元素捕捉XPathCSS选择器今天学这个获取元素对象循环变量今天重点学第9个CSS选择器。案例主线打开一个网页用CSS选择器找到所有按钮数一数有几个我们今天要做的事情第一步让影刀自动打开百度首页第二步用CSS选择器找到页面上所有的按钮第三步数一数一共有几个按钮把数字打印出来做完你就彻底懂了CSS选择器到底是什么怎么用什么时候用。第一步新建应用打开百度首页打开影刀RPA新建一个应用。拖一个打开网页指令到流程编辑区。右边属性设置区里网址填https://www.baidu.com浏览器类型选Chrome保存网页对象至用默认名称。点击运行测试一下确保百度首页能正常打开。第二步认识CSS选择器长什么样CSS选择器说白了也是一串字符长得像这样#kw是不是比XPath短多了#kw的意思是找到id等于kw的元素。对应XPath的写法是//*[idkw]你看CSS选择器就是更短、更直观。第三步CSS选择器的几种常见写法写法一按id找最常用拼多多店群自动化上架方案#kw意思是找到id等于kw的元素。#号代表id。写法二按class找.s_ipt意思是找到class等于s_ipt的所有元素。.号代表class。写法三按标签名找input意思是找到所有的input标签所有的输入框。写法四按标签名id找input#kw意思是找到一个input标签它的id是kw。写法五按标签名class找input.s_ipt意思是找到所有class包含s_ipt的input标签。第四步用F12找到元素的CSS选择器用Chrome打开百度首页按F12。点击左上角的小箭头元素选择器然后点击搜索框。你会看到这段代码被高亮inputidkwnamewdclasss_ipt...那么它的CSS选择器就是#kw如果你想要class选择器那就是.s_ipt第五步在影刀里用CSS选择器找元素回到影刀流程编辑区。拖一个获取元素对象指令到流程编辑区。右边属性设置区里找到定位方式改成CSS选择器。然后在CSS选择器输入框里填入#kw再往下看“保存元素对象至”填一个变量名比如叫搜索框。第六步找个网站用CSS选择器找所有按钮百度首页的按钮不多我们换一个更有代表性的页面。拖一个新哈哈我们直接用百度首页也够用了。要用CSS选择器找所有按钮CSS选择器这样写button意思是找到页面上所有的button标签。或者这样写input[typesubmit]意思是找到所有type等于submit的input标签提交按钮。第七步用获取相似元素列表指令数按钮数量在影刀里要找一个网页上的所有同类元素用的是获取相似元素列表指令。在左边指令区找到网页分类找到获取相似元素列表指令。拖到流程编辑区。右边属性设置区里操作目标选择你用CSS选择器捕捉到的按钮元素。“保存相似元素列表至”填一个变量名比如叫按钮列表。第八步用获取列表长度指令数一数有几个按钮列表是一个列表变量要算出它有几个元素需要用获取列表长度指令。在左边指令区找到列表分类找到获取列表长度指令。拖到流程编辑区。右边属性设置区里列表选择按钮列表变量。“保存长度至填一个变量名比如叫按钮数量”。第九步用打印日志看看结果拖一个打印日志指令到流程编辑区。右边属性设置区里“内容选择变量按钮数量”。点击运行按钮。运行完之后在运行日志窗口里你能看到按钮的数量。我当时踩过的坑坑一CSS选择器的#号和.号搞混了。#是id.是class我一开始全用成了.结果怎么都找不到元素。坑二页面上有多个相同的classCSS选择器只找到了第一个。解决办法用获取相似元素列表指令而不是获取元素对象指令。坑三有些元素的class里有空格比如classbtn primary。这时候CSS选择器要写成.btn.primary两个class都要匹配或者干脆只写.btn。真实代码CSS选择器完整示例下面给你一些真实的CSS选择器示例/* 找到id等于kw的元素 */#kw/* 找到class包含s_ipt的所有元素 */.s_ipt/* 找到所有的按钮 */button/* 找到所有的输入框 */input/* 找到type等于submit的input */input[typesubmit]/* 找到class包含btn的所有button */button.btn/* 找到id等于su的元素百度一下按钮 */#su/* 找到所有的超链接 */a/* 找到class包含s_ipt的input里面的所有元素 */input.s_ipt */* 找到第一个按钮CSS里用:first-child */button:first-child真实代码在影刀里用变量拼接CSS选择器有时候CSS选择器需要根据变量动态变化。比如你要找的元素的id存在一个变量里。在获取元素对象指令的CSS选择器输入框里点fx按钮然后写TEMU店群如何管理运营# 元素ID假设变量元素ID的值是kw拼接出来的CSS选择器就是#kw。如果要按class找就这样写. 元素Class假设变量元素Class的值是s_ipt拼接出来就是.s_ipt。真实代码Python里用CSS选择器如果你会用Python也可以直接用代码来用CSS选择器fromseleniumimportwebdriverfromselenium.webdriver.common.byimportBy driverwebdriver.Chrome()driver.get(https://www.baidu.com)# 用CSS选择器找到搜索框search_boxdriver.find_element(By.CSS_SELECTOR,#kw)search_box.send_keys(影刀RPA)# 用CSS选择器找到百度一下按钮submit_btndriver.find_element(By.CSS_SELECTOR,#su)submit_btn.click()driver.quit()你看CSS选择器的写法比XPath更简洁。真实代码配置参数示例获取元素对象指令里用CSS选择器方式时定位方式CSS选择器 CSS选择器#kw 超时时间秒10 保存元素对象至搜索框获取相似元素列表指令里的参数操作目标按钮元素用CSS选择器捕捉到的 保存相似元素列表至按钮列表CSS选择器和XPath我该用哪个这个问题我被问过不下100次。我的建议是情况一元素有唯一的id。用CSS选择器#id最简洁。情况二元素没有id但class很独特。用CSS选择器.class也很简洁。情况三要找父元素下面的第N个子元素。用XPathXPath的轴定位更强大。情况四要按文字内容找元素。用XPathCSS选择器不支持按文字内容查找。情况五要找某个元素后面的所有兄弟元素。用XPathXPath有following-siblingCSS选择器没有这个功能。我个人的习惯是能写CSS选择器就写CSS选择器写不出来再用XPath。home.linyan.cloud你可以去 home.linyan.cloud 看看更多影刀RPA的学习资料。今天你学到了什么今天你学会了什么是CSS选择器按特征找人CSS选择器和XPath的区别怎么用F12找到元素的CSS选择器怎么在影刀里用CSS选择器找元素怎么用获取相似元素列表找所有同类元素CSS选择器是影刀RPA里另一个非常重要的技能。和XPath搭配使用基本能搞定所有元素定位问题。练习题可选如果你愿意可以自己试试用今天学的方法打开百度首页用CSS选择器找到搜索框#kw往里面输入影刀RPA然后找到百度一下按钮#su点击它。提示需要用到输入文字指令和点击元素指令。内容标签影刀RPA # 新手教程 # CSS选择器 # 零基础 # 入门教程 # 元素定位 # RPA自动化 # 网页自动化作者林焱
影刀RPA新手教程：CSS选择器第一课——另一种找网页元素的方法
影刀RPA新手教程CSS选择器第一课——另一种找网页元素的方法大家好我是林焱。今天教你用CSS选择器找到网页元素。这是XPath的兄弟有时候比XPath还好用。先搞懂什么是CSS选择器你已经学了XPath现在学CSS选择器。XPath像什么像从公司大门出发上3楼左转第2个房间——这是按路径找人。CSS选择器像什么像找一个穿红衣服、戴眼镜、拿着保温杯的人——这是按特征找人。两种都能找到人只是思路不一样。在有些网页上用CSS选择器比XPath更短、更快。12大核心模块先认识一下学影刀RPA总共就这12个核心模块打开网页点击元素输入文字读取文字等待元素出现网页截图元素捕捉XPathCSS选择器今天学这个获取元素对象循环变量今天重点学第9个CSS选择器。案例主线打开一个网页用CSS选择器找到所有按钮数一数有几个我们今天要做的事情第一步让影刀自动打开百度首页第二步用CSS选择器找到页面上所有的按钮第三步数一数一共有几个按钮把数字打印出来做完你就彻底懂了CSS选择器到底是什么怎么用什么时候用。第一步新建应用打开百度首页打开影刀RPA新建一个应用。拖一个打开网页指令到流程编辑区。右边属性设置区里网址填https://www.baidu.com浏览器类型选Chrome保存网页对象至用默认名称。点击运行测试一下确保百度首页能正常打开。第二步认识CSS选择器长什么样CSS选择器说白了也是一串字符长得像这样#kw是不是比XPath短多了#kw的意思是找到id等于kw的元素。对应XPath的写法是//*[idkw]你看CSS选择器就是更短、更直观。第三步CSS选择器的几种常见写法写法一按id找最常用拼多多店群自动化上架方案#kw意思是找到id等于kw的元素。#号代表id。写法二按class找.s_ipt意思是找到class等于s_ipt的所有元素。.号代表class。写法三按标签名找input意思是找到所有的input标签所有的输入框。写法四按标签名id找input#kw意思是找到一个input标签它的id是kw。写法五按标签名class找input.s_ipt意思是找到所有class包含s_ipt的input标签。第四步用F12找到元素的CSS选择器用Chrome打开百度首页按F12。点击左上角的小箭头元素选择器然后点击搜索框。你会看到这段代码被高亮inputidkwnamewdclasss_ipt...那么它的CSS选择器就是#kw如果你想要class选择器那就是.s_ipt第五步在影刀里用CSS选择器找元素回到影刀流程编辑区。拖一个获取元素对象指令到流程编辑区。右边属性设置区里找到定位方式改成CSS选择器。然后在CSS选择器输入框里填入#kw再往下看“保存元素对象至”填一个变量名比如叫搜索框。第六步找个网站用CSS选择器找所有按钮百度首页的按钮不多我们换一个更有代表性的页面。拖一个新哈哈我们直接用百度首页也够用了。要用CSS选择器找所有按钮CSS选择器这样写button意思是找到页面上所有的button标签。或者这样写input[typesubmit]意思是找到所有type等于submit的input标签提交按钮。第七步用获取相似元素列表指令数按钮数量在影刀里要找一个网页上的所有同类元素用的是获取相似元素列表指令。在左边指令区找到网页分类找到获取相似元素列表指令。拖到流程编辑区。右边属性设置区里操作目标选择你用CSS选择器捕捉到的按钮元素。“保存相似元素列表至”填一个变量名比如叫按钮列表。第八步用获取列表长度指令数一数有几个按钮列表是一个列表变量要算出它有几个元素需要用获取列表长度指令。在左边指令区找到列表分类找到获取列表长度指令。拖到流程编辑区。右边属性设置区里列表选择按钮列表变量。“保存长度至填一个变量名比如叫按钮数量”。第九步用打印日志看看结果拖一个打印日志指令到流程编辑区。右边属性设置区里“内容选择变量按钮数量”。点击运行按钮。运行完之后在运行日志窗口里你能看到按钮的数量。我当时踩过的坑坑一CSS选择器的#号和.号搞混了。#是id.是class我一开始全用成了.结果怎么都找不到元素。坑二页面上有多个相同的classCSS选择器只找到了第一个。解决办法用获取相似元素列表指令而不是获取元素对象指令。坑三有些元素的class里有空格比如classbtn primary。这时候CSS选择器要写成.btn.primary两个class都要匹配或者干脆只写.btn。真实代码CSS选择器完整示例下面给你一些真实的CSS选择器示例/* 找到id等于kw的元素 */#kw/* 找到class包含s_ipt的所有元素 */.s_ipt/* 找到所有的按钮 */button/* 找到所有的输入框 */input/* 找到type等于submit的input */input[typesubmit]/* 找到class包含btn的所有button */button.btn/* 找到id等于su的元素百度一下按钮 */#su/* 找到所有的超链接 */a/* 找到class包含s_ipt的input里面的所有元素 */input.s_ipt */* 找到第一个按钮CSS里用:first-child */button:first-child真实代码在影刀里用变量拼接CSS选择器有时候CSS选择器需要根据变量动态变化。比如你要找的元素的id存在一个变量里。在获取元素对象指令的CSS选择器输入框里点fx按钮然后写TEMU店群如何管理运营# 元素ID假设变量元素ID的值是kw拼接出来的CSS选择器就是#kw。如果要按class找就这样写. 元素Class假设变量元素Class的值是s_ipt拼接出来就是.s_ipt。真实代码Python里用CSS选择器如果你会用Python也可以直接用代码来用CSS选择器fromseleniumimportwebdriverfromselenium.webdriver.common.byimportBy driverwebdriver.Chrome()driver.get(https://www.baidu.com)# 用CSS选择器找到搜索框search_boxdriver.find_element(By.CSS_SELECTOR,#kw)search_box.send_keys(影刀RPA)# 用CSS选择器找到百度一下按钮submit_btndriver.find_element(By.CSS_SELECTOR,#su)submit_btn.click()driver.quit()你看CSS选择器的写法比XPath更简洁。真实代码配置参数示例获取元素对象指令里用CSS选择器方式时定位方式CSS选择器 CSS选择器#kw 超时时间秒10 保存元素对象至搜索框获取相似元素列表指令里的参数操作目标按钮元素用CSS选择器捕捉到的 保存相似元素列表至按钮列表CSS选择器和XPath我该用哪个这个问题我被问过不下100次。我的建议是情况一元素有唯一的id。用CSS选择器#id最简洁。情况二元素没有id但class很独特。用CSS选择器.class也很简洁。情况三要找父元素下面的第N个子元素。用XPathXPath的轴定位更强大。情况四要按文字内容找元素。用XPathCSS选择器不支持按文字内容查找。情况五要找某个元素后面的所有兄弟元素。用XPathXPath有following-siblingCSS选择器没有这个功能。我个人的习惯是能写CSS选择器就写CSS选择器写不出来再用XPath。home.linyan.cloud你可以去 home.linyan.cloud 看看更多影刀RPA的学习资料。今天你学到了什么今天你学会了什么是CSS选择器按特征找人CSS选择器和XPath的区别怎么用F12找到元素的CSS选择器怎么在影刀里用CSS选择器找元素怎么用获取相似元素列表找所有同类元素CSS选择器是影刀RPA里另一个非常重要的技能。和XPath搭配使用基本能搞定所有元素定位问题。练习题可选如果你愿意可以自己试试用今天学的方法打开百度首页用CSS选择器找到搜索框#kw往里面输入影刀RPA然后找到百度一下按钮#su点击它。提示需要用到输入文字指令和点击元素指令。内容标签影刀RPA # 新手教程 # CSS选择器 # 零基础 # 入门教程 # 元素定位 # RPA自动化 # 网页自动化作者林焱
