Penpot

Plataforma de diseño y creación de prototipos de código abierto

a prueba de errores antes del lanzamiento oficial y probada continuamente por QAwerk
Girl Image Boy Image Clip Icon Blue Clip Icon Red
×
Obtener PDF
Por favor ingrese su correo electrónico comercial

Penpot es una plataforma de diseño y prototipado de código abierto que tiende un puente entre diseñadores y desarrolladores. Está basada en navegador, es multijugador y colaborativa. La aplicación ofrece componentes reutilizables, diseño flexible, gestión de fuentes, creación interactiva de prototipos y herramientas de desarrollo como inspectores de código y propiedades, y mucho más.

Todos los clientes

Pruebas de aplicaciones web

Ayudamos a Penpot a pulir a fondo su aplicación web antes del lanzamiento oficial, asegurándonos de que los usuarios pudieran beneficiarse de todas las grandes características sin distracciones ni obstáculos. Probamos la funcionalidad existente y la nueva, asegurándonos de que nada restara valor al producto.

Más información

Pruebas automatizadas

Ayudamos a Penpot a identificar áreas adecuadas para la automatización de pruebas y ejecutamos su implementación desde cero. Automatizamos un buen número de pruebas de regresión, lo que ayudó a Penpot a detectar errores aún más críticos antes de que la versión se desplegara y enviara a los usuarios.

Más información

Desafío

Penpot recurrió a QAwerk para asegurarse de que podría lanzar su producto al público general dentro del plazo establecido. Querían que su equipo interno se centrara en el desarrollo de características de valor añadido y en pulir la funcionalidad del producto en lugar de preocuparse por los errores y las formas de capturarlos.

He aquí un breve resumen de lo que se esperaba de nosotros:

  • Diseñar una estrategia y un plan de pruebas. Antes de asociarse con QAwerk, el equipo de Penpot informaba de los errores con la ayuda de los miembros del equipo interno y de su gran comunidad de usuarios de la versión beta. Con el crecimiento de la popularidad de Penpot y su intención de eliminar la etiqueta beta de su aplicación, este enfoque ya no era sostenible. Por eso nos pidieron que planificáramos todo el esfuerzo de pruebas y estableciéramos flujos de trabajo de control de calidad adecuados para sentar las bases de las pruebas profesionales continuas en el futuro.
  • Pasar de la versión beta a la oficial. Eliminar errores y mejorar el rendimiento antes de lanzar el producto al público como comercialmente listo era primordial para Penpot. Nuestra tarea consistió en revisar metódicamente toda la funcionalidad existente y encontrar tantos problemas como fuera posible para garantizar que no quedaran errores críticos y que la aplicación funcionara sin retrasos ni problemas de ahorro de datos.
  • Pulir las nuevas funcionalidades. La versión de producción incluía algunas funcionalidades muy esperadas, como interfaces flexibles, acceso al código directamente desde el área de trabajo y mejoras en la accesibilidad, entre otras cosas. Nuestra tarea consistió en asegurarnos de que estas actualizaciones se integraban a la perfección, no causaban interrupciones en la funcionalidad existente y hacían que los usuarios estuvieran realmente entusiasmados con el uso de Penpot.

Además, queríamos ayudar a Penpot a conseguir una mejor cobertura y a lanzar actualizaciones con tranquilidad. Así que les ofrecimos mejorar las pruebas manuales con la automatización de pruebas.

Solución

Cuando acabábamos de empezar las pruebas, nos encontramos con una gran cantidad de errores internos del servidor que aparecían de forma bastante aleatoria, y no estaba claro cuál era la causa inicial de este comportamiento. Estos errores requerían una solución inmediata, ya que los usuarios que los experimentaban podían perder su trabajo.

Así que grabábamos vídeos para capturar los pasos exactos para reproducir este tipo de error, intentando encontrar un patrón común entre estos sucesos y averiguar qué acciones del usuario podrían haber desencadenado los errores y qué áreas de la aplicación son más propensas a ellos. Compartimos nuestros hallazgos con los desarrolladores de Penpot y, finalmente, erradicaron este problema por completo.

