Master E2E Testing with NX and Playwright

Mastering E2E Testing Using NX in Playwright: A Comprehensive Guide

End-to-end (E2E) testing is a critical component of modern software development, ensuring that all parts of your application work together as expected. When combined with the power of NX and the flexibility of Playwright, you have a robust solution for testing complex applications in monorepo environments. This comprehensive guide will walk you through everything you need to know about setting up and implementing E2E testing using NX in Playwright.

Understanding E2E Testing with Playwright

End-to-end testing represents the final frontier in software quality assurance, simulating real user scenarios to validate that your application functions as intended from start to finish. Playwright has emerged as a leading tool in this space, offering a powerful automation framework that enables developers to write tests that interact with web applications in real browsers. Unlike traditional testing approaches that might only verify isolated components, E2E testing using Playwright ensures that all parts of your application work together seamlessly, catching integration issues that might otherwise slip through the cracks.

End-to-end testing is crucial for ensuring your web applications function as expected from a user's perspective. Combining NX's powerful monorepo capabilities with Playwright's robust browser automation creates a powerful testing strategy that can significantly improve your development workflow and application quality. Unlike unit tests that verify individual components in isolation, E2E tests validate that different parts of your application work together correctly when deployed to a production-like environment.

The primary advantage of Playwright for E2E testing lies in its ability to automate browsers across multiple platforms—Chromium, Firefox, and WebKit—with a single API. This cross-browser compatibility is crucial in today's diverse web landscape where applications must perform consistently across different environments. Playwright's auto-wait feature eliminates the flakiness common in other testing frameworks by automatically waiting for elements to be ready before interacting with them, resulting in more reliable and maintainable test suites.

Key benefits of using Playwright for E2E testing include:

• Cross-browser testing across Chromium, Firefox, and WebKit
• Automatic waiting mechanisms that eliminate flaky tests
• Powerful debugging tools and trace viewer for troubleshooting
• Network interception and mocking capabilities
• Parallel execution for faster test runs
• Modern JavaScript/TypeScript API with excellent TypeScript support

Playwright allows you to automate user interactions with your application in real browsers, making assertions about the UI, network requests, and application state. This approach helps catch integration issues that might be missed by other testing methods. When combined with NX's monorepo management, you can efficiently organize, run, and maintain your E2E tests across multiple applications and libraries within your project.

Introduction to NX and Its Benefits for Monorepo Testing

NX is a powerful build system and set of integrated tools that help developers create and maintain high-performance applications in monorepo environments. When it comes to E2E testing using NX in Playwright, NX brings several advantages that streamline the testing process across multiple applications and libraries. The monorepo approach, which involves storing multiple related projects in a single repository, has become increasingly popular for managing complex applications with shared dependencies and code.

NX's caching mechanism is one of its standout features for testing. When running tests, NX intelligently caches the results of previous test runs, dramatically reducing the time it takes to execute tests when changes don't affect their outcomes. This caching is particularly valuable in monorepos where dependencies between applications can create complex dependency chains. NX's affected command allows developers to run only the tests that are impacted by their changes, making the feedback loop faster and more efficient.

Additional benefits of NX for E2E testing include:

• Integrated support for multiple frameworks and technologies
• Dependency graph visualization for better understanding of project relationships
• Distributed task execution for improved performance
• Built-in support for code generation and scaffolding
• Consistent configuration across all projects in the monorepo
• Isolated test environments for different applications
• Shared test utilities and configurations
• Efficient dependency management
• Optimized test execution with caching

NX provides excellent tooling for managing complex applications, and its workspace organization makes it ideal for implementing E2E testing strategies. The first step in setting up your Nx workspace for Playwright testing is to ensure you have Node.js and Nx CLI installed globally.

Setting Up E2E Testing Using NX in Playwright

The setup process for E2E testing using NX in Playwright begins with installing the necessary dependencies and configuring your monorepo to support Playwright tests. First, ensure you have NX installed in your project. If not, you can add it using the package manager of your choice:

npm install -g nx

Once NX is installed, you can use its built-in generator to set up Playwright in your monorepo. Navigate to your workspace root and run the following command:

nx g @nx/playwright:project

This command will create a dedicated Playwright project within your NX workspace, complete with all the necessary configuration files and example tests. The generator will prompt you for a few details, such as the name of your E2E project and which applications you want to test. By default, it creates a structure that follows NX's conventions, with tests located in a dedicated e2e folder.

