?? 一、網(wǎng)頁(yè)自動(dòng)化介紹 ?

1. 什么是網(wǎng)頁(yè)自動(dòng)化？ ?

網(wǎng)頁(yè)自動(dòng)化（Web Automation）就是讓電腦上的瀏覽器 代替人類去操作網(wǎng)頁(yè)。 它能按照我們?cè)O(shè)定的步驟，自動(dòng)完成“點(diǎn)擊、輸入、下載、采集”等動(dòng)作。

?? 類比： 就像一個(gè)“虛擬助手”，幫你 打開網(wǎng)頁(yè) → 登錄 → 搜索 → 下載 → 采集數(shù)據(jù)，而你不用盯著屏幕一直點(diǎn)。

2. 網(wǎng)頁(yè)自動(dòng)化能做什么？ ?

?? （1）自動(dòng)登錄與操作 ?

• 自動(dòng)輸入賬號(hào)、密碼，點(diǎn)擊登錄。
• 例子：每天早上自動(dòng)登錄 OA 系統(tǒng)，進(jìn)入“公告欄”。

?? （2）數(shù)據(jù)采集（爬?。??

• 從網(wǎng)頁(yè)中提取文字、表格、圖片、鏈接。
• 例子：批量采集客戶資料頁(yè)面中的聯(lián)系方式。

?? （3）文件下載 ?

• 自動(dòng)點(diǎn)擊“導(dǎo)出 Excel / PDF”按鈕。
• 自動(dòng)等待文件下載完成，并保存到指定文件夾。
• 例子：每天定時(shí)下載財(cái)務(wù)報(bào)表。

?? （4）表單填寫與提交 ?

• 自動(dòng)填寫網(wǎng)頁(yè)表單（輸入姓名、地址、日期）。
• 自動(dòng)提交，避免重復(fù)手工輸入。
• 例子：批量錄入客戶信息、問卷調(diào)查。

?? （5）重復(fù)性任務(wù)批量化 ?

• 循環(huán)操作：對(duì)一批網(wǎng)址 / 數(shù)據(jù)逐個(gè)執(zhí)行。
• 例子：對(duì) Excel 表里的一百個(gè)產(chǎn)品鏈接，逐個(gè)打開并抓取價(jià)格。

??? （6）條件判斷與流程控制 ?

• 判斷網(wǎng)頁(yè)是否出現(xiàn)“驗(yàn)證碼 / 錯(cuò)誤提示”。
• 如果有，則暫停或切換方案。
• 例子：檢測(cè)到“登錄失敗”，就換賬號(hào)重試。

?? （7）與其他工具聯(lián)動(dòng) ?

• 網(wǎng)頁(yè) → 數(shù)據(jù) → Excel → 郵件 / API。
• 例子：采集訂單 → 自動(dòng)存到表格 → 再發(fā)郵件給業(yè)務(wù)員。

3. 為什么要用網(wǎng)頁(yè)自動(dòng)化？ ?

• 節(jié)省時(shí)間：重復(fù)的點(diǎn)擊交給程序做。
• 減少錯(cuò)誤：機(jī)器不會(huì)漏點(diǎn)、輸錯(cuò)。
• 高效批量處理：同時(shí)完成幾十、幾百條任務(wù)。
• 釋放人力：讓人做更有價(jià)值的分析，而不是機(jī)械操作。

4. 一個(gè)完整例子 ?

比如財(cái)務(wù)小王：

• 每天要 登錄報(bào)表系統(tǒng) → 輸入日期 → 點(diǎn)擊導(dǎo)出 → 下載 Excel → 保存到文件夾 → 發(fā)郵件給領(lǐng)導(dǎo)。
• 如果人工操作，需要 15 分鐘。
• 網(wǎng)頁(yè)自動(dòng)化設(shè)好后：
  • 每天早上 9:00 自動(dòng)執(zhí)行整個(gè)流程。
  • 小王只需要打開郵箱，就能看到最新的報(bào)表。
  • 節(jié)省時(shí)間 ×5，工作也更輕松。

? 總結(jié)： 網(wǎng)頁(yè)自動(dòng)化 ≠ 高深的編程，而是一個(gè)“虛擬助手”。 它能幫我們把 重復(fù)、枯燥、耗時(shí)的網(wǎng)頁(yè)操作 → 全自動(dòng)完成，讓人專注在更重要的工作上。

??二、 網(wǎng)頁(yè)自動(dòng)化 vs 客戶端 RPA 自動(dòng)化 ?

