الواجهات والتصميم

اختبار التجاوب

اختبار تلقائي للواجهات على أحجام شاشات مختلفة للتأكد من التوافق مع جميع الأجهزة.

Claude Code Copilot Cursor Windsurf

نظرة عامة

اختبار التجاوب يمكّن وكيل البرمجة من التحقق تلقائياً من أن الواجهات تعمل بشكل صحيح على مختلف أحجام الشاشات والأجهزة. يستخدم Playwright لمحاكاة أجهزة مختلفة والتقاط لقطات شاشة للمقارنة.

يستطيع الوكيل تشغيل اختبارات على أحجام Mobile و Tablet و Desktop، التقاط لقطات شاشة لكل حجم، ومقارنتها بالتصميم المطلوب. عند اكتشاف مشكلة تجاوب يمكنه اقتراح إصلاحات CSS أو Tailwind مناسبة.

ضرورية لتطبيقات الويب الحديثة التي يجب أن تعمل على جميع الأجهزة من الهاتف المحمول إلى الشاشات الكبيرة.

لمن هذه الأداة؟

مطوري الواجهات الذين يبنون تطبيقات متجاوبة
مختبري QA الذين يتحققون من التوافق مع الأجهزة المختلفة
فرق التطوير التي تحتاج اختبارات بصرية تلقائية
مطورين يصلحون مشاكل التجاوب بسرعة

التثبيت

إعداد Claude Code

npm install -D @playwright/test
npx playwright install

الإعدادات

// playwright.config.ts
import { defineConfig, devices } from "@playwright/test";
export default defineConfig({
  projects: [
    { name: "Mobile", use: { ...devices["iPhone 14"] } },
    { name: "Tablet", use: { ...devices["iPad Pro 11"] } },
    { name: "Desktop", use: { viewport: { width: 1440, height: 900 } } },
  ],
});

زيارة المصدر (Playwright Docs)

مهارات مشابهة

الواجهات والتصميم

Figma MCP

تحويل تصاميم Figma إلى كود مباشرة مع الحفاظ على الأنماط والمكونات.

Claude Code Cursor Windsurf

الواجهات والتصميم

توثيق المكونات مع Storybook

إنشاء توثيق تفاعلي لمكونات الواجهة مع أمثلة حية وحالات استخدام.

Claude Code Copilot Cursor

الواجهات والتصميم

Tailwind CSS IntelliSense

إكمال تلقائي ذكي لأصناف Tailwind مع معاينة الألوان والقيم أثناء الكتابة.

Claude Code Copilot Cursor