Stabiele CSS-selectors met een duidelijk bereik maken.
Een selector moet het doel voldoende precies identificeren en kleine lay-outwijzigingen overleven. Vermijd positionele selectors als betekenisvolle attributen bestaan.
Stem de werkwijze af op je taak.
Kies een betekenisvol stabiel attribuut of semantische relatie en test de selector binnen het bedoelde bereik. Controleer het aantal matches en voeg staat of container alleen toe als dat nodig is om het juiste doel te vinden.
- Wat je aanlevert
- Aangeleverd DOM-fragment en doelelement.
- Wat je krijgt
- Selector met uitleg over specificiteit en stabiliteit.
Bekijk de invoer en het resultaat.
Illustratieve invoer en uitvoer · een leervoorbeeld, geen live uitvoering van WebAct
Voorbeeld invoerveld
DOM contains a button with data-action="export".
Uitgewerkt voorbeeld
button[data-action="export"] targets the declared action; check that the attribute is unique within the intended scope.
Laad deze invoer in de prompt en kopieer deze naar WebAct om de taak te proberen. Je resultaat kan afwijken van het voorbeeld.
Keuzes en probleemoplossing.
Moet een selector op de huidige positie van een element in een lijst vertrouwen?
Geef waar mogelijk de voorkeur aan stabiele betekenis. Positionele selectors kunnen na een kleine lay-out- of datawijziging een ander element aanwijzen.
Waarom matcht de selector meerdere exportknoppen?
Beperk het bereik tot de relevante container of voeg een ondersteund onderscheidend attribuut toe. Controleer het matchaantal voordat je er een actie mee uitvoert.
Probeer het met je eigen bron.
Vervang het voorbeeld door je eigen materiaal in de taakprompt. Behoud de eisen die je nodig hebt en kopieer de taak naar WebAct.
De taak aanpassen en kopiëren ↑