Nuestras pruebas incluían varios tipos de pruebas:

  • Pruebas funcionales. Comprobamos si la autorización de usuarios se realizaba sin problemas. Probamos a fondo los módulos de perfil de usuario, panel de control y espacio de trabajo. Nos aseguramos de que todos los cambios se aplicaban al diseño sin retrasos, especialmente durante la edición colaborativa.
  • Pruebas de regresión. El equipo de Penpot envía continuamente nuevas funciones y actualizaciones de las funciones existentes, lo que requiere pruebas de regresión regulares. Combinamos pruebas de regresión manuales y automatizadas para lograr la mejor cobertura y resultados consistentes.
  • Pruebas de interfaz de usuario. La elegante apariencia visual de la interfaz de usuario es primordial para cualquier aplicación moderna, especialmente para una herramienta de diseño como Penpot utilizada por profesionales de UI/UX y de producto en grandes corporaciones. Comprobamos la posición y la alineación de los elementos en cada interfaz y nos aseguramos de que los patrones de la interfaz de usuario fueran coherentes en toda la aplicación.
  • Pruebas de compatibilidad. Nuestros ingenieros de control de calidad probaron Penpot en tres navegadores principales: Firefox, Chrome y Safari. Probamos Penpot en varias versiones de Safari, ya que algunos errores sólo aparecían en versiones anteriores. También utilizamos tres sistemas operativos diferentes, Windows, macOS y Linux, para garantizar que todos los usuarios puedan beneficiarse de Penpot independientemente de sus dispositivos.

En cuanto a la automatización de pruebas, nos centramos principalmente en los casos de pruebas de regresión.

Automatización de pruebas

La automatización de las pruebas se llevó a cabo utilizando el framework Playwright. Playwright está diseñado para simplificar la automatización entre navegadores y plataformas, por lo que se adapta bien a nuestras necesidades.

Al seleccionar los casos de prueba para la automatización, seguimos dos reglas: los casos de prueba deben tener un gran impacto y su preparación no debe consumir demasiado tiempo. De esta forma, se puede ver un ROI positivo.

Por ejemplo, no automatizamos casos como el registro o el olvido de contraseña porque aquí hay que tratar con API de terceros, como Gmail, y automatizar este flujo no merece la pena. O casos con acciones de arrastrar y soltar o copiar y pegar porque Playwright no siempre las gestiona correctamente y las pruebas pueden ser inestables.

Automatizamos casos de prueba como el inicio de sesión, la creación y eliminación de archivos, la apertura y el cambio de nombre de archivos, la creación y eliminación de tableros, la adición de desenfoque a los tableros, el cambio del color de fondo, entre muchos otros. Están disponibles en el repositorio público de Penpot.

También aprovechamos las comparaciones visuales de Playwright para realizar pruebas instantáneas. Para minimizar el número de pruebas fallidas debidas a cambios en la interfaz de usuario, utilizamos capturas de pantalla que capturaban un único elemento o sección, como una forma creada. De este modo, si se añadían nuevas secciones al panel de diseño, no afectaban a la estabilidad de la prueba.

Alrededor del 10% de nuestros casos de prueba requieren capturar toda la pantalla, por ejemplo, cuando necesitamos comprobar no sólo las capas, sino también la barra de herramientas. Aquí utilizamos el enmascaramiento para ignorar elementos con contenido dinámico, como marcas de tiempo o nombres de usuario. Aunque es imposible eliminar por completo los falsos positivos, actualizar estos casos de prueba es fácil y rápido.

Errores encontrados

La mayoría de los errores que detectamos estaban relacionados con cambios que no se aplicaban al editar un archivo en colaboración, elementos superpuestos, texto desbordado y errores internos del servidor. También detectamos un problema de compatibilidad importante cuando la aplicación no estaba disponible para los usuarios que abrían Penpot en versiones de Safari anteriores a la 16. Aunque estas versiones en particular no eran comunes entre los usuarios de Penpot, el problema se solucionó el mismo día.

Resultado real: La forma copiada y pegada no es visible en el tablero.

Resultado esperado: La forma copiada y pegada es visible.

Resultado real: Aparece "Error interno"; el error sigue reproduciéndose después de recargar la página.

Resultado esperado: El usuario puede arrastrar capas.

Resultado real: Al hacer clic en la opción de menú RMB "Desagrupar" del grupo de tipografías del panel "Activos", no ocurre nada; el grupo permanece.

Resultado esperado: Se elimina el grupo; la tipografía se mueve a la raíz de la sección "Tipografías".

Resultado