After the generator completes, you'll need to install Playwright's browser dependencies:

npx playwright install

This command downloads the necessary browser binaries that Playwright uses to run tests. You can now run your first set of tests using the NX command:

nx test e2e-app

Replace "e2e-app" with the name you chose for your Playwright project during the setup process. NX will automatically detect the test configuration and execute the tests, providing detailed output about the test results.

Before diving into Playwright configuration, it's essential to have a properly structured Nx monorepo. The typical folder structure for an Nx monorepo with Playwright might look like this:

• /apps - Contains your client applications
• /libs - Contains shared libraries
• /tools - Contains tools and utilities
• /apps/<app-name>/e2e - Contains E2E tests for specific applications
• /e2e - Contains shared E2E utilities or configuration

Configuring Playwright in Nx

Once your Nx workspace is prepared, the next step is to configure Playwright specifically for your monorepo. Nx provides a dedicated plugin for Playwright that simplifies the setup process. This plugin handles the installation of Playwright, creates the necessary configuration files, and sets up the test scripts in your package.json.

The configuration process typically involves running the Nx generator for Playwright, which will prompt you with several options. You can choose whether to install Playwright as a global dependency or within your project, specify the browsers you want to test with, and determine whether you want to create an example test file. After running the generator, Nx will create a playwright.config.ts file at the root of your workspace or in the specific application directory.

Here's an example of a basic Playwright configuration in an Nx workspace:

import { defineConfig, devices } from '@playwright/test';

/**
 * @see https://playwright.dev/docs/test-configuration
 */
export default defineConfig({
  testDir: './src',
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Base URL to use in actions like `await page.goto('/')`. */
    baseURL: 'http://localhost:4200',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
  },

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },

    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },

    /* Test against mobile viewports. */
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
    {
      name: 'Mobile Safari',
      use: { ...devices['iPhone 12'] },
    },

    /* Test against branded browsers. */
    {
      name: 'Microsoft Edge',
      use: { ...devices['Desktop Edge'], channel: 'msedge' },
    },
    {
      name: 'Google Chrome',
      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
    },
  ],

  /* Run your local dev server before the tests */
  webServer: {
    command: 'npm run start',
    url: 'http://localhost:4200',
    reuseExistingServer: !process.env.CI,
  },
});

NX's workspace structure provides several advantages for E2E testing:

• Isolated test environments for different applications
• Shared test utilities and configurations
• Efficient dependency management
• Optimized test execution with caching

Creating Your First E2E Tests with Playwright and NX

Once your NX workspace is configured with Playwright, you can start creating E2E tests. NX provides a structured approach to organizing your tests, making it easier to maintain and scale your testing strategy as your application grows.

NX's generators can help you create test files that follow the project's conventions. To generate a new test file, you can use the following command:

nx g @nx/playwright:test

This command will prompt you for a test name and create a new test file in the appropriate directory. Alternatively, you can create test files manually in the e2e directory of your application.

Here's an example of a basic E2E test using Playwright in an NX workspace:

import { test, expect } from '@playwright/test';

test.describe('Home Page', () => {
  test('should display welcome message', async ({ page }) => {
    await page.goto('/');
    
    // Expect the page to contain a welcome message
    await expect(page.locator('h1')).toContainText('Welcome');
  });

  test('should navigate to login page', async ({ page }) => {
    await page.goto('/');
    
    // Click the login button
    await page.click('text=Login');
    
    // Expect to be redirected to the login page
    await expect(page).toHaveURL('/login');
  });
});

When working with NX, you can leverage the dependency graph to run tests more efficiently. NX's affected command allows you to run only the tests that are impacted by your changes:

nx affected:e2e

This command will analyze your changes and run only the E2E tests that are affected by those changes, significantly reducing feedback time in your development workflow.

For more complex scenarios, you might want to create shared test utilities that can be reused across multiple applications. NX's monorepo structure makes it easy to create shared test utilities in a dedicated library:

// libs/shared-e2e-utils/src/lib/auth-helper.ts
export class AuthHelper {
  static async login(page: Page, username: string, password: string) {
    await page.goto('/login');
    await page.fill('#username', username);
    await page.fill('#password', password);
    await page.click('button[type="submit"]');
  }

