What can we help you with?
< All Topics
Print

Project Elements

Posted
Updated
ByAdmin

What is a Repository?

A Repository is a centralized location to store elements, program elements, and step groups in an organized manner which are used in script development.

Let’s have a look into the Project Elements

What are Elements?

The objects that are present on web pages or application screens are called Elements.

Why do we need Elements?

Elements are basic entities in script development. Through these elements, the user can trigger actions or verifications on a platform and develop their respective scripts – Web, Android, or IOS

Example for Element

On the below page, + Element button, + Page button, Step Groups tab, etc. are all web elements on the web page. To interact with any of these web Elements, we have to create an element and use the element name in script development.

Consider the situation where we are going to automate the action of clicking on the + Page button. First, we have to create an element for the + Page button with any name.

Create an Element

In this section, we will cover the basics of Element creation. Here we will be explaining how to create Element.

Prerequisites

To create an Element, at least a single Page should be available.

Navigation

Home icon > Repository > Elements > Project Elements

Steps to create a Page

Once you log into the FireFlink, you will see a Project searchable dropdown. From the dropdown select the project you have created or the project which is allocated to you. In the left navigation menu, click on the Repository menu. You will land on the Page.

The container for Element is Page. You need to create elements under pages. You will not be able to create elements until you create at least one page.

1.To create a Page, click on the “+ Page” button. Initially when there are no Pages created. The “+ Page” button is provided at the center of the screen as shown below to create a Page.

2. Now the Create Page pop-up appears as shown below.

3. Enter valid data into the Name and Description text field. Here, the Name text field and Parent Page dropdown are mandatory. If you are creating a page for the first time – Root Page is selected by default. And parent page searchable dropdown is disabled. Click on the Create button and the page will get created. You can see the ‘Page created successfully’ message. In the Parent Page, you will also find a searchable dropdown if pages are already created. You can select the Parent Page from the dropdown.

4. You cannot create a duplicate page with the same name under the same parent.

5. The created page will appear on the table provided under the project elements tab. You can refer to the below screen.

Steps to create a subpage

1. To create a subpage, Hover the mouse on Newly added page . Click on the “+” icon, “Add Page” & “Add Element” option is displayed as shown below.

2. Now, click on Add Page option, Create Page popup appears as shown below.

3.Enter valid data into the Name and Description text field. The Name text field and Parent page dropdown are mandatory. The page on which the user hove the mouse and clicks on the “+” button, that page will be selected as the parent page by default. Click on the Create button. The subpage will be created under the selected parent page. You will see the Page created successfully banner message.

Note: The user cannot create multiple pages with the same name under the same parent page.

Steps to create an Element

1. To create an element, click on the “+ Element” button as shown below. The “+ Element” button will be disabled when there are no pages created.

2. Then the Create Element pop-up appears as shown below.

3. Enter valid data into Name, Type, and Description. The Name text field and type dropdown are mandatory fields.

4. The option under the “Type” dropdown varies depending on the project type.

  • For Web projects, the options of this dropdown will be all the “Web Element” types.
  • For Mobile projects with the platform Android, the options of this dropdown will be all the “Android Element” types.
  • For Mobile projects with the platform IOS, the options of this dropdown will be all the “IOS Element” types.

5. Select the Parent Page under the page that you want to create an element. This is a mandatory field.

6. When you hover the mouse on the page, click on the “+” icon beside the page, click on the “Add Element” option and click on “Add Manually” to add elements manually and you can also add Elements from “Shared Elements” options, as shown below.

7. When you hover the mouse on the page and click on Add Manually option, the page on which you hover the mouse will be selected as the parent page under the Parent Page searchable dropdown by default, and the Parent page dropdown will be disabled.

8. Select Locator Type, Value Type, and enter the locator value. This will enable you to add multiple locators for a single element by clicking on the Add Locator link. You cannot add the same locator type more than once for the same element; except XPath, CSS selector, and Partial Link Text.

9. Locator type, dropdown value, Type dropdown, and Locator Value text fields are mandatory. Hence, before clicking on the Add Locator link, all the fields should be filled.

10. If a user selects value Type as Dynamic, then the below Value text field display Syntax based on Locator type, i.e

  • If you select Locator type as XPath, then display syntax as:
    //tagName[@attributeName = ‘{DynamicVal1}’]
  • If you select Locator type as CssSelector, then display syntax as:
    tagName[attributeName=’{dynamicVal}’]

11. All the added locators are displayed in the Locator List table. You can edit the locator details under the Locator List table as shown below.

12. If the element has more than one locator, it will display a drag and drop icon and remove option will be enabled. You can remove or drag and drop the locator only if an element has more than one locator.

13. Using the drag and drop icon, you can arrange the locator based on the requirement. The top locator position should be used in run-time first, irrespective of the Locators priority configuration.

14. If you select “Copy to Shared Elements page” and click on Create & Continue button, the element is created under the selected parent page and it gets shared on the shared element page.

