360 Secure SkillHub
360 安全技能中心

Browser Smart Click

这是基于Playwright的浏览器智能点击工具，核心功能为自动检测cookie横幅、模态框、固定头等遮挡元素，自动执行同意、关闭等处理后重试点击，还支持等待元素变为可点击状态。典型场景为Playwright点击报元素被遮挡错误、页面弹窗遮挡目标元素时。输入为Playwright页面对象与元素选择器，输出包含点击结果、遮挡详情的ClickResult对象，可作为OpenClaw浏览器工具的补充使用。

paudyyin
paudyyin
热度 8.64
最近更新 2026-07-17 15:52:48
分类：自动化依赖：代码执行 / 联网浏览搜索应用场景：自动化脚本 / 工作流

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add browser-smart-click
Metadata
name
browser-smart-click
description
Retry browser clicks with automatic obstacle detection and dismissal. Use when browser tool clicks fail due to cookie banners, modals, or fixed headers blocking the target element.
tags
["browser","automation","playwright","click","overlay"]
dependencies
["playwright"]

browser-smart-click

解决 Playwright/OpenClaw browser 工具点击元素时被其他元素遮挡导致失败的问题ã€?

何时使用

  • browser click 报错 element is obscured / intercepted
  • 页面æœ?cookie banner、modal overlay、fixed header 遮挡目标元素
  • 需要智能等待元素变为可交互状æ€?- 需要自动关闭弹窗后重试点击

核心 API

Python 导入

from smart_click import SmartClick, smart_click, wait_for_clickable

smart_click(page, selector, **options) �ClickResult

一行调用智能点击：

result = await smart_click(page, '#submit-btn')
if result.success:
    print("Clicked!")
else:
    print(f"Failed: {result.message}")
    if result.blocked:
        print(f"Blocked by: {result.blocker}")

wait_for_clickable(page, selector, timeout=10000) �bool

等待元素可见且不被遮挡：

clickable = await wait_for_clickable(page, '#btn', timeout=5000)
if clickable:
    await page.click('#btn')

SmartClick 类（高级用法ï¼?

sc = SmartClick(auto_dismiss=True, max_retries=3)

# 基础点击
result = await sc.click(page, '#btn')

# 带重试的点击（滚åŠ?â†?JS click 回退ï¼?result = await sc.click_with_retry(page, '#btn', max_retries=3)

# 等待可点å‡?ok = await sc.wait_for_clickable(page, '#btn', timeout=10000)

ClickResult 格式

{
  "success": true,
  "target": {"selector": "#submit-btn", "text": "Submit"},
  "blocked": false,
  "blocker": null,
  "retry_count": 0,
  "message": "Clicked successfully"
}

被遮挡时ï¼?

{
  "success": false,
  "target": {"selector": "#submit-btn", "text": "Submit"},
  "blocked": true,
  "blocker": {
    "tag": "div",
    "class_name": "cookie-banner",
    "text": "We use cookies",
    "bounding_box": {"x": 0, "y": 0, "width": 800, "height": 100},
    "attributes": {}
  },
  "retry_count": 1,
  "message": "Element blocked by: <div class=\"cookie-banner\"> text=\"We use cookies\""
}

自动处理策略

遮挡类型 检测方å¼? 处理策略
Cookie Banner class/id 包含 cookie/consent/gdpr 点击 Accept/同意/允许 按钮
Modal/Dialog role=dialog æˆ?class 包含 modal/popup 点击 × 关闭按钮，或æŒ?Escape
Fixed Header style 包含 position:fixed/sticky 滚动页面后重è¯?
未知遮挡 elementFromPoint 检æµ? æŒ?Escape 后重è¯?

文件结构

skills/browser-smart-click/
├── SKILL.md                    # 本文ä»?├── scripts/
â”?  ├── smart_click.py          # 核心实现
â”?  └── test_smart_click.py     # 测试用例
└── references/
    └── usage.md                # 详细使用文档

测试

cd skills/browser-smart-click/scripts
pytest test_smart_click.py -v

ä¸?OpenClaw browser 工具配合

æœ?skill 不替æ?OpenClaw browser 工具，而是作为补充ï¼?

  1. 先用 browser snapshot 获取页面状æ€?2. ç”?browser act kind=click 尝试点击
  2. 如果失败（遮挡），导å…?smart_click 处理ï¼? ```python from smart_click import smart_click result = await smart_click(page, '#target')
  3. 或者在 OpenClaw çš?browser act evaluate 中直接使用遮挡检æµ?JS