Get Started

Start

• Definition: This step initiates the test by directing the browser or test framework to navigate to a specific URL provided by the user.
• How it Works: The user inputs the desired URL (e.g., https://example.com) where the testing begins. This simulates a real user opening a browser and navigating to the start page. The browser loads the page and waits for further instructions.

---

Input

Click

• Definition: Simulates a user clicking on an element (e.g., a button or a link) on the web page.
• How it Works: The plugin identifies the clickable element using its selector (like an ID, class, or XPath), and triggers a click event. This action mimics a mouse click, which could lead to form submissions, page navigation, or opening modals, depending on the element’s functionality.

Hover

• Definition: Simulates a user hovering their mouse over a particular element on the webpage.
• How it Works: The plugin moves the mouse cursor over a specified element without clicking. This is useful for triggering hover effects such as dropdown menus or tooltips. The element is identified by a selector, and the plugin activates the hover event, replicating a real user interaction.

Manual Input

• Definition: Provides an opportunity for the user to input values or perform actions manually during the test run.
• How it Works: The test pauses at this step, allowing the user to interact with the page directly, such as typing in a form field or clicking a specific button. Once the manual action is complete, the test continues with the next step.

Set Text

• Definition: Automatically fills in a text field or text area with specified input.
• How it Works: The plugin locates the text field or textarea using its selector and inputs the provided text into the field. This simulates user typing into a form field, commonly used for entering usernames, passwords, or search queries.

Set Select

• Definition: Simulates selecting an option from a dropdown or selection field.
• How it Works: The plugin identifies a select element on the page and sets a specific option based on the value or text provided by the user. This mimics a user selecting an option in a form, such as choosing a country from a dropdown menu.

Scroll

• Definition: Emulates the action of scrolling through a page or a specific element.
• How it Works: The plugin scrolls the webpage or a scrollable element (like a div) by a specified amount. This can be useful for triggering lazy-loaded content or ensuring elements become visible for further interaction.

Reload

• Definition: Simulates refreshing or reloading the current web page.
• How it Works: This step reloads the entire page, just as a user would press the browser’s refresh button. It can be used to test behavior after page reloads, such as checking if session data persists or if elements behave differently after reloading.

---

Check

Check Page Title

• Definition: Verifies that the title of the current webpage matches the expected value.
• How it Works: The plugin retrieves the title of the current page and compares it to the expected title provided by the user. This is useful to confirm that the correct page is loaded, as the title is often a key indicator of page content.

Check Text

• Definition: Verifies that specific text is present within a non-input field element, such as a <div>, <span>, or <p>.
• How it Works: The plugin searches for the element containing the expected text using a selector. It then checks if the actual text of that element matches the expected value, ensuring the page content is correct.

Check Value

• Definition: Validates the value of form field elements like input, textarea, or select.
• How it Works: The plugin locates the input element using its selector and retrieves its current value. This value is then compared to the expected value to ensure that form fields are correctly populated, such as in a form submission scenario.

Check Attribute

• Definition: Validates that a specific attribute of an element has the expected value.
• How it Works: The plugin identifies the target element and retrieves the value of a specified attribute (such as href, src, alt, or class). It compares the actual attribute value with the expected one to confirm that the element is correctly configured.

Check Element Count

• Definition: Verifies the number of occurrences of certain elements (e.g., li, div, option) on the page matches the expected count.
• How it Works: The plugin finds all elements of a certain type or class on the page (e.g., list items in a navigation menu) and counts them. It checks if the number of these elements matches the expected count, ensuring page structure or dynamic content is loaded properly.

Check Visibility

• Definition: Checks if a specified element is visible or hidden on the page.
• How it Works: The plugin identifies an element and verifies its visibility status by determining if the element is displayed on the page or hidden (using properties like display: none or visibility: hidden). This ensures that elements are correctly shown or hidden based on expected behavior.

Check Data

• Definition: Validates data stored in the browser’s local or session storage, using a user-assigned name and value.
• How it Works: The plugin retrieves the stored data (such as values or attributes of elements) from the browser’s local or session storage based on a key that the user assigns. It also supports retrieving dynamic data through shortcodes (e.g., generating the current date or timestamp). The retrieved value is compared with the expected value to ensure data persistence or accuracy, particularly useful for validating state management or temporary storage in web applications.

---

Delay

Delay

• Definition: Pauses the execution of the test for a specified amount of time (in seconds).
• How it Works: The plugin introduces a delay before proceeding to the next step. The user defines the number of seconds to wait. This is useful for simulating real-world pauses, such as waiting for animations to complete or content to load fully.

Wait To

• Definition: Pauses the test execution until a specific element performs a certain action (e.g., becomes visible, clickable, or contains text).
• How it Works: The plugin waits for an element on the page to meet certain conditions (such as appearing, being enabled, or having specific content) before continuing with the test. This ensures that the test does not proceed until the element is ready for interaction.

---

Data

Element Data

• Definition: Stores the value or attribute of an element into a data variable for later use.
• How it Works: The plugin extracts the value (e.g., input field value) or a specified attribute (e.g., src, href) of an element. The extracted data is stored in a named variable, which can be used in subsequent steps, allowing for dynamic interactions based on real-time data.

Store Data

• Definition: Allows users to store dynamic data into a variable, which can include system-generated values like date and timestamp, or data extracted from elements.
• How it Works: The user can create and name a data variable and assign it a value from predefined shortcodes (such as the current date or timestamp), or from previously stored data. This allows flexibility in using dynamic content throughout the test, making it possible to validate or reuse information as the test progresses.

---

How to use the steps

1. Drag and Drop Step to Add to Test Flow
   • To begin creating a test flow, the user can drag and drop a desired step from the available list into the blank section of the test flow editor. This simple action adds the step to the sequence, allowing the user to start building their automated test case.
2. Reordering Steps
   • The user can sort the steps by dragging and dropping them in the desired order within the test flow. This flexibility ensures the test steps follow the exact sequence required for the scenario being tested.
3. Double-Click to Configure a Step
   • Once a step is added, the user can double-click on the step to open a popup. This popup will contain input fields where the user can enter the necessary information for the step to function properly. For example, in a “Click” step, the user might input the element selector, while in a “Check Data” step, they might input the key-value pair for browser storage.
4. Removing a Step
   • To remove a step from the flow, the user can select the step and press either the Backspace or Delete key. This will instantly remove the step from the test flow, simplifying the process of making adjustments or corrections.
5. Saving the Test Flow
   • Once all steps are added and configured, the user can save the test flow by clicking the Save button located in the top right corner of the interface. This action saves the current configuration of the test flow for later execution.

XPath Selector

• Definition: XPath is one of the methods used to locate elements on a webpage by their path in the document structure.
• Recommendation: It is recommended to use the SelectorsHub Chrome Plugin for easily obtaining the XPath of any element. This tool provides a straightforward way to generate precise XPath selectors, saving time and improving accuracy when setting up your automation steps.

Class Selector

• Definition: The Class selector is used to locate elements based on the class name or names assigned to them in the HTML structure.
• How it Works: When using the Class selector, the user must provide the class name(s) of the element. If an element has multiple classes, the user can input multiple class names, separated by spaces, to uniquely identify the element.
• Example: If an element has the class button primary, the user can input both class names, and the plugin will locate that specific element on the page.
• Note: Ensure that the correct class names are used, as class names are often shared by multiple elements. Using a combination of class names can narrow down the selection.

ID Selector

• Definition: The ID selector is used to uniquely locate an element on the page by its ID attribute, as each element should have a unique ID.
• How it Works: When using the ID selector, the user needs to provide the ID of the target element. The form will accept the ID either with or without the # prefix, making it flexible for users to input the ID in their preferred format.
• Example: For an element with the ID submit-button, the user can simply input submit-button or #submit-button, and the plugin will recognize it.

Variables and Dynamic Data

• Using Variables: In any step that supports dynamic input, the user can type the character "$" to open a popup displaying available variables. These variables may include dynamically generated data such as timestamps, or previously stored values from earlier steps (e.g., using the Element Data or Store Data steps).
• Once the popup appears, the user can select the desired variable to insert it into the field. This allows flexibility in testing scenarios where values may change or need to be reused dynamically.