Me preguntaba si hay un complemento de este tipo en Firefox, donde puedes probar las rutas CSS para comprobar si están encontrando el elemento correcto. Estaba buscando algo similar a xpather para ubicaciones xpath.¿Hay algún complemento que pueda probar los selectores de CSS en Firefox?
FireFinder hace exactamente lo que estás buscando. Puede evaluar CSS o expresiones XPath, enumerará los elementos coincidentes y también dibujará un borde rojo alrededor de ellos.
Si solo tiene que hacer algunas pruebas rápidas, también puede abrir la barra de herramientas del desarrollador (F12) y usar $$('selector') para realizar algunas búsquedas rápidas.
+1 para obtener una respuesta correcta y completa, y una interfaz de usuario agradable que lo acompañe. – Nicole
¡Esto es exactamente lo que estaba buscando y muy fácil de usar! ¡Gracias! – user223871
Prueba firebug. http://getfirebug.com/
Sí, puede optar por FireBug, un complemento versátil de desarrollo web de Firefox.
Para probar un selector CSS, vaya a la pestaña "Consola" y escriba un comando en el formulario inferior (more info sobre cómo encontrar la línea de comandos).
Dentro de la línea de comandos utiliza la sintaxis $$("your CSS selector") para probar selectores CSS, se explica en más detalle here. Por ejemplo, use este comando para seleccionar todo:
$$("body")
Firebug FTW !!!! – gingerbreadboy
¿Hay alguna manera de navegar hacia un elemento usando un selector de CSS en Firebug? No es lo mismo que simplemente ver la posición del elemento en el DOM. – Nicole
@Renesis: sí, es posible, consulte su documentación. gracias – Sarfraz
No estoy seguro si esto ayuda. Prueba Firebug. Le permite seleccionar un ítem, y ver cuál es su ruta css, así como también la css que se está aplicando actualmente.
Puede hacer algo de experimentación en el html/css directamente en el navegador.
con jQuery fácilmente se podría añadir un gran borde rojo a un elemento mediante el selector.
$(document).ready(function(){
$('#your-css-selector').css('border', '5px solid red');
});
El botón 'Buscar' en Selenio IDE es muy útil para esto. Utiliza el mismo método para ubicar elementos que las pruebas, por lo que se puede utilizar para localizar elementos utilizando cualquiera de las estrategias admitidas.
Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843) o Web Developer Toolbar (https://addons.mozilla.org/en-US/firefox/addon/60). Ambos muestran el camino.
Firefinder es ideal para probar selectores. Sin embargo, si también desea obtener el selector de CSS para un elemento, intente SelectorGadget.
Selenium IDE 1.0.11 liberado tiene constructor de CSS localizador incorporado
FireFinder es buena, pero comenzó con y prefieren FirePath de Firebug. Funciona de manera similar, pero puede ofrecerle una vista ampliada del HTML alrededor de los elementos coincidentes sin necesidad de hacer clic en inspeccionar, FriendlyFire, etc.
El campo donde prueba el localizador también tiene un corrector de sintaxis donde el campo cambia a rojo si la sintaxis es mala. Simplemente haga clic en eval para probar el localizador y las coincidencias muestran a continuación con HTML adicional alrededor de los elementos coincidentes.
Pero para probar el localizador CSS, querrá la opción desplegable de "Sizzle" en lugar de CSS en FirePath. La opción CSS solo funciona para selectores CSS simples, los complejos solo funcionan en Sizzle (modo l, como:
div.namedService.photoService> div.photoBrowserContainer: nth-child (3)> div.albumName: contains ('somename')
También amo FirePath. – anonmys
Realmente publicado esto hace un tiempo antes de realizar limitaciones de CSS. Sizzle es agradable, pero en términos de automatización de pruebas, asegúrese de usar/probar solo con CSS, si está usando Selenium 2/WebDriver ya que solo es compatible con CSS.El soporte de Sizzle requeriría que usted inyecte Sizzle en la página/automatización, a diferencia de Selenium RC. – David
la función estándar DOM document.querySelectorAll es lo que quieres, navegador moderno todo el apoyo ella. Véase el documento
https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll
se le puede llamar en una función de consola web. en la consola hay es un atajo $$, llámalo como $$('div a').
Me gusta Firebug porque puede hacer clic para desplazarse para ver el elemento. También puede probar en el panel 'CSS'.
continuación se explica cómo utilizar el construido en selector de consultas CSS en Firefox:
Ir a Herramientas> Web Developer> Consola Web
También, puede pulsar ctrlshifti en Windows/Linux o cmdopti en Mac.
Escriba su selector CSS (usando la sintaxis tradicional $$()) en la esquina inferior izquierda.
La lista de nodos de objetos aparecerá en el panel derecho de la consola.
$$('div')
[object NodeList]
$$('div').length
42
Esto es útil para casos de selenio WebDriver de Firefox, donde tener una extensión no es factible.
He encontrado que FirePath es realmente genial, le permite buscar no solo CSS, sino también xPath. Desearía que hubiera algo similar para Chrome e Internet Explorer, pero ¡ay!
Puede usar las herramientas de desarrollo de Chrome (se envía con Chrome, no necesita una herramienta independiente o un complemento - consulte https://developer.chrome.com/devtools) para probar selectores en Chrome ... abra la consola y escriba $$ ("tu selector de CSS") como lo harías en Firebug. – noumenon
Si esta pregunta se hiciera hoy, se cerraría como fuera de tema ... – Jack