web-dev-qa-db-fra.com

Y at-il un addon que vous pouvez tester les sélecteurs CSS dans Firefox?

Je me demandais s’il existe un tel addon dans Firefox où vous pouvez tester les chemins css pour vérifier s’ils trouvent le bon élément? Je recherchais quelque chose de similaire à xpather pour les emplacements xpath.

cssseleniumfirefox-addoncss-selectors
45
user223871

FireFinder fait exactement ce que vous recherchez. Vous pouvez évaluer les expressions CSS ou XPath. Il répertorie les éléments correspondants et dessine une bordure rouge autour d'eux.

Si vous avez juste besoin de faire quelques tests rapides, vous pouvez également ouvrir la barre d’outils des développeurs (F12) et utiliser $$('selector') pour faire des recherches rapides.

FireFinder

47
K. Norbert

Oui, vous pouvez choisir FireBug , un complément polyvalent pour le développement Web Firefox.

Firebug

Pour tester un sélecteur CSS, allez dans l'onglet "Console" et entrez une commande dans le formulaire inférieur ( plus d'infos pour savoir comment trouver la ligne de commande).

Firebug command line

Dans la ligne de commande, utilisez la syntaxe $$("your CSS selector") pour tester les sélecteurs CSS, expliquée plus en détail ici . Par exemple, utilisez cette commande pour tout sélectionner:

$$("body")
21
Sarfraz

Voici comment utiliser le sélecteur de requête CSS intégré à Firefox:

Allez dans Outils> Web Developer> Web Console

Vous pouvez également appuyer sur ctrlshifti sous Windows/Linux ou cmdopti sur Mac.

Tapez votre sélecteur CSS (en utilisant la syntaxe traditionnelle $$()) tout en bas à gauche.

La liste des noeuds d’objets apparaîtra dans le panneau de droite de la console.

$$('div')
[object NodeList]
$$('div').length
42

C'est pratique pour les instances de Selenium Webdriver de Firefox, où avoir une extension n'est pas possible.

12
Droogans

Essayez Firebug. http://getfirebug.com/

3
rui

Pas sûr que cela aide. Essayez Firebug. Vous permet de sélectionner un élément et de voir son chemin css, ainsi que le css en cours d'application.

Peut faire des expériences dans le HTML/CSS directement dans le navigateur.

3
Mikezx6r

FireFinder est bon, mais j’ai commencé avec et préfère FirePath pour Firebug. Il fonctionne de la même manière, mais peut vous donner une vue étendue du code HTML autour des éléments correspondants sans cliquer sur Inspecter, FriendlyFire, etc.

Le champ où vous testez le localisateur comporte également un vérificateur de syntaxe, où le champ devient rouge si la syntaxe est incorrecte. Cliquez simplement sur eval pour tester le localisateur et les correspondances apparaissent ci-dessous avec du code HTML supplémentaire autour des éléments correspondants.

Mais pour tester le localisateur CSS, vous souhaitez utiliser l'option déroulante "Sizzle" plutôt que CSS dans FirePath. L'option CSS ne fonctionne que pour les sélecteurs CSS simples, les complexes ne fonctionnent que sous Sizzle (mode l, tels que:

div.namedService.photoService> div.photoBrowserContainer: nth-child (3)> div.albumName: contient ('someName')

3
David

La fonction standard DOM document.querySelectorAll est ce que vous voulez, le navigateur moderne le supporte. Voir le document

https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll

Vous pouvez l'appeler dans la console Web intégrée. Dans la console, il existe un raccourci $$, appelez-le comme suit: $$('div a').

J'aime firebug car il peut cliquer pour faire défiler pour voir l'élément. Il peut également tester dans le panneau 'CSS'.

2
muzuiget

Selenium IDE 1.0.11 publié avec un constructeur de localisateur CSS intégré

2
chirag

Le bouton 'Rechercher' dans Selenium IDE est très utile pour cela. Il utilise la même méthode pour localiser les éléments que vos tests. Vous pouvez donc l'utiliser pour localiser des éléments en utilisant l'une des stratégies prises en charge.

1
Dave Hunt

jQuery


Avec jQuery, vous pouvez facilement ajouter une grande bordure rouge à un élément à l'aide du sélecteur.

$(document).ready(function(){

  $('#your-css-selector').css('border', '5px solid red');

});
0
Jon Winstanley

Firefinder est idéal pour tester les sélecteurs. Toutefois, si vous souhaitez également obtenir le sélecteur CSS pour un élément, essayez SelectorGadget .

0
nacmartin

J'ai trouvé FirePath vraiment génial, il vous permet de consulter non seulement CSS, mais xPath. Je souhaite qu'il y ait quelque chose de similaire pour Chrome et IE, mais hélas!

0
Donshon

Firebug ( https://addons.mozilla.org/en-US/firefox/addon/1843 ) ou Web Developer Toolbar ( https://addons.mozilla.org/en-US/firefox/addon/60 ). Les deux montrent le chemin.

0
Tom