Delegar todo el esfuerzo de las pruebas en QAwerk permitió a Penpot preparar completamente su producto para el lanzamiento oficial e implementar varias funciones revolucionarias para deleitar a los usuarios el día del lanzamiento. Con nuestra ayuda, Penpot detectó errores críticos y los corrigió antes de que afectaran a numerosos usuarios. Con nuestro esfuerzo conjunto, Penpot se ha transformado en una plataforma robusta y estable que permite a los usuarios seguir siendo creativos y centrarse en su trabajo sin distracciones.

Hemos sentado unas bases sólidas para la realización de pruebas profesionales continuas en el futuro y seguimos apoyando a Penpot en su misión de aportar soluciones innovadoras de código abierto y mejorar la colaboración entre equipos multidisciplinares.

Galardonado

Premios Fast Company Innovation by Design Premios Fast Company Innovation by Design Leer más

Charla técnica

En prensa

Lanzada hace un año, la startup ha registrado decenas de miles de descargas y 15.000 "estrellas" en GitHub. Entre las 10.000 empresas que forman parte de sus usuarios activos se encuentran Google, Microsoft, Red Hat, Tencent, ByteDance y Mozilla.

Editor líder de noticias sobre startups y tecnología

Ser de código abierto no es lo único que hace único a Penpot. También tiene unas cuantas funciones asesinas en la manga que lo convierten en un gran aliado para una buena colaboración entre diseñadores y desarrolladores.

Portal de noticias para desarrolladores y diseñadores web
Recomendaría QAwerk por muchas razones, pero creo que destacan dos: la rápida y fluida experiencia de incorporación, que es absolutamente clave para un equipo que subcontrata algo tan crítico como el control de calidad. Pero también el uso inteligente de los diferentes canales de comunicación - se utilizaron de manera efectiva, con respeto, con una mentalidad realmente reflexiva.
Pablo Ruiz-Múzquiz, CEO de Penpot

¿Quieres perfeccionar tu producto antes de lanzarlo al mercado?

Hablemos

Herramienta

TaigaTaiga
PlaywrightPlaywright
JavaScriptJavaScript
BrowserStackBrowserStack
250K+registros
20K+estrellas en GitHub
925+asos de prueba escritos
225+asos de prueba automatizados
90+errores notificados
7dispositivos utilizados

Comentario del equipo de QAwerk

Aliaksei

Aliaksei
Ingeniero de automatización del control de calidad

Crear casos de prueba automatizados fue a veces un reto, dada la naturaleza del producto: interacciones complejas con objetos y pocos localizadores únicos al crear elementos en el espacio de trabajo. Pero me encantan los buenos retos, y aprendí a utilizar Playwright en todo su potencial. También descubrí algunos matices sobre las pruebas instantáneas. Colaborar con los compañeros de equipo y la dirección de Penpot también fue un verdadero placer: muy receptivos, atentos a cada error y agradecidos con nuestras sugerencias.

Oleh

Oleh
Ingeniero de control de calidad

Estoy muy contento de haber contribuido al lanzamiento oficial de Penpot, que ha sido un éxito y el resultado de un duro trabajo por ambas partes. Hemos escrito un montón de casos de prueba y descubierto numerosos errores graves, que afectaron positivamente a la estabilidad de la aplicación. Gracias a este proyecto, adquirí experiencia ejecutando Linux en VirtualBox y probé una nueva herramienta de seguimiento de errores, Taiga.

Relacionado en Blog

Cómo redactar casos de prueba: Guía completa de QAwerk

Cómo redactar casos de prueba: Guía completa de QAwerk

Desde el inicio, estamos dispuestos a anunciar que no existe un único tipo de caso de prueba que sirva para todo. Sin embargo, hay un conjunto de prácticas y soluciones fáciles de seguir que, si se aplican correctamente, darán un buen resultado. Hemos reunido las mejores prá...

Leer más

¿Impresionado?

Contáctenos

Otros casos prácticos

Arctype

Arctype

Estados Unidos

Logré la estabilidad de la aplicación y aceleré los lanzamientos de software en un 20% con pruebas y automatización durante la noche

Evolv

Evolv

Estados Unidos

Aceleró la entrega de nuevas capacidades en un 50 % con la automatización y mantiene la plataforma en funcionamiento las 24 horas del díalos 7 días de la semana

Keystone

Keystone

Noruega

Ayudó al portal de estudios nº 1 de Noruega a mejorar 8 sitios web con mucho contenido utilizados por 110 millones de estudiantes al año