browser-testing-with-screenshots
أتمتة اختبار المتصفح مع التحقق البصري
اختبار المتصفح اليدوي يستغرق وقتًا طويلًا وعرضة للأخطاء. توفر هذه الأداة تحكمًا آليًا في متصفح Chrome من خلال بروتوكول DevTools للتحقق الموثوق من واجهة المستخدم والتقاط لقطات الشاشة.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“browser-testing-with-screenshots”。 اختبار تدفق تسجيل الدخول عن طريق الانتقال إلى صفحة تسجيل الدخول، والتقاط صورة، وملء بيانات اعتماد الاختبار، والإرسال، والتقاط صورة لوحة التحكم.
预期结果:
- المتصفح started مع ملف تعريف جديد على المنفذ 9222
- انتقل إلى http://localhost:5172/login
- تم حفظ الصورة: screenshot_20241201_143052.png
- تم ملء حقل اسم المستخدم بـ testuser
- تم ملء حقل كلمة المرور بـ password123
- تم النقر على زر تسجيل الدخول عبر محدد العنصر
- انتقل إلى http://localhost:5172/dashboard
- تم حفظ صورة لوحة التحكم: screenshot_20241201_143115.png
- اكتمل اختبار تدفق تسجيل الدخول - تم التقاط صورتين
正在使用“browser-testing-with-screenshots”。 التحقق من تحميل صفحة الإعدادات بشكل صحيح والتحقق من أي أخطاء في وحدة التحكم.
预期结果:
- انتقل إلى http://localhost:5172/settings
- تم حفظ الصورة: screenshot_20241201_150230.png
- عنوان الصفحة: الإعدادات - تطبيقي
- فحص وحدة التحكم: لم يتم اكتشاف أخطاء
- تم تحميل صفحة الإعدادات بنجاح
安全审计
安全This is a pure documentation skill containing only markdown instructions for browser automation. No executable code, scripts, or network calls exist in the skill itself. Static findings flagged standard bash scripting patterns (command substitution, shell invocation) and external tool references, but these are legitimate browser testing practices. The actual browser automation tools (browser-start.js, browser-screenshot.js) must be installed separately from agent-tools repository.
风险因素
🌐 网络访问 (12)
📁 文件系统访问 (2)
⚙️ 外部命令 (52)
质量评分
你能构建什么
التحقق من تغييرات واجهة المستخدم
اختبار تطبيقات localhost عن طريق التقاط لقطات شاشة قبل وبعد تغييرات الكود لاكتشاف الانحدار البصري.
وثائق الاختبار البصري
أتمتة سيناريوهات الاختبار من طرف إلى طرف والتقاط أدلة لقطات الشاشة لتقارير الاختبار ووثائق الأخطاء.
توثيق سير العمل
إنشاء أدلة بصرية خطوة بخطوة عن طريق أتمتة التنقل في المتصفح والتقاط لقطات الشاشة في كل خطوة.
试试这些提示
بدء مثيل جديد من Chrome مع التصحيح عن بُعد للاختبار.
الانتقال إلى http://localhost:5172/dashboard والتقاط صورة للتحقق من تحميل الصفحة بشكل صحيح.
الانتقال إلى صفحة تسجيل الدخول، وملء حقلي اسم المستخدم وكلمة المرور باستخدام تقييم المتصفح، والنقر على زر تسجيل الدخول، والتحقق من تحميل لوحة التحكم مع صورة.
الانتقال إلى صفحة الإعدادات، والتقاط صورة خط الأساس، وإجراء تغيير، والتقاط صورة أخرى، ومقارنة الاختلافات البصرية.
最佳实践
- أضف تأخيرات النوم بعد التنقل لضمان تحميل محتوى الصفحة بالكامل قبل التقاط لقطات الشاشة
- استخدم browser-pick.js لتحديد العناصر بدلاً من محددات CSS المُعرَّبة
- ابدأ المتصفح بعلامة --fresh فقط عند الحاجة إلى حالة نظيفة؛ استخدم ملف التع الافتراضي للحفاظ على جلسات تسجيل الدخول
避免
- تجاهل تأخيرات النوم بعد التنقل يؤدي إلى التقاط لقطات شاشة لحالات التحميل
- تحديد محددات CSS المُعرَّبة يؤدي إلى كسر الاختبارات عند تغيير مكونات واجهة المستخدم
- عدم التحقق من اتصال المتصفح قبل تشغيل الاختبارات يؤدي إلى رسائل أخطاء مربكة
常见问题
ما المتصفحات المدعومة؟
ما حدود الأداء؟
كيف تتكامل مع أدوات أخرى؟
هل بيانات التصفح الخاصة بي آمنة؟
لماذا أحصل على أخطاء رفض الاتصال؟
كيف يختلف هذا عن Playwright أو Cypress؟
开发者详情
许可证
MIT
仓库
https://github.com/AgentWorkforce/relay/tree/main/.claude/skills/browser-testing-with-screenshots引用
main
文件结构
📄 SKILL.md