?? 簡(jiǎn)單理解 ?

• 網(wǎng)頁(yè)自動(dòng)化 = 瀏覽器里的“自動(dòng)點(diǎn)人”。
• 客戶端 RPA = 整個(gè)電腦上的“虛擬員工”。

?? 舉個(gè)例子 ?

財(cái)務(wù)小李的日常：

1. 登錄網(wǎng)站下載報(bào)表（網(wǎng)頁(yè)自動(dòng)化能做 ?,客戶端RPA 能 做?）。
2. 把下載的 Excel 打開，用公式匯總（客戶端RPA 能自動(dòng)打開 Excel 處理 ?）。
3. 把處理結(jié)果復(fù)制到 ERP 系統(tǒng)（客戶端RPA 自動(dòng)化能做 ?，網(wǎng)頁(yè)自動(dòng)化能做 ?）。

?? 所以：

• 如果只是 “網(wǎng)頁(yè)上的重復(fù)操作” → 用網(wǎng)頁(yè)自動(dòng)化 就夠。
• 如果涉及 跨軟件、跨系統(tǒng)的流程 → 用 客戶端RPA 更合適。

??三、 理論知識(shí)（必須） ?

1. 網(wǎng)頁(yè)的組成（理論知識(shí)） ?

• 網(wǎng)頁(yè) = 一張“房子藍(lán)圖”，里面有很多“積木塊”。
• 標(biāo)簽（Tag）：積木的名字，比如 <div>、<input>、<button>。特點(diǎn)是 看不到，它是代碼，隱藏在后面。
• 元素（Element）：網(wǎng)頁(yè)上實(shí)際看到的按鈕、輸入框、文字，就是“元素”。

?? 業(yè)務(wù)例子：

• 登錄頁(yè)面里有一個(gè)“用戶名輸入框”和“登錄按鈕”，它們都是元素。
• 報(bào)表下載頁(yè)面里，一個(gè)“導(dǎo)出 Excel”按鈕就是一個(gè)元素。

??? 圖示：

				┌─────────────────────┐
				│       網(wǎng)頁(yè)           │
				│      (房子藍(lán)圖)       │
				└────────┬────────────┘
						 │
		  ┌──────────────┴───────────────┐
		  │                              │
	  標(biāo)簽（Tag）                     元素（Element）
  （看不見的積木名字）            （網(wǎng)頁(yè)上實(shí)際看到的東西）
 ┌───────────────┐             ┌─────────────────┐
 │ <div>         │             │ 登錄按鈕         │
 │ <input>       │             │ 用戶名輸入框      │
 │ <button>      │             │ 導(dǎo)出 Excel 按鈕  │
 └───────────────┘             └─────────────────┘

2. 定位元素（理論知識(shí)） ?

• 為什么要定位？ 人利用鼠標(biāo)去點(diǎn)擊網(wǎng)頁(yè)上的元素，同樣自動(dòng)化工具需要知道“點(diǎn)哪里”，才能操作元素。
• 元素選擇器（Selector）： 像快遞地址，告訴自動(dòng)化工具去找哪個(gè)元素。
  • 示例：#username → 找到“用戶名輸入框”
• XPath（路徑選擇器）： 像家譜，逐層描述元素的路徑。
  • 示例：//*[@class="download-btn"] → 找到“下載按鈕”

?? 類比：

??? 簡(jiǎn)易圖示：

網(wǎng)頁(yè)元素 (按鈕 / 輸入框)
       │
       ▼
 ┌───────────────┐
 │ 自動(dòng)化工具      │
 │ 定位元素地址    │
 │ Selector/XPath│
 └───────────────┘

網(wǎng)頁(yè)元素 (按鈕 / 輸入框)
       │
       ▼
 ┌───────────────┐
 │ 自動(dòng)化工具      │
 │ 定位元素地址    │
 │ Selector/XPath│
 └───────────────┘

[網(wǎng)頁(yè)上的登錄按鈕] ──?  Selector: #login-btn
[網(wǎng)頁(yè)上的用戶名輸入框] ──?  XPath: //*[@id="username"]

[網(wǎng)頁(yè)上的登錄按鈕] ──?  Selector: #login-btn
[網(wǎng)頁(yè)上的用戶名輸入框] ──?  XPath: //*[@id="username"]

3. 快速定位元素（實(shí)踐） ?

在網(wǎng)頁(yè)自動(dòng)化中，手動(dòng)寫 Selector 或 XPath 有時(shí)很繁瑣，尤其頁(yè)面元素復(fù)雜時(shí)。為此，有一些工具可以快速定位元素，直接生成選擇器或 XPath，提升效率。

