Identify SAP Web Component Version and React Usage on a User Page

[Mandy99]

Is your feature request related to a problem?

Our product currently is working on automation testing for SAP Web Components and is looking for a way to identify the version of the web components being used on a user page.

Additionally, we'd like to know if there's a way to tell if the SAP SuccessFactors are with UI5 Web Components for React or Angular.

Describe the solution you'd like

For example, with SAP Fiori, it's possible to retrieve the version by running sap.ui.version in the browser console. Is there a similar way to determine the version for SAP Web Components on a page, such as in SAP SuccessFactors pages?

Describe alternatives you've considered

Tried document.querySelector("meta[name='ui5-shared-resources']").Runtimes on the SuccessFactors page, result returned four versions: 1.23.1, 1.20.0, 1.23.1, and 1.21.2. It's still unclear how each of these versions exactly maps to specific components. Is it correct to assume that 1.23.1 might correspond to the ui5/webcomponents-react version, while 1.20.0 could be the version for @ui5/webcomponents according to the mapping table at https://sap.github.io/ui5-webcomponents-react/v1/?path=/docs/getting-started--docs#add-ui5webcomponents-react-to-an-existing-app?
And when I tried running the same query to confirm my assumption on the SAP UI5 Web Components sample React page https://sap-samples.github.io/ui5-webcomponents-sample-react/, I encountered an error: Uncaught TypeError: Cannot read properties of null (reading 'Runtimes').
Tried on https://sap.github.io/ui5-webcomponents-react/v1/?path=/docs/data-display-list--docs got 1.24.8, while seems shall be 1.29.8.
Tried on https://sap.github.io/ui5-webcomponents/components/Button/ got 2.1.1 seems to be correct.

And it seems that due to current implementation limitations, the only way to determine if the page is using UI5 Web Components for React is by manually searching through the sources in the browser's developer tools for any indication of React-related keywords.

It would be helpful to have a more straightforward and automated way to detect and identify the UI5 Web Components versions in use on a page, including whether they are part of a React or Angular project.

Additional Context

No response

Organization

OpenText ADM UFT One product team

Declaration

• I’m not disclosing any internal or sensitive information.

[MarcusNotheis]

Hi @Mandy99,

your approach of running document.querySelector("meta[name='ui5-shared-resources']").Runtimes is absolutely correct for finding out which versions of @ui5/webcomponents are currently running on page. This list will only contain UI5 Web Components versions, but not the versions of the React wrapper.

Regarding the error in the sample repo: this seems to be a super old version of UI5 Web Components, there the querySelector should look like this: document.querySelector("ui5-shared-resources").Runtimes. As this was already changed back in in v1.14.0 of UI5 Web Components (PR), we can ignore this issue for now in my opinion.

Regarding UI5 Web Components for React Versions: You're right, currently this is only possible by searching for react-specific elements on the page (maybe also using the React Dev Tools browser extension), but you can't detect the version at runtime. We'll discuss this internally, but I think we can add some markers to the window object as well.

[Mandy99]

Hi @MarcusNotheis ,
Thank you for the clarification and guidance. Looking forward to any future updates.

[MarcusNotheis]

This feature request will be implemented as part of our 2.0.0 release 🙂
#6222

[ui5-webcomponents-react-bot]

🎉 This issue has been resolved in version v2.0.0-rc.3 🎉

The release is available on v2.0.0-rc.3

Your semantic-release bot 📦🚀

[Mandy99]

Hi @MarcusNotheis ,
I tried to run console.log(globalThis['@ui5/webcomponents-react'].Runtimes); on https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/data-display-table--docs&globals=theme:sap_horizon_dark but it returned ‘undefined’. Am I checking this the correct way, or is there something I might be missing?
Thanks,
Mandy

[MarcusNotheis]

Hi @Mandy99,
the storybook previews are running within an iframe, so you might to change the context of your console to storybook-preview-iframe before executing the command.
This would be the direct access url to the story you've shared: https://sap.github.io/ui5-webcomponents-react/v2/iframe.html?globals=theme:sap_horizon_dark&args=&id=data-display-table--default&viewMode=story