FinCheck Advanced Web Inspection & Dynamic Element Validation

Business Scenario

After successfully learning basic Webpage Inspection inside the FinCheck Banking Portal, your manager now assigns you advanced inspection activities on Dynamic Banking Webpages.

Recently, QA Testers reported multiple inspection problems inside the FinCheck Transaction Dashboard :-
Transaction Rows Change after Filtering
Pagination Buttons Rebuild Dynamically
Dashboard Counters Update Automatically

Pre-Lab Preparation

Some Webpage Elements Disappear after Search
Testers Cannot Track Changing HTML Elements Properly

Before starting testing activities, your manager clearly says :-
“”A QA Tester must understand how Webpage Elements change dynamically during real application usage. “”

Your responsibility is to understand : -
How Dynamic Transaction Tables Behave
How Filters Update Webpage Records
How Pagination Changes Dynamically
How Testers Inspect Changing HTML Elements
How Hidden Elements Exist inside Webpage Structure
How DevTools Helps Testers Inspect Dynamic Webpages

Topic : HTML Basics

HTML Tags, Forms, Input Fields, Tables
Understanding Webpage UI Testing

git pull origin branchName

Git Pull

Task 1: Understand Dynamic Webpage Behavior

Understand Dynamic Webpages

What are Dynamic Webpages?

A dynamic webpage is a webpage that changes automatically based on user activity.

Unlike static webpages, dynamic webpages update records, counters, tables, and filters without reloading the complete page.

Modern banking applications use dynamic webpages to display real-time customer and transaction information.

Types of Dynamic Changes

Search Updates

Transaction records update after user search.

Filter Updates

Only matching records display after filters are applied.

Pagination Updates

Page buttons change dynamically based on record count.

Counter Updates

Dashboard totals refresh automatically.

How Dynamic Webpages Work

User performs activity on webpage.
Application processes request.
Browser updates specific webpage sections dynamically.
HTML structure changes automatically inside browser DOM.

Real Life Example

Customer searches :-

Customer ID = C004

The webpage updates transaction table dynamically and displays only matching records.

What is DOM?

DOM (Document Object Model) represents webpage structure inside browser.

Every webpage element becomes part of DOM structure.

QA testers inspect DOM to understand webpage behavior and identify elements properly.

Understand DOM Updates

Types of DOM Elements

Input Elements

Textbox fields for search or filters.

Button Elements

Search, Next, Previous, Download buttons.

Table Elements

Transaction rows and columns.

Hidden Elements

Invisible elements existing inside webpage structure.

How DOM Updates Work

When webpage changes dynamically :-

old HTML elements may disappear
new HTML elements may appear
attributes may change automatically

Real Life Example

Before Search :-

10 transaction rows visible

After Search :-

1 matching transaction row visible

DOM structure updates automatically.

Open FinCheck Dashboard

What is Transaction Table Inspection?

Transaction table inspection helps QA testers understand how banking records are displayed inside webpage tables.

Testers inspect rows , columns , headers , dynamic records updates

Task 2: Inspect Dynamic Transaction Rows

Click to view : finCheck

Activity

Open FinCheck transaction dashboard

Observe transaction table

Observe multiple transaction rows displayed on webpage

Transaction Table Representation

txn_id	customer_id	txn_type	amount
TXN1001	C001	Debit	2000
TXN1002	C004	Credit	5000
TXN1003	C007	Debit	1000

Inspect Transaction Table Using DevTools

What is Table Inspection?

Table inspection allows testers to view actual HTML structure of transaction records.

QA testers inspect tables to understand :-

table structure
row arrangement
dynamic row generation

Activity

Right click transaction table

Browser opens DevTools

Observe highlighted HTML structure

Browser opens DevTools

Observe highlighted HTML structure

HTML Representation

<table id="txn-table">

<tr>
<th>txn_id</th>
<th>customer_id</th>
<th>txn_type</th>
<th>amount</th>
</tr>

<tr>
<td>TXN1001</td>
<td>C001</td>
<td>Debit</td>
<td>2000</td>
</tr>

</table>

Inspect Dynamic Row Changes

What are Dynamic Rows?

Dynamic rows are transaction records that change automatically after search, filtering, or pagination.

These rows are generated dynamically by application logic.

How Dynamic Rows Work

When user performs :-

Search
Filter
Pagination

old rows disappear and new matching rows appear automatically.

Activity

Search customer ID :- C004

Click Find button

Observe updated transaction table

Inspect updated HTML rows

Before Search:-

Transaction Table Representation

txn_id	customer_id	txn_type	amount
TXN1001	C001	Debit	2000
TXN1002	C004	Credit	5000
TXN1003	C007	Debit	1000

After Search:-

txn_id	customer_id	txn_type	amount
TXN1002	C001	Debit	2000

Task 2: Inspect Dynamic Transaction Rows

Open FinCheck Dashboard

What is Search Inspection?

Search inspection helps testers understand how webpage records change after user input.

Testers inspect must search textbox, Update records and Dynamic HTML changes.

Activity

Right click search textbox

Click Inspect

Observe highlighted input element

HTML Representation

<input
type="text"
id="search-inp"
placeholder="Search transactions">

Inspect Filter Changes

What is Filter Inspection?

Filter inspection means observing how webpage data changes after filters are applied.

Filters help users view only matching transaction records.

Types of Filters

Credit Filter

Displays only credit transactions.

Debit Filter

Displays only debit transactions.

