generate-automation-from-ui-flow

Name: generate-automation-from-ui-flow
Author: anhtester

29stars8forks

How to install generate-automation-from-ui-flow?

anhtester/codex-testing-kit/generate-automation-from-ui-flow

$npx -y skills add anhtester/codex-testing-kit --skill generate-automation-from-ui-flow

Installs into the current project.

Summary

Thực thi UI flow trực tiếp trên browser, thu thập locators từ DOM thực tế, và sinh automation scripts. Hỗ trợ Playwright, Selenium, Appium.

Files · 1

View on GitHub

SKILL.md

1	# Workflow: Sinh Automation từ UI Flow
2
3	> BẮT BUỘC (MANDATORY SKILL): Bạn PHẢI nạp và đọc kỹ nội dung của skill `$ui-debug-agent` (tại `.agents/skills/ui-debug-agent/SKILL.md`) trước khi bắt đầu. Ngoài ra tham khảo thêm skill `$smart-locator-agent` để sinh locator ổn định và `$qa-automation-engineer` cho quy tắc automation chung.
4
5	Workflow này giúp agent thực thi trực tiếp một chuỗi thao tác UI trên browser thật, thu thập locators từ DOM thực tế, và sinh automation scripts hoàn chỉnh — tất cả trong một luồng tự động, không cần manual test case có sẵn.
6
7	## ⚠️ Nguyên tắc thực thi
8
9	- Tất cả output bằng Tiếng Việt
10	- TUYỆT ĐỐI KHÔNG ĐOÁN locator — phải lấy từ DOM thực tế bằng MCP browser tools
11	- Phải chạy từng bước UI trên browser thật trước khi sinh code
12	- Desktop viewport 1920×1080 cho tất cả UI debugging
13	- ⚠️ Rule E3: Khi test FAIL → tự đọc log → phân tích → sửa → chạy lại. KHÔNG hỏi user
14
15	## Workflow này khác gì `$generate-automation-from-testcases`?
16
17	\| \| `from_testcases` \| `from_ui_flow` (workflow này) \|
18	\|---\|---\|---\|
19	\| Input \| File manual test cases có sẵn \| Mô tả UI steps bằng lời hoặc URL + hành động \|
20	\| Approach \| Đọc TC → inspect UI → sinh code \| Chạy thật trên browser → thu thập locator → sinh code \|
21	\| Khi nào dùng \| Đã có test case document \| Chưa có TC, chỉ biết "vào trang này, click cái kia" \|
22
23	## Input cần thu thập
24
25	Agent cần ít nhất 1 trong các input sau từ user:
26
27	\| Input \| Ví dụ \| Độ ưu tiên \|
28	\|---\|---\|---\|
29	\| URL + UI steps mô tả \| "Vào https://example.com, login, tạo user mới" \| ⭐ Phổ biến nhất \|
30	\| URL + recording/video \| User cung cấp video thao tác \| Tùy chọn \|
31	\| URL + screenshots \| User cung cấp ảnh chụp từng bước \| Tùy chọn \|
32	\| Chỉ URL \| "Automate login flow của trang này" \| Agent tự khám phá \|
33
34	Nếu user chưa cung cấp đủ → hỏi:
35	- URL ứng dụng?
36	- Mô tả flow cần automate (từng bước)?
37	- Credentials nếu cần đăng nhập?
38	- Framework mong muốn? (mặc định: Playwright + TypeScript)
39
40	## Các bước thực hiện
41
42	### Bước 1: Tiếp nhận & Chuẩn bị (Setup)
43
44	1. Parse UI steps từ user input:
45	- Chuyển mô tả bằng lời thành danh sách steps có cấu trúc:
46	```
47	Step 1: Navigate to https://example.com/login
48	Step 2: Enter username "admin@test.com"
49	Step 3: Enter password "***"
50	Step 4: Click Login button
51	Step 5: Verify dashboard is displayed
52	```
53
54	2. Xác nhận tech stack với user (nếu chưa rõ):
55
56	\| Framework \| Ngôn ngữ \| Khi nào dùng \|
57	\|---\|---\|---\|
58	\| Playwright \| TypeScript \| Mặc định cho web automation \|
59	\| Playwright \| Python \| Khi user dùng Python stack \|
60	\| Selenium \| Java \| Khi user yêu cầu Java/Selenium \|
61	\| Appium \| Java \| Mobile app automation \|
62
63	3. Tạo artifact `task.md` để theo dõi tiến độ:
64	```markdown
65	# UI Flow Automation Progress
66	- [ ] Bước 1: Chuẩn bị — parse UI steps
67	- [ ] Bước 2: Chạy UI flow trên browser — thu thập locators
68	- [ ] Bước 3: Sinh Page Objects + Test scripts
69	- [ ] Bước 4: Chạy test + Auto-heal
70	```
71
72	### Bước 2: Chạy UI Flow trên Browser & Thu thập Locators (Live Recon)
73
74	> ⚡ Đây là bước quan trọng nhất — phân biệt workflow này với các workflow khác.
75
76	1. Mở browser bằng MCP và navigate đến URL:
77	```
78	browser_navigate → URL
79	browser_resize → 1920 × 1080
80	browser_wait_for → page load hoàn tất
81	browser_snapshot → thu thập DOM ban đầu
82	```
83
84	2. Thực thi từng step theo danh sách, với mỗi step:
85
86	```
87	a. browser_snapshot → đọc DOM, xác định element cần tương tác
88	b. Xác định locator tốt nhất (theo locator priority)
89	c. Thực thi action (click / type / select / hover)
90	d. browser_snapshot → xác nhận kết quả action
91	e. Ghi nhận vào bảng locator collection
92	```
93
94	3. Bảng Locator Collection (ghi nhận sau mỗi step):
95
96	\| Step \| Action \| Element \| Primary Locator \| Fallback Locator \| Verified \|
97	\|---\|---\|---\|---\|---\|---\|
98	\| 1 \| Navigate \| — \| — \| — \| ✅ \|
99	\| 2 \| Type \| Username input \| `getByLabel('Email')` \| `#email` \| ✅ \|
100	\| 3 \| Type \| Password input \| `getByLabel('Password')` \| `#password` \| ✅ \|
101	\| 4 \| Click \| Login button \| `getByRole('button', {name: 'Login'})` \| `button[type=submit]` \| ✅ \|
102	\| 5 \| Assert \| Dashboard title \| `getByRole('heading', {name: 'Dashboard'})` \| `.dashboard-title` \| ✅ \|
103
104	4. Locator Priority (tuân thủ `.agents/rules/locator_strategy.md`):
105
106	Playwright:
107	`getByRole()` → `getByLabel()` → `getByPlaceholder()` → `getByText()` → `getByTestId()` → CSS → XPath
108
109	Selenium:
110	`id` → `data-testid` → `name` → CSS selector → XPath
111
112	Appium:
113	`accessibility-id` → `id` → `name` → `xpath` (relative)
114
115	5. Xử lý tình huống khi chạy UI:
116
117	\| Tình huống \| Cách xử lý \|
118	\|---\|---\|
119	\| Element không tìm thấy \| `browser_snapshot` lại → kiểm tra DOM → thử

