Playwright Primer for SAP Testers

A ground-up introduction to Playwright and Praman for testers coming from SAP testing backgrounds (ECATT, Tosca, QTP/UFT, Solution Manager, CBTA). No prior Playwright or programming experience is assumed.

What Is Playwright?

Playwright is an open-source test automation framework from Microsoft. It drives real browsers (Chrome, Firefox, Safari) to simulate user interactions -- clicking buttons, filling forms, reading text -- and verifies that applications behave correctly.

Unlike SAP GUI-based tools, Playwright works with web applications in the browser. Since SAP Fiori, SAP UI5, and BTP apps all run in the browser, Playwright is a natural fit.

Why Not ECATT or Tosca?

Concern	ECATT / Tosca	Playwright + Praman
SAP GUI support	Native	Not applicable (browser only)
Fiori / UI5 web apps	Limited or plugin-required	Native + UI5-aware
Parallel execution	Difficult	Built-in
CI/CD integration	Complex setup	First-class (GitHub Actions, Azure DevOps, Jenkins)
Cost	Licensed	Open source
Version control	Limited	Git-native (tests are code files)
AI integration	None	Built-in LLM + agentic support

When to Keep SAP GUI Tools

If your tests target SAP GUI transactions (not Fiori web apps), tools like ECATT or Tosca remain the right choice. Playwright and Praman target browser-based SAP applications only.

Prerequisite Learning Path

If you are starting from zero programming experience, follow this learning path before writing Praman tests. Each step builds on the previous one.

Step 1: Command Line Basics (1 hour)

Learn to navigate directories, run commands, and use a terminal.

Windows: Open PowerShell or Windows Terminal
macOS/Linux: Open Terminal

Key commands to learn:

# Navigate to a folder
cd Documents/my-project

# List files
ls

# Run a Node.js script
node my-script.js

# Run tests
npx playwright test

Step 2: Node.js and npm (1 hour)

Install Node.js (version 20 or later) from nodejs.org.

# Verify installation
node --version   # Should print v20.x.x or later
npm --version    # Should print 10.x.x or later

# Create a new project
mkdir my-sap-tests
cd my-sap-tests
npm init -y

# Install dependencies
npm install playwright-praman @playwright/test
npx playwright install chromium

Step 3: TypeScript Basics (2-3 hours)

Tests are written in TypeScript, a typed version of JavaScript. You need to understand:

Variables: const name = 'John'; (a value that does not change)
Strings: 'Hello' or "Hello" or `Hello ${name}`
Objects: { vendor: '100001', amount: 500 } (a group of named values)
Arrays: ['item1', 'item2', 'item3'] (a list of values)
Functions: function greet(name: string) { return 'Hello ' + name; }
Arrow functions: const greet = (name: string) => 'Hello ' + name;

Free resource: TypeScript in 5 minutes

Step 4: async/await (30 minutes)

Browser operations take time (loading pages, finding elements, clicking buttons). TypeScript uses async/await to handle this waiting gracefully.

// BAD: This does NOT wait for the page to load
function badExample() {
  page.goto('https://my-app.com'); // Returns immediately, page not loaded yet
}

// GOOD: This waits for the page to finish loading
async function goodExample() {
  await page.goto('https://my-app.com'); // Pauses here until page loads
}

Rule of thumb: Every function that interacts with the browser needs async in its declaration and await before each browser call.

Your First Playwright Test

Create a file called tests/hello.test.ts:

import { test, expect } from 'playwright-praman';

test('my first test', async ({ page }) => {
  // Go to a web page
  await page.goto('https://example.com');

  // Check the page title
  await expect(page).toHaveTitle('Example Domain');
});

Run it:

npx playwright test tests/hello.test.ts

Anatomy of a Test

import { test, expect } from 'playwright-praman';
//     ^^^^  ^^^^^^
//     |     Tool for checking results ("assertions")
//     Framework for defining tests

test('description of what this test verifies', async ({ page }) => {
  //   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^       ^^^^^^
  //   Human-readable test name                          "page" = a browser tab

  await page.goto('https://my-app.com');
  //    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  //    Navigate the browser to this URL

  const heading = page.locator('h1');
  //                   ^^^^^^^
  //                   Find an element on the page

  await expect(heading).toHaveText('Welcome');
  //    ^^^^^^                     ^^^^^^^^^^
  //    Assert/verify              Expected value
});

Fixtures: Automatic Setup

In ECATT, you might use "variants" to inject test data. In Playwright, fixtures provide pre-configured objects to your tests automatically.

import { test, expect } from 'playwright-praman';

test('using fixtures', async ({ ui5, ui5Navigation, sapAuth }) => {
  //                           ^^^  ^^^^^^^^^^^^^^  ^^^^^^^
  //                           |    |               Authentication helper
  //                           |    Navigation helper (9 methods)
  //                           UI5 control finder and interaction API

  await ui5Navigation.navigateToApp('PurchaseOrder-manage');
  const btn = await ui5.control({ controlType: 'sap.m.Button', properties: { text: 'Create' } });
  await expect(btn).toBeUI5Enabled();
});

You request fixtures by name in the test function signature. Praman provides 12 fixture modules:

Fixture	What It Does
`ui5`	Find and interact with UI5 controls
`ui5Navigation`	Navigate FLP apps, tiles, intents
`sapAuth`	Login/logout with 6 strategies
`fe`	Fiori Elements List Report + Object Page helpers
`pramanAI`	AI page discovery and test generation
`intent`	Business domain intents (procurement, sales, finance)
`ui5Shell`	FLP shell header (home, user menu)
`ui5Footer`	Page footer bar (Save, Edit, Delete)
`flpLocks`	SM12 lock management
`flpSettings`	User settings reader
`testData`	Test data generation with auto-cleanup

