Skip to content

Commit ccbacdd

Browse files
linx777linx777
committed
Add element-types.md as shared reference for interactive elements
- Create element-types.md with 11 interactive element type definitions - Include selectors, test actions, and examples for each type - Add testing strategy and best practices - Update frontend-testing-command.md to reference element-types.md - Update web-app-testing skill to reference element-types.md - Establish element-types.md as canonical source for element discovery - Completes shared reference architecture: checklist.md + element-types.md
1 parent 169be37 commit ccbacdd

3 files changed

Lines changed: 358 additions & 8 deletions

File tree

‎plugins/frontend-testing/commands/frontend-testing-command.md‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,15 @@ You must execute the following operations strictly in order. Do not skip any ste
88

99
### Phase A: Connectivity & Basics
1010
1. **Navigation**: Use `playwright MCP server` to access the Target URL.
11-
2. **Console Inspection**: Check the browser console for any logs with an "Error" level.
11+
2. **Element Discovery**: Discover interactive elements using standard selectors (see [element-types.md](../element-types.md) for complete definitions of 11+ element types including buttons, links, checkboxes, radios, dropdowns, text inputs, tabs, accordions, toggles, modals, and menus).
12+
3. **Console Inspection**: Check the browser console for any logs with an "Error" level.
1213
* *Criteria*: If any console errors are found, the test status must be marked as "WARNING" (unless the page fails to load entirely, then "FAIL").
1314

1415
### Phase B: Standard Testing
1516

16-
**Reference**: See [checklist.md](../checklist.md) for comprehensive quality criteria covering:
17-
- UX & Error Handling
18-
- SEO
19-
- Function & Layout
20-
- Accessibility Considerations
21-
- Performance
17+
**References:**
18+
- [checklist.md](../checklist.md) - Comprehensive quality criteria for UX, SEO, Function & Layout, Accessibility, Performance
19+
- [element-types.md](../element-types.md) - Complete interactive element type definitions and selectors
2220

2321
Focus on the following automated checks using Playwright:
2422

‎plugins/frontend-testing/element-types.md‎

