Support for Frameworks with dynamic Html Element Id and Name Generation (Blazor)

Hello,

I’m evaluating Katalon Studio for web testing of a Blazor project. So far I am not having much luck recording tests due to the fact that many blazor components generate html id and name attributes dynamically and this seems to be what Katalon keys on. I tried removing the id and name attributes based on this post Object Identification in Katalon Web Recorder but this did not have any effect. Even my simplest recorded tests still fail on playback. I was wondering if anyone could provide some guidance on how to get Katalon to work in this context. Thanks.

Welcome to the forum.

Be aware that Katalon Studio Web Recording is at best a “get you started” tool. When you’re faced with elements that use dynamic id attributes, you are definitely going to have issues – as you already discovered.

If you use the recorder to get the test started, then you will need to edit the Test Objects in the Object Repository (OR) and “fix” the selectors used to identify the elements in your test – obviously, avoid the id attribute entirely.

Alternatively, ignore the recorder and write the steps yourself, either in Manual View or Script View. Most professional test engineers use Script view and avoid the recorder.

You can provide selectors in the OR by using CSS or XPATH. You can discover elements on the web page and extract CSS/XPATH selectors using DevTools. Try right-click in DevTools on a particular element in the Inspector pane. Of course, if you already know CSS/XPATH, you can roll your own and enter them into the OR in Katalon.

Good luck!

I checked the docs of Blazor and found this:

  • E2E testing : A test runner runs a Blazor app containing the CUT and automates a browser instance. The testing tool inspects and interacts with the CUT through the browser. Playwright for .NET is an example of an E2E testing framework that can be used with Blazor apps.

Why not you try this alternative?

I have an opinion that a serious testing for a web app on top of a sophisticated/powerful/complex framework such as Blazor requires support by the framework itself. If the web app framework which you employed offers support for testing through web browsers, then you should try it.

The testing tool inspects and interacts with the CUT through the browser.

Perhaps the “CUT” is the key for your success in testing Blazor-based web app. I had a quick look into the document and found that their E2E testing approach using browser looks at the state of Blazor object (CUT) only. They don’t look at the HTML DOM of pages at all. Therefore “dynamic Html Element Id” doesn’t matter for them.

On the other hands, the 3rd party Selenium-based tools including KS look at HTML DOM, are ignorant of the framework. They can not interact with the “CUT”. Therefore they are incapable of opening the gate into the Blazor world.

The Blazor document uses the term “E2E testing” quite differently from Selenium terminology. Blazor people do not look at HTML DOM, whereas Selenium people look at only HTML DOM.

@greg.horvath

Do you want to look at HTML DOM, or not? Your answer to this question will determine which approach you should choose.

If you say “Yes, I want to look at HTML DOM”, then the reply from @Russ_Thomas shines. I would agree with his opinion 100%.