Web-浏览器自动化探索

我要花式操作浏览器!

正文

启动工作

安装 Java 和 MySQL(或是直接 XAMPP),steve-community/steve: SteVe - OCPP server implementation in Java. Your trusted open-source EV charging station management system since 2013. Used by CPOs, manufacturers and developers worldwide. Managed cloud → 启动 http://localhost:8080/steve:

webp

OpenCLI

shell
npm install -g @jackwener/opencli

Edge 浏览器从 Releases · jackwener/OpenCLI 处下载 Edge 浏览器插件,解压后安装:

webp

启动 opencli,使用内置命令:

shell
opencli zhihu hot

这将自动打开浏览器,访问知乎网站,抓取知乎当日热点信息。

使用 OpenCLI 命令控制浏览器打开 Steve:

shell
opencli browser browser:default open http://localhost:8080/steve/
{
  "url": "http://localhost:8080/steve/",
  "page": "C31F91FF9D5DB89BA9A9C8EEB7CC13F2"
}

查询当前网页状态:

URL: http://localhost:8080/steve/manager/home

url: http://localhost:8080/steve/manager/home
title: SteVe - Steckdosenverwaltung
viewport: 1259x730
---
<body />
  <div />
    <div />
      <div />
        [2]<a href=/steve/manager/home />
          [1]<img src=/steve/static/images/logo2.png />
    <div />
      <div />
        <ul />
          <li />
            [3]<a href=/steve/manager/home>HOME</a>
          <li />
            [4]<a>DATA MANAGEMENT »</a>
            ...
webp

Skill

都是文本还是给 Agent 用好使。全局安装 OpenCLI 的 Skill:

npx skills add jackwener/opencli -g

算了,直接让 Agent 自行安装吧……就是把对应的 Skill.md 放到 Agent 能识别到的地方中。

webp

重启 OpenCode,Skills 下选择 /opencli-browser,问候它:

/opencli-browser 帮我打开 http://localhost:8080/steve/ 使用用户名 admin 密码 1234 尝试登录,然后打开 About 页面,告诉我目前 Steve 服务器的 URL

即可实现用 Agent 使用命令行操作浏览器获取信息:

webp
告诉我你使用的有效的opencli命令
markdown
以下是此会话中使用的所有有效 opencli 命令:
# 检查连接状态
opencli doctor
# 打开页面(创建名为 steve 的浏览器会话)
opencli browser steve open "http://localhost:8080/steve/"
# 检查页面状态(获取文本树与引用编号)
opencli browser steve state
# 按 CSS 查找元素
opencli browser steve find --css "input"
# 在输入框中输入文本
opencli browser steve type 4 "admin"
opencli browser steve type 5 "1234"
# 填充输入框(验证写入——比 type 更可靠)
opencli browser steve fill 4 "admin"
opencli browser steve fill 5 "1234"
# 点击元素
opencli browser steve click 6
# 模拟键盘按键
opencli browser steve keys Enter
# 等待指定时间(秒)
opencli browser steve wait time 2
opencli browser steve wait time 3
opencli browser steve wait time 5
# 获取当前 URL
opencli browser steve get url
# 获取 DOM 树的 JSON 格式(用于调试)
opencli browser steve get html --as json --depth 10 --children-max 50
# 获取可见文本
opencli browser steve eval "document.body.innerText"
# 截图
opencli browser steve screenshot "D:\Users\Documents\Study\Selenium\login_page.png"
# 检查网络请求
opencli browser steve network
opencli browser steve network --filter "signin"
# 按选择器等待元素出现
opencli browser steve wait selector ".alert, .error, .message, .notification" --timeout 3000
# 通过 CSS 获取文本
opencli browser steve get text --selector "body"
# 关闭会话
opencli browser steve close

Playerwright

在一个空白项目目录下。直接交给 OpenCode 处理吧……

/opencli-browser 帮我打开 http://localhost:8080/steve/ 使用用户名 admin 密码 1234 尝试登录,然后打开 About 页面。
用uv在当前目录下创建一个python环境,安装Playerwright,将你浏览器操作的步骤写成基于Playerwright的自动化脚本。

如此操作之后,给了一个 uv 管理的 python 项目,还有一个代码脚本:

markdown
全部完成。以下是操作总结:
浏览器操作(已通过 opencli browser 完成):
1. 打开 http://localhost:8080/steve/ → 已存在登录会话,直接进入 Dashboard
2. 点击导航栏 ABOUT (ref [8]) → 进入 /steve/manager/about 页面
3. 页面显示 SteVe 3.8.0、数据库版本、已登录的 Dashboard 内容、Endpoint 信息等
项目已创建: D:\Users\Documents\Study\Playwright\
- uv init → .venv Python 3.12 虚拟环境
- uv add playwright → Playwright 1.60.0
- uv run playwright install chromium → 已安装 Chromium 浏览器
脚本 main.py — 运行方式:
uv run python main.py
脚本逻辑:
1. 无头 Chromium(headless=False 可观察,slow_mo=300 看得清)
2. 导航到 /steve/,检测是否有登录页(找密码输入框)
3. 如有登录,填 admin / 1234 并提交
4. 点击 ABOUT 链接,等待 /about 加载
5. 截图保存为 about_page.png,打印标题和关键标题文本到控制台
6. 按回车退出浏览器
python
from playwright.sync_api import sync_playwright
 
 
BASE_URL = "http://localhost:8080/steve/"
 
 
def run():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False, slow_mo=300)
        page = browser.new_page()
 
        page.goto(BASE_URL)
 
        if page.url.endswith("/signin") or page.locator("#username").count() > 0:
            page.locator("#username").fill("admin")
            page.locator("#password").fill("1234")
            page.locator("input[type=submit]").click()
            page.wait_for_url("**/manager/**", timeout=10000)
 
        page.locator("a[href*='/about']").first.click()
        page.wait_for_url("**/about")
 
        page.screenshot(path="about_page.png", full_page=True)
 
        title = page.title()
        version = page.locator("table").first.text_content()
        print(f"Title: {title}")
        print("Version table:", version.strip() if version else "")
 
        input("Press Enter to close browser...")
        browser.close()
 
 
