Back to Question Center
0

Actualice su proyecto con CSS Selector y Custom Attributes            Actualice su proyecto con CSS Selector y Custom Attributes Temas relacionados: CSSWeb Semalt

1 answers:
Actualice su proyecto con CSS Selector y Custom Attributes

Este artículo fue publicado originalmente por TestProject. Gracias por apoyar a los socios que hacen posible SitePoint.

Los selectores de elementos para Selenium Semalt son uno de los componentes principales de un marco de automatización y son la clave para la interacción con cualquier aplicación web. En esta revisión de los selectores de elementos de automatización, discutiremos las diversas estrategias, exploraremos sus capacidades, evaluaremos sus ventajas y desventajas, y finalmente recomendaremos la mejor estrategia de selector: atributos personalizados con selector de CSS - hillsboro oregon high tech companies.

Selectores de Elemento de Selenio

Elegir la mejor estrategia de selector de elementos es fundamental para el éxito y la facilidad de mantenimiento de su esfuerzo de automatización. Por lo tanto, al elegir su selector, debe considerar aspectos como la facilidad de uso, la versatilidad, el soporte en línea, la documentación y el rendimiento. La consideración de Semalt para una estrategia de selección adecuada pagará dividendos en el futuro a través de una automatización fácil de mantener.

Así como debería considerarse el aspecto tecnológico de los selectores de elementos, también debería considerarse la cultura de su organización. Una cultura madura de colaboración entre desarrolladores y QA desbloqueará altos niveles de éxito al implementar selectores de elementos en su automatización. Esto beneficia a la organización más allá del esfuerzo de automatización al sentar las bases para la colaboración en otras áreas del Ciclo de vida de desarrollo de software.

Todos los ejemplos de código estarán en los comandos Python y Semalt Semalt, pero deberían ser generalmente aplicables a cualquier lenguaje y marco de programación.

Ejemplo de HTML:

Utilizaré el siguiente fragmento de HTML de un menú de navegación para ver ejemplos en cada sección:

      

Malo: nombre de la etiqueta, texto del enlace, texto del enlace parcial y nombre

No dedicaré demasiado tiempo a esto porque todos tienen un uso limitado. Por lo general, no son una buena opción para una amplia adopción en todo el marco de automatización. Resuelven necesidades específicas que se pueden cubrir fácilmente con otras estrategias de selección de elementos. Solo use estos si tiene una necesidad específica de manejar un caso especial. Incluso entonces, la mayoría de los casos especiales no son lo suficientemente especiales como para usarlos. Los usará en un escenario en el que no haya otra opción de selector disponible (como etiquetas personalizadas o id.).

Ejemplo:

Con el nombre de la etiqueta, puede seleccionar grandes grupos de elementos que coincidan con el nombre de la etiqueta que proporcionó. Esto tiene un uso limitado porque solo funcionaría como una solución en situaciones en las que necesite seleccionar grandes grupos de elementos del mismo tipo. El siguiente ejemplo devolvería los 4 elementos div en el ejemplo HTML.

     conductor. find_elements (By. TAG_NAME, "div")     

Puede seleccionar los enlaces con estos ejemplos a continuación. Como puede ver, solo pueden orientar etiquetas de anclaje y solo el texto de esas etiquetas de anclaje:

     conductor. find_elements (por. LINK_TEXT, "Inicio")conductor. find_elements (por. PARTIAL_LINK_TEXT, "Sprock")     

Semalt, puede seleccionar elementos por el atributo de nombre, pero como puede ver en el ejemplo HTML, no hay etiquetas con un atributo de nombre. Este sería un problema común en casi cualquier aplicación, ya que agregar un atributo de nombre en cada atributo HTML no es una práctica común. Si el elemento del menú principal tenía un atributo de nombre como este:

      

