From 057ffc2237274324885996cead8f7d22a0983f85 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 2 Jun 2026 10:21:48 +0300 Subject: [PATCH 01/21] feat(ui5): Add OPA5 guidelines as Skills --- plugins/ui5/skills/opa5/SKILL.md | 37 ++++++++++ .../references/enable-testrecorder-tooling.md | 68 +++++++++++++++++++ .../opa5/references/handle-multiple-views.md | 35 ++++++++++ .../skills/opa5/references/handle-teardown.md | 26 +++++++ .../skills/opa5/references/initial-setup.md | 24 +++++++ 5 files changed, 190 insertions(+) create mode 100644 plugins/ui5/skills/opa5/SKILL.md create mode 100644 plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md create mode 100644 plugins/ui5/skills/opa5/references/handle-multiple-views.md create mode 100644 plugins/ui5/skills/opa5/references/handle-teardown.md create mode 100644 plugins/ui5/skills/opa5/references/initial-setup.md diff --git a/plugins/ui5/skills/opa5/SKILL.md b/plugins/ui5/skills/opa5/SKILL.md new file mode 100644 index 0000000..c5dda03 --- /dev/null +++ b/plugins/ui5/skills/opa5/SKILL.md @@ -0,0 +1,37 @@ +--- +name: opa5 +description: ALWAYS load before any OPA5 task — implementing, updating, or verifying a test. Provides best practices for structuring the test and tools for efficient diagnosis of test failures. +--- + +# OPA5 guidelines and tools + +## Setup the test environment **before executing the OPA5 test** +**Purpose:** Efficient inspection of test failures with minimal steps. +**Prerequisites:** A tool to load the OPA5 test in the browser and evaluate javascript in the browser window (e.g. MCP Playwright) + +### 1. Setup TestRecorder tooling (UI5 version ≥ 1.147 only) +**Purpose:** +- Diagnose issues by inspecting the live control tree in the browser, including private/internal controls the test needs to find; +- Collect reliable OPA5 snippets for non-trivial actions and assertions. +**Setup:** Follow `references/enable-testrecorder-tooling.md` for detailed instructions. + +### 2. **ALWAYS** enable pause-on-failure mode (all UI5 versions) +**Purpose:** When enabled, execution pauses on the first test failure and the app remains live in the browser exactly as it was at the point of failure — no teardown, no reload happens automatically. The paused state persists until you explicitly navigate away, so you can inspect the actual UI directly (without reloading) in the browser to compare it against what the test expected. +**Setup:** Add the following line to your test setup (e.g. before the first `opaTest` of your Journey under test): +```javascript +sap.ui.test.qunitPause.pauseRule = "assert,timeout"; // enables pause on assertion failures and timeouts +``` +### 3. Isolate the journey under test (all UI5 versions) +**Purpose:** Avoid waiting for unrelated journeys on each iteration +**Isolation strategy:** If the setup does not allow to run individual journeys, comment out unrelated journey imports in the test entry point. + +## Verification workflow +1. Enable the test environment setup above and load the test in the browser. +2. When the test pauses on failure, inspect the app first — verify the full causal chain with no gaps before changing any code. **ALWAYS** rule out app-side issues before assuming the test is wrong. +3. Once each new/updated journey succeeds in isolation, restore all journey imports for final validation. +4. Once all journeys pass with imports restored, remove the `sap.ui.testrecorder` library from the app and disable pause-on-failure. + +## Handling special cases +- **Initial setup for OPA5 test** → follow `references/initial-setup.md` +- **If the test-case spans multiple views** → follow `references/handle-multiple-views.md` +- **Teardown the app** → follow `references/handle-teardown.md` \ No newline at end of file diff --git a/plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md b/plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md new file mode 100644 index 0000000..5cfd6d2 --- /dev/null +++ b/plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md @@ -0,0 +1,68 @@ +# TestRecorder tooling + +The `sap.ui.testrecorder` library provides module `sap.ui.testrecorder.ControlTree` that allows to: +- inspect the live control tree in the browser +- retrieve reliable OPA5 snippets for interacting with any part of the control tree + +## Prerequisites to use `sap.ui.testrecorder.ControlTree` + +- **UI5 version ≥ 1.147** +- Tool to load the OPA5 test in the browser and evaluate javascript in the browser window (e.g. MCP Playwright) +- **`sap.ui.testrecorder` library loaded** — temporarily add to the app's library declarations in the places listed below (**ORDERED BY PRIORITY**): + 1. `ui5.yaml` → `framework.libraries`: `- name: sap.ui.testrecorder` + 2. `manifest.json` → `sap.ui5.dependencies.libs`: `"sap.ui.testrecorder": {}` + 3. `index.html` → `data-sap-ui-libs` bootstrap attribute: append `,sap.ui.testrecorder` + + > After adding to `ui5.yaml` ensure the server is serving the added library before proceeding: + > ```bash + > curl -s -o /dev/null -w "%{http_code}" \ + > http://localhost:8080/resources/sap/ui/testrecorder/ControlTree.js + > ``` + > If 404, **ALWAYS** start a fresh server on the next free port (8081, 8082, …) and use that port + > for all subsequent browser navigation + + > Remove `sap.ui.testrecorder` after use — not needed at runtime. + > Kill after use any started fresh server instance. + +## `sap.ui.testrecorder.ControlTree` API + +**`ControlTree.search(query)`** — Search the live UI5 control tree. +- Returns `Promise` — a tree snapshot with matching controls and their parents +- `query=""` returns the full tree; `query="anchorBar"` returns filtered results +- Matches against control type short names, non-default property values, and accessibility attributes +- Each node carries a `nodeId="N_M"` (snapshot N, node M) — use these in `ControlTree` methods that require a `nodeId` parameter + +**`ControlTree.getControlData(nodeId)`** — Get selector and full control state. +- Returns `Promise<{ selectorSnippet, properties, aggregations, associations, bindings }>` +- `selectorSnippet` — OPA5 `waitFor` code to locate the control (use as the base selector) +- Other fields provide live control state for customizing assertions + +**`ControlTree.press(nodeId, settings?)`** — Press a control and get its OPA5 action snippet. +- Returns `Promise` — an OPA5 `waitFor` snippet with `actions: new Press()` +- Also **replays the press** on the running app, advancing the UI state for the next search +- Optional `settings`: `altKey`, `ctrlKey`, `shiftKey`, `xPercentage`, `yPercentage` + +**`ControlTree.enterText(nodeId, settings)`** — Type into a control and get its OPA5 action snippet. +- Returns `Promise` — an OPA5 `waitFor` snippet with `actions: new EnterText()` +- Also **replays the text entry** on the running app +- `settings`: `text`, `clearTextFirst` (default `true`), `submitText` (default `true`) + +## Example Usage + +```javascript +sap.ui.require(["sap/ui/testrecorder/ControlTree"], function(ControlTree) { + // Navigate to the state where the anchor bar is visible, then: + ControlTree.search("anchorBar").then(function(tree) { + // Parse: Button nodeId="1_8" text="Methods" + return ControlTree.press("1_8"); + }).then(function(actionSnippet) { + // actionSnippet is the OPA5 snippet — save it; UI has now navigated + return ControlTree.search("selectedSection"); + }).then(function(tree) { + // Parse: ObjectPageLayout nodeId="2_3" + return ControlTree.getControlData("2_3"); + }).then(function(result) { + // result.selectorSnippet + result.associations → build assertion + }); +}); +``` \ No newline at end of file diff --git a/plugins/ui5/skills/opa5/references/handle-multiple-views.md b/plugins/ui5/skills/opa5/references/handle-multiple-views.md new file mode 100644 index 0000000..84af26a --- /dev/null +++ b/plugins/ui5/skills/opa5/references/handle-multiple-views.md @@ -0,0 +1,35 @@ +# Organization of actions/assertions + +**ALWAYS** add the new actions/assertions to the semantically corresponding page object + +Example 1 +❌ Anti-Pattern: +Adding selector for a control from `App.view.xml` into the page object for its **nested** view (e.g. into `integration/pages/Detail.js` for `Detail.view.xml`): +```javascript +// integration/pages/Detail.js +iShouldSeeTheAppInFullScreenMode: function () { + return this.waitFor({ + id: "layout", + viewName: "App", + success: function () { ... } + }); +}, +``` +✅ Correct Pattern: +Place the assertion for the `App.view.xml` in page object file `integration/pages/App.js` + +Example 2: +❌ Anti-Pattern: +View-specific page object file containing selector for cross-view navigation: +```javascript +// integration/pages/Detail.js +iShouldSeeTheHash: function (sExpectedHash) { + return this.waitFor({ + success: function () { + Opa5.assert.strictEqual(Opa5.getHashChanger().getHash(), sExpectedHash, "The Hash not correct"); + } + }); +}, +``` +✅ Correct Pattern: +Place the actions/assertions for cross-view navigation into page object `integration/pages/Browser.js` diff --git a/plugins/ui5/skills/opa5/references/handle-teardown.md b/plugins/ui5/skills/opa5/references/handle-teardown.md new file mode 100644 index 0000000..75f9128 --- /dev/null +++ b/plugins/ui5/skills/opa5/references/handle-teardown.md @@ -0,0 +1,26 @@ +# Teardown the app + +QUnit requires assertions to validate tests. Teardown methods are NOT assertions. + +❌ Incorrect: +```javascript +opaTest("Should clean up", function(Given, When, Then) { + Then.iTeardownMyApp(); // ❌ missing assertion (because teardown is not an assertion) +}); +``` + +❌ Incorrect: +```javascript +opaTest("Should assert state and clean up", function(Given, When, Then) { + Then.onTheWorklistPage.iShouldSeeTheTable() + .and.onTheWorklistPage.iTeardownMyApp(); // ❌ chaining on wrong object +}); +``` + +✅ Correct: +```javascript +opaTest("Should assert state and clean up", function(Given, When, Then) { + Then.onTheWorklistPage.iShouldSeeTheTable() // ✅ assertion before teardown + .and.iTeardownMyApp(); // ✅ correct chaining +}); +``` \ No newline at end of file diff --git a/plugins/ui5/skills/opa5/references/initial-setup.md b/plugins/ui5/skills/opa5/references/initial-setup.md new file mode 100644 index 0000000..4ea4052 --- /dev/null +++ b/plugins/ui5/skills/opa5/references/initial-setup.md @@ -0,0 +1,24 @@ +# Initial Setup + +1. **ALWAYS** use this folder layout: +``` +test/integration/ +├── opaTests.qunit.js ← single entry point +├── pages/ +│ ├── Welcome.js ← one page object per view (name matches the view) +│ ├── Items.js +│ └── Browser.js ← cross-view actions (navigation, hash) +├── WelcomeJourney.js ← one journey per feature/functionality +└── FilterItemsJourney.js +``` + +2. **ALWAYS** enable `autoWait` and define `viewNamespace` globally in `opaTests.qunit.js`. +```javascript +// opaTests.qunit.js +sap.ui.define(["sap/ui/test/Opa5"], function (Opa5) { + "use strict"; + Opa5.extendConfig({ + autoWait: true, + viewNamespace: "com.myorg.myapp.view." + }); +``` \ No newline at end of file From 934a92be704f8b5c26efa1d8c72c0bf21e5e9f46 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 2 Jun 2026 10:44:07 +0300 Subject: [PATCH 02/21] feat(ui5): Correct formatting --- plugins/ui5/skills/opa5/SKILL.md | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/ui5/skills/opa5/SKILL.md b/plugins/ui5/skills/opa5/SKILL.md index c5dda03..35842bd 100644 --- a/plugins/ui5/skills/opa5/SKILL.md +++ b/plugins/ui5/skills/opa5/SKILL.md @@ -21,6 +21,7 @@ description: ALWAYS load before any OPA5 task — implementing, updating, or ver ```javascript sap.ui.test.qunitPause.pauseRule = "assert,timeout"; // enables pause on assertion failures and timeouts ``` + ### 3. Isolate the journey under test (all UI5 versions) **Purpose:** Avoid waiting for unrelated journeys on each iteration **Isolation strategy:** If the setup does not allow to run individual journeys, comment out unrelated journey imports in the test entry point. From 6931ec123cf3163004c4297a3c40181d8320887b Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Wed, 3 Jun 2026 18:42:13 +0300 Subject: [PATCH 03/21] feat(ui5): Reflect review feedback on skill content --- plugins/ui5/skills/opa5/SKILL.md | 32 +++++++++---------- .../{initial-setup.md => configuration.md} | 6 ++-- .../opa5/references/handle-multiple-views.md | 4 +-- 3 files changed, 21 insertions(+), 21 deletions(-) rename plugins/ui5/skills/opa5/references/{initial-setup.md => configuration.md} (92%) diff --git a/plugins/ui5/skills/opa5/SKILL.md b/plugins/ui5/skills/opa5/SKILL.md index 35842bd..e0ddabc 100644 --- a/plugins/ui5/skills/opa5/SKILL.md +++ b/plugins/ui5/skills/opa5/SKILL.md @@ -1,38 +1,36 @@ --- name: opa5 -description: ALWAYS load before any OPA5 task — implementing, updating, or verifying a test. Provides best practices for structuring the test and tools for efficient diagnosis of test failures. +description: This skill should be used in any OPA5 task - creating, modifying, extending, debugging, fixing or reviewing an integration test. Use when the user asks to "write an OPA5 test", "add an OPA5 journey", "fix the OPA5 test failure" or mentions OPA5 or its components - opaTest, page object, journey, waitFor. --- # OPA5 guidelines and tools -## Setup the test environment **before executing the OPA5 test** +## Set up inspection tools **before executing the OPA5 test** **Purpose:** Efficient inspection of test failures with minimal steps. **Prerequisites:** A tool to load the OPA5 test in the browser and evaluate javascript in the browser window (e.g. MCP Playwright) -### 1. Setup TestRecorder tooling (UI5 version ≥ 1.147 only) +### 1. Set up TestRecorder tooling (UI5 version ≥ 1.147 only) **Purpose:** - Diagnose issues by inspecting the live control tree in the browser, including private/internal controls the test needs to find; - Collect reliable OPA5 snippets for non-trivial actions and assertions. **Setup:** Follow `references/enable-testrecorder-tooling.md` for detailed instructions. -### 2. **ALWAYS** enable pause-on-failure mode (all UI5 versions) -**Purpose:** When enabled, execution pauses on the first test failure and the app remains live in the browser exactly as it was at the point of failure — no teardown, no reload happens automatically. The paused state persists until you explicitly navigate away, so you can inspect the actual UI directly (without reloading) in the browser to compare it against what the test expected. -**Setup:** Add the following line to your test setup (e.g. before the first `opaTest` of your Journey under test): +### 2. Enable pause-on-failure mode (all UI5 versions) +**Purpose:** When enabled, execution pauses on the first test failure and the app remains live in the browser exactly as it was at the point of failure — no teardown, no reload happens automatically. The paused state persists until you explicitly navigate away, so you can inspect the actual UI directly (without reloading) in the browser to see why it differs from what the test expected. +**Setup:** Add the following line to your test entry point (right before `Opa5.extendConfig`): ```javascript +// Inside the existing sap.ui.define callback in your test entry point sap.ui.test.qunitPause.pauseRule = "assert,timeout"; // enables pause on assertion failures and timeouts +// Opa5.extendConfig({...}); ``` -### 3. Isolate the journey under test (all UI5 versions) -**Purpose:** Avoid waiting for unrelated journeys on each iteration -**Isolation strategy:** If the setup does not allow to run individual journeys, comment out unrelated journey imports in the test entry point. - ## Verification workflow -1. Enable the test environment setup above and load the test in the browser. -2. When the test pauses on failure, inspect the app first — verify the full causal chain with no gaps before changing any code. **ALWAYS** rule out app-side issues before assuming the test is wrong. -3. Once each new/updated journey succeeds in isolation, restore all journey imports for final validation. -4. Once all journeys pass with imports restored, remove the `sap.ui.testrecorder` library from the app and disable pause-on-failure. +1. Enable the inspection tools above and load the test in the browser. +2. When the test pauses on failure, inspect the app first — verify the full causal chain with no gaps before changing any code. Rule out app-side issues before assuming the test is wrong. +3. Iterate on the test until all journeys pass. +4. Once all journeys pass, remove the `sap.ui.testrecorder` library from the app and the pause-on-failure rule `sap.ui.test.qunitPause.pauseRule`. -## Handling special cases -- **Initial setup for OPA5 test** → follow `references/initial-setup.md` +## Handle special cases +- **Initial configuration for OPA5 test** → follow `references/configuration.md` - **If the test-case spans multiple views** → follow `references/handle-multiple-views.md` -- **Teardown the app** → follow `references/handle-teardown.md` \ No newline at end of file +- **Teardown the app** → follow `references/handle-teardown.md` diff --git a/plugins/ui5/skills/opa5/references/initial-setup.md b/plugins/ui5/skills/opa5/references/configuration.md similarity index 92% rename from plugins/ui5/skills/opa5/references/initial-setup.md rename to plugins/ui5/skills/opa5/references/configuration.md index 4ea4052..e45d6dd 100644 --- a/plugins/ui5/skills/opa5/references/initial-setup.md +++ b/plugins/ui5/skills/opa5/references/configuration.md @@ -1,6 +1,6 @@ -# Initial Setup +# Configuration -1. **ALWAYS** use this folder layout: +1. Use this folder layout: ``` test/integration/ ├── opaTests.qunit.js ← single entry point @@ -21,4 +21,6 @@ sap.ui.define(["sap/ui/test/Opa5"], function (Opa5) { autoWait: true, viewNamespace: "com.myorg.myapp.view." }); + // ... +}); ``` \ No newline at end of file diff --git a/plugins/ui5/skills/opa5/references/handle-multiple-views.md b/plugins/ui5/skills/opa5/references/handle-multiple-views.md index 84af26a..e0ceeb2 100644 --- a/plugins/ui5/skills/opa5/references/handle-multiple-views.md +++ b/plugins/ui5/skills/opa5/references/handle-multiple-views.md @@ -1,8 +1,8 @@ -# Organization of actions/assertions +# Page Object Organization Across Multiple Views **ALWAYS** add the new actions/assertions to the semantically corresponding page object -Example 1 +Example 1: ❌ Anti-Pattern: Adding selector for a control from `App.view.xml` into the page object for its **nested** view (e.g. into `integration/pages/Detail.js` for `Detail.view.xml`): ```javascript From daea1947a67081c39dce438009a060d1cf985983 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Wed, 3 Jun 2026 19:20:17 +0300 Subject: [PATCH 04/21] feat(ui5): Add readme entry for opa5 skill --- plugins/ui5/README.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/plugins/ui5/README.md b/plugins/ui5/README.md index 3d221be..e8f1034 100644 --- a/plugins/ui5/README.md +++ b/plugins/ui5/README.md @@ -1,6 +1,6 @@ # UI5 Plugin for Coding Agents -Complete SAPUI5 / OpenUI5 plugin for coding agents with MCP tools, API documentation access, linting capabilities, and development guidelines. +Complete SAPUI5 / OpenUI5 plugin for coding agents with MCP tools, API documentation access, linting capabilities, development and integration testing guidelines. --- @@ -42,6 +42,15 @@ Development guidelines for UI Integration Cards (also known as UI5 Integration C - **i18n** - Bind all user-facing strings to the i18n model; never hardcode - **Actions** - Use the `actions` property for links and interactions; never inline `` tags or hand-roll URL handlers +#### opa5 + +Guidelines and debugging workflow for OPA5 integration tests: + +- **Failure inspection** - Pause-on-failure mode (`sap.ui.test.qunitPause.pauseRule`) keeps the app live at the failure point for browser inspection +- **TestRecorder tooling** - Temporary `sap.ui.testrecorder.ControlTree` integration to inspect the live control tree and generate reliable OPA5 snippets (UI5 ≥ 1.147) +- **Page object organization** - Placement of actions and assertions across views +- **App teardown** - Cleanup patterns in OPA5 journey tests + --- ## Installation From f3666fef12609cf9c63aa2e70d7408ffc29ab796 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Wed, 3 Jun 2026 19:30:06 +0300 Subject: [PATCH 05/21] feat(ui5): Add keyword entry for opa5 skill in plugin.json --- plugins/ui5/.github/plugin/plugin.json | 1 + plugins/ui5/plugin.json | 1 + 2 files changed, 2 insertions(+) diff --git a/plugins/ui5/.github/plugin/plugin.json b/plugins/ui5/.github/plugin/plugin.json index f4f2d63..f3ef4ee 100644 --- a/plugins/ui5/.github/plugin/plugin.json +++ b/plugins/ui5/.github/plugin/plugin.json @@ -13,6 +13,7 @@ "ui5", "sapui5", "openui5", + "opa5", "plugin", "linter", "api-documentation", diff --git a/plugins/ui5/plugin.json b/plugins/ui5/plugin.json index f4f2d63..f3ef4ee 100644 --- a/plugins/ui5/plugin.json +++ b/plugins/ui5/plugin.json @@ -13,6 +13,7 @@ "ui5", "sapui5", "openui5", + "opa5", "plugin", "linter", "api-documentation", From 6cc7ee84b51b77f926aa71cde95b09596fe9870c Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 9 Jun 2026 08:13:25 +0300 Subject: [PATCH 06/21] feat(ui5): Split skill based on phase applicability --- plugins/ui5/skills/opa5/SKILL.md | 32 ++++--------------- .../opa5/references/setup-inspection-tools.md | 24 ++++++++++++++ 2 files changed, 30 insertions(+), 26 deletions(-) create mode 100644 plugins/ui5/skills/opa5/references/setup-inspection-tools.md diff --git a/plugins/ui5/skills/opa5/SKILL.md b/plugins/ui5/skills/opa5/SKILL.md index e0ddabc..c49ef66 100644 --- a/plugins/ui5/skills/opa5/SKILL.md +++ b/plugins/ui5/skills/opa5/SKILL.md @@ -5,32 +5,12 @@ description: This skill should be used in any OPA5 task - creating, modifying, e # OPA5 guidelines and tools -## Set up inspection tools **before executing the OPA5 test** -**Purpose:** Efficient inspection of test failures with minimal steps. -**Prerequisites:** A tool to load the OPA5 test in the browser and evaluate javascript in the browser window (e.g. MCP Playwright) - -### 1. Set up TestRecorder tooling (UI5 version ≥ 1.147 only) -**Purpose:** -- Diagnose issues by inspecting the live control tree in the browser, including private/internal controls the test needs to find; -- Collect reliable OPA5 snippets for non-trivial actions and assertions. -**Setup:** Follow `references/enable-testrecorder-tooling.md` for detailed instructions. - -### 2. Enable pause-on-failure mode (all UI5 versions) -**Purpose:** When enabled, execution pauses on the first test failure and the app remains live in the browser exactly as it was at the point of failure — no teardown, no reload happens automatically. The paused state persists until you explicitly navigate away, so you can inspect the actual UI directly (without reloading) in the browser to see why it differs from what the test expected. -**Setup:** Add the following line to your test entry point (right before `Opa5.extendConfig`): -```javascript -// Inside the existing sap.ui.define callback in your test entry point -sap.ui.test.qunitPause.pauseRule = "assert,timeout"; // enables pause on assertion failures and timeouts -// Opa5.extendConfig({...}); -``` - -## Verification workflow -1. Enable the inspection tools above and load the test in the browser. -2. When the test pauses on failure, inspect the app first — verify the full causal chain with no gaps before changing any code. Rule out app-side issues before assuming the test is wrong. -3. Iterate on the test until all journeys pass. -4. Once all journeys pass, remove the `sap.ui.testrecorder` library from the app and the pause-on-failure rule `sap.ui.test.qunitPause.pauseRule`. - -## Handle special cases +## Handle special cases (follow when planning and writing an OPA5 test) - **Initial configuration for OPA5 test** → follow `references/configuration.md` - **If the test-case spans multiple views** → follow `references/handle-multiple-views.md` - **Teardown the app** → follow `references/handle-teardown.md` + +## Set up browser inspection tools (follow every time **before running the OPA5 test**) +**Purpose:** Efficient inspection of test failures with minimal steps. +**Instructions:** → follow `references/setup-inspection-tools.md` + diff --git a/plugins/ui5/skills/opa5/references/setup-inspection-tools.md b/plugins/ui5/skills/opa5/references/setup-inspection-tools.md new file mode 100644 index 0000000..bbc4b31 --- /dev/null +++ b/plugins/ui5/skills/opa5/references/setup-inspection-tools.md @@ -0,0 +1,24 @@ +# Set up browser inspection tools + +**Prerequisites:** A tool to load the OPA5 test in the browser and evaluate javascript in the browser window (e.g. MCP Playwright) + +## 1. Set up TestRecorder tooling (UI5 version ≥ 1.147 only) +**Purpose:** +- Diagnose issues by inspecting the live control tree in the browser, including private/internal controls the test needs to find; +- Collect reliable OPA5 snippets for non-trivial actions and assertions. +**Setup:** Follow `enable-testrecorder-tooling.md` for detailed instructions. + +## 2. Enable pause-on-failure mode (all UI5 versions) +**Purpose:** When enabled, execution pauses on the first test failure and the app remains live in the browser exactly as it was at the point of failure — no teardown, no reload happens automatically. The paused state persists until you explicitly navigate away, so you can inspect the actual UI directly (without reloading) in the browser to see why it differs from what the test expected. +**Setup:** Add the following line to your test entry point (right before `Opa5.extendConfig`): +```javascript +// Inside the existing sap.ui.define callback in your test entry point +sap.ui.test.qunitPause.pauseRule = "assert,timeout"; // enables pause on assertion failures and timeouts +// Opa5.extendConfig({...}); +``` + +## Workflow +1. Enable the inspection tools above and load the test in the browser. +2. When the test pauses on failure, inspect the app in the browser — verify the full causal chain with no gaps before changing any code. Rule out app-side issues before assuming the test is wrong. +3. Iterate on the test until all journeys pass. +4. Once all journeys pass, remove the `sap.ui.testrecorder` library from the app and the pause-on-failure rule `sap.ui.test.qunitPause.pauseRule`. \ No newline at end of file From 1d9bf509ac90a5300e77e4b7cd43f411aef6c3ae Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 9 Jun 2026 09:30:08 +0300 Subject: [PATCH 07/21] feat(ui5): Minor improvements in formating and text --- plugins/ui5/skills/opa5/SKILL.md | 2 +- plugins/ui5/skills/opa5/references/setup-inspection-tools.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/plugins/ui5/skills/opa5/SKILL.md b/plugins/ui5/skills/opa5/SKILL.md index c49ef66..05a0f77 100644 --- a/plugins/ui5/skills/opa5/SKILL.md +++ b/plugins/ui5/skills/opa5/SKILL.md @@ -12,5 +12,5 @@ description: This skill should be used in any OPA5 task - creating, modifying, e ## Set up browser inspection tools (follow every time **before running the OPA5 test**) **Purpose:** Efficient inspection of test failures with minimal steps. +**Prerequisites:** A tool to load the OPA5 test in the browser and evaluate javascript in the browser window (e.g. MCP Playwright) **Instructions:** → follow `references/setup-inspection-tools.md` - diff --git a/plugins/ui5/skills/opa5/references/setup-inspection-tools.md b/plugins/ui5/skills/opa5/references/setup-inspection-tools.md index bbc4b31..75f7621 100644 --- a/plugins/ui5/skills/opa5/references/setup-inspection-tools.md +++ b/plugins/ui5/skills/opa5/references/setup-inspection-tools.md @@ -19,6 +19,6 @@ sap.ui.test.qunitPause.pauseRule = "assert,timeout"; // enables pause on asserti ## Workflow 1. Enable the inspection tools above and load the test in the browser. -2. When the test pauses on failure, inspect the app in the browser — verify the full causal chain with no gaps before changing any code. Rule out app-side issues before assuming the test is wrong. +2. When the test pauses on failure, inspect the app in the browser. Before changing any code, verify the full causal chain with no gaps. Rule out app-side issues before assuming the test is wrong. 3. Iterate on the test until all journeys pass. -4. Once all journeys pass, remove the `sap.ui.testrecorder` library from the app and the pause-on-failure rule `sap.ui.test.qunitPause.pauseRule`. \ No newline at end of file +4. Once all journeys pass, remove the `sap.ui.testrecorder` library from the app and the pause-on-failure rule `sap.ui.test.qunitPause.pauseRule`. From e59d241f73bf3978c5620be004e4963fc5831de7 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 9 Jun 2026 10:15:14 +0300 Subject: [PATCH 08/21] feat(ui5): Rename skill to existing convention Co-authored-by: Florian Vogt --- plugins/ui5/skills/opa5/SKILL.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/ui5/skills/opa5/SKILL.md b/plugins/ui5/skills/opa5/SKILL.md index 05a0f77..9374c81 100644 --- a/plugins/ui5/skills/opa5/SKILL.md +++ b/plugins/ui5/skills/opa5/SKILL.md @@ -1,5 +1,5 @@ --- -name: opa5 +name: ui5-best-practices-opa5 description: This skill should be used in any OPA5 task - creating, modifying, extending, debugging, fixing or reviewing an integration test. Use when the user asks to "write an OPA5 test", "add an OPA5 journey", "fix the OPA5 test failure" or mentions OPA5 or its components - opaTest, page object, journey, waitFor. --- From b89dadd0b17105b73fc816d93fb5b7e37db32270 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 9 Jun 2026 10:16:19 +0300 Subject: [PATCH 09/21] feat(ui5): Improve text Co-authored-by: Florian Vogt --- .../ui5/skills/opa5/references/enable-testrecorder-tooling.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md b/plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md index 5cfd6d2..35c715b 100644 --- a/plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md +++ b/plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md @@ -1,6 +1,6 @@ # TestRecorder tooling -The `sap.ui.testrecorder` library provides module `sap.ui.testrecorder.ControlTree` that allows to: +The `sap.ui.testrecorder` library provides the module `sap.ui.testrecorder.ControlTree` that allows to: - inspect the live control tree in the browser - retrieve reliable OPA5 snippets for interacting with any part of the control tree From ed3d277b388f3f2233d8dc8b266d26dc84b2c937 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 9 Jun 2026 10:17:04 +0300 Subject: [PATCH 10/21] feat(ui5): Improve title Co-authored-by: Florian Vogt --- .../ui5/skills/opa5/references/enable-testrecorder-tooling.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md b/plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md index 35c715b..34af4d9 100644 --- a/plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md +++ b/plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md @@ -1,4 +1,4 @@ -# TestRecorder tooling +# TestRecorder Tooling The `sap.ui.testrecorder` library provides the module `sap.ui.testrecorder.ControlTree` that allows to: - inspect the live control tree in the browser From 7efc16077bd881a1bcbed13a89eb67d9b1c448d2 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 9 Jun 2026 10:17:42 +0300 Subject: [PATCH 11/21] feat(ui5): Improve title Co-authored-by: Florian Vogt --- plugins/ui5/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/ui5/README.md b/plugins/ui5/README.md index e8f1034..720130d 100644 --- a/plugins/ui5/README.md +++ b/plugins/ui5/README.md @@ -42,7 +42,7 @@ Development guidelines for UI Integration Cards (also known as UI5 Integration C - **i18n** - Bind all user-facing strings to the i18n model; never hardcode - **Actions** - Use the `actions` property for links and interactions; never inline `` tags or hand-roll URL handlers -#### opa5 +#### ui5-best-practices-opa5 Guidelines and debugging workflow for OPA5 integration tests: From 1537e99302946a963393d0dfa1d388352e923b60 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 9 Jun 2026 10:50:38 +0300 Subject: [PATCH 12/21] feat(ui5): Adapt TestRecorder example to use async/await --- .../references/enable-testrecorder-tooling.md | 25 ++++++++----------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md b/plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md index 34af4d9..f2ffbbc 100644 --- a/plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md +++ b/plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md @@ -50,19 +50,16 @@ The `sap.ui.testrecorder` library provides the module `sap.ui.testrecorder.Contr ## Example Usage ```javascript -sap.ui.require(["sap/ui/testrecorder/ControlTree"], function(ControlTree) { +sap.ui.require(["sap/ui/testrecorder/ControlTree"], async function (ControlTree) { // Navigate to the state where the anchor bar is visible, then: - ControlTree.search("anchorBar").then(function(tree) { - // Parse: Button nodeId="1_8" text="Methods" - return ControlTree.press("1_8"); - }).then(function(actionSnippet) { - // actionSnippet is the OPA5 snippet — save it; UI has now navigated - return ControlTree.search("selectedSection"); - }).then(function(tree) { - // Parse: ObjectPageLayout nodeId="2_3" - return ControlTree.getControlData("2_3"); - }).then(function(result) { - // result.selectorSnippet + result.associations → build assertion - }); + const tree = await ControlTree.search("anchorBar"); + // Inspect tree (markdown snapshot) and pick nodeId, e.g. Button nodeId="1_8" text="Methods" + const actionSnippet = await ControlTree.press("1_8"); + // actionSnippet is the OPA5 snippet — save it; UI has now navigated + + const treeAfterPress = await ControlTree.search("selectedSection"); + // Inspect treeAfterPress and pick nodeId, e.g. ObjectPageLayout nodeId="2_3" + const result = await ControlTree.getControlData("2_3"); + // result.selectorSnippet + result.associations → build assertion }); -``` \ No newline at end of file +``` From 94e1bf67397667b1fd5d7e39664fdd6a8b0aeae1 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 9 Jun 2026 10:57:37 +0300 Subject: [PATCH 13/21] feat(ui5): Adapt to new object syntax Co-authored-by: Florian Vogt --- plugins/ui5/skills/opa5/references/handle-multiple-views.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/ui5/skills/opa5/references/handle-multiple-views.md b/plugins/ui5/skills/opa5/references/handle-multiple-views.md index e0ceeb2..cbd4932 100644 --- a/plugins/ui5/skills/opa5/references/handle-multiple-views.md +++ b/plugins/ui5/skills/opa5/references/handle-multiple-views.md @@ -7,7 +7,7 @@ Example 1: Adding selector for a control from `App.view.xml` into the page object for its **nested** view (e.g. into `integration/pages/Detail.js` for `Detail.view.xml`): ```javascript // integration/pages/Detail.js -iShouldSeeTheAppInFullScreenMode: function () { +iShouldSeeTheAppInFullScreenMode() { return this.waitFor({ id: "layout", viewName: "App", From e2ca5fdf21ec37cd675bbeaf2559af8a50414eb8 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 9 Jun 2026 11:07:33 +0300 Subject: [PATCH 14/21] feat(ui5): Adapt to new object syntax --- plugins/ui5/skills/opa5/references/handle-multiple-views.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/ui5/skills/opa5/references/handle-multiple-views.md b/plugins/ui5/skills/opa5/references/handle-multiple-views.md index cbd4932..424f19a 100644 --- a/plugins/ui5/skills/opa5/references/handle-multiple-views.md +++ b/plugins/ui5/skills/opa5/references/handle-multiple-views.md @@ -23,7 +23,7 @@ Example 2: View-specific page object file containing selector for cross-view navigation: ```javascript // integration/pages/Detail.js -iShouldSeeTheHash: function (sExpectedHash) { +iShouldSeeTheHash(sExpectedHash) { return this.waitFor({ success: function () { Opa5.assert.strictEqual(Opa5.getHashChanger().getHash(), sExpectedHash, "The Hash not correct"); From fdacdddfdc15dcb14c4d92d9fdb3e07b2a55ba66 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 9 Jun 2026 11:19:19 +0300 Subject: [PATCH 15/21] feat(ui5): Align OPA5 skill headings to Title Case --- plugins/ui5/skills/opa5/SKILL.md | 10 +++++----- .../opa5/references/enable-testrecorder-tooling.md | 2 +- plugins/ui5/skills/opa5/references/handle-teardown.md | 2 +- .../skills/opa5/references/setup-inspection-tools.md | 6 +++--- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/plugins/ui5/skills/opa5/SKILL.md b/plugins/ui5/skills/opa5/SKILL.md index 9374c81..41d22dc 100644 --- a/plugins/ui5/skills/opa5/SKILL.md +++ b/plugins/ui5/skills/opa5/SKILL.md @@ -3,14 +3,14 @@ name: ui5-best-practices-opa5 description: This skill should be used in any OPA5 task - creating, modifying, extending, debugging, fixing or reviewing an integration test. Use when the user asks to "write an OPA5 test", "add an OPA5 journey", "fix the OPA5 test failure" or mentions OPA5 or its components - opaTest, page object, journey, waitFor. --- -# OPA5 guidelines and tools +# OPA5 Guidelines and Tools -## Handle special cases (follow when planning and writing an OPA5 test) -- **Initial configuration for OPA5 test** → follow `references/configuration.md` +## Handle Special Cases (follow when planning and writing an OPA5 test) +- **Initial Configuration for OPA5 Test** → follow `references/configuration.md` - **If the test-case spans multiple views** → follow `references/handle-multiple-views.md` -- **Teardown the app** → follow `references/handle-teardown.md` +- **Teardown the App** → follow `references/handle-teardown.md` -## Set up browser inspection tools (follow every time **before running the OPA5 test**) +## Set Up Browser Inspection Tools (follow every time **before running the OPA5 test**) **Purpose:** Efficient inspection of test failures with minimal steps. **Prerequisites:** A tool to load the OPA5 test in the browser and evaluate javascript in the browser window (e.g. MCP Playwright) **Instructions:** → follow `references/setup-inspection-tools.md` diff --git a/plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md b/plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md index f2ffbbc..82a01f1 100644 --- a/plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md +++ b/plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md @@ -4,7 +4,7 @@ The `sap.ui.testrecorder` library provides the module `sap.ui.testrecorder.Contr - inspect the live control tree in the browser - retrieve reliable OPA5 snippets for interacting with any part of the control tree -## Prerequisites to use `sap.ui.testrecorder.ControlTree` +## Prerequisites to Use `sap.ui.testrecorder.ControlTree` - **UI5 version ≥ 1.147** - Tool to load the OPA5 test in the browser and evaluate javascript in the browser window (e.g. MCP Playwright) diff --git a/plugins/ui5/skills/opa5/references/handle-teardown.md b/plugins/ui5/skills/opa5/references/handle-teardown.md index 75f9128..cb4938c 100644 --- a/plugins/ui5/skills/opa5/references/handle-teardown.md +++ b/plugins/ui5/skills/opa5/references/handle-teardown.md @@ -1,4 +1,4 @@ -# Teardown the app +# Teardown the App QUnit requires assertions to validate tests. Teardown methods are NOT assertions. diff --git a/plugins/ui5/skills/opa5/references/setup-inspection-tools.md b/plugins/ui5/skills/opa5/references/setup-inspection-tools.md index 75f7621..04b7495 100644 --- a/plugins/ui5/skills/opa5/references/setup-inspection-tools.md +++ b/plugins/ui5/skills/opa5/references/setup-inspection-tools.md @@ -1,14 +1,14 @@ -# Set up browser inspection tools +# Set Up Browser Inspection Tools **Prerequisites:** A tool to load the OPA5 test in the browser and evaluate javascript in the browser window (e.g. MCP Playwright) -## 1. Set up TestRecorder tooling (UI5 version ≥ 1.147 only) +## 1. Set Up TestRecorder Tooling (UI5 version ≥ 1.147 only) **Purpose:** - Diagnose issues by inspecting the live control tree in the browser, including private/internal controls the test needs to find; - Collect reliable OPA5 snippets for non-trivial actions and assertions. **Setup:** Follow `enable-testrecorder-tooling.md` for detailed instructions. -## 2. Enable pause-on-failure mode (all UI5 versions) +## 2. Enable Pause-on-Failure Mode (all UI5 versions) **Purpose:** When enabled, execution pauses on the first test failure and the app remains live in the browser exactly as it was at the point of failure — no teardown, no reload happens automatically. The paused state persists until you explicitly navigate away, so you can inspect the actual UI directly (without reloading) in the browser to see why it differs from what the test expected. **Setup:** Add the following line to your test entry point (right before `Opa5.extendConfig`): ```javascript From 5a1fcc6580d4acbd51d3924fb9fd4ceb0ebafe0a Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 9 Jun 2026 11:26:06 +0300 Subject: [PATCH 16/21] feat(ui5): Rename skill folder to match the name --- plugins/ui5/skills/{opa5 => ui5-best-practices-opa5}/SKILL.md | 0 .../{opa5 => ui5-best-practices-opa5}/references/configuration.md | 0 .../references/enable-testrecorder-tooling.md | 0 .../references/handle-multiple-views.md | 0 .../references/handle-teardown.md | 0 .../references/setup-inspection-tools.md | 0 6 files changed, 0 insertions(+), 0 deletions(-) rename plugins/ui5/skills/{opa5 => ui5-best-practices-opa5}/SKILL.md (100%) rename plugins/ui5/skills/{opa5 => ui5-best-practices-opa5}/references/configuration.md (100%) rename plugins/ui5/skills/{opa5 => ui5-best-practices-opa5}/references/enable-testrecorder-tooling.md (100%) rename plugins/ui5/skills/{opa5 => ui5-best-practices-opa5}/references/handle-multiple-views.md (100%) rename plugins/ui5/skills/{opa5 => ui5-best-practices-opa5}/references/handle-teardown.md (100%) rename plugins/ui5/skills/{opa5 => ui5-best-practices-opa5}/references/setup-inspection-tools.md (100%) diff --git a/plugins/ui5/skills/opa5/SKILL.md b/plugins/ui5/skills/ui5-best-practices-opa5/SKILL.md similarity index 100% rename from plugins/ui5/skills/opa5/SKILL.md rename to plugins/ui5/skills/ui5-best-practices-opa5/SKILL.md diff --git a/plugins/ui5/skills/opa5/references/configuration.md b/plugins/ui5/skills/ui5-best-practices-opa5/references/configuration.md similarity index 100% rename from plugins/ui5/skills/opa5/references/configuration.md rename to plugins/ui5/skills/ui5-best-practices-opa5/references/configuration.md diff --git a/plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md b/plugins/ui5/skills/ui5-best-practices-opa5/references/enable-testrecorder-tooling.md similarity index 100% rename from plugins/ui5/skills/opa5/references/enable-testrecorder-tooling.md rename to plugins/ui5/skills/ui5-best-practices-opa5/references/enable-testrecorder-tooling.md diff --git a/plugins/ui5/skills/opa5/references/handle-multiple-views.md b/plugins/ui5/skills/ui5-best-practices-opa5/references/handle-multiple-views.md similarity index 100% rename from plugins/ui5/skills/opa5/references/handle-multiple-views.md rename to plugins/ui5/skills/ui5-best-practices-opa5/references/handle-multiple-views.md diff --git a/plugins/ui5/skills/opa5/references/handle-teardown.md b/plugins/ui5/skills/ui5-best-practices-opa5/references/handle-teardown.md similarity index 100% rename from plugins/ui5/skills/opa5/references/handle-teardown.md rename to plugins/ui5/skills/ui5-best-practices-opa5/references/handle-teardown.md diff --git a/plugins/ui5/skills/opa5/references/setup-inspection-tools.md b/plugins/ui5/skills/ui5-best-practices-opa5/references/setup-inspection-tools.md similarity index 100% rename from plugins/ui5/skills/opa5/references/setup-inspection-tools.md rename to plugins/ui5/skills/ui5-best-practices-opa5/references/setup-inspection-tools.md From 9203b8263485fc70aee99f593c7d167fe4557b3c Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 9 Jun 2026 11:47:42 +0300 Subject: [PATCH 17/21] feat(ui5): Correct instruction scope --- plugins/ui5/skills/ui5-best-practices-opa5/SKILL.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/ui5/skills/ui5-best-practices-opa5/SKILL.md b/plugins/ui5/skills/ui5-best-practices-opa5/SKILL.md index 41d22dc..a8d464d 100644 --- a/plugins/ui5/skills/ui5-best-practices-opa5/SKILL.md +++ b/plugins/ui5/skills/ui5-best-practices-opa5/SKILL.md @@ -10,7 +10,7 @@ description: This skill should be used in any OPA5 task - creating, modifying, e - **If the test-case spans multiple views** → follow `references/handle-multiple-views.md` - **Teardown the App** → follow `references/handle-teardown.md` -## Set Up Browser Inspection Tools (follow every time **before running the OPA5 test**) +## Set Up Browser Inspection Tools (follow **before running the OPA5 test**) **Purpose:** Efficient inspection of test failures with minimal steps. **Prerequisites:** A tool to load the OPA5 test in the browser and evaluate javascript in the browser window (e.g. MCP Playwright) **Instructions:** → follow `references/setup-inspection-tools.md` From 4b713de490e26a6eb24b823ee23a94e12ce8ac21 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Wed, 10 Jun 2026 08:48:57 +0300 Subject: [PATCH 18/21] feat(ui5): Code snippet improvements --- .../references/enable-testrecorder-tooling.md | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/plugins/ui5/skills/ui5-best-practices-opa5/references/enable-testrecorder-tooling.md b/plugins/ui5/skills/ui5-best-practices-opa5/references/enable-testrecorder-tooling.md index 82a01f1..55d05d0 100644 --- a/plugins/ui5/skills/ui5-best-practices-opa5/references/enable-testrecorder-tooling.md +++ b/plugins/ui5/skills/ui5-best-practices-opa5/references/enable-testrecorder-tooling.md @@ -52,14 +52,13 @@ The `sap.ui.testrecorder` library provides the module `sap.ui.testrecorder.Contr ```javascript sap.ui.require(["sap/ui/testrecorder/ControlTree"], async function (ControlTree) { // Navigate to the state where the anchor bar is visible, then: - const tree = await ControlTree.search("anchorBar"); - // Inspect tree (markdown snapshot) and pick nodeId, e.g. Button nodeId="1_8" text="Methods" - const actionSnippet = await ControlTree.press("1_8"); - // actionSnippet is the OPA5 snippet — save it; UI has now navigated + await ControlTree.search("anchorBar"); // When resolved, inspect the returned markdown snapshot and pick nodeId, e.g. Button nodeId="1_8" text="Methods" - const treeAfterPress = await ControlTree.search("selectedSection"); - // Inspect treeAfterPress and pick nodeId, e.g. ObjectPageLayout nodeId="2_3" - const result = await ControlTree.getControlData("2_3"); - // result.selectorSnippet + result.associations → build assertion + // Use the picked nodeId to interact with the corresponding control + await ControlTree.press("1_8"); // When resolved, save the returned OPA5 snippet; UI has now navigated + + await ControlTree.search("selectedSection"); // When resolved, parse returned snapshot and pick nodeId, e.g. ObjectPageLayout nodeId="2_3" + + await ControlTree.getControlData("2_3"); // When resolved, save result.selectorSnippet + result.associations → build assertion }); ``` From 4c7d3e0fd9393e18a2d5021fd3abfb50952f8eba Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Wed, 10 Jun 2026 10:47:02 +0300 Subject: [PATCH 19/21] feat(ui5): Adapt to modern syntax Co-authored-by: Florian Vogt --- .../skills/ui5-best-practices-opa5/references/configuration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/ui5/skills/ui5-best-practices-opa5/references/configuration.md b/plugins/ui5/skills/ui5-best-practices-opa5/references/configuration.md index e45d6dd..ec93c81 100644 --- a/plugins/ui5/skills/ui5-best-practices-opa5/references/configuration.md +++ b/plugins/ui5/skills/ui5-best-practices-opa5/references/configuration.md @@ -15,7 +15,7 @@ test/integration/ 2. **ALWAYS** enable `autoWait` and define `viewNamespace` globally in `opaTests.qunit.js`. ```javascript // opaTests.qunit.js -sap.ui.define(["sap/ui/test/Opa5"], function (Opa5) { +sap.ui.define(["sap/ui/test/Opa5"], (Opa5) => { "use strict"; Opa5.extendConfig({ autoWait: true, From b984a943a0da79df6b4207d98d76596990850ee3 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Wed, 10 Jun 2026 10:47:41 +0300 Subject: [PATCH 20/21] feat(ui5): Adapt to modern syntax Co-authored-by: Florian Vogt --- .../references/enable-testrecorder-tooling.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/ui5/skills/ui5-best-practices-opa5/references/enable-testrecorder-tooling.md b/plugins/ui5/skills/ui5-best-practices-opa5/references/enable-testrecorder-tooling.md index 55d05d0..75f6f5a 100644 --- a/plugins/ui5/skills/ui5-best-practices-opa5/references/enable-testrecorder-tooling.md +++ b/plugins/ui5/skills/ui5-best-practices-opa5/references/enable-testrecorder-tooling.md @@ -50,7 +50,7 @@ The `sap.ui.testrecorder` library provides the module `sap.ui.testrecorder.Contr ## Example Usage ```javascript -sap.ui.require(["sap/ui/testrecorder/ControlTree"], async function (ControlTree) { +sap.ui.require(["sap/ui/testrecorder/ControlTree"], async (ControlTree) => { // Navigate to the state where the anchor bar is visible, then: await ControlTree.search("anchorBar"); // When resolved, inspect the returned markdown snapshot and pick nodeId, e.g. Button nodeId="1_8" text="Methods" From 59a269bdeb04ebb155280ee1d1a5d15e3d9872fc Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Wed, 10 Jun 2026 11:03:29 +0300 Subject: [PATCH 21/21] feat(ui5): Add missing use strict --- .../references/enable-testrecorder-tooling.md | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/ui5/skills/ui5-best-practices-opa5/references/enable-testrecorder-tooling.md b/plugins/ui5/skills/ui5-best-practices-opa5/references/enable-testrecorder-tooling.md index 75f6f5a..3360459 100644 --- a/plugins/ui5/skills/ui5-best-practices-opa5/references/enable-testrecorder-tooling.md +++ b/plugins/ui5/skills/ui5-best-practices-opa5/references/enable-testrecorder-tooling.md @@ -51,6 +51,7 @@ The `sap.ui.testrecorder` library provides the module `sap.ui.testrecorder.Contr ```javascript sap.ui.require(["sap/ui/testrecorder/ControlTree"], async (ControlTree) => { + "use strict"; // Navigate to the state where the anchor bar is visible, then: await ControlTree.search("anchorBar"); // When resolved, inspect the returned markdown snapshot and pick nodeId, e.g. Button nodeId="1_8" text="Methods"