Overrides y Mocking en DevTools, o como crear tu propio set de datos sin FE o BE

¡Buenos días, tardes o noches!

En este post, quiero compartir una forma útil de utilizar la DevTool para facilitar nuestro trabajo de testing.

Durante nuestra jornada como testers, nos encontramos con la necesidad de verificar si un sistema cumple con los criterios de aceptación o con los resultados esperados. Esto incluye pruebas como verificar que el sistema muestre un "empty state" cuando no hay datos, el contenido de un carrito de compras, botones de navegación, paginadores, etc. En muchas ocasiones, la aplicación que estamos probando tiene una integración completa de FrontEnd, Backend y APIs, lo que nos facilita las pruebas. Con solo unos pocos clics, podemos crear un carrito de compras, filtrar productos, etc., para comprobar si el sistema responde como esperamos.

Sin embargo, en algunas situaciones necesitamos un conjunto de datos más específico para realizar nuestras pruebas. Imaginemos que estamos probando una biblioteca, la cual es una landing page que muestra una lista de libros almacenados en la base de datos. El usuario puede filtrar por categorías a través de botones. Debemos verificar, por ejemplo, si el sistema muestra un 'empty state' cuando no hay información o si el sistema devuelve un mensaje de "no se encontraron resultados" cuando no hay libros disponibles en la categoría seleccionada. Otra prueba puede ser verificar si el sistema implementa lazy loading o si muestra botones de "show more" o "show less" cuando se alcanza cierto límite de caracteres.

Para poder realizar estas pruebas, lo ideal sería crear un conjunto de datos manualmente a través del FrontEnd (por ejemplo, añadiendo libros que coincidan con los criterios de prueba), o bien acceder a la base de datos y modificarla directamente usando SQL. También podemos pedirle a nuestro compañero Backend Developer que nos ayude generando los datos que necesitamos.

Pero, ¿qué pasa cuando nos enfrentamos a estas situaciones?

• No tenemos una opción en el FrontEnd para crear los libros.
• No tenemos acceso a la base de datos debido a restricciones de acceso.
• El Backend Developer está ocupado o no entiende bien nuestra solicitud.

Entonces, ¿qué opción nos queda?

La solución está en utilizar 'Local Override' y 'Mocking'.

Antes de seguir, aclaremos algunos conceptos:



Ahora que tenemos claro qué es el "mocking" y el "override", veamos cómo aplicarlo. Utilizaremos las DevTools, específicamente la pestaña Network y la opción 'Override' para modificar manualmente las respuestas que el navegador recibe, ajustándolas a los datos que necesitamos para nuestras pruebas.

Vamos a la práctica:
Primero, identificamos los escenarios que deseamos probar:

• Verificar que el sistema muestre "not found" cuando el usuario intente filtrar por una categoría, pero no haya libros en esa categoría.
• Verificar que el sistema muestre "not found" cuando no haya libros disponibles en general.
• Verificar que el sistema muestre correctamente el carrito de compras, con la suma total, la cantidad de libros y los ejemplares, incluso cuando los datos del backend sean incorrectos.

Para este tutorial, utilizaremos esta biblioteca que es un sitio web apto para pruebas manuales y automatizadas.
No tienes permitido ver enlaces. Registrate o Entra a tu cuenta

Escenario 1 y 2: Modificar el JSON para crear situaciones de "empty state"
En nuestro proyecto de prueba, notamos que el sistema tiene libros de todas las categorías, lo que complica las pruebas para los AC 1 y 2 (verificar los mensajes de error cuando no haya libros en general, o libros de la categoría seleccionada). Dado que no podemos modificar la base de datos ni pedir ayuda al Backend Developer, vamos a hacer un override en el response que recibe el navegador.






Al observar que el sistema realiza un GET a la URL book/ y devuelve un JSON con los libros, podemos modificar este JSON para eliminar libros o categorías específicas.



Estructura de uno de los libros, podemos observar la key de category.
{
        "bookId": 2,
        "title": "Harry Potter and the Chamber of Secrets",
        "author": "JKR",
        "category": "Mystery",
        "price": 236.00,
        "coverFileName": "9d8f4978-0ef8-42d0-873a-4eb583439237HP2.jpg"
    }
Vamos a Network en las DevTools, buscamos el GET book/ y hacemos clic derecho sobre él.
Seleccionamos 'Override Content', aceptamos los mensajes, y el sistema nos enviará a la pestaña 'Source' para modificar nuestro JSON según lo que necesitemos para las pruebas. Por ejemplo, eliminamos toda la categoría 'fantasy' para simular que no hay libros de esa categoría.

Pestaña Source sin Modificar:


JSON utilizado para override:

