> For the complete documentation index, see [llms.txt](https://douglasfugazi.gitbook.io/introduction-to-cypress/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://douglasfugazi.gitbook.io/introduction-to-cypress/cypress/framework.md).

# Framework

**Cypress.io** es una herramienta que fue creada para desarrolladores frontend para pruebas End-to-End, pero eso no significa que los ingenieros de pruebas no puedan beneficiarse de ello.

Ahora, vamos a conocer un poco de como está estructurado el Framework de Cypress.io. Lo primero es que es una herramienta maravillosa de usar, siempre que conozca sus limitaciones:

* Solo trabaja con JavaScript
* Solo funciona con Chrome Browser 
* Trae integrado la sintaxis de Mocha.js

Asi mismo, la estructura del Framework es el siguiente:

![Estructura de archivos del Framework](https://112383710-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lq7BV8l3FwRV7GoKvzq%2F-LqbVUEwVrVWgPpOcpF9%2F-LqbZkpkh7JbfUJAc2j6%2Fimage.png?alt=media\&token=b2715365-021a-4146-bacb-bfe1a2bdc9c7)

{% hint style="info" %}

* **Fixtures:** Se almacena las variables y datos estáticos que se van a utilizar en los tests.
* **Integration:** Es la carpeta principal donde se almacenan los archivos **\*.spec.js** que va ejecutar Cypress en los tests. En esta carpeta Cypress trae por defecto unos ejemplos que nos pueden ayudar a comprender todo lo que puede hacer Cypress. Se recomienda ejecutarlos y ver como funcionan cada uno.
* **Plugins:** Permiten acceder, modificar o ampliar el comportamiento interno de Cypress a través de la creación de Plugins.
* **Support:** Se almacena los comportamientos reutilizables, como comandos personalizados o anulaciones globales, que estarán disponibles para todos los tests.
  {% endhint %}

Finalmente, Cypress proporciona un agradable Test Runner que le brinda una estructura visual de suites, pruebas y aserciones. Este entorno visual es la magia de Cypress, ya que permite al tester la habilidad de realizar las siguientes tareas:

{% hint style="info" %}

* Viajar en el tiempo para visualizar cada comando ejecutado. 
* Ver facilmente los eventos especiales que se ejecutó. 
* Recibir resultados adicionales sobre cada comando. 
* Capturar elementos en el DOM.
* Creación de snapshots para validar interactivamente una ejecución. 
* Pausar los comandos y pasa por ellos con el mouse de forma iterativa. 
* Visualizar cuando se encuentran elementos ocultos o múltiples. 
* Visualizar el control de errores de cada test suite.
* Esperas automáticas
* ...y mucho más.
  {% endhint %}

Veamos en acción el Test Runner de Cypress :grinning: 

![Cypress Test Runner en ejecución](https://112383710-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lq7BV8l3FwRV7GoKvzq%2F-LqbVUEwVrVWgPpOcpF9%2F-LqbcNUfsKUoIBL3aGYE%2FCypress_Test_Runner.gif?alt=media\&token=77913c13-a367-4af3-81ca-935122292e16)

En el siguiente capítulo vamos a escribir nuestros primeros Tests con Cypress.