sap-fiori-testing

SAP Fiori Testing, Accessibility & Modern UI

Related Skills

• sap-testing-quality — Cross-cutting SAP testing strategy
• sap-devops-cicd — UI test automation in pipelines
• sap-build-apps — Alternative low-code UI approach

Quick Start

Choose your test framework:

Framework	Level	Speed	Best For
QUnit	Unit	Fast	Controller logic, formatters
OPA5	Integration	Medium	UI interaction flows, navigation
wdi5	E2E	Slow	Full app testing, cross-app
UIVeri5	Visual/E2E	Slow	Visual regression, screenshots

Quick wdi5 setup:

npm init wdi5@latest
# Follow prompts: select UI5 app, choose test runner
# Generates: wdio.conf.js + test structure

Core Concepts

UI5 Test Pyramid

         /\
        /  \     E2E (wdi5/UIVeri5)
       /    \    - Full app in browser
      /------\   - Real backend or mock server
     /        \
    / OPA5     \ Integration
   /   Tests    \ - UI interaction + navigation
  /--------------\ - Mock server for data
 /                \
/ QUnit Unit Tests \ Unit
/                    \ - Pure logic, no DOM
/____________________\

wdi5 Architecture

Test Script ──► wdi5 Bridge ──► UI5 Control API
    │               │               │
 WebdriverIO    Injects JS      sap.ui.test.*
 (Selenium/     into browser    control selectors
  Playwright)

OPA5 Key Concepts

Concept	Role	Example
Page Object	Encapsulates page interactions	onTheMainPage.iClickCreate()
Journey	Test scenario (sequence of actions)	opaTest("Create order", ...)
Arrangement	Setup state	Given.iStartMyApp()
Action	User interaction	When.onTheList.iSelectItem("001")
Assertion	Verify outcome	Then.onTheDetail.iSeeTitle("Order 001")

Common Patterns

Pattern 1: wdi5 Test with UI5 Selectors

// test/e2e/specs/order.test.js
const { wdi5 } = require('wdio-ui5-service');

describe('Order Management', () => {
  before(async () => {
    await browser.url('#/Orders');
    await browser.asControl({
      selector: { controlType: 'sap.m.Page', viewName: 'orders.List' }
    });
  });

  it('should display order list', async () => {
    const table = await browser.asControl({
      selector: {
        controlType: 'sap.m.Table',
        viewName: 'orders.List',
        id: 'orderTable'
      }
    });
    const items = await table.getItems();
    expect(items.length).toBeGreaterThan(0);
  });

  it('should create new order', async () => {
    // Click Create button
    const createBtn = await browser.asControl({
      selector: {
        controlType: 'sap.m.Button',
        viewName: 'orders.List',
        properties: { text: 'Create' }
      }
    });
    await createBtn.press();

    // Fill form
    const customerInput = await browser.asControl({
      selector: {
        controlType: 'sap.m.Input',
        viewName: 'orders.Create',
        id: 'customerInput'
      }
    });
    await customerInput.setValue('CUST001');

    const amountInput = await browser.asControl({
      selector: {
        controlType: 'sap.m.Input',
        viewName: 'orders.Create',
        id: 'amountInput'
      }
    });
    await amountInput.setValue('1500.00');

    // Save
    const saveBtn = await browser.asControl({
      selector: {
        controlType: 'sap.m.Button',
        viewName: 'orders.Create',
        properties: { type: 'Emphasized' }
      }
    });
    await saveBtn.press();

    // Verify success message
    const msgStrip = await browser.asControl({
      selector: {
        controlType: 'sap.m.MessageStrip',
        properties: { type: 'Success' }
      }
    });
    const text = await msgStrip.getText();
    expect(text).toContain('created successfully');
  });
});