[
    {
        "bookId": 2,
        "title": "Harry Potter and the Chamber of Secrets",
        "author": "JKR",
        "category": "Mystery",
        "price": 236.00,
        "coverFileName": "9d8f4978-0ef8-42d0-873a-4eb583439237HP2.jpg"
    },
    {
        "bookId": 3,
        "title": "Harry Potter and the Prisoner of Azkaban",
        "author": "JKR",
        "category": "Romance",
        "price": 213.00,
        "coverFileName": "c63ade52-3f90-41fa-980a-1136b6ad2128HP3.jpg"
    },
    {
        "bookId": 4,
        "title": "Harry Potter and the Goblet of Fire",
        "author": "JKR",
        "category": "Fiction",
        "price": 321.00,
        "coverFileName": "9d31690d-3b1d-4faa-a1d2-3a680a935008HP4.jpg"
    },
    {
        "bookId": 5,
        "title": "Harry Potter and the Order of the Phoenix",
        "author": "JKR",
        "category": "Mystery",
        "price": 432.00,
        "coverFileName": "8f5f8b64-794c-4dbb-b369-6cc9cc762ce0HP5.jpg"
    },
    {
        "bookId": 6,
        "title": "Harry Potter and the Half-Blood Prince",
        "author": "JKR",
        "category": "Fiction",
        "price": 433.00,
        "coverFileName": "cff3d5ee-71f3-43d8-8625-33abcd48659eHP6.jpg"
    },
    {
        "bookId": 7,
        "title": "Harry Potter and the Deathly Hallows",
        "author": "JKR",
        "category": "Fiction",
        "price": 325.00,
        "coverFileName": "4ec2ffb6-b21a-43ce-bf90-04d56ec72644HP7.jpg"
    },
    {
        "bookId": 15,
        "title": "Harry Potter and the Sorcerer's Stone",
        "author": "JKR",
        "category": "Fiction",
        "price": 342.00,
        "coverFileName": "f73b4e21-28fe-4d3f-895b-d8a553b7ba6fHP1.jpg"
    },
    {
        "bookId": 18,
        "title": "Rot & Ruin",
        "author": "Jonathan Maberry ",
        "category": "Biography",
        "price": 123.00,
        "coverFileName": "eb592aa9-831e-47ed-aea8-fa79d7d316097157310.jpg"
    },
    {
        "bookId": 21,
        "title": "Slayer",
        "author": " Kiersten White",
        "category": "Mystery",
        "price": 1234.00,
        "coverFileName": "6d91b7b0-b8d1-41ad-a0ef-65e2324fc1b3Slayer.jpg"
    },
    {
        "bookId": 28,
        "title": "Curuk ve Harabe",
        "author": "Jonathan ",
        "category": "Fiction",
        "price": 1211.00,
        "coverFileName": "cbf832c1-cd01-47b3-93fa-62995a7dca1118799023.jpg"
    },
    {
        "bookId": 29,
        "title": "Roomies",
        "author": "Christina Lauren ",
        "category": "Biography",
        "price": 334.00,
        "coverFileName": "267e7cea-d66e-4e00-a220-c0ee7e70fdaf33322.jpg"
    },
    {
        "bookId": 30,
        "title": "A Princess in Theory: Reluctant Royals",
        "author": "Alyssa Cole",
        "category": "Fiction",
        "price": 545.00,
        "coverFileName": "42314d38-bbc8-40ed-b890-612ea45791d735271238.jpg"
    },
    {
        "bookId": 31,
        "title": "Robbie",
        "author": "Ella Frank",
        "category": "Fiction",
        "price": 345.00,
        "coverFileName": "2141f7a1-e6b8-4d88-91e3-0d3a141117be39086215.jpg"
    },
    {
        "bookId": 32,
        "title": "Wicked and the Wallflower",
        "author": "Sarah MacLean",
        "category": "Fiction",
        "price": 512.00,
        "coverFileName": "75f8ca57-6b59-43aa-ae05-f51a7429dd5836301036.jpg"
    },
    {
        "bookId": 33,
        "title": "Dr. Strange Beard",
        "author": "Penny Reid",
        "category": "Biography",
        "price": 312.00,
        "coverFileName": "9749b4d2-d8be-4e9b-b7ea-d437a3a9bf0e136395874.jpg"
    },
    {
        "bookId": 34,
        "title": "The Simple Wild",
        "author": "K.A. Tucker",
        "category": "Biography",
        "price": 111.00,
        "coverFileName": "b868eb26-f12c-4dcf-ba19-03e0d6cafb8d36373564.jpg"
    },
    {
        "bookId": 35,
        "title": "Marriage of Inconvenience",
        "author": "Penny Reid",
        "category": "Fiction",
        "price": 345.00,
        "coverFileName": "8d3a0352-270b-405d-b8bc-ee0f59179cbf36395764.jpg"
    },
    {
        "bookId": 36,
        "title": "The Hookup",
        "author": "Kristen Ashley ",
        "category": "Romance",
        "price": 434.00,
        "coverFileName": "dc785e9f-a753-42f7-a87e-fda5e97ce67bqq.jpg"
    },
    {
        "bookId": 37,
        "title": "Birthday Girl",
        "author": "Penelope Douglas ",
        "category": "Romance",
        "price": 441.00,
        "coverFileName": "7616f5e9-a42a-4268-8ff0-4f77547dcc9crr.jpg"
    },
    {
        "bookId": 38,
        "title": "Red Rising",
        "author": "Pierce Brown",
        "category": "Romance",
        "price": 512.00,
        "coverFileName": "24cd89a7-737f-490e-8c8e-cbeac7eac054tt.jpg"
    },
    {
        "bookId": 39,
        "title": "Before We Were Yours",
        "author": "Lisa Wingate ",
        "category": "Romance",
        "price": 123.00,
        "coverFileName": "15396272-e3ec-4b1c-97d0-d2e841898f55aa.jpg"
    },
    {
        "bookId": 40,
        "title": "A Dance with Dragons",
        "author": "George R.R. Martin",
        "category": "Romance",
        "price": 412.00,
        "coverFileName": "63df0288-6589-4e4c-8a68-def0bbf72714qa.jpg"
    },
    {
        "bookId": 41,
        "title": "The Hate U Give",
        "author": "Angie Thomas",
        "category": "Biography",
        "price": 122.00,
        "coverFileName": "3d894fa1-8746-4443-b244-99624cc39f1fq1we.jpg"
    },
    {
        "bookId": 42,
        "title": "All the Light We Cannot See",
        "author": "Anthony Doerr ",
        "category": "Romance",
        "price": 542.00,
        "coverFileName": "e49d1ff8-3bad-49fc-b1f1-496fc7fef07aq2.jpg"
    },
    {
        "bookId": 43,
        "title": "The Help",
        "author": "Kathryn Stockett",
        "category": "Biography",
        "price": 241.00,
        "coverFileName": "9b801079-d1c7-48a1-92b3-0f9b1ed94b0a.jpg"
    },
    {
        "bookId": 44,
        "title": "All of Us with Wings",
        "author": "Erica Sanchez",
        "category": "Biography",
        "price": 513.00,
        "coverFileName": "0db0e3c1-499b-4c38-8a70-04f33f05f6c3331q.jpg"
    },
    {
        "bookId": 45,
        "title": "Soul of the Sword",
        "author": "Julie Kagawa",
        "category": "Romance",
        "price": 432.00,
        "coverFileName": "72cc69b9-b542-4527-84cf-b1774bb25c9d.jpg"
    }
]