anhtesterPublisher · 27 listings

Preview

anhtester/codex-testing-kit

# Workflow: Sinh Automation từ UI Flow

> **BẮT BUỘC (MANDATORY SKILL):** Bạn PHẢI nạp và đọc kỹ nội dung của skill **`$ui-debug-agent`** (tại `.agents/skills/ui-debug-agent/SKILL.md`) trước khi bắt đ

Workflow này giúp agent **thực thi trực tiếp** một chuỗi thao tác UI trên browser thật, thu thập locators từ DOM thực tế, và sinh automation scripts hoàn chỉnh

## ⚠️ Nguyên tắc thực thi

Repoanhtester/codex-testing-kit

LicenseMIT

TypeSkills

CategoryTesting

UpdatedJul 2026

Repo stars29

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type

generate-automation-from-ui-flow

29stars8forks

View on GitHub

How to install generate-automation-from-ui-flow?

anhtester/codex-testing-kit/generate-automation-from-ui-flow

$npx -y skills add anhtester/codex-testing-kit --skill generate-automation-from-ui-flow

Installs into the current project.

Summary

Thực thi UI flow trực tiếp trên browser, thu thập locators từ DOM thực tế, và sinh automation scripts. Hỗ trợ Playwright, Selenium, Appium.

Files · 1