3.1 常用工具 ?

3.2 使用流程示例（Chrome DevTools） ?

1. 打開網(wǎng)頁(yè)，按 F12 進(jìn)入開發(fā)者工具
2. 點(diǎn)擊“元素”面板，選中目標(biāo)元素
3. 右鍵 → Copy → 選擇 Copy selector 或 Copy XPath
4. 粘貼到自動(dòng)化腳本中，即可使用

?? 小技巧：

• 盡量使用 ID 或獨(dú)特的 class，保證定位穩(wěn)定
• 對(duì)動(dòng)態(tài)生成的元素，可結(jié)合 CSS 屬性或?qū)蛹?jí)路徑優(yōu)化 XPath

??? 簡(jiǎn)易圖示：

[網(wǎng)頁(yè)元素] ──? 右鍵 → Copy Selector/XPath ──? 自動(dòng)生成定位地址 ──? 自動(dòng)化腳本使用

[網(wǎng)頁(yè)元素] ──? 右鍵 → Copy Selector/XPath ──? 自動(dòng)生成定位地址 ──? 自動(dòng)化腳本使用

4. 自動(dòng)化工作流（理論知識(shí)） ?

4.1 什么是工作流？ ?

• 通俗理解：工作流就像流水線，把一個(gè)操作拆成多個(gè)步驟，讓電腦按順序自動(dòng)完成。

• 類比：

  你做報(bào)表的流程：打開網(wǎng)頁(yè) → 輸入賬號(hào) → 搜索數(shù)據(jù) → 下載報(bào)表 工作流就把這幾個(gè)步驟“裝進(jìn)機(jī)器里”，一次性自動(dòng)完成。

4.2 工作流的核心組成 ?

4.3 工作流程示例 ?

[觸發(fā)器：點(diǎn)擊開始]
          │
          ▼
[節(jié)點(diǎn)1：打開網(wǎng)頁(yè)]
          │
          ▼
[節(jié)點(diǎn)2：輸入賬號(hào)和密碼]
          │
          ▼
[節(jié)點(diǎn)3：點(diǎn)擊登錄]
          │
          ▼
[節(jié)點(diǎn)4：搜索報(bào)表]
          │
          ▼
[節(jié)點(diǎn)5：點(diǎn)擊下載]
          │
          ▼
[節(jié)點(diǎn)6：完成]

[觸發(fā)器：點(diǎn)擊開始]
          │
          ▼
[節(jié)點(diǎn)1：打開網(wǎng)頁(yè)]
          │
          ▼
[節(jié)點(diǎn)2：輸入賬號(hào)和密碼]
          │
          ▼
[節(jié)點(diǎn)3：點(diǎn)擊登錄]
          │
          ▼
[節(jié)點(diǎn)4：搜索報(bào)表]
          │
          ▼
[節(jié)點(diǎn)5：點(diǎn)擊下載]
          │
          ▼
[節(jié)點(diǎn)6：完成]

4.4 重點(diǎn)提示 ?

• 工作流 = 自動(dòng)化步驟的有序組合
• 可以加循環(huán)、條件判斷，讓自動(dòng)化更智能
• 可復(fù)用：同一個(gè)流程可以多次執(zhí)行，節(jié)省重復(fù)操作時(shí)間

?? 小結(jié)：

網(wǎng)頁(yè)自動(dòng)化的工作流就像搭積木，每個(gè)節(jié)點(diǎn)是積木塊，連接起來就是一條“自動(dòng)操作流水線”，讓電腦幫你做重復(fù)、繁瑣的網(wǎng)頁(yè)任務(wù)。

5.手動(dòng)構(gòu)建工作流（實(shí)踐） ?

在 自動(dòng)化工作流里，每個(gè)節(jié)點(diǎn)都是一個(gè)“動(dòng)作”，動(dòng)作由**指令（Action）**來執(zhí)行。掌握核心指令，就能搭出各種自動(dòng)化流程。

5.1 常用指令類別 ?

5.2 核心指令（必須會(huì)用） ?

1. 點(diǎn)擊（Click）
   • 用于點(diǎn)擊按鈕、鏈接、復(fù)選框等
   • 示例：點(diǎn)擊“登錄”按鈕
2. 輸入文字（Type）
   • 模擬鍵盤輸入
   • 示例：輸入用戶名、密碼、搜索關(guān)鍵字
