如何用实用脚本自动填写网页表单？

本文目录导读：

1. 方法一：使用 Tampermonkey (油猴脚本) —— 最轻量、最适合普通用户
2. 方法二：使用 Python + Selenium —— 更强大、可处理复杂交互
3. 脚本的局限性（重要提醒）
4. 总结：选哪个？

这是一个很实用的需求，自动填写网页表单主要可以通过浏览器扩展脚本（如 Tampermonkey）或编程脚本（如 Python + Selenium）来实现。

下面我会分享两种主流且实用的方法,以及对应的脚本示例。

使用 Tampermonkey (油猴脚本) —— 最轻量、最适合普通用户

适用场景：你经常需要重复填写某个特定的网页表单（如日报、周报、后台管理系统）。

原理：当浏览器加载目标网页时，你的用户脚本会自动运行,并填写表单。

步骤：

1. 安装 Tampermonkey 扩展：在 Chrome/Edge/Firefox 的应用商店搜索并安装。
2. 创建新脚本：点击浏览器工具栏的 Tampermonkey 图标 -> “添加新脚本”。
3. 粘贴以下模板：

// ==UserScript==
// @name         自动填写表单 - 示例
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  自动填写特定网页的表单
// @author       You
// @match        https://你的目标网站.com/*   // 重要：修改为你要自动填写的网页URL
// @grant        none
// ==/UserScript==
(function() {
    'use strict';
    // 等待页面加载完毕
    window.addEventListener('load', function() {
        // --- 填写表单逻辑 ---
        // 1. 通过 ID 定位元素（最准确）
        let usernameInput = document.getElementById('username');
        if(usernameInput) {
            usernameInput.value = '你的用户名';
        }
        // 2. 通过 name 属性定位
        let emailInput = document.querySelector('input[name="email"]');
        if(emailInput) {
            emailInput.value = 'your_email@example.com';
        }
        // 3. 通过占位符 (placeholder) 定位
        let phoneInput = document.querySelector('input[placeholder="请输入手机号"]');
        if(phoneInput) {
            phoneInput.value = '13800138000';
        }
        // 4. 操作 select 下拉框
        let departmentSelect = document.getElementById('department');
        if(departmentSelect) {
            departmentSelect.value = '技术部'; // value 或 option 的文本
        }
        // 5. 操作 textarea 文本框
        let remarkTextarea = document.querySelector('textarea[name="remark"]');
        if(remarkTextarea) {
            remarkTextarea.value = '这是自动填写的备注信息。';
        }
        // 6. 触发某些监听事件（有些页面需要触发 input/change 事件才能生效）
        let anyInput = document.getElementById('some-input');
        if(anyInput) {
            anyInput.value = '新值';
            // 创建并派发 'input' 事件
            let event = new Event('input', { bubbles: true });
            anyInput.dispatchEvent(event);
        }
        console.log('表单已自动填写完成！');
    });
})();

使用技巧：

• 如何找到 id 或 name？：在网页上右键点击输入框 -> “检查” (Inspect),在开发者工具的元素面板中查看。
• @match 指令：非常重要！它决定了脚本在哪些网页上运行。https://你的目标网站.com/* 表示在目标网站的所有页面上运行。
• 延迟执行：如果页面是动态加载的，可能需要使用 setTimeout 或 MutationObserver 等待元素出现。

使用 Python + Selenium —— 更强大、可处理复杂交互

适用场景：需要批量填写、跨页面操作、处理验证码（需配合打码平台）、或者需要提交表单。

步骤：

1. 安装 Python 和必要的库：

   pip install selenium

2. 下载 WebDriver：根据你的浏览器下载对应的驱动（ChromeDriver / GeckoDriver for Firefox）。
3. 编写脚本：

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import time
# 1. 初始化浏览器驱动
driver = webdriver.Chrome()  # 确保 chromedriver 在 PATH 中
# driver = webdriver.Firefox()
# 2. 打开目标网页
driver.get('https://你的目标网站.com/登录页面')
# 3. 等待页面加载（显式等待元素出现）
try:
    # 等待用户名输入框出现，最长等待10秒
    username = WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.ID, 'username'))
    )
    # 4. 填写表单
    username.send_keys('admin')
    # 5. 定位其他元素并填写
    password = driver.find_element(By.NAME, 'password')
    password.send_keys('your_password')
    # 6. 点击登录按钮
    login_button = driver.find_element(By.CLASS_NAME, 'login-btn') # 或 CSS_SELECTOR
    login_button.click()
    print("登录表单已自动填写并提交！")
    # 7. 登录后，继续填写另一个表单（例如日报）
    time.sleep(2) # 等待页面跳转
    WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.ID, 'daily-report-form'))
    )
    # 填写日报内容
    content = driver.find_element(By.CSS_SELECTOR, '#daily-report-form textarea')
    content.send_keys('今日工作：完成了自动化脚本的开发。')
    # 提交日报
    submit = driver.find_element(By.XPATH, '//button[text()="提交日报"]')
    submit.click()
except Exception as e:
    print(f"发生错误: {e}")
finally:
    # 8. 可选：等待查看结果，然后关闭浏览器
    time.sleep(5)
    driver.quit()

使用技巧：

• 定位元素：优先使用 ID，NAME，再是 CSS_SELECTOR 或 XPATH。
• 等待机制：强制等待 time.sleep() 可能不稳定，推荐使用 WebDriverWait 和 expected_conditions。
• 处理 iframe：如果表单在 iframe 里，需要先 driver.switch_to.frame('iframe_name')。

脚本的局限性（重要提醒）

1. 动态加载：有些表单是 Vue/React 动态渲染的，填完 value 后必须触发 dispatchEvent(new Event('input', {bubbles: true}))，否则框架不会识别到内容已变化。这是最容易掉坑的地方。
2. 验证码：上述脚本无法绕过图形验证码、滑块验证码、人脸识别等安全机制，你需要：
   • 在测试环境中关闭验证码。
   • 使用打码平台（付费，如 2Captcha）。
   • 使用 Cookie 登录绕过（先手动登录，保存 Cookie 再使用）。
3. 反爬虫检测：很多网站会检测自动化工具（如 Selenium 的标志），可以使用 undetected-chromedriver 库来降低被检测的风险。
4. 法律和道德问题：请勿利用此技术进行恶意刷票、垃圾注册、撞库攻击等违法行为，请只在你自己的账户或你有权限的系统上使用。

选哪个？

• 如果你只是想省去每天填日报、周报的麻烦，或者个人简单重复的填写：选择 Tampermonkey 脚本，它无需安装编程环境，学习成本低,运行在浏览器后台静默执行。
• 如果你需要处理多步骤（登录 -> 选择 -> 填写 -> 提交）、批量处理、或者应对复杂的动态页面：选择 Python + Selenium，它更灵活，但需要你有一定的编程基础和应对反爬/验证的知识。

你可以先从方法一入手，把脚本复制到 Tampermonkey 里，修改 @match 和具体输入框的 id/name，就能看到效果了，如果遇到元素定位问题，可以打开浏览器控制台（F12）测试你的选择器是否有效。