  static async logout(page: Page) {
    await page.click('#user-menu');
    await page.click('text=Logout');
  }
}

You can then use this shared utility in your tests:

import { test, expect } from '@playwright/test';
import { AuthHelper } from '@my-org/shared-e2e-utils';

test('user can login and logout', async ({ page }) => {
  await AuthHelper.login(page, 'testuser', 'password123');
  await expect(page.locator('#user-menu')).toBeVisible();
  
  await AuthHelper.logout(page);
  await expect(page).toHaveURL('/login');
});

Advanced Testing Techniques with Playwright and NX

As your application grows, you'll likely encounter more complex testing scenarios. Playwright and NX provide several advanced features that can help you handle these scenarios effectively.

Handling Authentication

For applications that require authentication, you can use Playwright's storage state to maintain login sessions across tests:

import { test, expect } from '@playwright/test';

test.describe('Authenticated Tests', () => {
  test.use({ storageState: 'auth.json' });

  test('user can access dashboard', async ({ page }) => {
    await page.goto('/dashboard');
    await expect(page.locator('#dashboard-content')).toBeVisible();
  });
});

You can create the auth.json file by logging in once and saving the storage state:

import { chromium, Browser, BrowserContext } from 'playwright';

async function login() {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  
  await page.goto('/login');
  await page.fill('#username', 'testuser');
  await page.fill('#password', 'password123');
  await page.click('button[type="submit"]');
  
  await context.storageState({ path: 'auth.json' });
  await browser.close();
}

login();

Mocking API Calls

Playwright allows you to intercept and mock API calls, which is useful for testing different scenarios without relying on a backend:

import { test, expect } from '@playwright/test';

test('displays loading state while fetching data', async ({ page }) => {
  // Mock the API call
  await page.route('**/api/data', async route => {
    await route.abort();
  });
  
  await page.goto('/data-page');
  await expect(page.locator('.loading-spinner')).toBeVisible();
});

Testing Multiple Applications

In a monorepo, you might have multiple applications that need to be tested together. NX allows you to run tests for multiple applications simultaneously:

nx test app1-e2e
nx test app2-e2e

Or run them in parallel:

nx run-many --target=test --projects=app1-e2e,app2-e2e --parallel

Visual Testing

Playwright can be used for visual regression testing by comparing screenshots:

import { test, expect } from '@playwright/test';

test('should match expected visual appearance', async ({ page }) => {
  await page.goto('/');
  
  // Take a screenshot and compare with baseline
  await expect(page).toHaveScreenshot('home-page.png', {
    maxDiffPixelRatio: 0.01,
  });
});

Best Practices for E2E Testing with Playwright and NX

To ensure your E2E tests remain effective and maintainable, consider the following best practices:

1. Write Maintainable Tests

• Use descriptive test names and organize tests in logical groups
• Create custom locators for frequently used elements
• Extract reusable test utilities and page objects
• Avoid hardcoding test data when possible

2. Optimize Test Performance

• Use NX's caching and affected commands to run only necessary tests
• Parallelize tests where possible
• Minimize the number of pages and contexts created in each test
• Use Playwright's auto-wait features to avoid unnecessary waits

3. Handle Test Data

• Use factories or fixtures to generate test data
• Clean up after tests to avoid state pollution
• Consider using separate test

Frequently Asked Questions

• What is E2E testing with Playwright?
  End-to-end testing with Playwright involves simulating real user scenarios in browsers to validate that all parts of your application work together as expected, catching integration issues that might be missed by other testing methods.
• Why use NX for E2E testing in a monorepo?
  NX provides caching mechanisms, dependency graph visualization, and efficient task execution that streamline testing across multiple applications in a monorepo, significantly reducing feedback time in your development workflow.
• How do I set up Playwright with NX?
  Install NX globally, use the NX generator to create a Playwright project with 'nx g @nx/playwright:project', install browser dependencies with 'npx playwright install', and run tests using 'nx test e2e-app'.
• What are the benefits of using Playwright for E2E testing?
  Playwright offers cross-browser testing, automatic waiting mechanisms that eliminate flaky tests, powerful debugging tools, network interception capabilities, and parallel execution for faster test runs.
• How can I optimize E2E tests with NX and Playwright?
  Use NX's affected commands to run only impacted tests, parallelize test execution, minimize page contexts, leverage Playwright's auto-wait features, and create reusable test utilities and page objects.