影刀RPA HTML与CSS和JS基础知识在RPA中的应用

影刀RPA HTML CSS JS基础知识在RPA中的应用作者林焱 | 适合人群想深入理解网页元素定位原理的新手什么情况用什么你不需要成为前端工程师但了解一点点HTML/CSS/JS的基础知识能让你的RPA开发能力上一个台阶。什么时候需要这些知识手动写XPath定位元素看网页源码找隐藏数据执行JavaScript代码绕过反爬理解动态加载Ajax的原理怎么做HTML基础够用就行什么是标签div这是一个块级元素/divspan这是一个行内元素/spanahrefhttps://xxx.com这是一个链接/ainputtypetextnamekeyword[video(video-4nJWuQC4-1783576093789)(type-csdn)(url-https://live.csdn.net/v/embed/526818)(image-https://v-blog.csdnimg.cn/asset/582d14c3bd0451c5399cd990b56e2a0d/cover/Cover0.jpg)(title-拼多多店群自动化报活动上架)]imgsrcxxx.jpgalt图片什么是属性inputidkwclasss_iptnamewdid、class、name都是属性。XPath就是用这些属性来定位元素的。层级关系divclasscarddivclasstitle标题/divdivclassprice99元/div/divtitle和price都是card的子元素。XPath的/就是描述这种层级关系。CSS基础了解class就够了CSS用class来给元素添加样式。RPA里最重要的认知class可能随页面样式变化而变化不一定稳定。/* 这样的class是稳定的 */.card-title{color:red;}/* 这样的class是不稳定的CSS Modules自动生成 */.x1a2b3c4{color:red;}判断class是否稳定右键 → 查看元素 → 看class名称是否包含有意义的关键词。card-title有意义x1a2b3c4没意义。JavaScript基础在影刀里执行JS有些操作影刀指令做不到比如滚动到页面底部修改元素的显示状态触发一个JS事件在影刀里用「执行JavaScript」指令可以直接写JS代码// 滚动到底部window.scrollTo(0,document.body.scrollHeight);// 显示隐藏的元素document.querySelector(#hidden-div).style.displayblock;// 点击一个按钮即使被遮挡也能点document.querySelector(#submit-btn).click();有什么坑坑1querySelector和XPath是两套语法document.querySelector(#kw)用CSS选择器语法#代表id.代表class。XPath用//input[idkw]。两套语法不通用不要混着写。TEMU店群矩阵自动化运营核价报活动坑2JavaScript操作的页面是浏览器里的真实页面用querySelector找到的元素是浏览器里已经加载完成的元素。如果元素还没加载出来JS也找不到。解决方案执行JS之前先用影刀的「等待元素出现」指令确认元素已加载。坑3不同网站的class命名规则完全不同淘宝的class可能是price小红书的class可能是note-price。没有统一标准。解决方案每换一个网站都重新观察class命名规律。不要假设某个class名称在另一个网站也存在。总结你不需要深入学HTML/CSS/JS但能看懂基本结构就够了。三个核心能力能看懂HTML标签和属性 → 写XPath能判断class是否稳定 → 选对属性能写简单JS操作 → 兜底方案作者林焱