test.step(): Structured Test Steps

In ECATT, test scripts have numbered steps. In Playwright, use test.step() to create the same structure.

import { test, expect } from 'playwright-praman';

test('create a purchase order', async ({ ui5, ui5Navigation, fe }) => {
  await test.step('Step 1: Navigate to the PO app', async () => {
    await ui5Navigation.navigateToApp('PurchaseOrder-manage');
  });

  await test.step('Step 2: Click Create', async () => {
    await ui5.click({
      controlType: 'sap.m.Button',
      properties: { text: 'Create' },
    });
  });

  await test.step('Step 3: Fill the vendor field', async () => {
    await ui5.fill({ id: 'vendorInput' }, '100001');
  });

  await test.step('Step 4: Save', async () => {
    await fe.objectPage.clickSave();
  });

  await test.step('Step 5: Verify success message', async () => {
    const messageStrip = await ui5.control({
      controlType: 'sap.m.MessageStrip',
      properties: { type: 'Success' },
    });
    await expect(messageStrip).toBeUI5Visible();
  });
});

Steps appear as collapsible sections in the Playwright HTML report.

Assertions: Checking Results

Assertions verify that the application behaves correctly. If an assertion fails, the test fails.

Standard Playwright Assertions

// Check page title
await expect(page).toHaveTitle('Purchase Orders');

// Check URL
await expect(page).toHaveURL(/PurchaseOrder/);

// Check text content
await expect(page.locator('#message')).toHaveText('Saved');

Praman UI5 Assertions

const button = await ui5.control({ id: 'saveBtn' });

// Is the button enabled?
await expect(button).toBeUI5Enabled();

// Does it have the right text?
await expect(button).toHaveUI5Text('Save');

// Is it visible?
await expect(button).toBeUI5Visible();

// Check a specific property
await expect(button).toHaveUI5Property('type', 'Emphasized');

// Check value state (for inputs)
const input = await ui5.control({ id: 'amountInput' });
await expect(input).toHaveUI5ValueState('Error');

Running Tests

Basic Commands

# Run all tests
npx playwright test

# Run a specific test file
npx playwright test tests/purchase-order.test.ts

# Run tests matching a name pattern
npx playwright test --grep "purchase order"

# Run with visible browser (headed mode)
npx playwright test --headed

# Run in debug mode (step through interactively)
npx playwright test --debug

Viewing Reports

# Open the HTML report after a test run
npx playwright show-report

The HTML report shows:

Pass/fail status for each test
test.step() sections collapsed per step
Screenshots on failure (automatic)
Traces on retry (automatic)

Project Structure

A typical Praman test project looks like this:

my-sap-tests/
  tests/
    auth-setup.ts          # Login once, save session
    auth-teardown.ts       # Logout
    purchase-order.test.ts # Test file
    vendor.test.ts         # Another test file
  .auth/
    sap-session.json       # Saved browser session (auto-generated, git-ignored)
  .env                     # Environment variables (git-ignored)
  praman.config.ts         # Praman configuration
  playwright.config.ts     # Playwright configuration
  package.json             # Dependencies
  tsconfig.json            # TypeScript configuration

Common Patterns

Finding a UI5 Control

// By ID
const btn = await ui5.control({ id: 'saveBtn' });

// By type + property
const input = await ui5.control({
  controlType: 'sap.m.Input',
  properties: { placeholder: 'Enter vendor' },
});

// By binding path
const field = await ui5.control({
  controlType: 'sap.m.Input',
  bindingPath: { value: '/PurchaseOrder/Vendor' },
});

Interacting with Controls

// Click
await ui5.click({ id: 'submitBtn' });

// Type text
await ui5.fill({ id: 'nameInput' }, 'John Doe');

// Select from dropdown
await ui5.select({ id: 'countrySelect' }, 'US');

// Toggle checkbox
await ui5.check({ id: 'agreeCheckbox' });

// Clear a field
await ui5.clear({ id: 'searchField' });

Navigating SAP Apps

// Navigate to an app by semantic object and action
await ui5Navigation.navigateToApp('PurchaseOrder-manage');

// Navigate to a tile by title
await ui5Navigation.navigateToTile('Create Purchase Order');

// Navigate with parameters
await ui5Navigation.navigateToIntent('PurchaseOrder', 'create', { plant: '1000' });

// Go home
await ui5Navigation.navigateToHome();

Glossary for SAP Testers

SAP Term	Playwright/Praman Equivalent
Test script	Test file (`.test.ts`)
Test step / script line	`test.step()`
Variant / test data set	`testData.generate()` fixture
Check / verification	`expect()` assertion
Test configuration	`playwright.config.ts` + `praman.config.ts`
Transaction code	`ui5Navigation.navigateToIntent()`
Control ID	`UI5Selector.id`
Element repository	UI5 control registry (queried via `ui5.control()`)
Test run	`npx playwright test`
Test report	`npx playwright show-report` (HTML)
Reusable component / module	Playwright fixture
Test suite	`describe()` block or test file

What Is Playwright?​

Why Not ECATT or Tosca?​

Prerequisite Learning Path​

Step 1: Command Line Basics (1 hour)​

Step 2: Node.js and npm (1 hour)​

Step 3: TypeScript Basics (2-3 hours)​

Step 4: async/await (30 minutes)​

Your First Playwright Test​

Anatomy of a Test​

Fixtures: Automatic Setup​

test.step(): Structured Test Steps​

Assertions: Checking Results​

Standard Playwright Assertions​

Praman UI5 Assertions​

Running Tests​

Basic Commands​

Viewing Reports​

Project Structure​

Common Patterns​

Finding a UI5 Control​

Interacting with Controls​

Navigating SAP Apps​

Glossary for SAP Testers​