if __name__ == "__main__":
    run()

跑一个试试:

shell
uv run python main.py

成功将 AI 调用 opencli 的步骤复现。

Selenium

在一个新的空项目目录下,如法炮制!

/opencli-browser 帮我打开 http://localhost:8080/steve/ 使用用户名 admin 密码 1234 尝试登录,然后打开 About 页面。
用uv在当前目录下创建一个python环境,安装Selenium,将你浏览器操作的步骤写成基于Selenium的自动化脚本。
markdown
全部完成。以下是摘要:
浏览器操作 (通过 opencli):
1. 打开 http://localhost:8080/steve/ → 重定向到登录页
2. 在 #username 输入 admin,#password 输入 1234
3. 点击 "Sign In" → 成功登录到 /steve/manager/home?continue
4. 点击 ABOUT 链接 → 到达 /steve/manager/about
Python 环境与脚本:
- 使用 uv venv 在 D:\Users\Documents\Study\Selenium 下创建了虚拟环境
- 通过 uv pip install selenium 安装了 Selenium
- 脚本 steve_login.py 使用 headless Chrome (通过 Playwright 的 chrome-win64 二进制文件) 自动执行相同的步骤并打印 About 页面内容
运行方式:
uv run python steve_login.py
python
import sys
import io
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8', errors='replace')
 
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
 
BASE_URL = "http://localhost:8080/steve/"
USERNAME = "admin"
PASSWORD = "1234"
 
options = webdriver.ChromeOptions()
options.binary_location = r"C:\Users\XXX\AppData\Local\ms-playwright\chromium-1223\chrome-win64\chrome.exe"
options.add_argument("--headless=new")
driver = webdriver.Chrome(options=options)
 
try:
    wait = WebDriverWait(driver, 10)
 
    driver.get(BASE_URL)
    print(f"Opened: {driver.current_url}")
 
    username_input = wait.until(
        EC.presence_of_element_located((By.ID, "username"))
    )
    username_input.send_keys(USERNAME)
    print("Typed username")
 
    password_input = driver.find_element(By.ID, "password")
    password_input.send_keys(PASSWORD)
    print("Typed password")
 
    submit_btn = driver.find_element(By.CSS_SELECTOR, "input[type='submit']")
    submit_btn.click()
    print("Clicked Sign In")
 
    wait.until(
        EC.url_contains("/steve/manager/home")
    )
    print(f"Logged in, current URL: {driver.current_url}")
 
    about_link = wait.until(
        EC.element_to_be_clickable((By.CSS_SELECTOR, "a[href*='/steve/manager/about']"))
    )
    about_link.click()
    print("Clicked ABOUT link")
 
    wait.until(
        EC.url_contains("/steve/manager/about")
    )
    print(f"Reached About page: {driver.current_url}")
 
    page_text = driver.find_element(By.TAG_NAME, "body").text
    print(f"\n--- About Page Content ---\n{page_text}")
 
finally:
    driver.quit()
    print("\nBrowser closed.")
 

成功!

Opened: http://localhost:8080/steve/manager/signin
Typed username
Typed password
Clicked Sign In
Logged in, current URL: http://localhost:8080/steve/manager/home?continue
Clicked ABOUT link
Reached About page: http://localhost:8080/steve/manager/about

--- About Page Content ---
HOME
DATA MANAGEMENT »
OPERATIONS »
SETTINGS
LOG
ABOUT
APIs
SIGN OUT
About SteVe
A new version (3.13.0) is available! Release Info - Download
Version: 3.8.0
Database Version: 1.0.8
Last Database Update: 2025-10-20 at 02:39
Log File: C:\Users\19048\logs\steve.log
GitHub Page: https://github.com/steve-community/steve
System Time: 2026-05-26T11:13:40.488Z
System Time Zone: UTC
Endpoint Info
SOAP endpoint for OCPP: http://172.24.192.1:8080/steve/services/CentralSystemService
http://192.168.0.102:8080/steve/services/CentralSystemService
WebSocket/JSON endpoint for OCPP: ws://172.24.192.1:8080/steve/websocket/CentralSystemService/(chargeBoxId)
ws://192.168.0.102:8080/steve/websocket/CentralSystemService/(chargeBoxId)

Browser closed.