Ask AI
Skip to main content

elementhasclass

Function: Element has class​

This action helps you determine if a specific visual component (like a button, text box, or image) on your application screen has a particular styling or behavior applied to it. It's useful for making decisions based on how an element looks or behaves in your user interface.

Input​

  • Element: The visual component on your screen that you want to inspect. This could be a button, a text field, an image, or any other part of your user interface.
  • Class: The name of the style or behavior you are looking for. For example, 'highlighted', 'active', or 'hidden'.

Output​

  • Result: A True/False value indicating whether the specified 'Class' was found on the 'Element'. This value will be stored in a variable you define, which you can then use in subsequent steps of your application logic. By default, this variable will be named RESULT if you don't specify a different name.

Execution Flow​

Real-Life Examples​

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

  1. Conditional Visibility of a Section:

    • Scenario: You have a form, and you want to show a "Review & Submit" button only when all required fields are filled and the form is valid. When the form is valid, a "valid-form" style (class) is automatically applied to the form container.
    • Inputs:
      • Element: My Order Form (the main form component)
      • Class: valid-form
    • Result: A variable named isFormReady will be set to True if the My Order Form has the valid-form class, otherwise False. You can then use isFormReady to control the visibility of your "Review & Submit" button.

  2. Highlighting Active Navigation:

    • Scenario: In a multi-step application wizard, you want to visually highlight the current step in the navigation bar. Each step's navigation item gets an "active" class when it's the current step.
    • Inputs:
      • Element: Step 3 Navigation Item (the button or link for the third step)
      • Class: active
    • Result: A variable named isStep3Current will be set to True if the Step 3 Navigation Item has the active class, otherwise False. This allows you to confirm the user's current position in the wizard and potentially trigger other actions based on it.

  3. Checking Product Availability Status:

    • Scenario: On an e-commerce product page, you want to display an "Out of Stock" banner if a product image is visually grayed out, indicating it's unavailable. This grayed-out effect is applied using an "unavailable" class.
    • Inputs:
      • Element: Product Image for Item X
      • Class: unavailable
    • Result: A variable named productIsUnavailable will be set to True if the Product Image for Item X has the unavailable class, otherwise False. You can then use productIsUnavailable to show or hide the "Out of Stock" banner on the page.