What can we help you with?
< All Topics
Print

Shared Elements

Posted
Updated
ByAdmin

What are Shared Elements?

Shared elements are the common elements on multiple pages.

Why do we need Shared Elements?

If the element is common on multiple pages, instead of creating the element on all the pages, the user can create one element and share that element on the shared element page by turning ON the Toggle button. From the shared element page, the user can add the element to project elements wherever it is needed.

How to Move Element from Project Elements to Shared Elements page:

Prerequisites

  • To share the Element, at least one Page and one Element should be available under the project element tab.

Navigation

Home icon >> Repository >> Elements >> Shared Elements

How to move the elements from the project elements tab into the shared elements tab?

There are two ways to move the elements into the shared elements page.

First way:

  • Once you login into the FireFlink, you will see a Project searchable dropdown. From the dropdown select the project you had previously created or the project which is allocated for you. In the left navigation menu click on the Repository menu. You will land on the Project Elements page by default.
  • In the page tree, under the Shared Element column, a switch button is provided for all the elements.
  • Turn ON the switch button for the elements you want to move into the Shared Element page.
  • The element you have shared will be displayed under the shared element section. Once done, it will display the Element shared successfully special message.
  • Click on the dropdown beside the Elements tab and select the Shared Elements Option. You will land on the Shared Elements page. You can view the elements which you moved from the project element page to the Shared elements page. You will also have elements shared into the shared element page successfully banner message.

Second way:

  • Once you log into the tool, you will see a Project searchable dropdown. From the dropdown select the project you had previously created or the project which is allocated for you. In the left navigation menu, click on the Repository menu. You land on the Project Elements page by default.
  • Click on the “+ Element” button, “Create Element” pop-up will be displayed as shown below.

  • Enter valid data into Name, Type, and Description. Here the Name text field and Type Searchable dropdown are mandatory fields.
  • The option under Type the Dropdown depends on the project type.
  • Select the Parent Page under which page you want to create the element. This is a mandatory field.
  • If you hover the mouse on the page and click on the “+” icon beside the page and select Add element option, the creative element pop-up will be displayed. In that create element popup by default Parent page dropdown will be selected. It will be disabled as shown below.
  • Select Locator Type, value, and the Type, and enter the value. Click on the add button. Added locators are populated in the Locators List table. You can add multiple locators for a single element. You cannot add the same locator type more than once for the same element except XPath, CSS selector, and Partial Link Text.
  • Locator type dropdown, Value Type dropdown, and value text fields are mandatory. Before adding a locator to the locator list table, all these fields should be filled.
  • If the user selects Data Type as Dynamic, then the below Value text field displays Syntax based on Locator type.
  • If you select Locator type as XPath, then the display syntax is: //tagName [@attributeName=‘{DynamicVal1}’]
  • If you select Locator type as CssSelector, then the display syntax is: tagName[attributeName=’{dynamicVal}’]
  • All the added locators are displayed in the Locator List Table. You can edit the locator details under the Locator List table by clicking them.
  • If the element has more than one locator, you can hover the mouse on the locator to display the Delete icon and reorder icon. You can delete and reorder locators only if the element has more than one locator.
  • Using the reorder icon, you can reorder the locators based on the requirement. Always the top locator positioned should be used in run time first, irrespective of the Locators priority configuration.
  • If you have selected the “Copy to Shared Elements page” and clicked on Create & Continue button, the element gets created under the selected parent page. Fields other than the Parent Page dropdown in Create Element popup should reset. You will stay on the Create Element popup. The switch button under the Shared Elements column for that element will be turned ON by default. The same element is also created under the shared element Page. You can see the ‘The element shared into shared element page successfully’ banner message.
  • If you have selected “Copy to Shared Elements page” and clicked on the button, the element will be created under the selected parent page, and create element popup is closed. The switch button under the Shared Elements column for that element should be turned ON by default. The same element is also created under the shared element Page. You can see the ‘The element shared into shared element page successfully’ banner message.

