With the release of UI5 1.105, the wdi5 dialect for locating UI5 controls was added to the Test Recorder.

The UI5 Test Recorder comes with UI5 and allows for browsing the “control tree” of a UI5 application. It exposes controls for selection via a test tool dialect in a point’n’click fashon (“low code”, anyone?!? 😂)

It opens by pressing ⌃ control + ⇧ shift +  alt / ⌥ option + T (and some patience) in a UI5 app.

What’s even more, the UI5 Test Recorder generates ready to use code for locating a control and testing its’ properties in wdi5. In the screenshot above, the UI5 SDK site’s control tree is shown.

By selecting any UI5 control, the browser.asControl(<selector>) is inserted into the middle pane…

await browser.asControl({
  selector: {
    controlType: "sap.m.ObjectStatus",
    viewId: "sdk---app",
    bindingPath: {
      path: "",
      propertyPath: "/isBetaVersion",
      modelName: "versionData"
    }
  }
})

…and the property pane for that control is shown on the right.

Upon clicking one of the props, the respective code for “asserting” the UI5 control property is generated:

const text = await browser
  // control selection
  .asControl({
    selector: {
      controlType: "sap.m.ObjectStatus",
      viewId: "sdk---app",
      bindingPath: {
        path: "",
        propertyPath: "/isBetaVersion",
        modelName: "versionData"
      }
    }
  })
  // native UI5 control method
  .getText()
expect(text).toEqual("Version 1.105.0") // <-- assert

That visual helper should allow for quite some acceleration in writing wdi5 tests!

Along with npm init wdi5 for bootstrapping wdi5 into a UI5 application, the wdi5 dialect in the UI5 Test Recorder is another productivity tool in the UI5/wdi5 ecosystem!