Playwright SAP/Fiori Testing Environment

Enterprise test automation for SAP Fiori and UI5 applications with Playwright, TypeScript, Tosca migration, and accessibility audits.

What's Inside

Quick Start

# Start the sample Fiori app
sap-serve &

# Run all SAP/Fiori tests (headless)
sap-run

# Run tests with visible browser (open noVNC first)
sap-headed

# Run smoke tests only
sap-smoke

# Run with Allure report
sap-allure

# Show all commands
sap-help

Helper Commands

Test Execution

Reports

Tools

Project Structure

workspace/
├── pages/                    # Page Object Model
│   ├── BasePage.ts           # Base class (all pages extend this)
│   ├── WelcomePage.ts        # Home page actions
│   ├── CategoryPage.ts       # Category list
│   ├── ProductListPage.ts    # Product list + filtering
│   ├── ProductDetailPage.ts  # Product detail + Add to Cart
│   └── CartPage.ts           # Cart + checkout
├── selectors/
│   └── ui5-selectors.ts      # UI5 custom selector engine
├── tests/
│   ├── smoke/                # Quick validation (@smoke)
│   ├── fiori-elements/       # E2E business flows
│   ├── ui5-controls/         # UI5 control tests
│   └── accessibility/        # WCAG compliance
├── fixtures/
│   └── test-data.ts          # Centralized test data
├── utils/
│   └── odata-mock.ts         # OData API mocking
├── tosca-steps/              # Tosca text files for migration
├── tosca-subsets/            # Tosca .tsu XML exports
├── scripts/
│   ├── migrate-tosca.ts      # Text-based Tosca migrator
│   └── migrate-tsu.ts        # TSU XML parser + generator
├── generated/                # Auto-generated from Tosca
│   ├── pages/                # Generated Page Objects
│   └── tests/                # Generated test specs
├── app/                      # Sample Fiori app (UI5 from CDN)
├── playwright.config.ts
├── .env                      # SAP system URL config
└── package.json

SAP UI5 Selector Patterns

The workspace includes a custom UI5 selector engine for SAP controls:

const ui5 = new UI5Selectors(page);

// Buttons, inputs, lists
await ui5.button('Add to Cart').click();
await ui5.searchField().fill('Laptop');
await ui5.listItem('Notebook Basic').click();

// Wait for UI5 async rendering
await ui5.waitForUI5Ready();

// Tables, dialogs
await ui5.tableRow(0).click();
await ui5.dialog().locator('.sapMBtn').click();

Tosca Migration

Convert existing Tosca tests to Playwright:

# Migrate text-based Tosca steps
sap-migrate tosca-steps/shopping-cart-flow.txt

# Migrate Tosca Subset XML (generates Page Objects + tests)
sap-migrate-tsu tosca-subsets/ShoppingCartSmoke.tsu.xml

# Run generated tests
npx playwright test generated/tests/

Watching Tests Run (noVNC)

noVNC runs on port 10000. To see tests execute in a real browser:

1. Open the noVNC URL with ?autoconnect=true
2. Run sap-headed in the terminal
3. Watch Chromium execute your SAP tests live

Use sap-debug for step-by-step debugging and sap-codegen to record actions and generate code.

Exercises

1. UI5 Selector Fundamentals — Use custom UI5 selectors for SAP controls
2. Page Object Model for SAP — Build maintainable POM for Fiori apps
3. Fiori Elements Testing — Test List Report + Object Page patterns
4. Fiori Launchpad Navigation — Navigate between Fiori apps
5. OData API Mocking — Mock SAP backend responses
6. Accessibility Testing — WCAG compliance audits for SAP UI5
7. CI/CD Integration — GitHub Actions pipeline for SAP tests
8. Visual Regression — Screenshot comparison for SAP screens
9. Tosca-to-Playwright Migration — Convert Tosca tests to Playwright

Configuration

Edit .env to point to your SAP system:

SAP_BASE_URL=https://your-sap-system.com/fiori
SAP_USER=testuser
SAP_PASSWORD=Test@123

Mastery Framework

Each workspace includes a Mastery.md file with:

• Engineering standards — Use UI5 custom selectors, enforce waitForUI5Ready() before interactions, no hard waits
• AI assistant rules — OpenCode acts as a Principal SAP Test Architect, enforces SAP UI5 automation standards
• Prompt templates — Examples of effective vs wasteful prompts for SAP testing
• Lab checklist — Concrete tasks to prove mastery (e.g., implement tests using only UI5 selectors, mock OData responses, migrate a Tosca test)

Open Mastery.md in your workspace to see the full framework.

Tips

• Always call ui5.waitForUI5Ready() before interacting with UI5 controls — SAP renders asynchronously
• Use sap-codegen to record actions on your SAP system and generate selector patterns
• The sample Fiori app (sap-serve) runs locally — no SAP system needed for learning
• sap-migrate handles text-based Tosca steps, sap-migrate-tsu handles XML exports
• Ctrl+Shift+B runs the default SAP test suite

Security

• Root access is restricted. Use sudo apt install <package> for system packages.
• npm and npx are whitelisted for sudo access.
• Node.js memory is capped at 4GB (NODE_OPTIONS="--max-old-space-size=4096").