3. 等待（Wait）
   • 等待網(wǎng)頁(yè)加載或操作完成
   • 示例：等待下載按鈕出現(xiàn)，保證下載成功
4. 獲取數(shù)據(jù)（Get Text / Get Attribute）
   • 提取網(wǎng)頁(yè)信息，用于判斷或存儲(chǔ)
   • 示例：獲取報(bào)表標(biāo)題、訂單號(hào)
5. 條件判斷（If）
   • 根據(jù)某個(gè)條件決定下一步動(dòng)作
   • 示例：如果“登錄成功”，則進(jìn)入下載流程，否則提示錯(cuò)誤
6. 循環(huán)（Loop）
   • 批量操作，重復(fù)執(zhí)行節(jié)點(diǎn)
   • 示例：循環(huán)下載多頁(yè)報(bào)表
7. 變量（Set / Use Variable）
   • 存儲(chǔ)和傳遞數(shù)據(jù)
   • 示例：把用戶名存到變量，后續(xù)自動(dòng)填充

5.3 小技巧 ?

• 先學(xué)網(wǎng)頁(yè)操作和數(shù)據(jù)處理指令，快速搭建基礎(chǔ)流程
• 再學(xué)條件判斷和循環(huán)，做復(fù)雜自動(dòng)化
• 善用變量，可以讓流程更加靈活和智能

?? 總結(jié)：

學(xué)會(huì) 網(wǎng)頁(yè)自動(dòng)化，就是構(gòu)建 工作流 ，等于 會(huì)用核心指令 + 會(huì)組合節(jié)點(diǎn) + 會(huì)控制流程順序 核心指令像樂高積木，組合起來就能搭出各種自動(dòng)化操作流水線。

6. 自動(dòng)構(gòu)建工作流（錄制） ?

6.1 錄制的作用 ?

• 類比 Excel 宏錄制： 在 Excel 里，你可以“錄制宏”，比如選中單元格 → 輸入數(shù)據(jù) → 格式化 → 保存。以后按一下按鈕，這些操作就自動(dòng)完成。
• 網(wǎng)頁(yè)自動(dòng)化錄制也是一樣： 你在網(wǎng)頁(yè)上點(diǎn)擊、輸入、下載等操作，工具會(huì)把這些步驟“錄下來”，自動(dòng)生成流程。

?? 核心點(diǎn)： 手動(dòng)拖指令太慢，錄制就像按下“錄制宏”，一次性生成完整流程。

6.2 業(yè)務(wù)示例 ?

• 登錄流程：點(diǎn)擊輸入框 → 輸入賬號(hào) → 輸入密碼 → 點(diǎn)擊登錄
• 搜索操作：點(diǎn)擊搜索框 → 輸入關(guān)鍵字 → 點(diǎn)擊“搜索”
• 下載報(bào)表：點(diǎn)擊“導(dǎo)出” → 等待文件下載完成

6.3 圖示 ?

Excel 宏錄制：
[點(diǎn)擊單元格] → [輸入數(shù)據(jù)] → [格式化] → [保存]
        │
        ▼
自動(dòng)生成宏 → 以后直接執(zhí)行

網(wǎng)頁(yè)自動(dòng)化 錄制：
[點(diǎn)擊網(wǎng)頁(yè)元素] → [輸入文字] → [點(diǎn)擊按鈕] → [下載文件]
        │
        ▼
自動(dòng)生成節(jié)點(diǎn)流程 → 自動(dòng)執(zhí)行

Excel 宏錄制：
[點(diǎn)擊單元格] → [輸入數(shù)據(jù)] → [格式化] → [保存]
        │
        ▼
自動(dòng)生成宏 → 以后直接執(zhí)行

網(wǎng)頁(yè)自動(dòng)化 錄制：
[點(diǎn)擊網(wǎng)頁(yè)元素] → [輸入文字] → [點(diǎn)擊按鈕] → [下載文件]
        │
        ▼
自動(dòng)生成節(jié)點(diǎn)流程 → 自動(dòng)執(zhí)行

?? 小結(jié)：

錄制 = 快速生成流程節(jié)點(diǎn) 類比 Excel 宏錄制，操作一次就自動(dòng)生成自動(dòng)化腳本，比手動(dòng)拖節(jié)點(diǎn)快得多。

7. 高階工作流（判斷 / 循環(huán)） ?

7.1 核心概念 ?

• 串行：一步接一步，像流水線，操作按順序執(zhí)行
• 分叉（條件判斷 If）：根據(jù)條件選擇不同路徑
• 循環(huán)（Loop）：重復(fù)執(zhí)行同一個(gè)操作

