Ask AI
Skip to main content

Element has class

Function: Element has class​

This action helps you determine if a specific visual component (UI element) on your application screen currently has a particular style class applied to it. It's useful for checking the current state or appearance of an element without needing to write any code.

Input​

  • Element:
    • Type: UI element
    • Description: The specific visual component on your page that you want to inspect. This could be a button, a text field, an image, or any other part of your user interface.
    • Required: Yes
  • Class:
    • Type: Text
    • Description: The exact name of the style class you are looking for on the selected UI element (e.g., "active", "hidden", "error").
    • Required: Yes

Output​

  • Result:
    • Type: True/False
    • Description: A True/False value indicating whether the specified class was found on the element. This value will be stored in a variable named 'RESULT' by default, but you can change this name to something more descriptive for your application.

Execution Flow​

Real-Life Examples​

Here are some practical ways you can use the "Element has class" action in your application:

Example 1: Conditional Visibility of a Section​

Imagine you have a "Details" section that can be expanded or collapsed, and its visibility is controlled by a collapsed class. You want to check if it's currently collapsed.

  • Inputs:
    • Element: Details Section (the UI element representing the section)
    • Class: collapsed
    • Result: isSectionCollapsed
  • Result: The variable isSectionCollapsed will be True if the "Details Section" currently has the collapsed class, meaning it's hidden. It will be False if the class is not present, meaning the section is expanded. You can then use isSectionCollapsed to decide whether to show an "Expand" or "Collapse" button.

Example 2: Validating Form Input State​

You have an email input field, and when the user enters an invalid email, an invalid-input class is added to highlight the error. You want to check this state before submitting the form.

  • Inputs:
    • Element: Email Input Field (the UI element for email entry)
    • Class: invalid-input
    • Result: emailHasError
  • Result: The variable emailHasError will be True if the Email Input Field has the invalid-input class, indicating an error. It will be False if the input is valid. You can use emailHasError to prevent form submission or display an error message.

Example 3: Checking Active Navigation Item​

In a navigation menu, the currently selected item might have an active class. You want to confirm which menu item is active to perform a specific action.

  • Inputs:
    • Element: Dashboard Menu Item (the UI element for the dashboard link)
    • Class: active
    • Result: isDashboardActive
  • Result: The variable isDashboardActive will be True if the Dashboard Menu Item has the active class, confirming it's the currently selected page. It will be False otherwise. This could be used to enable or disable certain actions based on the current page.