css - tag - selenium find element by type

¿Hay alguna manera de probar CSS receptivo con Selenium?

Question

Los desarrolladores de mi empresa han implementado nuestro sitio web para responder a CSS, y estoy confundido sobre cómo aprovechar Selenium para probar su trabajo. He estado usando Selenium WebDriver (Selenium 2) con Ruby todo el tiempo para otros aspectos.

Después de hacer algunas investigaciones en línea, encontré varias herramientas, pero ninguna con la que valga la pena automatizar, ya que ... aaa ... son solo herramientas web para verificar manualmente con diferentes tamaños de pantalla.

Algunos ejemplos -

1. Pruebas de dispositivos para diseños de Resonsive CSS (Manual)
2. Responsinador
3. Responsive.is
4. Responsivepx (mucho mejor como más control)

Pero puedo lograr lo anterior muy fácilmente usando Selenio también usando sel2 / ruby

@driver.manage.window.resize_to(480, 725) #iphone potrait

Necesita ayuda con

• ¿Cómo probar realmente si el CSS es "sensible" automáticamente ?
• ¿Qué atributos / aspectos se usan comúnmente para verificar si la página responde al cambio de tamaño de la ventana?
• ¿Alguien ha usado Selenium para QA responsive CSS?

Answer 1

Ahora hay una solución para pruebas automatizadas de diseño receptivo: Galen Framework. He estado trabajando en una herramienta que permitiría probar el diseño receptivo de la página web, así como también el diseño del sitio web para la compatibilidad entre navegadores. La herramienta está disponible aquí http://galenframework.com

Utiliza Selenium para abrir una página web en un navegador, cambiar el tamaño de la ventana del navegador a un tamaño necesario y luego obtener la ubicación de los elementos en la página. Tiene una sintaxis especial para describir el aspecto de la página en diferentes dispositivos (tamaños de navegador)

Aquí hay un pequeño ejemplo de prueba del esqueleto básico de la página web:

# Objects definition
=====================================
header                  id  header
menu                    css #menu
content                 id  content
side-panel              id  side-panel
footer                  id  footer
=====================================


@ all
-------------------------------
header
    inside: screen 0px top left right

menu
    centered horizontally inside: screen
    below: header 0px

content
    below: menu 0px
    inside:screen 0px left

@ desktop
--------------------------------
side-panel
    below: menu 0px
    inside: screen 0px right
    width: 300px
    near: content 0px right
    aligned horizontally top: content

@ mobile
--------------------------------
content, side-panel
    width: 100% of screen/width


side-panel
    below: content 0px

Más tarde, puede ejecutar pruebas en un solo comando o también puede crear un conjunto de pruebas separado donde tenga más acciones para realizar (por ejemplo, inyecte JavaScript personalizado, o haga algo con WebDriver, etc.). Para ejecutar el ejemplo anterior con un solo comando, hazlo así:

galen check homepage.spec --url "http://example.com" --size "400x600" --include "mobile,all" --htmlreport "reports"

Eso fue solo lo básico. Hay más ejemplos en el sitio web oficial.

También hay un artículo introductorio que explica cómo utilizar el enfoque TDD (Desarrollo controlado por prueba) al diseñar una página web http://mindengine.net/post/2013-11-16-tdd-for-responsive-design-or-how -to-automate-testing-of-web-layout-for-different-devices /

Answer 2

Podemos lograr esto de múltiples maneras

1. Comparación de capturas de pantalla : con el uso de selenium webdriver vaya a la url del sitio web dado y cambie el navegador a diferentes tamaños y compare las capturas de pantalla. Si ambas capturas de pantalla son iguales, el sitio web dado no responde. Si ambas capturas de pantalla son diferentes, el sitio web responde. Este método no es bueno porque supongamos que si hay presentaciones de diapositivas en un sitio web determinado mientras tomamos las capturas de pantalla de ese sitio web, las imágenes de diapositivas presentes en el sitio web pueden cambiar y obtendremos capturas de pantalla diferentes, así que si comparamos las capturas de pantalla obtendremos un resultado Ambas capturas de pantalla son diferentes y podemos obtener una respuesta ya que el sitio dado responde

2. El ancho del documento: con Selenium webdriver vaya a la URL del sitio web determinado y cambie el navegador al tamaño del dispositivo móvil y ejecute el javascript para obtener el ancho del documento. Si el ancho es menor que el ancho máximo de los dispositivos móviles, podemos suponer que el sitio web dado responde

3. Ancho de la captura de pantalla: con Selenium webdriver vaya a la url del sitio web determinada y cambie el navegador al tamaño del dispositivo móvil y tome la captura de pantalla y obtenga el ancho de la imagen de captura de pantalla. Si el ancho es inferior al ancho máximo de los dispositivos móviles, podemos suponer que el sitio web dado responde. Probé varios sitios con este enfoque y obtuve el resultado esperado. Pasos para verificar el sitio dado es receptivo o no.

Obtenga más información sobre la codificación en: http://jagadeeshmanne.blogspot.in/2014/03/checking-website-is-responsive-or-not.html

Answer 3

Puedo pensar en dos formas de hacer esto.

Uno: para cada elemento web puede verificar su tamaño, ubicación, visibilidad, etc. Después de cada cambio de tamaño, puede comparar esos parámetros con algunos valores previamente especificados para verificar si el diseño ha cambiado.

Segundo - comparación de imágenes. Después de cada cambio de tamaño, puede tomar una captura de pantalla de la página y compararla con un patrón previamente guardado. Hay varias bibliotecas de comparación de imágenes para lograr eso. En nuestra compañía usamos ImageMagick . Sin embargo, la comparación de imágenes no es adecuada para páginas en desarrollo ni para aquellas con contenido variable. Puede solucionar este problema ocultando las partes de la página que son propensas a cambios con javascript (esto es factible con WebDriver).

Debo admitir que nunca tuve la oportunidad de probar páginas sensibles ni de forma manual ni automática, por lo que lo anterior son sólo mis ideas. Utilizo la comparación de imágenes para probar páginas "normales", no estoy seguro si también será adecuado para páginas receptivas.

EDITAR

Lamentablemente, no conozco a Ruby. A continuación se muestra un ejemplo en Java. Espero que puedas entenderlo y traducirlo a Ruby de alguna manera. El código simplemente imprime el tamaño y la ubicación de cada elemento de la lista.

org.openqa.selenium.Point point;
org.openqa.selenium.Dimension dimension;

List<WebElement> elementsList = driver.findElements(By.xpath("//some/xpath"));

for (WebElement element : elementsList)
{
    point = element.getLocation();
    dimension = element.getSize();
    System.out.println("Element name: " + element.getTagName());
    System.out.println("Element size: " + dimension.height + "x" + dimension.width);
    System.out.println("Element location: " + point.x + ":" + point.y);
}

Tenga en cuenta que cada invocación de getLocation () y getSize () hace que js se ejecute (para obtener los valores) y le cuesta tiempo. Es por eso que debes hacer solo una llamada por elemento, no uses algo como element.getSize (). Height + "x" + element.getSize (). Width - tomaría el doble de tiempo comparando con el ejemplo anterior.

En Ruby, los métodos mencionados anteriormente se llaman element.location y element.size

Answer 4

Si su objetivo principal es probar los cambios en la IU y el selenio no es un requisito absoluto, puede utilizar BBC Wraith: https://github.com/BBC-News/wraith muy fácil de instalar y usar.