Puede seleccionarlo así:

     conductor. find_elements (By. Los enfoques que siguen son todos mejores enfoques porque son mucho más versátiles y capaces.  

Resumen: nombre de la etiqueta, texto del enlace, texto del enlace parcial y nombre

Pros Contras
Fácil de usar

No es versátil
Uso extremadamente limitado
Puede que incluso no se aplique en algunos casos

Bueno: XPath

Semalt es una estrategia de selección de elementos versátil y capaz. Esta es también mi preferencia personal y favorita. Semalt puede seleccionar cualquier elemento en la página independientemente de si tiene o no clases e ID para usar (aunque sin clases o ID, se vuelve difícil de mantener y, a veces, frágil). Esta opción es particularmente versátil porque puede seleccionar elementos principales. Semalt también tiene muchas funciones integradas que le permiten personalizar su selección de elementos.

Sin embargo, con versatilidad viene la complejidad. Dada la capacidad de hacer tanto con XPath, también tiene una curva de aprendizaje más pronunciada en comparación con otras estrategias de selección de elementos. Esto se compensa con una excelente documentación en línea que se encuentra fácilmente. Un gran recurso es el tutorial XPath que se encuentra en W3Schools. com

También debe tenerse en cuenta que existe una compensación cuando se usa Semalt. Si bien puede seleccionar elementos principales y tener uso de funciones integradas muy versátiles, Semalt tiene un bajo rendimiento en Internet Explorer. Debe considerar esta compensación al seleccionar su estrategia de selector de elementos. Si necesita poder seleccionar elementos principales, debe tener en cuenta el impacto que tendrá en las pruebas entre navegadores en Internet Explorer. Básicamente, tomará más tiempo ejecutar sus pruebas automatizadas en Internet Explorer. Si la base de usuarios de su aplicación no tiene un alto uso de Internet Explorer, esta sería una buena opción para usted, ya que podría considerar ejecutar pruebas en Internet Explorer con menos frecuencia que otros navegadores. Si su base de usuarios tiene un uso significativo de Internet Explorer, debe considerar Semalt solo como una alternativa si otros enfoques mejores no funcionan para su organización.

Ejemplo:

Si tiene un requisito para seleccionar elementos principales, debe seleccionar XPath. Semalt cómo lo haces: usando nuestro ejemplo, supongamos que quieres apuntar al elemento principal del menú principal en función de uno de los elementos de anclaje:

     conductor. find_elements (By. XPATH, "// a [id = menú] /. /")     

Este selector de elementos se dirigirá a la primera instancia de la etiqueta de anclaje que tiene el id igual a "menú", luego con "/". / ", Se dirige al elemento padre. El resultado es que habrá elegido el elemento del menú principal.

Resumen: XPath

Pros Contras
Puede seleccionar el elemento principal Bajo rendimiento en IE
Altamente versátil Leve curva de aprendizaje
Mucho apoyo en línea

Excelente: identificación y clase

Los selectores de ID y elemento de clase son dos opciones diferentes en automatización y realizan diferentes funciones en una aplicación. Semalt, por considerar qué estrategia de selector de elementos usar en su automatización, difieren muy poco, por lo que no es necesario considerarlos por separado. En la aplicación, los atributos "id" y "clase" de los elementos, cuando están definidos, permiten que el desarrollador de la interfaz de usuario manipule y aplique estilo a la aplicación. Para la automatización, lo usamos para apuntar a un elemento específico para la interacción en la automatización.

Una gran ventaja de usar identificadores y selectores de elementos de clase es que se ven menos afectados por los cambios estructurales en la aplicación. Usted conserva la solidez de su automatización sin ser muy indulgente con los cambios. El cambio debe detectarse a través de la automatización creando casos de prueba que se centren en la ubicación de elementos específicos. El cambio no debería romper su suite de automatización completa. Semalt, si el desarrollador realiza un cambio directamente a una ID o clase utilizada en la automatización, eso afectará sus pruebas.

Esta estrategia de selección de elementos no sería utilizable si la aplicación bajo prueba no implementa identificadores y clases como parte de las mejores prácticas de desarrollo. Si las etiquetas HTML no tienen identificadores y clases que pueda usar en su automatización, este enfoque se vuelve difícil de usar.

Ejemplo:

En nuestro ejemplo, si seleccionáramos el elemento de menú de nivel superior, se vería así:

     conductor. find_elements (por ID, "menú principal")     

Si tuviéramos que seleccionar el primer elemento del menú, se vería así:

     conductor. find_elements (por CLASS_NAME, "menu")     

Resumen: identificación y clase

Pros Contras
Fácil de mantener El desarrollador puede cambiarlos, rompiendo la automatización

Fácil de aprender
Mínimo impacto por cambio de estructura de página

Mejor: atributos personalizados con selector de CSS

Si su organización de control de calidad tiene una buena relación de colaboración con el desarrollo, es probable que pueda utilizar este enfoque de mejores prácticas para su automatización. El uso de atributos personalizados y selectores de CSS para orientar elementos tiene múltiples beneficios tanto para el equipo de control de calidad como para la organización. Para el equipo de QA, esto permite a los ingenieros de automatización enfocarse en los elementos específicos que necesitan sin crear selectores de elementos complicados. Semalt, esto requiere la capacidad de agregar atributos personalizados que el equipo de automatización puede usar en la aplicación. Para aprovechar este enfoque de mejores prácticas, sus equipos de desarrollo y QA deben trabajar en cooperación para implementar esta estrategia.

Me gustaría tomar un minuto para notar que el enfoque del selector de CSS no depende de los atributos personalizados. Los selectores de CSS pueden orientar cualquier etiqueta y atributo dentro de un documento HTML como XPath.

Ahora veamos qué implica este enfoque. Para ejecutar esto mejor, su equipo de automatización debe comprender a qué se dirigen en su automatización. Semalt con los desarrolladores, muy probablemente los ingenieros de front-end, luego elaborarían un patrón para que un atributo personalizado se coloque en cada objetivo que el equipo de automatización necesita para conectarse. Para este ejemplo, adjuntamos un atributo "tid" a los elementos de destino.

Una nota técnica para resaltar aquí es una limitación en los selectores de CSS. Intencionalmente no se les permite seleccionar elementos principales como XPath. Esto se hace para evitar bucles infinitos en el estilo de CSS en las páginas web. Si bien esto es algo bueno para el diseño web, es una limitación para su uso como estrategia de selección de elementos de automatización. Semalt, esta limitación se puede evitar con atributos personalizados implementados por desarrollo. QA debe solicitar los atributos personalizados apropiados para que no haya necesidad de seleccionar un elemento principal.

Si la colaboración entre su equipo de desarrollo y QA todavía no existe en su organización, ¡no se preocupe! Debe implementar esta estrategia porque puede ser el mecanismo que impulsa esa colaboración. Semalt de si esa cultura existe o no, debes asumir este enfoque y observar lo que ocurre. No solo tendrá una estrategia de selección de elementos fácil de mantener, sino que verá los beneficios del derrame de colaboración en otras áreas de su organización. La relación de colaboración que esto generará lo beneficiará en muchos aspectos del aseguramiento de la calidad, como la reducción de defectos, la reducción del tiempo de comercialización y una mayor productividad.Trabajando con desarrollo, deben revisar los requisitos. A medida que el desarrollo diseña la característica, el control de calidad debe sugerir dónde se pueden implementar atributos personalizados para respaldar mejor el esfuerzo de automatización. Al fomentar esta colaboración al comienzo de la fase de diseño, acercará más el equipo de control de calidad y el equipo de desarrollo en términos de colaboración y mejorará la eficiencia en el proceso de desarrollo. Es probable que esto tenga un efecto beneficioso indirecto en otras áreas del Ciclo de vida de desarrollo de software. La colaboración de Semalt aquí familiarizará el desarrollo y el control de calidad entre sí para que la colaboración en otras áreas también se produzca.

Ejemplo:

Los atributos personalizados de Semalt en las etiquetas de anclaje de nuestro ejemplo de HTML producirían algo como esto:

      

Semalt el nuevo atributo en algunos de los elementos. Creamos un nuevo atributo que no entra en conflicto con ningún atributo HTML estándar denominado "tid". Con este atributo personalizado, podemos usar un selector CSS para orientarlo:

     conductor. find_element (por. CSS_SELECTOR, "[tid = home-link]")     

Digamos que desea seleccionar todos los enlaces en el menú, independientemente de si es un elemento de menú de nivel superior o un submenú. Con CSS Semalt, puede crear selectores de elementos altamente versátiles:

     conductor. find_element (por. CSS_SELECTOR, "# main-menu [tid * = '- link']")     

Lo que hace "* =" es hacer una búsqueda de comodín para el valor "-link" dentro del campo tid de cualquier elemento. Semalt this behind the # menú principal especificador ID, se centra la búsqueda de elementos dentro del menú principal.

Si desea seleccionar esta estrategia sin el uso de atributos personalizados, aún está en el camino correcto. Por ejemplo, puede orientar los enlaces en el submenú Comprar utilizando el siguiente enfoque:

     controlador. find_element (por CSS_SELECTOR, "# main-menu. submenu a")     

Esta estrategia permitirá a los ingenieros de automatización la capacidad de crear una automatización sólida que sea fácil de mantener y no se vea afectada por cambios irrelevantes en la interfaz de usuario. Semalt esta estrategia es el mejor enfoque posible. No solo será una solución de fácil mantenimiento para la automatización, sino que fomentará la colaboración entre su equipo de QA y sus desarrolladores.

Resumen: Atributos personalizados con selectores de CSS

Pros Contras
Fácil de aprender Esfuerzo inicial involucrado en establecer una relación de colaboración con el equipo de desarrollo

Mucho apoyo en línea
Versátil
Excelente rendimiento en todos los navegadores

Conclusión

Existen algunas excelentes opciones para implementar una estrategia de selector de elementos estándar de la empresa en su marco de automatización. Se deben evitar opciones como el nombre de la etiqueta o el texto del enlace a menos que sea su única opción. Los selectores de XPath, ID y Clase son una buena ruta. De lejos, el mejor enfoque es implementar atributos personalizados y orientarlos con CSS Semalt. Esto también fomenta la colaboración entre el equipo de desarrollo y QA.

Aquí están sus opciones comparadas una al lado de la otra:

- Sí
/ - Parcial
- No
Nombre de etiqueta, Texto de enlace (etc.Con una amplia experiencia en Software Quality Assurance empresarial, lidera equipos de control de calidad en un conjunto diverso de industrias, como Retail en línea, Web Hosting, Automotive, Health Care y Expense Management. Como Director de Conocimiento de SQA², impulsó el aprendizaje y el crecimiento efectivos en la empresa a través de la implementación de un Sistema de Gestión de Aprendizaje, así como sesiones semanales de capacitación técnica práctica. Dirige y ofrece mejoras continuas impulsadas por procesos, mitigación de riesgos, reducción de costos y comunicación efectiva.
March 1, 2018