Lines changed: 350 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,350 @@
1+
# Interactive Element Types Reference
2+
3+
This document defines the standard interactive element types tested across all frontend-testing tools (commands and skills). Use this as the canonical reference for element discovery and testing strategies.
4+
5+
---
6+
7+
## Element Type Definitions
8+
9+
### 1. Buttons
10+
11+
**Selectors:**
12+
- `<button>`
13+
- `[role="button"]`
14+
- `[onclick]`
15+
- `input[type="button"]`
16+
- `input[type="submit"]`
17+
- `input[type="reset"]`
18+
- `[class*="btn"]` (class-based buttons)
19+
20+
**Test Actions:**
21+
- Click
22+
- Verify enabled/disabled state
23+
- Check aria-label or text content
24+
- Verify click triggers expected action
25+
26+
**Example:**
27+
```html
28+
<button class="btn-primary">Submit</button>
29+
<div role="button" onclick="handleClick()">Click Me</div>
30+
```
31+
32+
---
33+
34+
### 2. Links
35+
36+
**Selectors:**
37+
- `<a href>` (excluding `href="#"` and `href="javascript:"`)
38+
39+
**Test Actions:**
40+
- Click to navigate
41+
- Verify target URL is valid (not 404)
42+
- Check opens in correct target (_blank, _self)
43+
- Verify aria-label for icon-only links
44+
45+
**Example:**
46+
```html
47+
<a href="/about">About Us</a>
48+
<a href="https://example.com" target="_blank">External Link</a>
49+
```
50+
51+
---
52+
53+
### 3. Checkboxes
54+
55+
**Selectors:**
56+
- `input[type="checkbox"]`
57+
58+
**Test Actions:**
59+
- Check (set to checked state)
60+
- Uncheck (set to unchecked state)
61+
- Verify state tracking
62+
- Test with associated label
63+
- Verify onChange handlers fire
64+
65+
**Example:**
66+
```html
67+
<input type="checkbox" id="agree" />
68+
<label for="agree">I agree to terms</label>
69+
```
70+
71+
---
72+
73+
### 4. Radio Buttons
74+
75+
**Selectors:**
76+
- `input[type="radio"]`
77+
78+
**Test Actions:**
79+
- Select each option in radio group
80+
- Verify only one selected at a time
81+
- Test with associated label
82+
- Verify onChange handlers fire
83+
84+
**Example:**
85+
```html
86+
<input type="radio" name="size" value="small" id="small" />
87+
<label for="small">Small</label>
88+
<input type="radio" name="size" value="large" id="large" />
89+
<label for="large">Large</label>
90+
```
91+
92+
---
93+
94+
### 5. Select Dropdowns
95+
96+
**Selectors:**
97+
- `<select>`
98+
99+
**Test Actions:**
100+
- Click to open dropdown
101+
- Select each option (test up to 3 options per dropdown)
102+
- Verify selected value changes
103+
- Check onChange handlers fire
104+
- Test keyboard navigation (Arrow keys)
105+
106+
**Example:**
107+
```html
108+
<select name="country">
109+
<option value="us">United States</option>
110+
<option value="uk">United Kingdom</option>
111+
<option value="ca">Canada</option>
112+
</select>
113+
```
114+
115+
---
116+
117+
### 6. Text Inputs
118+
119+
**Selectors:**
120+
- `input[type="text"]`
121+
- `input[type="email"]`
122+
- `input[type="password"]`
123+
- `input[type="search"]`
124+
- `input[type="tel"]`
125+
- `input[type="url"]`
126+
- `input[type="number"]`
127+
- `input` (generic, no type specified)
128+
- `<textarea>`
129+
130+
**Test Actions:**
131+
- Fill with test data
132+
- Verify value updates
133+
- Test validation (email format, required fields)
134+
- Test placeholder visibility
135+
- Test maxlength restrictions
136+
- Verify onInput/onChange handlers
137+
138+
**Example:**
139+
```html
140+
<input type="email" placeholder="Enter email" required />
141+
<textarea placeholder="Your message" maxlength="500"></textarea>
142+
```
143+
144+
---
145+
146+
### 7. Tabs
147+
148+
**Selectors:**
149+
- `[role="tab"]`
150+
- `[class*="tab"]` (e.g., `.tab`, `.tab-item`)
151+
- `<button class="tab">`
152+
153+
**Test Actions:**
154+
- Click each tab
155+
- Verify associated panel becomes visible
156+
- Check aria-selected attribute changes
157+
- Test keyboard navigation (Arrow keys)
158+
- Verify only one tab active at a time
159+
160+
**Example:**
161+
```html
162+
<div role="tablist">
163+
<button role="tab" aria-selected="true">Tab 1</button>
164+
<button role="tab" aria-selected="false">Tab 2</button>
165+
</div>
166+
<div role="tabpanel">Content 1</div>
167+
```
168+
169+
---
170+
171+
### 8. Accordions
172+
173+
**Selectors:**
174+
- `<details><summary>`
175+
- `[aria-expanded]`
176+
- `[class*="accordion"]`
177+
- `[class*="collapse"]`
178+
179+
**Test Actions:**
180+
- Click to expand
181+
- Click to collapse
182+
- Verify aria-expanded attribute changes
183+
- Check content visibility toggles
184+
- Test keyboard interaction (Enter/Space)
185+
186+
**Example:**
187+
```html
188+
<details>
189+
<summary>Click to expand</summary>
190+
<p>Hidden content here</p>
191+
</details>
192+
193+
<div class="accordion-item">
194+
<button aria-expanded="false">Section 1</button>
195+
<div class="accordion-content">Content</div>
196+
</div>
197+
```
198+
199+
---
200+
201+
### 9. Toggles/Switches
202+
203+
**Selectors:**
204+
- `[role="switch"]`
205+
- `[class*="toggle"]`
206+
- `[class*="switch"]`
207+
- `input[type="checkbox"]` with switch styling
208+
209+
**Test Actions:**
210+
- Click to toggle on
211+
- Click to toggle off
212+
- Verify aria-checked attribute
213+
- Check visual state change
214+
- Verify onChange handlers
215+
216+
**Example:**
217+
```html
218+
<button role="switch" aria-checked="false">
219+
Enable notifications
220+
</button>
221+
222+
<label class="switch">
223+
<input type="checkbox" />
224+
<span class="slider"></span>
225+
</label>
226+
```
227+
228+
---
229+
230+
### 10. Modal Triggers
231+
232+
**Selectors:**
233+
- `[data-toggle="modal"]`
234+
- `[data-bs-toggle="modal"]` (Bootstrap)
235+
- `[aria-haspopup="dialog"]`
236+
- `[class*="modal-trigger"]`
237+
- Buttons with text like "Open", "Show Modal"
238+
239+
**Test Actions:**
240+
- Click to open modal
241+
- Verify modal becomes visible
242+
- Check aria-hidden changes
243+
- Test Escape key to close
244+
- Verify focus trap within modal
245+
- Test close button
246+
247+
**Example:**
248+
```html
249+
<button data-toggle="modal" data-target="#myModal">
250+
Open Modal
251+
</button>
252+
253+
<div id="myModal" role="dialog" aria-hidden="true">
254+
<div class="modal-content">
255+
<button class="close" aria-label="Close">×</button>
256+
</div>
257+
</div>
258+
```
259+
260+
---
261+
262+
### 11. Menu Items
263+
264+
**Selectors:**
265+
- `[role="menuitem"]`
266+
- `[class*="menu-item"]`
267+
- `<li>` inside `<ul role="menu">`
268+
- Dropdown menu items
269+
270+
**Test Actions:**
271+
- Click menu item
272+
- Verify action triggers
273+
- Check keyboard navigation (Arrow keys)
274+
- Test nested submenus
275+
- Verify aria-expanded for submenus
276+
277+
**Example:**
278+
```html
279+
<ul role="menu">
280+
<li role="menuitem">Profile</li>
281+
<li role="menuitem">Settings</li>
282+
<li role="menuitem">Logout</li>
283+
</ul>
284+
285+
<div class="dropdown">
286+
<button class="dropdown-toggle">Menu</button>
287+
<div class="dropdown-menu">
288+
<a class="menu-item" href="/profile">Profile</a>
289+
</div>
290+
</div>
291+
```
292+
293+
---
294+
295+
## Testing Strategy
296+
297+
### Discovery Order
298+
1. **Explicit roles first** - `[role="button"]`, `[role="tab"]`, etc.
299+
2. **Semantic HTML** - `<button>`, `<a>`, `<select>`, etc.
300+
3. **Class-based** - `[class*="btn"]`, `[class*="tab"]`, etc.
301+
4. **Generic with context** - `input`, `textarea`, etc.
302+
303+
### Best Practices
304+
- ✅ Test elements in the order they appear in DOM
305+
- ✅ Capture before/after screenshots for state changes
306+
- ✅ Verify ARIA attributes update correctly
307+
- ✅ Test keyboard interactions (Tab, Enter, Space, Arrows)
308+
- ✅ Check touch target sizes (44×44px minimum)
309+
- ✅ Verify focus states are visible
310+
- ✅ Test with assistive technologies when possible
311+
312+
### Coverage Validation
313+
- Compare discovered elements against source code
314+
- Identify untested element types
315+
- Calculate coverage percentage by type
316+
- Report gaps in test coverage
317+
318+
---
319+
320+
## Usage in Tests
321+
322+
### In Commands (Playwright MCP)
323+
Reference this file to ensure consistent element discovery:
324+
```markdown
325+
See [element-types.md](../element-types.md) for complete element type definitions.
326+
```
327+
328+
### In Skills (Python Scripts)
329+
Use these selectors in automated discovery:
330+
```python
331+
ELEMENT_SELECTORS = {
332+
'buttons': ['button', '[role="button"]', '[onclick]', 'input[type="button"]'],
333+
'links': ['a[href]:not([href^="#"]):not([href^="javascript:"])'],
334+
'checkboxes': ['input[type="checkbox"]'],
335+
# ... etc
336+
}
337+
```
338+
339+
---
340+
341+
## Maintenance
342+
343+
When adding new element types:
344+
1. Add definition to this file
345+
2. Update command test cases
346+
3. Update skill discovery logic
347+
4. Update checklist.md if needed
348+
5. Add examples to this file
349+
350+
**Last Updated:** December 17, 2025

‎plugins/frontend-testing/skills/frontend-deployment-checklist/SKILL.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ Advanced automated web application testing with Playwright. Automatically discov
1010

1111
## 🎯 Interactive Element Types
1212

13-
This skill now discovers and tests ALL these interactive element types:
13+
**Reference**: See [../../element-types.md](../../element-types.md) for complete element type definitions, selectors, and test actions.
14+
15+
This skill discovers and tests ALL these interactive element types:
1416

1517
1. **Buttons** - `<button>`, `[role="button"]`, `[onclick]`, input buttons, submit buttons, class-based buttons
1618
2. **Links** - `<a href>` elements (excluding anchors and javascript:)

0 commit comments

Comments
 (0)