?? 類比生活場(chǎng)景

• If：如果下雨 → 打傘，否則 → 出門
• Loop：每天早上刷牙 → 重復(fù)動(dòng)作

7.2 業(yè)務(wù)示例 ?

• If（分叉）
  • 網(wǎng)頁(yè)出現(xiàn)驗(yàn)證碼 → 暫停
  • 否則 → 繼續(xù)登錄
• Loop（循環(huán)）
  • 打開 10 個(gè)客戶資料頁(yè) → 逐個(gè)下載 PDF
  • 逐行讀取 Excel → 抓取每行數(shù)據(jù)

7.3 圖示 ?

串行（順序執(zhí)行）：
[打開網(wǎng)頁(yè)] → [輸入賬號(hào)] → [點(diǎn)擊登錄] → [下載報(bào)表]

分叉（If）：
           ┌───────────是─────────┐
[檢查驗(yàn)證碼]                     [暫停]
           └──否─────────→ 繼續(xù)登錄

循環(huán)（Loop）：
┌─────────────────────────┐
│ 讀取每行數(shù)據(jù) → 執(zhí)行操作 │
└─────────↑──────────────┘
        重復(fù)

串行（順序執(zhí)行）：
[打開網(wǎng)頁(yè)] → [輸入賬號(hào)] → [點(diǎn)擊登錄] → [下載報(bào)表]

分叉（If）：
           ┌───────────是─────────┐
[檢查驗(yàn)證碼]                     [暫停]
           └──否─────────→ 繼續(xù)登錄

循環(huán)（Loop）：
┌─────────────────────────┐
│ 讀取每行數(shù)據(jù) → 執(zhí)行操作 │
└─────────↑──────────────┘
        重復(fù)

?? 小結(jié)：

工作流既可以串行執(zhí)行，也可以分叉判斷，或者循環(huán)重復(fù)，組合起來就能完成復(fù)雜自動(dòng)化。

?? 四、指令集合 ?

1. Web交互（interaction） ?? ?

操作網(wǎng)頁(yè)上的元素。

• Click（點(diǎn)擊）：點(diǎn)擊按鈕、鏈接、復(fù)選框等
• Type（輸入文字）：在輸入框或文本域輸入內(nèi)容
• Select（選擇下拉框）：選擇列表項(xiàng)
• Check / Uncheck（勾選 / 取消勾選）
• Focus（聚焦）：讓元素獲得焦點(diǎn)
• Scroll（滾動(dòng)）：滾動(dòng)頁(yè)面到指定位置
• Hover（懸停）：鼠標(biāo)懸停在元素上

2. 瀏覽器（browser） ?? ?

操作瀏覽器本身或標(biāo)簽頁(yè)。

• Open URL（打開網(wǎng)頁(yè)）
• Reload（刷新頁(yè)面）
• Go Back / Go Forward（前進(jìn) / 后退）
• Close Tab / Close Window（關(guān)閉標(biāo)簽頁(yè) / 窗口）
• New Tab（新建標(biāo)簽頁(yè)）
• Wait for Page Load（等待頁(yè)面加載）

3. 通用（general） ?? ?

通用操作，適用于多種場(chǎng)景。

• Log（輸出日志）
• Send Notification（發(fā)送通知）
• Execute Script（執(zhí)行自定義 JS 腳本）
• Delay / Wait（延遲操作）
• Run Sub-Workflow（調(diào)用子工作流）

4. 數(shù)據(jù)（data） ?? ?

獲取、處理和存儲(chǔ)數(shù)據(jù)。

• Get Text（獲取文本）
• Get Attribute（獲取屬性值）
• Set Variable（設(shè)置變量）
• Use Variable（使用變量）
• Download File（下載文件）
• Parse JSON（解析 JSON 數(shù)據(jù)）

5. 控制流（conditions） ?? ?

控制工作流的順序、邏輯和循環(huán)。

• If / Else（條件判斷）
• Loop / For Each（循環(huán)執(zhí)行）
• Switch / Case（多條件分支）
• Wait（等待條件滿足）
• Stop / Break（停止流程 / 跳出循環(huán)）

? 五、專業(yè)術(shù)語(yǔ) ?

1、網(wǎng)頁(yè)相關(guān)基礎(chǔ) ?

2、基礎(chǔ)概念 ?

3、控制邏輯 ?

4、數(shù)據(jù)處理 ?

5、常用動(dòng)作節(jié)點(diǎn) ?

6、進(jìn)階功能 ?