Guardamos los cambios y refrescamos la página en el navegador.
Hacemos la prueba (por ejemplo, haciendo clic en 'Fantasy' para ver cómo el sistema responde al no tener libros en esa categoría).



Hemos comprobado entonces que el sistema muestra el mensaje de error según nuestro AC 01

Para el AC 02, basta nada más ir Override, source y eliminar todos los libros del JSON


Excelente, hemos comprobado otro criterio de aceptación ya que el sistema muestra un mensaje al usuario cuando no se encuentran libros. Lo hemos conseguido sin borrar nada de nuestra base de datos.

No olvidemos entonces quitar los override que hemos generado, esto se hace yendo a 'Source' y haciendo click en la barra superior izquierda sobre el icono de 'prohibido'



Escenario 3: Verificar el carrito de compras
Finalmente, para probar cómo se comporta el carrito de compras, podemos modificar el JSON del carrito, añadiendo datos incorrectos o alterando los valores de los libros (como cantidades negativas o texto en lugar de números).



Identificamos el GET correspondiente al carrito de compras.
Hacemos el override del JSON con valores modificados.
Guardamos los cambios y verificamos si el sistema maneja correctamente los datos incorrectos.

Concretamente, he colocado la id del primer libro al segundo, he colocado la misma portada del segundo y el tercero, y probé si el sistema muestra error a cantidades negativas, así como valores de precios de más de mil. Todo esto ha sido aceptado por nuestro FrontEnd. En caso de que nuestro BackEnd no tenga validaciones adecuadas, hemos comprobado que FrontEnd no posee todas, ya que me mostró mensaje de 'Not found' cuando coloqué letras en campos numéricos. Igualmente, habría que pensar en revisar si BackEnd tiene o no filtros cuando el dueños de la plataforma carga libros con datos incorrectos, pero escapa ahora de nuestro foco de prueba.



Con esta técnica de 'Local Override' y 'Mocking', podemos realizar pruebas específicas sin depender de cambios en la base de datos o del Backend Developer. Esta es una herramienta poderosa para los testers, que nos permite controlar el entorno de prueba y simular situaciones que de otro modo serían difíciles de reproducir.

¡Eso es todo por ahora! Espero que este tutorial les haya sido útil. Es el primero que publico aquí, y me encantaría recibir sus comentarios. ¡Gracias por su tiempo!