This post and video will show how to handle dynamic attributes in Power Automate when working with web automation in Power Automate. We will share some simple but powerful techniques for fixing the issue of a web element loading a different ID every time the page loads or refreshes. This achieved leveraging jQuery selectors concepts and applying them to Power Automate Web UI elements.
Table of Contents
Use case description
Every month the accounting team needs to log in to the municipality portal and submit a tax form – which is accessed through user and password. The issue is that both text inputs have a different ID assigned in the HTML code every time the page loads or refreshes, so Power Automate fails when trying to log in to the portal.
How does Power Automate recognize website elements?
When creating a desktop flow in Power Automate, it captures an element from the web, what it captures is a series of attributes and tags, and then it remembers the next time it runs this configuration and tries to find either buttons or text input based on the configuration that was captured when creating the flow.
This configuration is based on the web development concept of jQuery selectors, so behind the scenes, Power Automate relies on jQuery selectors to identify and interact with web page elements.
For example, for the below UI Element, Power Automate is recognizing a whole path of different HTML tags to find the image that needs to be clicked on:
For below example, Power Automate is only using the ID of the control to identify it and recognize it when the flow runs: 
What Power Automate identifies for each element depends on the webpage configuration and can be different across all the automations we build, but even if Power Automate recognizes an element in a certain way, we can always update this configuration – using jQuery selectors concepts.
Some alternatives available
Identifying Alternative Attributes and Hierarchy for Element Selection
We need to “inspect” the webpage and analyze the HTML tags that are used to display the site. Based on this research we can find which combination of tags, paths and attributes can be used for Power Automate to recognize properly the website elements.
First option: Using attribute names that do not change
The simplest fix is to locate an attribute on the input element that does not change, like name or data-automation-id (if present).
Second option: Finding a parent tag and using HTML hierarchies
An alternative approach is to find a parent div inside the HTML code that doesn’t change and then use the HTML tags hierarchy to help Power Automate find the control we need to fill in.
Third option: Using “contains” logic
Sometimes websites keep one part of the ID or the attributes “static” with a prefix or a suffix, and the other part of the attribute is dynamic. This can be used to create a jQuery selector code that identifies the element based on partial text.
Fourth option: Combining multiple selection methods
It’s also possible to combine more than one way to identify elements. For example, we can use a parent tag that contains the word “Password” and then using the HTML hierarchies to form a path that Power Automate can use to reach the required element.
Step-by-step walkthrough
Watch the video below to see a step-by-step walkthrough of how the four points above are combined to handle with dynamic attributes in the municipality portal login page.
If you’d like some help building Power Automate workflows that do not break when the website elements are dynamic, contact us, we’ll be more than happy to have a conversation and see how we can be of help for your team.
