How to handle locators in UI - NextensArelB/SwaggerGenerationTool GitHub Wiki

##Introduction When we test an UI component using Karate UI you want to select an UI element and then verify for example:

  • it's state
  • Styling properties
  • Fire events to it
  • Check it's content And many more

To be able to do so you need a locator to get to the right element. We can use for example styling properties or some div, and then 3 rows down the first element etc. Problem with that is when the page styling has changed or the amount of rows change this might not work anymore. Also the locator can be very long and the longer it gets the bigger chance that the locator consists of parts that changes over time.

##Using data-qa attribute to be able to select the correct page element.
The most preferred solution is to use data-qa attribute HTML attribute (HTML5) on the UI elements this solves the problems of locating the elements. This article motivates why this is an good solution

Using this plugin you can visualize the data-qa's area's on the page: Visualize data-qa area's plugin for Chrome

Although this is a good way to make an element selectable in your test cases we should not use it for all HTML elements on the screen because this make the files too big. We can implement it on attributes that have very long selectors or the ones that are difficult to adress.

Also you want to make sure the locators are unique within the DOM loaded at that moment. This means you need to name them unique within the web product you are working on.

We only add data-qa attributes when a UI has been released and is not actively developed anymore. If the state of the UI is different, use ID attributes and ask a developer to implement them.

##Best practice how to compose a selector (for non data-qa elements) Elements can easily be found with the help of the devtools of your browser. Simply hitting the F12-key in your browser opens the devtools. We are looking for the tab "elements" in Chrome or "Inspector" in Firefox. Here we can see the whole HTML structure of the page.

Tip from the writer: undock your Devtools-window from your browser-window for a better overview

To find your item in your browser page we can use the element picker from the devtools. Either look for this iconimage.png or hit Ctrl+Shift+C to instantiate the element picker. Now if we hover over our element of choice we can see the element being highlighted within the page and within de devtools. Click on your element in the browser to keep the highlight within the devtools window active. Now we have found the structure of the element, we need to define the locator in order to access it with our automation scripts. In order to do this, rightmouse-click the element in the devtools windows and select in Chrome: Copy > Copy selector or in Firefox: Copy > CSS Selector. The browser will create a locator for you and saves it to you clipboard. Now to validate that we have an unique locator, we open the find tool within devtools by hitting the Ctrl+F shortcut and paste our locator by hitting Ctrl+V into the opened field. In Chrome the field is located at the bottom of the elements tab in your devtools. In firefox the field is located at the top of the inspector tab in your devtools.

When we have pasted the locator, we hopefully see "1 of 1" next to it. This means that this locator is finding only 1 element, which is great. If it says something like "1 of 3" then we know that this is an unreliable locator and we have to manually define our locator. If it says "0 of 0" it means the locator is not finding anything it should find and something happend(either something changed within the browser or we made a mistake). 99% of the time it will say "1 of 1" and thus we are good to go. We have created a unique element identifying locator.

##Naming the data-qa atrributes There are two options for the naming the attributes: 1: Naming convention currently in the TA-Fiscal testset: This option is to use structure based on camelCase combined with a "-" after a number. Examples currently used : data-qa='ibva2020-Actions' data-qa='ibvaCreateModalGoToAangifte' 2: Kebab casing This option is somewhat more simple and suitable for naming attributes that are not related to a fiscal product: Examples: data-qa='opportunitymodal-adviesbrief-actionlink'

##Work document for attributes currently in use We have created an Excel sheet with the data-qa attributes that are implemented in the code at this moment. This can be use to see if the attributes are unique and also on what pages they are available. At this moment the data-qa attributes are implemented on the dev03 (dev env of team Boost). The work docuement can be found as link on following page: The Excel work document

Feel free to update this document when you add the attribute to the code.

⚠️ **GitHub.com Fallback** ⚠️