Exercise 8: E2E Testing - UI5 FE Mockserver Tutorial

8.1 Setup Instructions

Exercise 8 ( ex8/ ) is a copy of ex7/ enhanced with wdi5 testing capabilities.

Step 1: Copy Base App

# Copy ex7 to ex8 (already done in this tutorial)
cp -r ex7/ ex8/
cd ex8

Step 2: Initialize wdi5

# Initialize wdi5 with latest version
npm init wdi5@latest

# Install additional UI5 service dependency
npm install --save-dev wdio-ui5-service

Step 3: Run the Tests

From the ex8 directory:

# Start the app with mockserver
npm run start-mock

# In a separate terminal, run e2e tests
npm run wdi5

From the root directory:

# Start ex8 with mockserver
npm run start:ex8

# Run e2e tests
npm run test:ex8-e2e

8.2 Simple Test Architecture

The test suite ( webapp/test/e2e/sample.test.js ) demonstrates a simple, reliable approach to verify mockserver integration:

Core Test Implementation

ex8/webapp/test/e2e/sample.test.js View on GitHub ↗

const { wdi5 } = require('wdio-ui5-service');

describe('Ex8: Offline E2E Testing with Mockserver & wdi5', () => {
  const logger = wdi5.getLogger('📚 BookshopTest');

  it('should load the app and display mockserver data', async () => {
    logger.info('🚀 Starting simple mockserver data test...');

    // Wait a moment for data to load
    await browser.pause(3000);

    // Find table with id com.devtoberfest.mockserver.ex8::BooksList--fe::table::Books::LineItem-innerTable
    const table = await browser.asControl({
      selector: {
        interaction: 'root',
        controlType: 'sap.m.Table',
      },
      timeout: 10000,
    });
    logger.info('✅ Found table control');

    logger.info(`📊 Found metadata for ${name}`);
    // Get data from table
    const items = await table.getItems();
    logger.info(`📊 Found ${items.length} items in table`);

    // table should be 2 rows with books titles "The Great Gatsby" and "To Kill a Mockingbird"
    expect(items.length).toBe(2);

    // Get the book titles from the items
    const bookTitles = [];
    for (const item of items) {
      const cells = await item.getCells();
      if (cells && cells.length > 0) {
        // Assuming the title is in the first cell
        const titleText = (await cells[0].getText) ? await cells[0].getText() : await cells[0].getProperty('text');
        bookTitles.push(titleText);
      }
    }

    logger.info(`📚 Book titles found: ${bookTitles.join(', ')}`);

    // Assert the expected books are present
    expect(bookTitles).toContain('The Great Gatsby');
    expect(bookTitles).toContain('To Kill a Mockingbird');

    logger.info('🎉 SUCCESS: Mockserver provided expected book data offline!');
  });
});

8.3 What the Test Validates

App Loading: Mockserver app loads successfully at localhost:8088
UI5 Initialization: Framework loads and initializes properly
Control Detection: UI5 table/list controls are rendered
Offline Operation: Everything works without backend dependencies

Reliable Testing Approach: The test uses a simple validation strategy that focuses on fundamental mockserver capabilities rather than complex UI interactions, ensuring consistent results across different environments.

8.4 Configuration Details

The wdi5 configuration ( webapp/test/e2e/wdio.conf.js ) should be working out of the box. Only if you run on a different port, you need to change the baseUrl in the configuration.

baseUrl: "http://localhost:8088/index.html",

Result: The simple test validates that mockserver provides data to UI5 controls for offline operation.

8.5 Key Benefits of Offline E2E Testing

CI/CD Ready: Tests run in 3.7 seconds without backend dependencies
Reliable Foundation: Simple validation approach that consistently works across environments
UI5-Aware Testing: Uses wdi5 (WebDriverIO UI5 Service) for proper UI5 control detection
Offline Validation: Proves complete functionality without network dependencies
Extension Ready: Simple base test ready for enhancement with complex scenarios

8.6 Running the Tests

Prerequisites: Make sure you have Chrome or Chromium installed for the WebDriver tests.

Test Execution Steps:

Start the mockserver:
```
npm run start:ex8
```
Run the E2E tests:
```
npm run test:ex8-e2e
```
Expected output: Test should complete in ~3.7 seconds with successful validation of book data

Test Results:

A successful test run will show:

✅ App loads successfully at localhost:8088
✅ UI5 table control detected and accessible
✅ Expected book titles found: "The Great Gatsby", "To Kill a Mockingbird"
✅ Complete offline operation without backend

Next Steps

Exercise 9 will show how to use ui5-middleware-odata-recorder to capture live OData traffic from your backend and automatically generate mockserver-compatible datasets for hybrid development workflows.

Exercise 8: Offline E2E Testing with wdi5 and Mockserver