Programmation et outils de développement

Générateur gratuit de sélecteurs CSS.

Sélecteur avec explication de spécificité et de stabilité.

Développez un sélecteur depuis la structure réelle de la page et vérifiez sa portée avant une tâche dans le navigateur.

Extension Chrome et compte requis.
25 tâches d'automatisation gratuites par mois, partagées entre les outils. Les limites du fournisseur via navigateur s'appliquent.

CE QU'IL FAUT PRÉPARER

Fragment DOM fourni et élément cible.

VOTRE POINT DE DÉPART

Une tâche à personnaliser.

Copiez-le ici. Collez-le dans WebAct quand vous le souhaitez.

Cette page prépare votre prompt. La tâche s'exécute dans WebAct.

01

Adaptez la tâche à vos besoins.

Relisez le prompt ci-dessus. Ajoutez votre objectif et les exigences importantes.

02

Passez à WebAct.

Ouvrez WebAct, collez la tâche et fournissez vos sources. Commencez dans Chat pour un brouillon ou une explication ; utilisez Task pour une action dans le navigateur ou un fichier avec votre approbation.

03

Vérifiez la partie utile.

Vérifiez formules, code et calculs avec des entrées connues dans l’environnement d’exécution approprié. Examinez les actions avant leur exécution et gardez les données d’origine disponibles.

GUIDE PRATIQUE

Créer des sélecteurs CSS stables et bien délimités.

Un sélecteur doit identifier la cible assez précisément et résister aux petits changements de mise en page. Évitez les sélecteurs positionnels si des attributs significatifs existent.

Adaptez le processus à votre tâche.

Choisissez un attribut stable et significatif ou une relation sémantique, puis testez le sélecteur dans la portée prévue. Vérifiez le nombre d’éléments correspondants et ajoutez état ou conteneur seulement si nécessaire pour identifier la bonne cible.

Ce que vous fournissez
Fragment DOM fourni et élément cible.
Ce que vous obtenez
Sélecteur avec explication de spécificité et de stabilité.

Consultez les données et le résultat.

Entrée et sortie illustratives · exemple pédagogique, pas une exécution WebAct en direct

Exemple champ

DOM contains a button with data-action="export".

Exemple complet

button[data-action="export"] targets the declared action; check that the attribute is unique within the intended scope.
Télécharger cet exemple

Chargez ces données dans le prompt, puis copiez-le dans WebAct pour essayer la tâche. Votre résultat peut différer de l'illustration.

Décisions et dépannage.

Le sélecteur doit-il dépendre de la position actuelle de l’élément dans une liste ?

Préférez un sens stable lorsqu’il existe. Un sélecteur positionnel peut viser un autre élément après un petit changement de disposition ou de données.

Pourquoi le sélecteur correspond-il à plusieurs boutons d’export ?

Limitez la portée au conteneur pertinent ou ajoutez un attribut distinctif pris en charge. Vérifiez le nombre de correspondances avant de l’utiliser pour une action.

Essayez avec votre propre source.

Remplacez l'exemple par vos données dans le prompt. Gardez les exigences nécessaires, puis copiez la tâche dans WebAct.

Personnaliser et copier la tâche ↑
AVANT DE COMMENCER

Utiliser WebAct.

Le prompt et l'exemple sont disponibles ici. Exécutez votre tâche dans l'extension WebAct pour Chrome.

Cet outil est-il gratuit ?

Vous pouvez copier et modifier le prompt ici gratuitement. Pour l'utiliser avec WebAct, installez l'extension Chrome, créez et vérifiez votre compte, puis connectez une session ChatGPT disponible dans le navigateur. Le forfait Free inclut 25 tâches d'automatisation lancées par l'utilisateur par mois civil, partagées entre les outils. Le Chat ordinaire dans le navigateur est distinct ; les limites du fournisseur s'appliquent.

Découvrez le contexte partagé dans notre politique de confidentialité et comment choisir entre Chat ou Task.

DU PROMPT À VOTRE PROPRE TRAVAIL

Amenez la tâche sur votre page.

Installez WebAct, ajoutez vos sources et adaptez le résultat.

Installer WebAct