Skip to content

Commit b54be5c

Browse files
authored
v1.4.2
1 parent cce6693 commit b54be5c

5 files changed

Lines changed: 1039 additions & 0 deletions

File tree

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"userName": "John Doe",
3+
"userEmail": "JohnDoe@gmail.com",
4+
"currentAddress": "742 Evergreen Terrace, Springfield, OR 97477",
5+
"permanentAddress": "10 Downing Street, London, SW1A 2AA",
6+
"submit": "true"
7+
}
Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
Here is the comprehensive guide on how to operate the **WebView2 v1.4.2 MASTER DEMO**. This guide is designed for users or developers who want to see the full potential of the library in action.
2+
3+
---
4+
5+
# User Guide: Testing the WebView2 MASTER DEMO
6+
7+
To see the power of the **NetWebView2Lib v1.4.2**, follow these step-by-step instructions for the specific demo scenarios.
8+
9+
### 1. Requirements & Setup
10+
11+
- **Bridge File**: Ensure `_Bridge.js` is in the same directory as the script. It contains the logic for scraping and form mapping.
12+
13+
- **Library**: The `NetWebView2Lib.dll` must be registered on your system (`RegAsm`).
14+
15+
- **Assets**: Ensure the `Forms_Data` folder exists if you want to test the pre-saved form filling.
16+
17+
18+
---
19+
20+
### 2. Scenario A: Wikipedia (Data Scraping & Massive Screenshots)
21+
22+
The demo starts automatically on the Wikipedia population page. This page is perfect for testing high-volume data handling.
23+
24+
- **Extra Long "Full Page Screenshot"**:
25+
26+
1. Go to the **Features** menu (Star icon).
27+
28+
2. Select **Full Page Screenshot**.
29+
30+
3. **What happens**: The script communicates with the DevTools Protocol (CDP), forces the browser to resize to the full document height (over **26,000 pixels**), captures the PNG, and opens it automatically.
31+
32+
- **Direct Table Export (Context Menu)**:
33+
34+
1. **Right-click** anywhere inside the main data table (the list of countries).
35+
36+
2. Select the dynamic option: **📥 Export this Table to CSV**.
37+
38+
3. **What happens**: AutoIt asks JavaScript to parse the specific table under your mouse, converts it to a CSV string, saves it, and opens it in Excel/Notepad.
39+
40+
- **Scan for HTML Tables**:
41+
42+
1. Select **Scan for HTML Tables** from the Features menu.
43+
44+
2. An InputBox will appear listing all detected tables and their row counts.
45+
46+
3. Enter a number (e.g., `0`) to extract that specific table.
47+
48+
49+
---
50+
51+
### 3. Scenario B: DemoQA (Form Automation & JSON Mapping)
52+
53+
Switch to the form testing site to see how AutoIt handles structured data.
54+
55+
1. Click the **Application Menu** (First icon on the left) and select **demoqa**.
56+
57+
2. Once the "Text Box" page loads:
58+
59+
- **Fill Form from JSON**: Right-click the form area and select **Fill Form from JSON File**.
60+
61+
- Navigate to `Forms_Data\` and select the file `DEMOQA_form_20260108-1223-43111.json`.
62+
63+
- **Result**: The script uses **Base64 encoding** to safely pass the JSON to the browser, and JavaScript instantly populates all fields (Name, Email, Addresses).
64+
65+
3. **Map Form (Save)**: Fill in some random data yourself, right-click, and select **Save Form Map to JSON File**. This creates a reusable template for that specific page.
66+
67+
68+
---
69+
70+
### 4. Advanced Toolset Overview
71+
72+
|**Feature**|**How to use**|**Why it matters**|
73+
|---|---|---|
74+
|**Audit Highlights**|Features -> Highlights|Visually debugs which HTML elements the script is targeting.|
75+
|**Custom CSS Injection**|Features -> Inject Custom CSS|Demonstrates how to force "Dark Mode" or UI changes on any website.|
76+
|**Extension Picker**|App Menu -> Extensions Manager|Allows loading of Chrome extensions (uBlock, Ghostery) from a local folder.|
77+
|**Browser Cleanup**|App Menu -> Clear browser history|One-click deletion of cookies and cache using the internal API.|
78+
|**DevTools**|Right-click -> Inspect Element|Opens the standard F12 developer tools for deep debugging.|
79+
80+
---
81+
82+
### Pro Debugging Tip
83+
84+
Keep your **SciTE Console (F8)** open while running the demo. You will see real-time logs of:
85+
86+
- URL changes and Navigation status.
87+
88+
- JSON data payloads being sent through the **JavaScript Bridge**.
89+
90+
- COM Errors caught by the `_ErrFunc` handler.
91+
92+
---
93+

0 commit comments

Comments
 (0)