To use the tool just enter a public URL and click on the Generate button

Welcome to the intelligent UIMap Generator!

With this tool you can generate a UI Map: code with selectors for the elements on a website, which can be used for autometed GUI tests. The source code for this application can be found here link. By using this tool you agree to save the data you provide and the ui map results (if storage is enabled).

What is a UI Map?

A UI Map contains grouped elements. Each element and group has an automatically generated name. Each element has a generated XPath selector.

How to generate a UIMap?

Specify a URL or an HTML snippet (HTML hast to start with '<'), specify parameters if needed ,and click on the "Generate UI Map" button. The generated code will be displayed below. Generation might take some time, depending on the target and parameters you have selected. You can read about the parameters in detail below.

You can change the format also after the generation without newly generating the UI Map.

You can copy and paste the whole code or parts of it into your project.

The current limit is that the first 240 elements are processed. It only works with public URLs, maximal processing time is 4 minutes - if you have a bigger/slower website it might take longer.

Generating via API

You can also use an API directly to generate code in your desired format. Swagger API documentation

Parameters

• URL/HTML: URI to the page or an HTML string for the UI Map generation. If you provied an HTML, it should start with an HMTL node, starting with a '<' character.
  There are some differences in the functionality when using an URL compared to using HTML.
  • If you provide an URL only the visible elements will be processed. If you provide an HTML snippet, then visibility is ignored. (this can be changed when using the API directly, but in general for HTML snippets the visibility is difficult to determine, since probably not all the scripts and CSS are setup correctly)
  • If you provide an HTML, no screenshot will be shown. (this can also be changed when using the API directly)
  • Features only available when providing URL: processing iframes, following links, collecting elements with event handlers
  • Some parameters are ignored when providing an HTML snippet: browser width and height, http headers, cookie consent xpath
• Store Results: if you enable this your results will be stored. With this you agree that your results might be used for research. If this is enabled you will see screenshots of your result.
• Format: Format of the output. E.g. C#, C# with Selenium, TypeScript. One special format is the Result Overview, where you can see more information about the UI Map and copy paste parts of it by clicking on values. The other special format is Self-Healing, which is a special format for the Nagarro A2A.Driven self healing application.
• Naming strategy: Naming strategy for the elements and groups.
  • Basic: a basic heuristic algorithm is used to generate a name.
  • Fallback to GPT: if no English word for a name could be found for an element, a name will be
  generated with the GPT language model
  • GPT: all names will be generated with the GPT language model
• Cookie consent XPath: xpath to the cookie consent button for the website. The element located by this xpath is going to be clicked after loading the website. Example: //button[@id='consent']
• Element locator: XPath to specify which elements should be in the UI Map. Only the matching elements will be added to the UI Map, child elements won't be added. If left empty the default algorithm will be used. Example for getting all divs: //div
• HTTP Headers: HTTP headers will be added to the browser's request. You can add cookies, or other headers.
• Browser width and height: The browser window size for the headless browser that is processing your request. Default is 1280 width and 720 height.

Special handling of elements

There is some special handling for certain elements:

• for list of indexable elements and tables functions might be generated to retrieve a certain element.
• Iframes are also processed: all elements inside an iframe are grouped together, also nested iframes. There is an xpath generated for the iframe element itself. To locate an element in your automation code you would have to switch to the iframe via the iframe xpath and then evaluate the element xpath. For nested iframes, you have to do it several times.
  Highlighting the elements inside iframes on the screenshot is not supported.