Date Filter

Displays transactions from selected dates.

How Filter Works

User applies filter.
System refreshes matching transaction records dynamically.
Old rows disappear and filtered rows appear automatically.

Activity

Apply Credit filter

Observe transaction table updates

Inspect updated rows using DevTools

Date Filter

Displays transactions from selected dates.

How Filter Works

User applies filter.
System refreshes matching transaction records dynamically.
Old rows disappear and filtered rows appear automatically.

Transaction Table Representation

Before Filter

txn_id	amount
Debit	2000
Credit	5000
Debit	1000

After filter

txn_id	amount
Credit	5000

Task 4: Inspect Dynamic Pagination

Understand Pagination

What is Pagination?

Pagination divides large transaction records into multiple pages.

Banking applications use pagination to improve webpage readability and performance.

Types of Pagination Buttons

Next Button

Moves to next records page.

Previous Button

Moves to previous records page.

Page Numbers

Displays available pages dynamically.

How Pagination Works

System displays limited transaction rows per page.
Pagination updates dynamically after filtering or searching.

<div id="pagination">

<button class="pag-btn">
Prev
</button>

<button class="pag-btn active">
1
</button>

<button class="pag-btn">
Next
</button>

</div>

Observe Dynamic Pagination Changes

What is Dynamic Pagination?

Dynamic pagination updates automatically after filtering or searching.

Page buttons may increase or decrease depending on available transaction records.

How Dynamic Pagination Works

Before filtering :-

5 pages visible

After filtering :-

1 pages visible

Pagination rebuilds automatically based on matching records.

Activity

Search customer ID :- C004

Observe pagination buttons again

Inspect updated pagination HTML

Transaction Table pagination Representation

Before Search

Prev 1 2 3 4 5 Next

After Search

Prev 1 Next

Task 5: Inspect Hidden HTML Elements

Understand Hidden Elements

What are Hidden Elements?

Hidden elements are webpage elements that exist inside HTML structure but are not visible on webpage screen.

These elements remain inside browser DOM and can still be inspected using DevTools.

Banking applications often use hidden elements for :-

file upload handling
background processing

popup handling
security-related operations

Types of Hidden Elements

Hidden Input Fields

Invisible input fields used for internal processing.

Hidden Upload Controls

File upload elements hidden from normal webpage view.

Hidden Popup Containers

Popup sections hidden until user action occurs.

Hidden Dynamic Sections

Sections displayed only after filter or search operations.

How Hidden Elements Work

Webpage hides elements using CSS properties like :-

display:none
visibility:hidden
opacity:0
position:absolute with off-screen values

Even though elements are invisible, they still exist inside webpage HTML.

Real Life Example

Banking application hides file upload control until user clicks :-

Upload Statement

The upload input exists inside HTML but remains hidden initially.

Step 2: Search Hidden Elements Using DevTools

What is Hidden Element Inspection?

Hidden element inspection helps testers identify invisible webpage components inside browser HTML structure.

QA testers inspect hidden elements to understand :-

hidden webpage behavior

background webpage controls
dynamic popup handling
hidden upload elements

Activity

Open DevTools
Open Elements tab
Press Ctrl + F
Search :- opacity:0
Observe highlighted hidden HTML element

Task 3: Code Editor Installation

Good work on completing the planning phase.

Now we will start development. Before that, make sure your system is ready with the required tools.

In this step we will install the VS code editor that will help to Write code efficiently,Organize files , Run and test your application

Go to the visual studio code official website

Click to download Homepage Wireframe : Homepage Wireframe

Link - https://code.visualstudio.com/download

Choose your operating system(windows / Mac) and download the installation file.

Double click on the download app and Accept the agreement and click next

It is a long established fact that a reader will be distracted

Sub Steps

Double click on the download app and Accept the agreement and click next

public class MathSample {
    public static void main(String[] args) {
        int x = 10;
        int y = 20;
        int sum = x + y;
        
        System.out.println("The sum is: " + sum);
    }
}

public class MathSample {
    public static void main(String[] args) {
        int x = 10;
        int y = 20;
        int sum = x + y;
        
        System.out.println("The sum is: " + sum);
    }
}

public class MathSample {
    public static void main(String[] args) {
        int x = 10;
        int y = 20;
        int sum = x + y;
        
        System.out.println("The sum is: " + sum);
    }
}

Great job!
You have successfully completed your first lab on BiteBox Project Onboarding.

In this lab, you have: Understood the BRD, Created a wireframe, Set up your development environment, Organised your project structure, Run your first program

You are now ready to move to the next stage of development

Checkpoint

Next-Lab Preparation

Git Push

git push origin branchName

Topic : Working with a Text and Listin HTML

1) Power of HTML text tags
2) Customizing your style with CSS
3) Listing it right using HTML
4) HTML Link up , attributes of tag, block vs inline elements

Text box Width : 887
Business Scenario, Pre-lab Preparation, Next-lab Preparation, Task, Activity, Checkpoint : 90%.
Steps : 1,2,3 [Sub Steps - a,b,c]
Normal Text, Topic Name : 80%
Subtopic : 70%
Code Box font Size : 16px

pe 5 FinCheck Advanced Web Inspection & Dynamic Element Validation

pe 5 FinCheck Advanced Web Inspection & Dynamic Element Validation

Content ITV PRO

pe 5 FinCheck Advanced Web Inspection & Dynamic Element Validation

More from Content ITV