Create Your First Testcase with Test Management Modal

Learn how to create your first UI test case using Maeris's Test Management Modal. This guide will walk you through the process step by step.

Opening the Test Management Modal

To create a new test case, navigate to the Notebook and click the "Create New Test" or "Add Test" button. This will open the Test Management Modal where you can configure your test.

Quick Access

  • From the Notebook: Click the "+" button or "New Test" option
  • Keyboard shortcut: Use Ctrl/Cmd + N (if available)
  • From the toolbar: Select "Create Test" from the actions menu

Step 1: Basic Test Information

Test Name

Enter a descriptive name for your test case.

Example: "User Login with Valid Credentials"

Test Description

Add a brief description explaining what the test verifies.

Example: "Verifies that users can successfully log in with valid email and password"

Tags

Add tags to categorize your test (optional but recommended).

Examples: @smoke, @login, @critical, @regression

Step 2: Define Test Steps

Test steps define the actions your test will perform. Each step represents an interaction with your application.

Common Test Step Types

  • Navigate: Go to a specific URL or page

    Example: Navigate to "https://example.com/login"

  • Click: Click on an element (button, link, etc.)

    Example: Click on the "Login" button

  • Type: Enter text into an input field

    Example: Type "user@example.com" into the email field

  • Verify: Check that an element exists or has specific content

    Example: Verify that "Welcome" text is visible

  • Wait: Wait for an element to appear or condition to be met

    Example: Wait for the page to load

  • Select: Select an option from a dropdown

    Example: Select "United States" from country dropdown

Step 3: Using Selectors

Selectors help Maeris locate elements on your web page. You can use CSS selectors or XPath expressions.

Getting Selectors

  • Use the Light QA Extension to automatically fetch selectors
  • Manually enter CSS selectors or XPath expressions
  • Use browser DevTools to inspect elements

Learn more: How to Fetch CSS Selector & XPath

Selector Best Practices

  • Prefer stable selectors (IDs, data attributes) over fragile ones (class names that change)
  • Use unique selectors to avoid matching multiple elements
  • Test your selectors before saving the test
  • Leverage Maeris's auto-healing capabilities for dynamic elements

Step 4: Test Configuration

Execution Settings

  • Browser: Select the browser for test execution (Chrome, Firefox, Edge, Safari)
  • Environment: Choose the environment (dev, staging, production)
  • Timeout: Set maximum wait time for operations
  • Retry: Configure automatic retry on failure

Advanced Options

  • Enable screenshots for each step
  • Configure video recording
  • Set up test data or variables
  • Add pre and post-test hooks

Step 5: Saving Your Test

Once you've configured your test, click "Save" or "Create Test" to save it to your Notebook. You can also save as draft if you want to continue editing later.

Before Saving

  • Review all test steps for accuracy
  • Verify selectors are correct
  • Test the flow manually if possible
  • Add appropriate tags and descriptions

Example: Creating a Login Test

  1. Test Name: "User Login with Valid Credentials"
  2. Step 1: Navigate to "https://example.com/login"
  3. Step 2: Type "user@example.com" into email field (selector: #email)
  4. Step 3: Type "password123" into password field (selector: #password)
  5. Step 4: Click on "Login" button (selector: button[type="submit"])
  6. Step 5: Wait for page to load
  7. Step 6: Verify that "Welcome" text is visible (selector: .welcome-message)

Next Steps

Now that you've created your first test case, learn how to run it and interpret results: