Top
Identify unique elements on your screen
  • 11 Oct 2024
  • 2 Minutes To Read
  • Dark
    Light
  • PDF

Identify unique elements on your screen

  • Dark
    Light
  • PDF

Article summary

Overview

After capturing the screen, you need to identify the unique UI elements on the screen and tag the screen so that the in-app experience you create appears on the right page.

Based on how the element is identified, a colored box appears around it. These boxes appear in one of three colors:

  • Green: If the selected element can be identified using its unique properties and identifiers, then a green box appears around it. This element is considered strong, that is, Whatfix Mobile can find the element on your mobile app screen.
    mobile_green identifier.png

  • Orange: If the selected element is identified via reference, then an orange box appears around it. This element is identified based on its position in reference to some other element.
    mobile_orange identifier.png

your title goes here

When you're selecting an element via reference, ensure that there are no similar elements. For example, consider that you're creating content on a page where elements share non-unique IDs, such as on pages that have a lot of elements in a scrollable box, grid, or list. These elements have common identifiers on each row, which can make selecting a specific element challenging due to a lack of distinct identification.

If you want to always target the first element among those sharing a common identifier, enable the Remove Reference toggle to always prioritize the first element. For example, enable this toggle if you have a list of users and you want to always show a tooltip only on the first username.

mobile_priortize first element.png

  • Red: If the selected element cannot be identified using any unique properties or by reference, then a red box appears around it. Whatfix Mobile cannot find this element on your mobile app screen. You may have to select another element.
    mobile_red identifer.png

Add Identifiers to UI elements

Use the following steps to add the identifiers to elements on your screen:

your title goes here

Ensure that you create the project and capture the screen before identifying the element.

  1. Click Add Identifier to identify the unique elements on the screen to tag the right screen.
    add_identifier
  2. Click the desired element on the page.
    identifier_home

Example: If you want to add Audio to the Home screen, choose the title Home, which can uniquely identify the screen and play the Audio on the correct screen.

your title goes here

Click Add More to select more elements on the page, and then repeat step 2.
identifier_home

With each unique element selected on the page, Whatfix Mobile can better identify your mobile app screen.


Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.