📋 محتويات الصفحة
📖 الوصف
Visual Regression Testing هو تقنية لاكتشاف الاختلافات البصرية غير المقصودة في UI عبر مقارنة لقطات الشاشة. يستخدم عدة أدوات مثل Chromatic، Percy، BackstopJS، etc. يهدف Visual Regression إلى ضمان استقرار التصميم واكتشاف التغييرات غير المرغوب فيها في UI قبل النشر.
🎯 يستخدم في
مجالات استخدام هذه الأداة
•
Visual Testing
•
Design Stability
•
UI Testing
•
Regression Testing
•
Design System Testing
✨ المميزات
أبرز مميزات هذه الأداة
✓
Easy Detect Changes
✓
easy Multiple Tools
✓
easy CI/CD
✓
easy Automation
✓
easy Reports
✓
easy Snapshot Comparison
✓
easy Browser Support
⚠️ العيوب
نقاط يجب مراعاتها
×
يحتاج تكوين
×
قد يكون بطيئاً
×
يحتاج صيانة
×
قد يكتشف تغييرات مزيفة
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// Visual Regression with Playwright
// npm install @playwright/test
import { test, expect } from '@playwright/test'
test('visual regression homepage', async ({ page }) => {
await page.goto('https://example.com')
await expect(page).toHaveScreenshot('homepage.png', {
maxDiffPixelRatio: 0.01
})
})
// أو مع Chromatic
import { composeStories } from '@storybook/react'
import * as stories from './Button.stories'
const { Primary, Secondary } = composeStories(stories)
test('Button Primary renders correctly', () => {
render(<Primary />)
// Chromatic يدير snapshots
})📚 أدوات أخرى في Testing
قد يعجبك أيضاً