企业官网建设流程全解析

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

作者：林焱 | 适合人群：想深入理解网页元素定位原理的新手

什么情况用什么

你不需要成为前端工程师，但了解一点点HTML/CSS/JS的基础知识，能让你的RPA开发能力上一个台阶。

什么时候需要这些知识：

• 手动写XPath定位元素
• 看网页源码找隐藏数据
• 执行JavaScript代码绕过反爬
• 理解动态加载（Ajax）的原理

怎么做

HTML基础（够用就行）

什么是标签：

<div>这是一个块级元素</div><span>这是一个行内元素</span><ahref="https://xxx.com">这是一个链接</a><inputtype="text"name="keyword">[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-拼多多店群自动化报活动上架！)]<imgsrc="xxx.jpg"alt="图片">

什么是属性：

<inputid="kw"class="s_ipt"name="wd">

id、class、name都是属性。XPath就是用这些属性来定位元素的。

层级关系：

<divclass="card"><divclass="title">标题</div><divclass="price">99元</div></div>

title和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.display='block';// 点击一个按钮（即使被遮挡也能点）document.querySelector('#submit-btn').click();

有什么坑

坑1：querySelector和XPath是两套语法

document.querySelector('#kw')用CSS选择器语法（#代表id，.代表class）。

XPath用//input[@id='kw']。

两套语法不通用，不要混着写。

坑2：JavaScript操作的页面，是浏览器里的真实页面

用querySelector找到的元素，是浏览器里已经加载完成的元素。如果元素还没加载出来，JS也找不到。

解决方案：执行JS之前，先用影刀的「等待元素出现」指令确认元素已加载。

坑3：不同网站的class命名规则完全不同

淘宝的class可能是price，小红书的class可能是note-price。没有统一标准。

解决方案：每换一个网站，都重新观察class命名规律。不要假设某个class名称在另一个网站也存在。

总结

你不需要深入学HTML/CSS/JS，但"能看懂基本结构"就够了。

三个核心能力：

1. 能看懂HTML标签和属性 → 写XPath
2. 能判断class是否稳定 → 选对属性
3. 能写简单JS操作 → 兜底方案

作者：林焱