Playwright E2E Testing for Salesforce Lightning Web Components

Region Focus: This guide includes examples and patterns specifically relevant to USA-based development teams and applications.

Modern web applications require thorough testing strategies that account for regional requirements, diverse user bases, and complex technical architectures. This guide provides actionable Playwright patterns for your specific context.

Introduction

Test Salesforce LWC custom components, flows, and Apex REST endpoints using Playwright with Salesforce scratch org authentication. This guide covers the essential patterns, configurations, and strategies to handle this scenario reliably in your Playwright test suite.

Understanding the nuances of this topic allows your team to ship with confidence, reduce flakiness, and maintain high-quality automation across different environments.

Architecture Overview

graph TD
    Scratch["Salesforce Scratch Org"] --> LWC["Lightning Component"]
    LWC --> Apex["Apex Controller"]
    Apex --> DB["Salesforce DB"]

This structure ensures clean separation of concerns and maintainable test code.

Implementation Flow

sequenceDiagram
    participant Test as Playwright Test
    participant App as Application
    participant API as Backend / Mock API

    Test->>App: Navigate and interact
    App->>API: Trigger API call
    API-->>App: Return response
    App-->>Test: UI state updated
    Test->>Test: Assert outcome

Step-by-Step Guide

Follow this implementation to set up the pattern in your test suite.

1. Core Implementation

test('Salesforce lead form submits correctly', async ({ page }) => {
  // Login with session token from Salesforce CLI
  await page.goto('/lightning/n/Lead_Create');
  await page.getByLabel('First Name').fill('John');
  await page.getByLabel('Last Name').fill('Doe');
  await page.getByLabel('Company').fill('Acme Corp');
  await page.getByRole('button', { name: 'Save' }).click();
  await expect(page.getByText('Lead saved successfully')).toBeVisible();
});

2. Run and Verify

# Run this specific test file
npx playwright test --grep "Playwright E2E Testing"

Run with UI mode for debugging
npx playwright test --ui

Run across all browsers
npx playwright test --project=chromium --project=firefox --project=webkit

3. View Test Report

npx playwright show-report

Reference Table

Best Practices

Common Pitfalls

Frequently Asked Questions

How to authenticate with Salesforce in Playwright tests?

Use the Salesforce CLI to get a session ID, then set it as a cookie in Playwright's browser context.

How to test LWC components in isolation?

Use Salesforce's LWC Dev Server and point Playwright tests at the local component server URL.

Can Playwright handle Salesforce popup windows?

Yes, use page.waitForEvent('popup') to capture Salesforce lookup dialogs and detail panels.

How to test Salesforce Flows with Playwright?

Navigate through each flow screen step by step, filling in required fields and clicking Next.

How to test Salesforce reports and dashboards?

Wait for dashboard widgets to load using page.waitForSelector() before asserting metric values.

Summary

Test Salesforce LWC custom components, flows, and Apex REST endpoints using Playwright with Salesforce scratch org authentication. By following these patterns, your team can build a reliable, maintainable automation suite that works across environments and handles edge cases gracefully.

Related Articles