While moving the shared elements into project elements, if the element with the same name and same type is already present in the shared element, it will display a Warning conflict popup as below.

  • If the user selects the ‘merge the locators of the elements’ option and clicks on the save button, it will display the conflict popup as shown below.

1. While merging the locator, if the Id, name, class name, tag name, or link text already exists with the conflict element, and when a user tries to merge the elements he will not be able to merge.

2. While merging the locator, if XPath, CSS selector, or partial link text already exists with the conflict element with the same value and when a user tries to merge, the user should not be able to merge.

3. In the conflict popup user can edit the locator value and the user can delete the locator.

4. If the locator is already in its existing shared element page, then those locators are shown a “Red” color in the project elements element conflict pop-up.

5. After merging the locator from the project element into the shared element, the merged locators are shown in the “Green” color in the shared element conflict pop-up.

6. When you move a project element into a shared element and if one shared element has a conflict with multiple shared elements then in the conflict popup it will display multiple conflicts as shown below.

7. If there are multiple conflicts in the conflict popup it will display the Skip button. With the click of the Skip button, that particular conflict gets removed from the Element Conflict popup.

8. If you want to navigate to other conflicts you have to click on the Next or Back button. With the click of the Next button, you will be navigating to the next conflict. if you click on the Back button you will navigate back to the previous conflict.

9. Once you drag and drop at least one locator from the project element into the shared element Next, Back, and Skip button is disabled once the conflict gets resolved Next, Back, Skip, and Save Changes button gets enabled, on click on the Save Changes button elements get saved and the conflict popup gets closed.

10. If the user selects add this element as a separate element in the shared elements Warning conflict popup and clicks on the save button, the element is entered as a separate element.

Table details are on the Shared Elements page

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

  • Shared Elements: This column displays the element name which is moved from the project element page to the shared element page.
  • Shared Between Pages: This column displays the page names among which page elements are shared.
    Ex: If the element is shared from the login page to the signup page then under this column, display login, sign up. If the same element is added to other pages like the profile page then under this it should display login, sign up, and profile.
  • Type: This column displays the type of element which is selected while creating the element.
  • Locators: This column displays the count of locators that are given for the elements while creating the element.
  • Modified by: This column 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.
  • Actions: When the user hovers the mouse on Element, this column displays Impact List, Edit & more menu icons.

Edit & details of Shared Elements

When you hover the mouse on the shared Element under the Action column, it will display the Edit and More menu icon as shown below.

Edit Shared Element

1. To edit the element, you have to hover the mouse on the element under the action column that displays the Edit icon. Click on the edit icon. Edit Element pop-up appears as shown below.

2. Edit the required information on the fields and click on the update button. You can see the updated successfully banner 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. The parent page dropdown is disabled.

Shared Elements Details

Users can view shared element details in two ways:

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

Click on the details option. The Shared Element Details pop-up is displayed as shown below. Here you can view the details of the Shared Element.

2. Another way to view the details of the shared element is, when you single click on a shared element, it displays the shared element details page as shown below.

Attributes of Shared Element details popup/page:

In Shared Element details, all the attribute values 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.
  • Type: This attribute displays the element type which is selected while creating the element.
  • Description: This attribute displays the description which is given while creating the element. It displays a one-line description upon mouse hover and displays the complete description in the tooltip while creating the page, if the description is not given, then it will display as “–”.
  • Shared Between Pages: This attribute displays the page names among which pages element are shared.
  • Project Name: This attribute displays the project name under which the project element got created.
  • Path: This attribute displays the path of the element.
    Ex: The login page contains the Save element in the Save element details. The popup displays the path as login/Save.
  • Locator Count: This attribute displays the count of locators that the element has in it.
  • Created by: This attribute displays the username who created the element.
  • Created On: This attribute displays the date & time on which the element is created.
  • Modified by: This attribute displays the username who recently modified the element.
  • Modified On: This attribute displays the date & time on which the element is 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 Data type which is selected while creating the element.
    • Locator Value: This column displays the 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 plug-in.
Table of Contents