AI-Based QA Automation (BrowserStack LCA)
Project Summary
Developed a complete no-code automation solution using BrowserStack Low Code Automation (LCA) for a SAAS web application. The framework covered the entire QA pipeline — from test creation to execution, validation, and reporting — entirely through a visual interface, with no scripting required.
Test Authoring Highlights
- Created structured, modular test cases for key SAAS modules like
- Login, Dashboard, Profile, Notifications, Job Management
- All test flows were built via step-by-step visual recording:
- Actions included: Page Load, Click, Input, Text Validation, Visual Assertion
- Each step was:
- Logged with resolution, author, and metadata
- Configured with intelligent timeouts, fail-fast settings, and test data injection
Validation Techniques
Text-Based Validation
- Verified visible UI text like “Dashboard”, “My Profile”, etc
- Used precision selector tuning (hover/keyboard navigation)
Visual Validation
- Validated layout-sensitive elements like icons, colors, and button style
- Captured rendered visuals beyond standard DOM targeting
AI-Powered Interactions
- AI Validations with natural language:
- “Validate if Placement Rate > 80%”
- AI Actions like:
- “Select date as 2 days from today”
- No XPath or coding required — AI translated prompts into UI logic
Advanced Automation Capabilities
Accessed through the three-dot menu, BrowserStack LCA allowed powerful test actions such as:
- Add API calls alongside UI tests
- Insert JavaScript logic
- Configure Loops for pagination or bulk rows
- Email validations (e.g., verify confirmation emails)
- Extract dynamic values into variables
- Apply conditional flows (if, else if, else)
- Execute Database queries for backend assertions
Reusability & Scaling
Modules
- Repeated steps like login were grouped into reusable modules (e.g., LoginModule)
- Reduced duplication and enforced consistency
Loops
- Enabled repeated actions for:
- Lists, dropdowns, paginated tables
- Essential for data-driven or iterative testing
Clean-Up Options
- Secure Delete Step workflow to maintain test hygiene
- Seamless Import Module option to reuse previously created flows
Test Suite Orchestration
Test Suite Creation
- Grouped multiple tests under a named suite
- Selected platform (Desktop/Mobile) and browsers (Chrome, Edge, Firefox)
Test Selection & Ordering
- Picked existing tests from the library
- Reordered them via drag-and-drop for desired execution sequence
Configuration & Scheduling
- Scheduled automated suite runs by:
- Days of week & time (IST)
- Optional rerun on failed cases
- Enabled CI tool triggers and custom environment URLs (e.g., staging domains)
- Supported local network testing for private apps
Execution & Build Management
Triggering a Test Suite
- Clicked Run to initiate a Build
- Confirmation: “Build triggered…”
Build Dashboard
- Monitored all suite runs with:
- Suite name
- Browser used
- Status: ✅ Passed / ❌ Failed / ⚠️ Skipped
- Created by & time
Result Analysis & Debugging
Build Summary
- Overview of each test’s result
- Duration
- Status (pass/fail)
- Rerun options
- Retry history (e.g., “1 retry before failure”)
Step-by-Step Playback
- Full video playback per test ru
- Time-synced execution with each action:
- Clicks, inputs, assertions
- Tabs for:
- Console logs
- Network logs
- Execution config (browser, resolution)
Failure Diagnostics
- Example
- Expected: “My Profile”
- Actual: “Dashboard”
- Captured:
- Screenshot
- Exact failed step
- Retry attempts
- Validation logic used
Edge Case Analysis: False Positive Playback
- Test marked as “Passed” but video showed blank data:, page
- No UI loaded; browser stuck in auto-launch state
Root Cause:
- Likely headless video capture issue OR DOM matched too earl
- Possible causes:
- Page failed to load
- Mocked selectors matched without UI rendering
Resolution:
- Add wait-for navigation after open UR
- Use visual checkpoints post-load
- Always cross-check logs + video, not just step status
Final Outcome
Successfully implemented a robust, modular, AI-assisted, and visually verifiable automation framework using BrowserStack LCA. The entire solution:
- Eliminated manual scripting
- Validated UI/UX and backend integration
- Scaled across environments via reusable modules and test suites
- Enabled deep debugging with step replay, screenshots, logs, and AI insights
BrowserStack LCA – SAAS
Automation Dashboard – BrowserStack LCA
This is the main test automation dashboard in BrowserStack Low Code Automation (LCA), under the Default Project - LCA workspace. All test modules built for the SAAS platform are organized and listed here for quick execution and monitoring.
What it shows:
- Total of 8 automated tests for different SAAS modules (e.g., Profile, Notifications, Student Module).
- Each test has its:
- Last updated info
- Screen resolution
- "Run" trigger option for cloud execution.
- All tests updated and maintained by: Vrashank Dhar (visible as test owner).
- Navigation panel shows:
Tests, Test Suites, Modules, Data Config, etc.
Purpose:
To centralize and run QA automation without writing code manually — using AI-based, visual low-code workflows.
SAAS Automation Test – Dashboard View (BrowserStack LCA)
This screen represents the automation flow configuration for the SAAS College login and dashboard validation test using BrowserStack’s Low Code Automation (LCA) framework. It's part of a structured suite under the SAAS → Automation → Dashboard path.
What it shows:
- Total of 16 sequential test steps configured visually without manual scripting.
- Test starts from page load and validates key checkpoints such as:
- Heading verification (SAAS College, Sign In)
- Input interaction (email/password)
- Dashboard assertion (Dashboard, Placement Rate)
- Intelligent timeouts enabled (120s) to handle real-world page delays.
- Strict failure policy: “❌ Fail the test immediately” on any error.
- Test data like email/password is auto-inserted using typed values (e.g., admin@college.edu).
- Test is modular with each action clearly defined — click, input, validate.
Purpose: To ensure automated login flow verification for the SAAS college product and validate the user landing dashboard. Built for fast regression runs with no-code interaction using BrowserStack LCA.
SAAS Test Creation – BrowserStack LCA
This interface shows the test authoring view in BrowserStack Low Code Automation (LCA), where individual test flows are recorded and configured for SAAS application QA.
What it shows:
- This is a step-by-step test creation panel, where a test case for SAAS College login and dashboard is being constructed.
- Total of 10 recorded steps currently added, including:
- Page open (https://talent-connect-symphony...)
- Header validation (SAAS College, Sign In, Dashboard)
- Input field interaction (Email, Password)
- Secure entry and click action (Sign In button)
- Each step is validated visually or via text assertions
- The “Record” state indicates the session is live and capturing actions.
- Support for AI Interactions and modular test import is built-in.
- Shows the resolution being tested: 1366×768, ensuring consistent visual results.
Purpose:
To visually build test flows with no scripting. This screen allows rapid QA test development for login flows, validations, and interaction coverage — designed for non-technical users or rapid prototyping in agile teams.
Visual Validation – BrowserStack LCA Test Authoring
This screen highlights the Visual Validation capability in BrowserStack Low Code Automation, used during test creation for the SAAS College dashboard flow.
What it shows:
- The test creation is in progress, with step-by-step validations already defined (login and dashboard verification).
- At Step 11, the tool has entered Visual Validation Mode, allowing the user to:
- Hover and pick an on-screen UI element.
- Lock the selector based on actual visual layout rather than DOM-only conditions.
- Validate rendered output, colors, icons, or image-based elements (non-textual).
- This helps cover scenarios that cannot be verified using just text (e.g., button shapes, icons, or logos).
- UI prompts like “Click or use ↑/↓ to change the selector while hovering…” indicate intuitive guidance for fine-grained element capture.
Purpose:
To enhance UI regression accuracy by capturing the visual state of the application (beyond DOM text), ensuring robust validation of layout-sensitive elements in the SAAS platform.
Text Validation – BrowserStack LCA Test Authoring
This view showcases the Text Validation feature being used while recording a test for the SAAS College platform in BrowserStack Low Code Automation (LCA).
What it shows:
- The test author is currently validating the presence and correctness of specific textual content on the UI.
- Step 11 is in the Text Validation capture state, allowing precise verification of:
- Headings like "Dashboard"
- Labels, status texts, or dynamic copy that changes during runtime
- Built-in guidance appears ("Click or use ↑/↓ to change the selector...") to help testers target the exact element.
- The test recorder is active (🔴 REC), meaning actions are being captured in real time.
Difference from Visual Validation:
Whereas Visual Validation checks layout and rendered visuals, Text Validation ensures the correct content is rendered and matches exactly — crucial for verifying user-facing text and copy.
Purpose:
To strengthen content accuracy validation in automated flows. This ensures that SAAS dashboard labels, messages, and status indicators are displayed as expected after actions like login.
AI Interaction – Validation Prompt in BrowserStack LCA
This interface highlights the use of AI-powered validation during test authoring for the SAAS College test flow inside BrowserStack Low Code Automation.
What it shows:
- The test creator is in the AI Interactions (Alpha) mode, using natural language to define validation logic
- The selected option is: Validation (vs Action), meaning the AI will check or assert conditions, not perform them.
- Prompt box allows free-text instructions like:
"Validate if all columns are in ascending order"
or
"Check if Placement Rate value is above 80%" - Below it, a "Validate" button appears, which triggers the AI to interpret and apply the instruction to the UI element.
- Helpful tooltip: “Simple single action prompts are efficient” suggests best practices for prompt design.
- This enables complex verifications without XPath, scripting, or custom logic.
Purpose:
To use natural language instructions for smart validations in test flows. This is especially useful in cases where traditional visual or text validation is limiting — for example, sorting, column comparisons, numerical thresholds, etc.
AI Interaction – Action Prompt in BrowserStack LCA
This screen illustrates the use of AI-driven action commands within the BrowserStack Low Code Automation tool, as part of the SAAS College login-to-dashboard test flow.
What it shows:
- AI Interactions (Alpha) panel is active with Action selected instead of Validation.
- The test author can define an AI-executed UI behavior using simple language such as:
"Select date as 2 days from today"
"Click on the first inactive toggle"
"Scroll to bottom and click Load More" - The "Perform" button activates the AI to locate and perform the described action on the UI element.
- This bridges the gap between low-code testing and natural-language-driven interaction with complex or dynamic UI elements.
- Smart prompt usage is encouraged, as noted by: “Simple single action prompts are efficient.”
Purpose:
To allow non-technical testers or fast automation builders to express interaction logic using plain English. It eliminates the need for traditional scripting or element targeting logic and is ideal for dynamic UIs like date pickers, dropdowns, and filters.
Advanced Test Options – BrowserStack LCA (Three-Dot Menu)
This interface displays the extended capabilities menu available during test creation in BrowserStack Low Code Automation (LCA). These options allow test authors to build advanced, dynamic, and end-to-end automated test flows — extending well beyond basic UI interactions.
What it shows:
Upon clicking the three-dot (⋮) menu during test creation, the following options are revealed:
- Add API – Integrate backend API checks or validations alongside UI tests.
- Custom Actions (JavaScript) – Run custom JS scripts for advanced interaction, validation, or dynamic data.
- Extract Value – Dynamically read on-screen values and assign to variables for reuse.
- Element Presence – Assert whether an element exists or not — supports both presence/absence logic.
- Add Conditional Flow – Implement if, else-if, and else logic for branching scenarios.
- Loops – Repeat steps or interactions (e.g., click through a paginated list).
- Run Database Query – Directly connect and query test databases (e.g., validate UI vs DB consistency).
- Open/Validate Email – Access in-built test inboxes to validate emails sent during flows.
Each of these enhances flexibility, supports real-world test cases (e.g., login verification emails, conditional dashboards), and allows deeper end-to-end QA automation.
Purpose: To build enterprise-grade automation flows in a low-code environment — without compromising on power or custom logic. These features allow seamless integration between frontend, backend, and data validation layers in a single test case.
Create Module – BrowserStack LCA
This view demonstrates the use of the Create Module feature in BrowserStack Low Code Automation (LCA), allowing users to convert frequently used steps into reusable blocks.
What it shows:
- User has selected 4 steps:
- Open page talent-connect-symphony
- Validate heading: "SAAS College"
- Validate heading: "Sign In"
- Click and type in "Email" input
- With Create Module, these steps can be saved as a named unit (e.g., LoginFlow).
- Once created, this module can be reused across multiple test cases (e.g., Admin login, Student login).
- This promotes maintainability and reduces effort in large test suites.
Purpose:
To enable reusability and standardization in test building. Modules act like subroutines, ensuring consistent and efficient test coverage across workflows that share a common sequence.
Create Loop – BrowserStack LCA
This screenshot also showcases the Create Loop feature in LCA, designed to repeat a selected group of steps based on iteration logic.
What it shows:
- Steps like typing input, validation, or clicking can be wrapped inside a loop
- Useful for:
- Verifying multiple rows or items (e.g., student cards)
- Clicking “Next” on paginated dashboards
- Validating repeated sections (e.g., dropdown items)
- The loop setup provides flexibility to define iteration count or data source (static or dynamic).
Purpose:
To support repetitive validation or interaction logic in automated tests. This removes the need to duplicate steps and allows efficient execution over large or variable datasets.
Delete Step – BrowserStack LCA
This interface shows the step deletion confirmation dialog in BrowserStack Low Code Automation (LCA), used when the user wants to remove one or more recorded steps from a test case.
What it shows:
- The user has selected multiple steps (e.g., Step 1 and Step 2)
- Upon clicking the delete icon (🗑️), a confirmation modal appears:
- Message: “Are you sure you want to delete the selected steps? This action is irreversible.”
- Two choices:
- Cancel – safely exit without deleting
- Delete – permanently remove the steps
- The background is dimmed to focus attention on the deletion prompt, helping prevent accidental loss of work.
- This functionality ensures test authors have control and protection against unintentional data loss.
Purpose:
To allow safe removal of redundant, incorrect, or outdated steps in an ongoing test. The confirmation ensures intentional deletion, maintaining test integrity during iterations.
Import Module – BrowserStack LCA
This screen highlights the use of the Import Module feature in BrowserStack Low Code Automation (LCA), allowing test creators to reuse previously built modules across multiple test cases for better maintainability and speed.
What it shows:
- The Import Module dialog is open during test creation.
- It lists available reusable modules created earlier (e.g., LoginFlow, NavigateToDashboard).
- Each module entry shows:
- Module name
- Numbers of Step
- The selected module can be inserted directly into the current test, eliminating the need to re-record those steps.
Modules are designed to encapsulate common actions (e.g., login, page setup, cleanup) and are injected as single units, making test cases easier to manage and update.
Purpose:
To support efficient test development by enabling reuse of standardized, validated modules. This helps maintain consistency across tests, reduces duplication, and accelerates test creation in large QA suites.
Test Suites Dashboard – BrowserStack LCA
This screen shows the main dashboard under the Test Suites tab inside BrowserStack LCA. It lists all created test suites, offering visibility and quick control over suite configuration, scheduling, and execution.
What it shows:
- A list of all defined test suites
- SAAS → JOBS → MANAGE JOBS (30 tests)
- SAAS → College → Student → Edit (29 tests)
- SAAS → Placement cycle (8 tests)
- Columns include:
- Last Modified date
- Schedule status (ON/OFF)
- Run link
- A search bar helps filter suites by name.
- Option to create new test suite via top-right button.
Purpose:
To provide a central place for managing, running, and maintaining automated test groups efficiently.
Create New Test Suite – Step 1 (Details)
This screen initiates the creation of a new test suite in LCA. Testers define the suite name, platform (desktop/mobile), and select which browsers to run the suite on.
What it shows:
- Test suite name field (required
- Optional description
- Platform selection: Desktop or Mobile/Tablet
- Execution browsers: Chrome, Edge, Firefox, Safari
- Disabled “Proceed” button until tests are added
Purpose:
To define the suite’s identity and base execution environment before adding test cases.
Add Desktop Tests – Modal View
This modal allows users to browse and select existing tests to be bundled into the suite.
What it shows:
- Search bar to find test case
- Each test displays:
- Full path (e.g., SAAS → Automation → Notifications)
- Author: Vrashank Dhar
- Resolution: 1366×768
- URL of the tested page
- Checkbox to select each test
Purpose:
To enable efficient test case selection for bundling related tests under one suite.
Selected Tests Overview – Ordered List
Once tests are selected, this view shows all selected tests with drag-and-drop support to reorder their execution sequence.
What it shows:
- 8 selected tests from SAAS → Automation grou
- Reorderable by drag (3-line icon)
- Author & resolution info displayed
- "Add X tests" button finalizes inclusion into suite
Purpose:
To finalize and order test executions before moving to suite-level configurations.
Additional Configurations – Schedule, CI, Env
This screen provides test suite–level configurations after test selection, covering scheduling, environment setup, rerun logic, and CI tool triggers.
What it shows:
- Schedule options: Mon–Sun, with custom tim
- Checkbox to rerun failed tests
- CI tool integration option
- Enable local testing (for private/internal apps)
- Configure environment URL (e.g., http://example.com:3000)
- Upgrade prompt for accessibility/IP geolocation
Purpose:
To fine-tune how and where the test suite will run — especially for production-ready pipelines.
Final Suite View – SAAS Automation Test
This is the final overview of the created test suite. It lists all tests added, shows who last updated each, and allows for immediate execution or editing.
What it shows:
- Suite name: SAAS Automation Test
- 8 included test cases listed top-down
- Actions available:
- View last update time
- Edit suite
- Delete suite
- Run suite now
- Add host URL or schedule
Purpose:
To give a clean and actionable summary view for the full test suite post-creation — ready to run or maintain.
Trigger Test Suite Run – Build Initialization
This screen captures what happens immediately after clicking Run on a test suite. BrowserStack LCA initiates a Build — the automated execution of all tests grouped in the suite — and queues it for execution.
What it shows:
- A toast message confirms:
"Build triggered – 'SAAS Automation Test' test suite added to the build queue - Status for the suite shows:
- Schedule: ON/OFF
- Execution browser: Chrome
- Status: Running
- Option to click “View Build” for live build details
Purpose:
To launch batch execution of all selected tests under the suite — marking the start of test run processing across configured browsers. This allows tracking, live feedback, and future result review.
Builds View – Test Execution Monitor (LCA)
This screen shows the Builds tab, where BrowserStack LCA displays all active or completed test suite executions. Each build represents a triggered run of a test suite, with live status and control options.
What it shows:
- Build name: SAAS Automation Test-1
- Created by: Vrashank Dhar
- Timestamp: Aug 03, 2025 | 12:37:25 AM (IST)
- Browser: Chrome (icon shown)
- Status indicators:
- Passed tests count
- Failed tests count
- Skipped tests count
- (All 0 for now — still running)
- Option to Stop the build mid-execution
Purpose:
To track the execution status of test suites in real time. The build view provides central access to ongoing or historical results, including logs, durations, and outcomes.
Build Result Summary – Test Status View (LCA)
This screen displays the final status of all test cases inside the triggered test suite build (SAAS Automation Test-1). Each test’s result, duration, and failure breakdown is visible — allowing immediate triage and rerun if needed.
What it shows:
- Suite result summary:
- 7 Passed
- 1 Failed
- 0 Skipped
- Test cases shown:
- SAAS → Automation → Brand Jobs: Passed in 1m 32s
- SAAS → Automation → Profile: ❌ 1 step failed in 1m 21s
- All others: Passed
- Duration for each test is clearly shown
- Sort option available (Status-based filtering)
- “Rerun” button on the top-right for quick re-execution of failed or all tests
Purpose:
To give QA teams a clear, step-by-step breakdown of test suite execution results, identify failures fast, and rerun impacted flows without re-triggering everything manually.
Test Execution Detail – Step-Level Playback (LCA)
This screen displays the detailed view of a single test within the test suite execution (build), showing each recorded step, its result, duration, and a video playback of the test run. It's designed to give full traceability into what happened during execution — step by step.
What it shows:
- Test: SAAS → Automation → Brand Job
- ✅ All 14 steps passed
- Resolution: 1366×768 | Language: en-US
- Playback pane:
- Full execution recording
- Time slider and play/pause controls
- Speed adjustment, fullscreen, download
- Steps tab shows:
- What action was performed (e.g., click, type, validate)
- Targeted element or text
- ✅ Pass/fail icon beside each step
- Other tabs available:
- Console Logs
- Network Logs
- Configuration (e.g., browser/device info)
Purpose:
To inspect exact behaviors, failures, and UI state during automated runs — whether to debug failures, verify correctness, or confirm test environment conditions. The video makes this audit-grade and easy for non-technical reviewers too.
Step-Level Failure Analysis – BrowserStack LCA
This view shows a failed test step with detailed debug context. The execution of the SAAS → Automation → Profile test failed at step 13 during a heading validation, and the screen provides video playback, logs, retry info, and exact mismatch details.
What it shows:
- Step 13 failed
- Expected: Heading text = "My Profile"
- Actual: "Dashboard"
- Timed out after 2 seconds
- 1 Retry attempt made before final failure
- A screenshot captures the moment of failure — clearly showing the incorrect UI state
- Option toggled: “Show failed steps only”
- Video player and logs (Console, Network) are still available
- Metadata at the top confirms:
- Resolution: 1366×768
- Locale: en-US
- Test duration: 1m 21s
- ✅ 12 Passed | ❌ 1 Failed
Purpose:
To give exact, reproducible visibility into why a test failed. This eliminates guesswork by showing what the UI actually rendered vs what was expected — making failures traceable, understandable, and actionable.
Playback Issue Detection – Video vs DOM Mismatch (LCA)
This screen captures a mismatch between visual playback and test execution status. The test case (SAAS → Automation → Brand Jobs) passed all steps, but the recorded video playback shows a blank browser window stuck on a data:, URL, raising questions about test reliability or network issues.
What it shows:
- All 14 steps are ✅ Passed in the LCA step list
- Validations for headings and element presence
- Inputs for email/password
- Final validation of “Brand Jobs” presence
- Playback video displays:
- Chrome window stuck at URL: data:
- Message: "Chrome is being controlled by automated test software."
- Video duration does not match actual navigation progress.
Root Cause Indicators:
- No actual navigation in recorded frame
- Likely video capture failure or early buffering
- Possibility of DOM executing in memory while visual browser failed to load target page
- Could also point to network access failures, CSP blocks, or pre-rendered/mocked selectors resolving too early
Purpose:
This highlights the importance of validating not just test step pass/fail in the result pane but also cross-verifying with visual playback and logs. It's a key QA practice to detect false positives or shallow test coverage.
Designing Test Cases and Logging Bugs
Test Case Design – SAAS Automation (BrowserStack LCA)
This document contains module-wise test case design for the SAAS platform, created using BrowserStack's Low Code Automation (LCA). Each test case is structured to verify key functionalities like UI elements, navigation flows, form actions, and data integrity across multiple user roles (Admin, Student, Recruiter).
Profile Module Missing – Not Visible or Accessible
Bug Title: Profile Module Missing – Not Visible or Accessible from Navigation
Reported In: SAAS Automation Test Suite (via BrowserStack LCA)
Tool Used: Trello (Bug Tracking Board)
Issue Summary:
The Profile module is missing from the SAAS platform’s navigation menu for logged-in users. As a result, the automation test for the Profile section failed since the element was not found in the UI.
Steps to Reproduce:
- Login as a student/test user
- Open the sidebar or dashboard
- Try to locate the Profile module – it isn’t available
Expected Result:
Profile should be visible and clickable in the menu