Fields other than the Parent Page dropdown in Create Element pop-up should get reset. You will stay in the Create Element pop-up. The switch button under the Shared Elements column for the elements present on a page for that particular element (User selected Page) will be turned ON by default. The same element is also created under the shared element Page.

You can see elements shared into the shared element page successful banner message.

15. If you select “Copy to Shared Elements page” and click on Create button, the element will get created under the selected parent page, and create element pop-up will be closed. The switch button under the Shared Elements column for that element present on-page for that particular element (User selected Page) should be turned ON by default. The same element is created under the shared element Page. You can see elements shared into the shared element page successful banner message.

16. If you have not selected “Copy to Shared Elements page” and clicked on Create & Continue button, the element is created under the selected parent page, fields other than the Parent Page dropdown in Create Element pop-up should get reset, and you will stay in Create Element pop up. You can see the element created a successful banner message.

17. If you have not selected the “Copy to Shared Elements page” and clicked on Create button, the element is created under the selected parent page, and create element popup will be closed. You can see the element created a successful banner message.

18. You can create an element with the same name, and a different element type under the same parent page.

19. You cannot create Multiple elements with the same name and same element type under the same parent page.

20. The created element will be displayed under the table which is provided under the project elements tab.

  • Users cannot create multiple elements with the same name and same type under the same parent page.
  • Users can create multiple elements with the same name and different types under the same parent page.

Add Element from shared element page into project elements

  • Hover the mouse on the page name in the page tree and click on the “+” icon beside the page name and click on the “Add Elements” option and click on the “Add from Shared Elements” option to add the element from “Shared Element” page into Project Element page. It displays Add from Shared elements popup, as shown below.

  • In Add, from the shared Element page pop-up display, all the elements are on the shared element page. You can select the check box for elements that you want to add to the project elements page from the shared elements page and click on add button. The elements will be added to the page name.
    • Suppose you are trying to add multiple elements with the same name and same type, on click of Add button will display a banner message.
    • Suppose the elements with the same name and same type already exist under the selected page then in the Add from Shared Elements pop-up for those elements the checkbox is disabled.

Table details on the project elements page:

The table under project elements contains 8 columns with column headers as Page, Type, Locators, State, Version, Shared, Modified by, and Actions.

  • Page: In this column, you can see all the created pages, subpages, root pages, and elements names.
  • Type: Here you can see the type of the element which is selected while creating it. For pages this column value is blank.
  • Locators: You’ll get the count of locators that are given for the elements while creating elements. For pages this column value is blank.
  • Shared: You see the switch button. When turned on, the elements are shared on the shared element page. While creating an element if you select Copy to Shared Elements page check box and click on Create or Create & Continue button, by default the element switch button is turned ON.
  • Modified by: This column displays the username who has recently modified the page or an element.
  • Actions:
    • When the user hovers the mouse on the root page or page under this column; Edit, Delete and More menu icons are available.
    • When the user hovers the mouse on the Element under this column, Impact List, Edit, Delete and More menu icons are present.

Edit, Delete & Details of Page

When the mouse hovers over the Page or Root page under the Action column, it will display the Edit, Delete, and More menu icons as shown below. The edit and delete icons are disabled for the Root page.

Edit Page

To edit the page Click on the edit icon under the action column. Edit Page pop-up appears as shown below.

Edit the required information on fields and click on the Update button. You can see Edit successful banner messages.

  • You cannot change the parent page while editing a page.
  • You cannot edit the Root Page.

Delete Page

To delete the page, click on the Delete icon under Actions Column. A warning Delete pop-up appears as shown below.

The message appears to make sure that if the user intentionally wants to delete the page, as the page will be containing some important data.

Click on the Delete button and the page is deleted. You will see the Deleted successfully notable message.

Note:

  • You cannot delete the page if the page contains only subpages.
  • You cannot delete the page if the page contains only elements.
  • You cannot delete the page if the page contains both subpages and elements.
  • You can’t delete the root page.

Page Details

To view the details of the page, click on the more menu icon under the actions column. This will display Details and History options as shown below.

Click on the Details option. The Page Details pop-up displays as shown below. Here you can view the details of the page.

You can also view the details for the root page by clicking on the details option for the root page to display the details popup as shown below. Here the user can view the details of the root page.

Attributes of page details popup:

This page consists of the details of all the attribute values that are non-editable.

  • Name: This attribute displays the Name of the page which is given while creating the page. When the name of the page is updated, the updated name is stored.
    For the root page, the display name is Root Page.
  • Description: Attribute displays the description which is given while creating the page. It displays a one-line description upon mouse hover. This display has a complete description in the tooltip.
    When creating the page, if the description is not given, then it will display as “–”.
    For “Root Page”-  it will always display the description as “–”.
  • Project Name: This attribute displays the project name along with the pages created.
  • Path: This attribute displays the path of the page.*
    Ex: The login page contains the home page. The home page popup displays the path as login/home. For the root page, the display path is “Root Page”.
  • Total Pages: This attributes displays the aggregated count of the subpages.
  • Total Elements: This attribute displays the aggregated count of elements.
  • Created by: This attribute displays the username who has created the page. For the root page, the display is- Created by N/A.
  • Created On: This attribute displays the date & time on which the page is created. For the root page, the display is- Created On N/A.
  • Modified by: This attribute displays the username who recently modified the page. For the root page, the display is- Modified by N/A.
  • Modified On: This attribute displays the date & time the page is recently modified.

