In this tutorial we will cover How to Add Elements to Element Repository in Telerik Test Studio and we will be covering the following steps:
- Run to the Step
- Highlight Element with Recording Toolbar
- How to Add Elements to Element Repository
- Locate Element in DOM
- Working with DOM Explorer
How to Run Test to the Step?
Recording toolbar can be accessed either by starting recording. Or by using Run => To Here; option in the right-click menu. Run To Here, runs the test till the selected step.
Click on the To Here and then select the browser from the option and click on Run. The test will be executed till the step and the browser along with the Recording Toolbar will appear.
- Highlight Element uses the mouse pointer to highlight elements.
- Pause Recording button allows the user to pause or continue with recording.
Highlight Element with Recording Toolbar
Highlight Element button plays an important role in element identification. Now, let’s have a look at the Highlight element. Enable the highlight element by clicking it in the recording toolbar.
Once clicked the button will be enabled. Now, hover the mouse over an object on the page and hold it there for a few moments. A context menu with multiple options will appear. The context menu offers quick access to a number of functions right on the page from where you are recording.
Highlighted element will be surrounded by a red box. And context menu will appear with options like Quick Steps, JavaScript Events, Mouse Actions, Scroll Actions, Add to Elements, Locate in DOM and Build Step.
How to Add Elements to Element Repository?
In this tutorial, we will discuss mainly “Add to Elements” and “Locate in DOM”. Add to Elements adds the highlighted element to the element repository. Let’s try this.
Add to Elements
To highlight an element and from the context menu choose Add to Elements. Once you select it, Test Studio will ask for a friendly name for that element. You can choose any name you want for distinguishing this element or you can simply let the Test Studio provide a default name for the element.
Click on Add Element button will add an element to the Element Explorer.
Open Element explorer in test studio and validates that his new element has been added.
As you can see, HomeH1Tag has been added to the repository. In this way, you can add a number of elements. Test Studio also allows you to change the attributes used for identification of an element.
Locate Element in DOM
Locate in DOM is used when you want to locate your element in the DOM explorer. DOM or Document Object Model is a common language neutral and independent abstraction that allows HTML page content, structure and style to be updated dynamically.
Let’s highlight an element and select Locate in DOM from the context menu. Once Locate in DOM is selected, test studio will find the element position in the DOM structure which will be displayed in the DOM Explorer. As highlighted below.
When you click on the element in the DOM structure in the DOM explorer it will highlight the corresponding associated element on the page. It allows the user to verify that they are selecting the right element.
Now right click on the element, another menu will appear.
Clicking on Add to Element Repository will ask for the friendly name and clicking on Add Element will add it to the Element Explorer.
If you select Properties option from the context menu, it will display all the properties that are associated with the selected element.
Working with DOM Explorer
DOM Explorer is quite helpful while working with a complex page where mouse hovering or action recording may not be able to find the exact element that you are looking for. DOM explorer starts with the HTML page as the parent element, then HEAD, BODY etc. forming the hierarchy of the page.
Add To Elements Repository works similar to as we discussed above, the only difference that DOM offers is the ability to add multiple elements. If you click on the Add Elements to Repository it will show two options, first one is Add Selected Element and the second one is Add Multiple Elements.
Add Selected Element works same as Add To Element Repository that we discussed earlier. Let’s have a look at Add Multiple Elements.
Click on Add Multiple Elements.
Once you click on Add Multiple Element, each element in the DOM structure will appear with a corresponding checkbox. The user can select that element that needs to be added to the repository. You can add several elements including HTML tag, HEAD, BODY etc.
Now, let’s select two elements and then click on the Add Elements button at the bottom left corner of the DOM Explorer.
So, once Add Element button is clicked, a pop-up Add To Element Repository” will appear with the names/Friendly Name of the element that you have selected.
Click on Add Element in the pop-up. All the element mentioned in the Pop-up will be added to Element Explorer, which you can verify by opening Test Studio.
