End-to-End Testing

E2E

الاختبار من البداية إلى النهاية

Intermediatetesting1 min read
E2E testinge2e testbrowser testingPlaywrightCypress

Definition

Tests that simulate a real user interacting with the full application in a browser — verifying the entire system works together from UI to database.

اختبارات تُحاكي مستخدماً حقيقياً يتفاعل مع التطبيق الكامل في متصفح — تتحقق من عمل النظام بأكمله معاً من واجهة المستخدم إلى قاعدة البيانات.

Why It Matters

TypeScript compilation passing and unit tests passing do not mean the product works. A sprint is NOT complete just because the build passes — E2E tests (or manual smoke tests of the golden paths) verify that users can actually accomplish their goals on the live product.

اجتياز تجميع TypeScript واختبارات الوحدة لا يعني أن المنتج يعمل. Sprint ليس مكتملاً فقط لأن البناء نجح — اختبارات E2E (أو اختبارات الدخان اليدوية للمسارات الذهبية) تتحقق من أن المستخدمين يستطيعون فعلاً تحقيق أهدافهم على المنتج الحي.

Full Definition

End-to-end (E2E) tests automate a real browser to interact with your app exactly as a user would: click buttons, fill forms, navigate pages, and assert that the resulting state is correct. Unlike unit tests (which test a function in isolation) or integration tests (which test component combinations), E2E tests exercise the entire stack — frontend, backend, database, and all integrations. Tools: Playwright (Microsoft) and Cypress are the most widely used. E2E tests are the slowest and most expensive to run but provide the highest confidence that the product actually works.
اختبارات E2E تُؤتمت متصفحاً حقيقياً للتفاعل مع تطبيقك تماماً كما يفعل المستخدم: النقر على الأزرار وملء النماذج والتنقل بين الصفحات والتأكيد على صحة الحالة الناتجة. على عكس اختبارات الوحدة (التي تختبر دالة منعزلة) أو اختبارات التكامل (التي تختبر تركيبات المكونات)، تُمارس اختبارات E2E المجموعة الكاملة — الواجهة الأمامية والخلفية وقاعدة البيانات وجميع التكاملات. الأدوات: Playwright (Microsoft) وCypress هما الأكثر استخداماً. اختبارات E2E هي الأبطأ والأكثر تكلفةً في التشغيل لكنها توفر أعلى مستوى من الثقة بأن المنتج يعمل فعلاً.

Example Usage

Playwright E2E test for glossary: `test('user can search and read a glossary term', async ({ page }) => { await page.goto('/glossary'); await page.fill('[placeholder="Search terms"]', 'RAG'); await page.click('text=Retrieval-Augmented Generation'); await expect(page.locator('h1')).toContainText('Retrieval-Augmented Generation'); });`

اختبار Playwright E2E للقاموس: `test('user can search and read a glossary term', async ({ page }) => { await page.goto('/glossary'); await page.fill('[placeholder="Search terms"]', 'RAG'); await page.click('text=Retrieval-Augmented Generation'); await expect(page.locator('h1')).toContainText('Retrieval-Augmented Generation'); });`

Knowledge Graph

Avoid these mistakes when using End-to-End Testing:

1

Writing E2E tests before the feature is stable — E2E tests are brittle; write them after the feature is working, not during development

2

Testing implementation details instead of user behaviors — if a test breaks when you change a CSS class name with no visual change, it is testing the wrong thing

3

Running E2E tests on every commit — they are slow (minutes); run them in CI on PR merge or nightly, not on every push

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using End-to-End Testing.

Explain:
1. What is End-to-End Testing and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Writing E2E tests before the feature is stable — E2E tests are brittle; write them after the feature is working, not during development, Testing implementation details instead of user behaviors — if a test breaks when you change a CSS class name with no visual change, it is testing the wrong thing, Running E2E tests on every commit — they are slow (minutes); run them in CI on PR merge or nightly, not on every push
5. Best practices and production tips

Official Resources