الاختبار الشامل باستخدام Playwright

End-to-End (E2E) testing simulates a real user's journey through your application, from start to finish. It tests the entire stack: frontend, backend, and database.

Think of it as a robot user interacting with your app in a browser. This ensures all parts of your system work together as expected, catching issues that unit or integration tests might miss.

Playwright is a powerful open-source tool by Microsoft designed for reliable E2E testing. It offers several key advantages:

• Cross-browser: Tests Chromium, Firefox, and WebKit (Safari).
• Auto-wait: Automatically waits for elements to be ready, reducing flakiness.
• Robust actions: Simulates real user interactions like clicks, fills, and key presses.
• Fast & parallel: Can run tests across multiple browsers simultaneously.

To get started, you'll need to install Playwright in your Next.js project. This command sets up Playwright and downloads necessary browser binaries:

npm init playwright@latest

This will guide you through setting up a basic configuration file (playwright.config.ts) and an example test. Remember to have your Next.js application running (e.g., npm run dev) when running E2E tests!

Let's write a simple test to navigate to a page and check its title. Playwright tests are typically written in JavaScript or TypeScript.

This example assumes your Next.js app is running on http://localhost:3000.

Playwright provides powerful locators to find elements on the page. You can interact with these elements by filling input fields, clicking buttons, and more.

Common locators include getByRole(), getByText(), getByLabel(), and locator() for CSS selectors.

Playwright's expect API is used to make assertions about the state of your application. A key feature is auto-waiting, where Playwright automatically waits for elements to become visible, enabled, or stable before performing an action or assertion.

This significantly reduces the need for manual waits, making your tests more robust and less prone to flakiness.

Let's simulate a more complex user journey: a user logging in, navigating to a dashboard, and verifying content. This demonstrates how E2E tests cover multiple pages and interactions.

Ensure your Next.js application has a login page and a dashboard for this test to pass.

After writing your tests, you can run them from your terminal. Playwright provides a powerful test runner and various reporting options:

• Run all tests: npx playwright test
• Run specific test file: npx playwright test example.spec.js
• Run tests in headed mode (browser visible): npx playwright test --headed
• HTML Reporter: After tests run, open playwright-report/index.html for a detailed, interactive report.

To write effective and maintainable E2E tests:

• Target user-facing elements: Use locators that reflect how a user sees the page (e.g., getByRole, getByText).
• Use data-testid attributes: For elements without clear text or roles, add data-testid attributes for robust selection.
• Keep tests independent: Each test should set up its own state and not rely on previous tests.
• Balance test types: E2E tests are slower; use them for critical user flows, and rely on unit/integration tests for smaller components.

We've explored End-to-End testing and how Playwright helps you simulate real user interactions across your entire Next.js application.

You learned to set up Playwright, write tests that navigate, interact with elements, and assert outcomes. With its auto-waiting capabilities and cross-browser support, Playwright is a powerful tool for ensuring the reliability of your fullstack applications.