View on GitHub

SKILL.md

1	# Workflow: Sinh Automation từ UI Flow
2
3	> BẮT BUỘC (MANDATORY SKILL): Bạn PHẢI nạp và đọc kỹ nội dung của skill `$ui-debug-agent` (tại `.agents/skills/ui-debug-agent/SKILL.md`) trước khi bắt đầu. Ngoài ra tham khảo thêm skill `$smart-locator-agent` để sinh locator ổn định và `$qa-automation-engineer` cho quy tắc automation chung.
4
5	Workflow này giúp agent thực thi trực tiếp một chuỗi thao tác UI trên browser thật, thu thập locators từ DOM thực tế, và sinh automation scripts hoàn chỉnh — tất cả trong một luồng tự động, không cần manual test case có sẵn.
6
7	## ⚠️ Nguyên tắc thực thi
8
9	- Tất cả output bằng Tiếng Việt
10	- TUYỆT ĐỐI KHÔNG ĐOÁN locator — phải lấy từ DOM thực tế bằng MCP browser tools
11	- Phải chạy từng bước UI trên browser thật trước khi sinh code
12	- Desktop viewport 1920×1080 cho tất cả UI debugging
13	- ⚠️ Rule E3: Khi test FAIL → tự đọc log → phân tích → sửa → chạy lại. KHÔNG hỏi user
14
15	## Workflow này khác gì `$generate-automation-from-testcases`?
16
17	\| \| `from_testcases` \| `from_ui_flow` (workflow này) \|
18	\|---\|---\|---\|
19	\| Input \| File manual test cases có sẵn \| Mô tả UI steps bằng lời hoặc URL + hành động \|
20	\| Approach \| Đọc TC → inspect UI → sinh code \| Chạy thật trên browser → thu thập locator → sinh code \|
21	\| Khi nào dùng \| Đã có test case document \| Chưa có TC, chỉ biết "vào trang này, click cái kia" \|
22
23	## Input cần thu thập
24
25	Agent cần ít nhất 1 trong các input sau từ user:
26
27	\| Input \| Ví dụ \| Độ ưu tiên \|
28	\|---\|---\|---\|
29	\| URL + UI steps mô tả \| "Vào https://example.com, login, tạo user mới" \| ⭐ Phổ biến nhất \|
30	\| URL + recording/video \| User cung cấp video thao tác \| Tùy chọn \|
31	\| URL + screenshots \| User cung cấp ảnh chụp từng bước \| Tùy chọn \|
32	\| Chỉ URL \| "Automate login flow của trang này" \| Agent tự khám phá \|
33
34	Nếu user chưa cung cấp đủ → hỏi:
35	- URL ứng dụng?
36	- Mô tả flow cần automate (từng bước)?
37	- Credentials nếu cần đăng nhập?
38	- Framework mong muốn? (mặc định: Playwright + TypeScript)
39
40	## Các bước thực hiện
41
42	### Bước 1: Tiếp nhận & Chuẩn bị (Setup)
43
44	1. Parse UI steps từ user input:
45	- Chuyển mô tả bằng lời thành danh sách steps có cấu trúc:
46	```
47	Step 1: Navigate to https://example.com/login
48	Step 2: Enter username "admin@test.com"
49	Step 3: Enter password "***"
50	Step 4: Click Login button
51	Step 5: Verify dashboard is displayed
52	```
53
54	2. Xác nhận tech stack với user (nếu chưa rõ):
55
56	\| Framework \| Ngôn ngữ \| Khi nào dùng \|
57	\|---\|---\|---\|
58	\| Playwright \| TypeScript \| Mặc định cho web automation \|
59	\| Playwright \| Python \| Khi user dùng Python stack \|
60	\| Selenium \| Java \| Khi user yêu cầu Java/Selenium \|
61	\| Appium \| Java \| Mobile app automation \|
62
63	3. Tạo artifact `task.md` để theo dõi tiến độ:
64	```markdown
65	# UI Flow Automation Progress
66	- [ ] Bước 1: Chuẩn bị — parse UI steps
67	- [ ] Bước 2: Chạy UI flow trên browser — thu thập locators
68	- [ ] Bước 3: Sinh Page Objects + Test scripts
69	- [ ] Bước 4: Chạy test + Auto-heal
70	```
71
72	### Bước 2: Chạy UI Flow trên Browser & Thu thập Locators (Live Recon)
73
74	> ⚡ Đây là bước quan trọng nhất — phân biệt workflow này với các workflow khác.
75
76	1. Mở browser bằng MCP và navigate đến URL:
77	```
78	browser_navigate → URL
79	browser_resize → 1920 × 1080
80	browser_wait_for → page load hoàn tất
81	browser_snapshot → thu thập DOM ban đầu
82	```
83
84	2. Thực thi từng step theo danh sách, với mỗi step:
85
86	```
87	a. browser_snapshot → đọc DOM, xác định element cần tương tác
88	b. Xác định locator tốt nhất (theo locator priority)
89	c. Thực thi action (click / type / select / hover)
90	d. browser_snapshot → xác nhận kết quả action
91	e. Ghi nhận vào bảng locator collection
92	```
93
94	3. Bảng Locator Collection (ghi nhận sau mỗi step):
95
96	\| Step \| Action \| Element \| Primary Locator \| Fallback Locator \| Verified \|
97	\|---\|---\|---\|---\|---\|---\|
98	\| 1 \| Navigate \| — \| — \| — \| ✅ \|
99	\| 2 \| Type \| Username input \| `getByLabel('Email')` \| `#email` \| ✅ \|
100	\| 3 \| Type \| Password input \| `getByLabel('Password')` \| `#password` \| ✅ \|
101	\| 4 \| Click \| Login button \| `getByRole('button', {name: 'Login'})` \| `button[type=submit]` \| ✅ \|
102	\| 5 \| Assert \| Dashboard title \| `getByRole('heading', {name: 'Dashboard'})` \| `.dashboard-title` \| ✅ \|
103
104	4. Locator Priority (tuân thủ `.agents/rules/locator_strategy.md`):
105
106	Playwright:
107	`getByRole()` → `getByLabel()` → `getByPlaceholder()` → `getByText()` → `getByTestId()` → CSS → XPath
108
109	Selenium:
110	`id` → `data-testid` → `name` → CSS selector → XPath
111
112	Appium:
113	`accessibility-id` → `id` → `name` → `xpath` (relative)
114
115	5. Xử lý tình huống khi chạy UI:
116
117	\| Tình huống \| Cách xử lý \|
118	\|---\|---\|
119	\| Element không tìm thấy \| `browser_snapshot` lại → kiểm tra DOM → thử

anhtesterPublisher · 27 listings

Preview

anhtester/codex-testing-kit

# Workflow: Sinh Automation từ UI Flow

> **BẮT BUỘC (MANDATORY SKILL):** Bạn PHẢI nạp và đọc kỹ nội dung của skill **`$ui-debug-agent`** (tại `.agents/skills/ui-debug-agent/SKILL.md`) trước khi bắt đ

Workflow này giúp agent **thực thi trực tiếp** một chuỗi thao tác UI trên browser thật, thu thập locators từ DOM thực tế, và sinh automation scripts hoàn chỉnh

## ⚠️ Nguyên tắc thực thi

Repoanhtester/codex-testing-kit

LicenseMIT

TypeSkills

CategoryTesting

UpdatedJul 2026

Repo stars29

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type