Friday Fun - Inspect Flyout/Menu Elements of model-driven apps

I have had the good fortune of being able to contribute to Easy Repro, a Selenium framework for user automation testing of model-driven apps with Dynamics 365 apps. Easy Repro has quite a few APIs already written for it to perform certain page actions, such as opening forms, setting a value of a field on a form, navigating to different areas on a form, or a bunch of other things.

Writing an API for Easy Repro is not overly difficult. If I could do it, almost everyone else can do it too. It requires you to understand the application pages or form structure and be able to identify the data elements of a page. Fortunately for us, Chromium browsers have a great F12 Dev Tool that allows you to inspect elements on the page. This allows you to get the necessary information about the object so you can interact with it.

For instance, I want to be able to automate the process of deleting an Account from within the form. When I open the form and then the inspect elements feature of the F12 Dev Tools, I can see some important details that will help me differentiate this button from the others.

By doing this a bit, I know that almost every object on the form is going to contain a data-id element. In looking at the data-id element, I can see that the details in this element look specific to the Account entity/table. However, I see that the data-id does contain the word Delete and when I inspect the delete button on other forms the naming is consistent, it has a bunch of entity-specific details with delete being appended to the end.

Now, when I build my tests, I know that if I want to automate the clicking of the delete button I should make my reference looking for a button that contains the word Delete.

One of the issues with using the inspect elements feature is around flyouts or menu items. When you try and inspect the options of the menus or the flyouts, those objects go away before you can inspect it:

In the GIF above, you can see that when I try and access the more tabs option, I can't ever get the tool to keep the inspect elements feature enabled to see the details of the more tabs ellipses (...).

To get this to work, I need to enable an option that will maintain the rendering of the menu so I can inspect it. Luckily for us, Chromium browsers have an option that will allow us to do that. When you are in the F12 Dev Tools you will need to click on the ellipses (...), typically all the way at the top right > More Tools > Rendering. When the Rendering tools page opens, you want to enable the option to " Emulate a Focused Page". After doing that, you are able to inspect elements on menus, flyouts, headers, etc.

Now you are able to continue building out your application references for your automation testing.