How to use the CSS Selector Generator.
A selector should be specific enough to identify the target and stable enough to survive minor layout changes. Avoid positional selectors when meaningful attributes exist.
Make the workflow fit your task.
Choose a meaningful stable attribute or semantic relationship, then test the selector within the intended scope. Check how many elements match and include a state or container only when needed to identify the right target.
- What you provide
- Supplied DOM fragment and target element.
- What you get
- Selector with specificity and stability explanation.
See the input and the result.
Illustrative input and output · a teaching example, not a live WebAct run
Example input
DOM contains a button with data-action="export".
Completed example
button[data-action="export"] targets the declared action; check that the attribute is unique within the intended scope.
Load this input into the prompt, then copy it to WebAct to try the task. Your result may differ from the illustration.
Decisions and troubleshooting.
Should a selector rely on the element's current position in a list?
Prefer stable meaning where available. Positional selectors can point to a different element after a small layout or data change.
Why does the selector match several export buttons?
Narrow the scope to the relevant container or add a supported distinguishing attribute. Verify the match count before using it for an action.
Try it with your own source.
Replace the example with your material in the task prompt. Keep the requirements you need, then copy the task into WebAct.
Customize and copy the task ↑