技能 browsing-with-playwright
🌐

browsing-with-playwright

低風險 🌐 網路存取⚡ 包含腳本⚙️ 外部命令

أتمتة تفاعلات المتصفح باستخدام Playwright MCP

تتطلب مهام أتمتة الويب التنقل اليدوي وملء النماذج بشكل متكرر. توفر هذه المهارة واجهة Model Context Protocol لـ Playwright، مما يمكّن مساعدي الذكاء الاصطناعي من التنقل بين الصفحات، والتفاعل مع العناصر، واستخراج البيانات، والتقاط لقطات شاشة برمجياً.

支援: Claude Codex Code(CC)
🥉 74 青銅
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「browsing-with-playwright」。 انتقل إلى https://example.com واعثر على زر الإرسال

預期結果:

  • تم تحميل الصفحة بنجاح: https://example.com
  • العنصر الموجود: زر الإرسال (المرجع: e5)
  • العنصر قابل للنقر وجاهز للتفاعل

正在使用「browsing-with-playwright」。 التقط لقطة شاشة لصفحة التسعير

預期結果:

  • تم الانتقال إلى صفحة التسعير
  • تم حفظ لقطة شاشة كاملة في pricing-screenshot.png
  • أبعاد الصورة: 1920 × 2840 بكسل

安全審計

低風險
v5 • 1/16/2026

Legitimate browser automation skill using official Playwright MCP protocol. All network traffic is localhost-only to the MCP server. Shell command patterns in static findings are false positives from markdown documentation formatting and legitimate local server lifecycle management. No data exfiltration or external network calls detected.

7
已掃描檔案
1,865
分析行數
4
發現項
5
審計總數
低風險問題 (1)
scripts/mcp-client.py:204-212
StdioTransport uses shell=True
The StdioTransport class uses shell=True for subprocess spawning when connecting to MCP servers. While this is legitimate for local MCP server spawning, the pattern is noted for completeness.

風險因素

🌐 網路存取 (1)
scripts/mcp-client.py:33-34
⚡ 包含腳本 (3)
scripts/start-server.sh:1-26 scripts/stop-server.sh:1-29 scripts/verify.py:1-21
⚙️ 外部命令 (1)
scripts/mcp-client.py:191-212
審計者: claude 查看審計歷史 →

品質評分

64
架構
100
可維護性
85
內容
23
社群
88
安全
91
規範符合性

你能建構什麼

اختبار واجهة المستخدم

أتمتة سير عمل الاختبار عن طريق التنقل بين الصفحات، وملء النماذج، والتحقق من تغييرات المحتوى برمجياً.

كشط الويب

استخراج البيانات المنظمة من مواقع الويب عن طريق التنقل بين الصفحات والتقاط محتوى العناصر.

أتمتة النماذج

اختبار تقديم النماذج والتحقق منها عن طريق ملء الحقول برمجياً والتعامل مع الحوارات.

試試這些提示

تنقل الصفحة 
اذهب إلى https://example.com وأظهر لي العناصر الموجودة على الصفحة.
ملء نموذج 
انتقل إلى صفحة تسجيل الدخول، والتقط لقطة للعثور على حقول النموذج، ثماملأ البريد الإلكتروني وكلمة المرور وأرسل.
استخراج البيانات 
انتقل إلى https://news-site.com واستخرج جميع عناوين المقالات والروابط من الصفحة الرئيسية.
لقطة شاشة 
التقط لقطة شاشة كاملة لـ https://example.com واحفظها في example-screenshot.png.

最佳實務

  • قم دائماً بتشغيل browser_snapshot قبل التفاعل مع عناصر الصفحة للحصول على مراجع دقيقة
  • استخدم browser_wait_for للتعامل مع تحميل المحتوى الديناميكي
  • أوقف خادم MCP عند اكتمال عمل المتصفح لتحرير الموارد

避免

  • لا تستخدم browser_evaluate لتنفيذ أكواد غير موثوقة من مصادر خارجية
  • لا تحاول تجاوز المصادقة أو الوصول إلى محتوى مقيد
  • لا تترك الخادم يعمل بشكل غير محدود دون استخدام

常見問題

ما المنصات التي تدعم هذه المهارة؟
يعمل مع Claude وCodex وClaude Code على أنظمة macOS وLinux وWindows مع تثبيت Playwright.
ما حدود الموارد؟
يعمل المتصفح محلياً على جهازك. يعتمد استخدام الموارد على الصفحات المُحملة وتعقيد التفاعلات.
كيف يمكنني الدمج مع الأدوات الموجودة؟
توفر المهارة واجهة MCP. قم بتكوين أداة الذكاء الاصطناعي للاتصال بـ localhost:8808 بعد تشغيل الخادم.
هل بيانات التصفح الخاصة بي آمنة؟
جميع أنشطة المتصفح محلية. يعمل خادم MCP على localhost ولا ينقل البيانات خارجياً.
لماذا يفشل التحقق؟
تأكد من تثبيت متصفحات Playwright باستخدام npx playwright install. ابدأ الخادم باستخدام bash scripts/start-server.sh.
كيف يقارن بـ puppeteer؟
يستخدم هذا Playwright الذي يوفر دعم المتصفحات المتعددة، ومعالجة غير متزامنة أفضل، وبروتوكول MCP الموحد للدمج مع الذكاء الاصطناعي.

開發者詳情

作者

Asmayaseen

授權

MIT

儲存庫

https://github.com/Asmayaseen/hackathon-2/tree/main/.claude/skills/browsing-with-playwright

引用

main

檔案結構

📁 references/

📄 playwright-tools.md

📁 scripts/

📄 mcp-client.py

📄 start-server.sh

📄 stop-server.sh

📄 verify.py

📄 SKILL.md