{"content":[{"content":{"params":{"visuals":{"fit":true,"controls":true},"playback":{"autoplay":false,"loop":false},"l10n":{"name":"Video","loading":"Video player loading...","noPlayers":"Found no video players that supports the given video format.","noSources":"Video is missing sources.","aborted":"Media playback has been aborted.","networkFailure":"Network failure.","cannotDecode":"Unable to decode media.","formatNotSupported":"Video format not supported.","mediaEncrypted":"Media encrypted.","unknownError":"Unknown error.","invalidYtId":"Invalid YouTube ID.","unknownYtId":"Unable to find video with the given YouTube ID.","restrictedYt":"The owner of this video does not allow it to be embedded."},"sources":[{"path":"https:\/\/www.cursodrupal.com\/sites\/default\/files\/curso_aws\/capitulos\/drupal_testing_cypress_ddev.mp4","mime":"video\/mp4","copyright":{"license":"U"}}]},"library":"H5P.Video 1.5","metadata":{"contentType":"Video","license":"U","title":"Drupal 11 y Cypress | Testing con Ddev"},"subContentId":"a3b61105-3738-452f-b74f-f7d4e5f3386b"},"useSeparator":"auto"},{"content":{"params":{"text":"

Cypress es una herramienta de testing que permite realizar pruebas en tus aplicaciones a trav\u00e9s del navegador.<\/p>\n\n

Es una plataforma de c\u00f3digo abierto, por lo que tenemos la oportunidad de implementarlo en nuestras aplicaciones desde nuestro entorno local, aunque tambi\u00e9n ofrece la posibilidad de varios servicios adicionales de pago, desde su p\u00e1gina oficial.<\/p>\n"},"library":"H5P.AdvancedText 1.1","metadata":{"contentType":"Text","license":"U","title":"Sin t\u00edtulo Text"},"subContentId":"61eb718b-24c5-4dfd-9c18-6c0bcd3ee9d1"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761ba5f649e6.png","mime":"image\/png","copyright":{"license":"U"},"width":1491,"height":879}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"4f51473b-fc93-4946-be60-f29fc659ffac"},"useSeparator":"auto"},{"content":{"params":{"text":"

Entre las ventajas que ofrece la versi\u00f3n m\u00e1s actual de Cypress, est\u00e1 la interfaz gr\u00e1fica que nos guiar\u00e1 en el proceso de creaci\u00f3n de nuestras pruebas, lo que facilita la curva de aprendizaje con respecto a otras alternativas como phpunit o behat.<\/p>\n\n

Adicionalmente, cuenta con una documentaci\u00f3n detallada que cubre su instalaci\u00f3n, configuraci\u00f3n e implementaci\u00f3n de las pruebas y que podremos consultar en su p\u00e1gina oficial.<\/p>\n"},"library":"H5P.AdvancedText 1.1","metadata":{"contentType":"Text","license":"U","title":"Sin t\u00edtulo Text"},"subContentId":"9a7647ce-a7d0-4066-a292-5339483a0e1d"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761ba804c034.png","mime":"image\/png","copyright":{"license":"U"},"width":1432,"height":756}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"a5874adb-667d-41b1-8f00-9a8f29af74bc"},"useSeparator":"auto"},{"content":{"params":{"text":"

Podemos encontrar una gu\u00eda espec\u00edfica para proyectos Drupal, en la p\u00e1gina oficial de Drupal<\/a>.<\/p>\n"},"library":"H5P.AdvancedText 1.1","metadata":{"contentType":"Text","license":"U","title":"Sin t\u00edtulo Text"},"subContentId":"e910cc6f-db64-4879-942e-9011fb1217b3"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761baa85adce.png","mime":"image\/png","copyright":{"license":"U"},"width":1424,"height":937}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"fbfc1243-92a3-4e83-8e5b-c1608bcfd902"},"useSeparator":"auto"},{"content":{"params":{"text":"

Para nuestro ejemplo, trabajaremos con un Drupal 11, instalado con Ddev en nuestro entorno local, donde seguiremos paso a paso el proceso de instalaci\u00f3n, as\u00ed como la correcci\u00f3n de posibles errores de ejecuci\u00f3n, ya que ddev trabaja con una capa adicional de comandos como sucede con lando.<\/p>\n\n

Una vez finalizada la instalaci\u00f3n de nuestro proyecto Drupal 11, podremos pasar a la instalaci\u00f3n y configuraci\u00f3n de Cypress.<\/p>\n"},"library":"H5P.AdvancedText 1.1","metadata":{"contentType":"Text","license":"U","title":"Sin t\u00edtulo Text"},"subContentId":"84266429-cef8-4f64-a8f3-79720e7b624b"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761bac4b50ab.png","mime":"image\/png","copyright":{"license":"U"},"width":1415,"height":840}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"157cb11c-ba9f-40bc-b19f-c43be7e2a08c"},"useSeparator":"auto"},{"content":{"params":{"text":"

Si visitamos la documentaci\u00f3n oficial en Drupal.org, nos indica como primer requisito para la instalaci\u00f3n, que hayamos instalado node.js en nuestro entorno.<\/p>\n"},"library":"H5P.AdvancedText 1.1","metadata":{"contentType":"Text","license":"U","title":"Sin t\u00edtulo Text"},"subContentId":"f1b774af-7686-464e-8592-0a7315ab2745"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761bae21a50d.png","mime":"image\/png","copyright":{"license":"U"},"width":1051,"height":135}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"46cf2ffc-2d0f-4f36-b936-72627f43a79e"},"useSeparator":"auto"},{"content":{"params":{"text":"

Ddev incluye esta opci\u00f3n, as\u00ed que para verificar la versi\u00f3n con la que estamos trabajando, ejecutaremos en la consola el comando:<\/p>\n\n

ddev npm - v<\/pre>\n"},"library":"H5P.AdvancedText 1.1","metadata":{"contentType":"Text","license":"U","title":"Sin t\u00edtulo Text"},"subContentId":"b94d6cce-3566-4cff-a5bc-cc0d34bdcb6b"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761bb0a5979c.png","mime":"image\/png","copyright":{"license":"U"},"width":930,"height":104}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"707a4569-b04f-4157-a060-e08fbdf21449"},"useSeparator":"auto"},{"content":{"params":{"text":"

Tambi\u00e9n, nos recomienda realizar la instalaci\u00f3n de Cypress dentro de un subfolder con el nombre test para la realizaci\u00f3n de nuestras pruebas, pero saltaremos este paso de momento.<\/p>\n"},"library":"H5P.AdvancedText 1.1","metadata":{"contentType":"Text","license":"U","title":"Sin t\u00edtulo Text"},"subContentId":"215b2bdc-3f21-4bb5-8587-6350c1322ed7"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761bb36e450a.png","mime":"image\/png","copyright":{"license":"U"},"width":962,"height":450}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"62df0c4d-2524-40d4-ac41-62a2d4f0a7c1"},"useSeparator":"auto"},{"content":{"params":{"text":"

A continuaci\u00f3n, tenemos que ejecutar tres comandos con el fin de inicializar el proyecto Node, descargar las dependencias de Cypress, as\u00ed como su puesta en marcha.<\/p>\n\n

El \u00faltimo de estos comandos utiliza npx en lugar de npm y si has tenido este requerimiento en otros proyectos con ddev, sabr\u00e1s que no permite ejecutar npx de manera predeterminada, por lo que tendremos que realizar algunos cambios, antes de poder abrir la interfaz de Cypress, pero vamos paso a paso.<\/p>\n"},"library":"H5P.AdvancedText 1.1","metadata":{"contentType":"Text","license":"U","title":"Sin t\u00edtulo Text"},"subContentId":"56d72baf-84a5-4146-9418-ae84b3fdcfcf"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761bb58b91e1.png","mime":"image\/png","copyright":{"license":"U"},"width":862,"height":190}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"aa853aa9-17ed-46bf-a8f1-e6d1e8763799"},"useSeparator":"auto"},{"content":{"params":{"text":"

Ejecutaremos el comando de inicializaci\u00f3n\u2026<\/p>\n"},"library":"H5P.AdvancedText 1.1","metadata":{"contentType":"Text","license":"U","title":"Sin t\u00edtulo Text"},"subContentId":"d9be302f-b4d5-4d1b-8a6c-8db7225c375d"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761bb8bc499d.png","mime":"image\/png","copyright":{"license":"U"},"width":778,"height":155}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"0c71ebaf-122f-443b-a83f-c5483ba121ba"},"useSeparator":"auto"},{"content":{"params":{"text":"

Luego ejecutaremos el comando para descargar todas las dependencias de Cypress, necesarias antes de ponerlo en marcha.<\/p>\n"},"library":"H5P.AdvancedText 1.1","metadata":{"contentType":"Text","license":"U","title":"Sin t\u00edtulo Text"},"subContentId":"bac581e3-8e59-4bb3-a087-52d7e30f2187"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761bbb41aa9b.png","mime":"image\/png","copyright":{"license":"U"},"width":838,"height":229}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"67d10c66-7ea3-4885-867a-4682ce8ecb73"},"useSeparator":"auto"},{"content":{"params":{"text":"

Llegados a este punto, si ejecutamos el \u00faltimo de los comandos, nos devolver\u00e1 un error, como hemos mencionado, ya que ddev no est\u00e1 configurado para ejecutar npx.<\/p>\n"},"library":"H5P.AdvancedText 1.1","metadata":{"contentType":"Text","license":"U","title":"Sin t\u00edtulo Text"},"subContentId":"56ff461d-e780-4949-ae5f-a24cce5c71a9"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761bbdcb270b.png","mime":"image\/png","copyright":{"license":"U"},"width":790,"height":260}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"76dc320d-c888-4e6d-a256-2d0de99af907"},"useSeparator":"auto"},{"content":{"params":{"text":"

Para solucionar este problema, visitaremos el repositorio p\u00fablico de tyler36<\/a>, que comparte el c\u00f3digo con el que ser\u00e1 posible realizar la configuraci\u00f3n correctamente, para que podamos ejecutar los comandos de Zyprexa con Dedev.<\/p>\n\n

\n https:\/\/github.com\/tyler36\/ddev-cypress<\/a><\/p>\n"},"library":"H5P.AdvancedText 1.1","metadata":{"contentType":"Text","license":"U","title":"Sin t\u00edtulo Text"},"subContentId":"77788ae6-b5c0-4ccd-b0c0-92eba2b50b76"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761bc06eb748.png","mime":"image\/png","copyright":{"license":"U"},"width":1540,"height":800}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"28fa2584-aa2b-4faf-915f-d38d5332a7ea"},"useSeparator":"auto"},{"content":{"params":{"text":"

Dentro del repositorio, nos desplazamos hasta los pasos que tendremos que seguir en la parte inferior de la pantalla.<\/p>\n"},"library":"H5P.AdvancedText 1.1","metadata":{"contentType":"Text","license":"U","title":"Sin t\u00edtulo Text"},"subContentId":"954d18d1-84ee-4c1c-9192-5d76659dedb1"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761bc233021a.png","mime":"image\/png","copyright":{"license":"U"},"width":932,"height":509}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"f1a4d6ec-0f81-49f5-bc92-e27151694ceb"},"useSeparator":"auto"},{"content":{"params":{"text":"

En nuestro ejemplo estamos utilizando Ddev en su versi\u00f3n m\u00e1s reciente, dentro de WSL2, por lo que ejecutaremos la primera l\u00ednea.<\/p>\n\n

Esto a\u00f1adir\u00e1 nuevos archivos de configuraci\u00f3n en nuestro proyecto que har\u00e1n posible la ejecuci\u00f3n posterior de Cypress.<\/p>\n"},"library":"H5P.AdvancedText 1.1","metadata":{"contentType":"Text","license":"U","title":"Sin t\u00edtulo Text"},"subContentId":"4d8fdce2-9545-4961-bdba-e21d33f9a102"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761bc471fc7d.png","mime":"image\/png","copyright":{"license":"U"},"width":803,"height":243}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"c600eb81-5142-453f-9b96-cb558959085e"},"useSeparator":"auto"},{"content":{"params":{"text":"

Siguiendo con las instrucciones del repositorio, reiniciamos el servidor para que se generen los nuevos contenedores correspondientes.<\/p>\n"},"library":"H5P.AdvancedText 1.1","metadata":{"contentType":"Text","license":"U","title":"Sin t\u00edtulo Text"},"subContentId":"1462cd1d-cea2-47b3-8b1f-88cd95879b2b"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761bc6380d35.png","mime":"image\/png","copyright":{"license":"U"},"width":770,"height":254}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"a6d65bd9-541b-4eb7-b487-3c8245ded17a"},"useSeparator":"auto"},{"content":{"params":{"text":"

En cuanto termine la reconstrucci\u00f3n, ejecutaremos el comando de arranque, utilizando el comando que nos indica el repositorio y que servir\u00e1 para generar el archivo de configuraci\u00f3n, mencionado en la p\u00e1gina oficial de Drupal, que tendremos que actualizar con el dominio de nuestro proyecto.<\/p>\n"},"library":"H5P.AdvancedText 1.1","metadata":{"contentType":"Text","license":"U","title":"Sin t\u00edtulo Text"},"subContentId":"debd166f-d98e-4060-94b3-b6d59c7234b7"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761bc7f1af72.png","mime":"image\/png","copyright":{"license":"U"},"width":966,"height":187}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"5af4ca2d-98b2-47ad-9605-aba7bbb6584e"},"useSeparator":"auto"},{"content":{"params":{"text":"

Veremos en pantalla la interfaz de Cypress con un mensaje indic\u00e1ndonos que no hemos conectado correctamente nuestra aplicaci\u00f3n con \u00e9l.<\/p>\n\n

As\u00ed que daremos clic en el bot\u00f3n Continuar, donde nos indicar\u00e1 cada uno de los siguientes pasos.<\/p>\n"},"library":"H5P.AdvancedText 1.1","metadata":{"contentType":"Text","license":"U","title":"Sin t\u00edtulo Text"},"subContentId":"2cc1441c-fb23-49af-a7a5-d0f5459c9db5"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761bc9cc4a3c.png","mime":"image\/png","copyright":{"license":"U"},"width":949,"height":485}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"066eaefd-9cde-4d73-8277-89f13ed678fa"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761bcb601abb.png","mime":"image\/png","copyright":{"license":"U"},"width":657,"height":425}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"2a52ffd1-3f93-4441-b50d-036ae1db49a9"},"useSeparator":"auto"},{"content":{"params":{"text":"

Se nos abrir\u00e1 una nueva pantalla, en la que podremos escoger el tipo de configuraci\u00f3n con respecto a las pruebas que pensamos realizar. Para nuestro ejemplo, seleccionaremos el test End to End.<\/p>\n"},"library":"H5P.AdvancedText 1.1","metadata":{"contentType":"Text","license":"U","title":"Sin t\u00edtulo Text"},"subContentId":"184e7156-9d1b-4dbc-bcf3-80b708db1670"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761bcd363499.png","mime":"image\/png","copyright":{"license":"U"},"width":830,"height":422}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"1a09141c-8671-44bd-af6e-349c16298997"},"useSeparator":"auto"},{"content":{"params":{"text":"

En la siguiente pantalla, nos mostrar\u00e1 el listado de archivos que debemos crear, con su respectiva ubicaci\u00f3n y contenidos, as\u00ed que seguiremos estas indicaciones hasta el final.<\/p>\n"},"library":"H5P.AdvancedText 1.1","metadata":{"contentType":"Text","license":"U","title":"Sin t\u00edtulo Text"},"subContentId":"e5d8e591-132e-4498-b045-b8521117766e"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761bcf06fe46.png","mime":"image\/png","copyright":{"license":"U"},"width":1176,"height":613}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"fac54e17-2e86-4b55-bbe1-02560b551f84"},"useSeparator":"auto"},{"content":{"params":{"text":"

\nAhora encontraremos el archivo de configuraci\u00f3n al que hace referencia la p\u00e1gina de Drupal, donde tendremos que a\u00f1adir el dominio de nuestra instalaci\u00f3n.<\/p>\n"},"library":"H5P.AdvancedText 1.1","metadata":{"contentType":"Text","license":"U","title":"Sin t\u00edtulo Text"},"subContentId":"8d2ff848-5b47-4d7f-9fc1-4b5bcf3617bc"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761bd1d9e0a6.png","mime":"image\/png","copyright":{"license":"U"},"width":813,"height":346}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"ed7b070d-65a1-48f4-9ac6-17cd13865ca7"},"useSeparator":"auto"},{"content":{"params":{"contentName":"Image","alt":"Drupal 11 y Cypress | Testing con Ddev","title":"Drupal 11 y Cypress | Testing con Ddev","file":{"path":"images\/file-6761bd2c9a751.png","mime":"image\/png","copyright":{"license":"U"},"width":787,"height":310}},"library":"H5P.Image 1.1","metadata":{"contentType":"Image","license":"U","title":"Sin t\u00edtulo Image"},"subContentId":"12d38f91-2c67-43d9-8b10-47bea91a30eb"},"useSeparator":"auto"},{"content":{"params":{"text":"