Edit, Delete, Impact List & details of Element

When you hover the mouse on the Element under the Action column, it will display Edit, Delete, Impact list & More menu icons as shown below.

Edit Element

1. To edit an element, you have to hover the mouse on the element under the action column display- edit icon, and click on the edit icon. The Edit Element popup appears as shown below.

2. Edit the required information on fields and click on the update button. You can see the ‘Updated Successfully’ message.

3. While editing the element, you can add a locator, delete the locator and update the locator details under the locator list table.

  • You cannot change the parent page as the parent page dropdown is disabled.
  • You cannot edit elements that are shared. When tried to edit the element in shared, you will receive the information banner which says that “The shared elements cannot be edited”.

Delete Element

To delete the Element, you have to click on the Delete icon for the elements under Actions Column. Upon clicking that, the warning- delete pop-up appears as shown below.

Upon click of the Delete button, the element will be deleted. You can see the successful banner message.

Note:

  • You cannot delete shared elements. If you try to delete it, an information message will appear saying that <<element name>> <<element type>> cannot be deleted as it is shared on the shared element page.

Element Details

The user can view element details in two ways

1. To view the details of Element, click on the More menu icon under the actions column. It will display Details & History options as shown below.

2. Click on the details option. Element Details pop-up displays as shown below. Here you can view the details of the Element.

3. The second way to view the details of the element is, by a single click on the element display under the element details page as shown below.

Attributes of Element details popup/page:

In the Element details, all the attribute values are non-editable.

  • Name: This attribute displays the Name of the element which is given while creating the element. If the name of the element is updated, then the display is the updated element name.
  • Type: This feature shows the element type which is selected while creating the element.
  • Description: This aspect displays the description which is given while creating the element. It shows a one-line description upon mouse hover. The display has a complete description in a tooltip while creating the page, if the description is not given, then it will display as “–”.
  • Project Name: The attribute displays the project name along with the pages created.
  • Path: Displays the path of the element.
    Ex: The login page contains the Save element. The Save element popup displays the path as Login/Save.
  • Locator Count: This feature displays the count of locators that the element has.
  • Created by: This attribute displays the username who has created the element.
  • Created On: This aspect displays the date & time when the element is created.
  • Modified by: This attribute displays the username who recently modified the element.
  • Modified On: This attribute displays the date & time when the element was recently modified.
  • Locator List table:
    • Locator Type: This column displays the Locator type which is selected while creating the element.
    • Value Type: This column displays the value type that is selected while creating the element.
    • Locator Value: This column displays the Value that is given while creating the element.
    • Identified through: This column displays the icon to indicate whether an element is added manually or through the element locator plugin.

Impact List of Element

When the user hovers the mouse over the element name and clicks on the Impact List option under the Action column, it will display “Scripts” and “Step Groups” options as shown below.

Locator details

To view the Locator details you should click on Locator count under the Locator column as shown below.

Attributes of Locator details pop-up:

In the Locator details pop-up, all the attribute values are non-editable.

  • Name: This attribute displays the Name of the element that is given while creating the element. If the name of the element is updated, then the display is the updated element name.
  • Type: This attribute displays the element type which is selected while creating the element.
  • Description: The feature displays the description which is given while creating the element. When creating the element, if the description is not given, then it will display as “–”.
  • Locator List table:
    • Locator Type: displays the Locator type which is selected while creating the element.
    • Value Type: features the Data type which is selected while creating the element.
    • Locator Value: displays the Locator Value which is given while creating the element.
    • Identified through: This column displays the icon to indicate whether an element is added manually or through the element locator plugin.

If you single-click on Root Page, you will be navigated to a new page under the same tab and the content is as shown below.

If you single-click on the Page, then you will be navigated to a new page under the same tab and the content is as shown below.

Locators

Before performing any action on the element, you will need to find or inspect the elements. To locate the element accurately, locators are used. Locators are like addresses of the elements. If the locator value is incorrect, then the scripts will fail to execute. To overcome this, you can add multiple locators for a single element. In case one locator is incorrect, the compiler will check for other locators.

Web Locators supported by FireFlink: –

  • id
  • name
  • className
  • tagName
  • linkText
  • partialLinktext
  • cssSelector
  • xpath

Mobile Locators supported by FireFlink: –

  • Id
  • Name
  • ClassName
  • TagName
  • LinkText
  • PartialLinkText
  • cssSelector
  • accessibilityID
  • xpath
  • androidUiAutomator
Table of Contents