"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introducción-a-las-pruebas-de-extremo-a-extremo-con-jest-puppeteer", "hProperties": { "id": "introducción-a-las-pruebas-de-extremo-a-extremo-con-jest-puppeteer" } }, "depth": 2, "value": "Introducción a las pruebas de extremo a extremo con jest-puppeteer" }, { "data": { "id": "preparación-de-tu-entorno-de-pruebas", "hProperties": { "id": "preparación-de-tu-entorno-de-pruebas" } }, "depth": 2, "value": "Preparación de tu entorno de pruebas" }, { "data": { "id": "api-comúnmente-utilizadas", "hProperties": { "id": "api-comúnmente-utilizadas" } }, "depth": 2, "value": "API comúnmente utilizadas" }, { "data": { "id": "la-simple-aplicación-de-tareas-pendientes", "hProperties": { "id": "la-simple-aplicación-de-tareas-pendientes" } }, "depth": 2, "value": "La simple aplicación de tareas pendientes" }, { "data": { "id": "espera-que-la-aplicación-y-sus-datos-se-hayan-cargado", "hProperties": { "id": "espera-que-la-aplicación-y-sus-datos-se-hayan-cargado" } }, "depth": 2, "value": "Espera que la aplicación y sus datos se hayan cargado" }, { "data": { "id": "espera-hacer-clic-en-un-botón-específico", "hProperties": { "id": "espera-hacer-clic-en-un-botón-específico" } }, "depth": 2, "value": "Espera hacer clic en un botón específico" }, { "data": { "id": "espera-que-se-abra-un-enlace-externo-en-una-nueva-pestaña", "hProperties": { "id": "espera-que-se-abra-un-enlace-externo-en-una-nueva-pestaña" } }, "depth": 2, "value": "Espera que se abra un enlace externo en una nueva pestaña" }, { "data": { "id": "espera-crear-un-artículo-a-partir-del-formulario", "hProperties": { "id": "espera-crear-un-artículo-a-partir-del-formulario" } }, "depth": 2, "value": "Espera crear un artículo a partir del formulario" }, { "data": { "id": "resumen", "hProperties": { "id": "resumen" } }, "depth": 2, "value": "Resumen" }]; const readingTime = { "minutes": 8, "words": 2465, "text": "8 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Como parte de nuestro compromiso para garantizar la calidad de Logto y la mejora continua, empleamos jest-puppeteer para realizar pruebas automatizadas de extremo a extremo. Esto nos permite iterar rápidamente en el desarrollo de Logto sin interrupciones." }), "\n", _jsx(_components.p, { children: "En este artículo, compartiremos nuestra experiencia escribiendo scripts de prueba eficientes de jest-puppeteer utilizando una simple aplicación de tareas pendientes como ejemplo. Nuestro objetivo es ayudarte a comenzar rápidamente a escribir código de pruebas jest-puppeteer para tus propios proyectos." }), "\n", _jsxs(_components.h2, { id: "introducción-a-las-pruebas-de-extremo-a-extremo-con-jest-puppeteer", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introducción-a-las-pruebas-de-extremo-a-extremo-con-jest-puppeteer", children: _jsx(_components.span, { children: "#" }) }), "Introducción a las pruebas de extremo a extremo con jest-puppeteer"] }), "\n", _jsxs(_components.p, { children: ["Las pruebas de extremo a extremo son una forma de asegurar que tu aplicación funcione correctamente desde la perspectiva del usuario. Para lograr esto, utilizamos dos herramientas esenciales: [Jest] (", _jsx(_components.a, { href: "https://jestjs.io/", children: "https://jestjs.io/" }), ") y [Puppeteer] (", _jsx(_components.a, { href: "https://pptr.dev/", children: "https://pptr.dev/" }), ")."] }), "\n", _jsxs(_components.p, { children: ["[Jest] (", _jsx(_components.a, { href: "https://jestjs.io/", children: "https://jestjs.io/" }), ") es un popular marco de pruebas de JavaScript que ofrece una API fácil de usar para escribir pruebas y afirmaciones. Se utiliza ampliamente para pruebas unitarias e integradas."] }), "\n", _jsxs(_components.p, { children: ["[Puppeteer] (", _jsx(_components.a, { href: "https://pptr.dev/", children: "https://pptr.dev/" }), ") es una biblioteca Node.js desarrollada por el equipo de Chrome que proporciona una API de alto nivel para controlar los navegadores Chrome o Chromium sin cabeza. Esto lo convierte en una opción ideal para automatizar interacciones del navegador en pruebas de extremo a extremo."] }), "\n", _jsxs(_components.p, { children: ["[jest-puppeteer] (", _jsx(_components.a, { href: "https://github.com/argos-ci/jest-puppeteer", children: "https://github.com/argos-ci/jest-puppeteer" }), ") es un preestablecido de Jest que permite pruebas de extremo a extremo con Puppeteer. Ofrece una API sencilla para lanzar nuevas instancias de navegador e interactuar con las páginas web a través de ellas."] }), "\n", _jsx(_components.p, { children: "Ahora que tienes una comprensión básica de las herramientas esenciales, vamos a sumergirnos en la configuración de tu entorno de pruebas." }), "\n", _jsxs(_components.h2, { id: "preparación-de-tu-entorno-de-pruebas", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#preparación-de-tu-entorno-de-pruebas", children: _jsx(_components.span, { children: "#" }) }), "Preparación de tu entorno de pruebas"] }), "\n", _jsx(_components.p, { children: "Configurar tu entorno de pruebas para pruebas de extremo a extremo con jest-puppeteer es un proceso sencillo que implica tres pasos principales:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Instalar dependencias" }), "\n"] }), "\n", _jsx(_components.p, { children: "En tu proyecto (o crea un nuevo proyecto), abre la terminal y ejecuta:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm install --save-dev jest jest-puppeteer puppeteer\n" }) }), "\n", _jsxs(_components.p, { children: ["Luego ve a ", _jsx(_components.code, { children: "node_modules/puppeteer" }), " e instala Chromium (que es necesario para Puppeteer):"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "cd node_modules/puppeteer\nnpm run postinstall\n" }) }), "\n", _jsxs(_components.ol, { start: "2", children: ["\n", _jsx(_components.li, { children: "Configurar Jest" }), "\n"] }), "\n", _jsx(_components.p, { children: "Después, necesitas configurar Jest para que funcione sin problemas con Puppeteer." }), "\n", _jsxs(_components.p, { children: ["Crea un archivo de configuración de Jest (por ejemplo, ", _jsx(_components.code, { children: "jest.config.js" }), ") en el directorio raíz de tu proyecto si todavía no tienes uno. En este archivo de configuración, especifica jest-puppeteer como un preestablecido:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "/ @type {import('jest').Config} */;\nconst config = {\n preset: 'jest-puppeteer',\n // Otras configuraciones de Jest...\n};\n\nmodule.exports = config;\n" }) }), "\n", _jsxs(_components.p, { children: ["Puedes personalizar otras configuraciones de Jest en este archivo según sea necesario. Para obtener más información sobre cómo personalizar las configuraciones de Jest, consulta la [Configuración de Jest] (", _jsx(_components.a, { href: "https://jestjs.io/docs/configuration", children: "https://jestjs.io/docs/configuration" }), ")."] }), "\n", _jsxs(_components.ol, { start: "3", children: ["\n", _jsx(_components.li, { children: "Escribe tus pruebas" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Crea archivos de prueba en tu proyecto, generalmente denominados con la extensión ", _jsx(_components.code, { children: ".test.js" }), ". Jest descubrirá y ejecutará automáticamente estos archivos de prueba."] }), "\n", _jsxs(_components.p, { children: ["Aquí tienes un ejemplo del [documento de Jest] (", _jsx(_components.a, { href: "https://jestjs.io/docs/puppeteer", children: "https://jestjs.io/docs/puppeteer" }), "):"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "describe('Google', () => {\n beforeAll(async () => {\n await page.goto('https://google.com');\n });\n\n it('debería tener el título \"Google\"', async () => {\n await expect(page.title()).resolves.toMatch('Google');\n });\n});\n" }) }), "\n", _jsx(_components.p, { children: "Luego ejecuta el comando para ejecutar la prueba:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npx jest\n" }) }), "\n", _jsx(_components.p, { children: "Siguiendo estos tres pasos, tendrás un entorno de pruebas bien configurado para realizar pruebas de extremo a extremo utilizando jest-puppeteer." }), "\n", _jsx(_components.p, { children: "Sin embargo, ten en cuenta que este es solo un ejemplo básico. Para obtener información más detallada sobre la configuración del entorno, consulta la documentación relevante:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["[Jest: Comenzando] (", _jsx(_components.a, { href: "https://jestjs.io/docs/getting-started", children: "https://jestjs.io/docs/getting-started" }), ")"] }), "\n", _jsxs(_components.li, { children: ["[Jest: Usando con puppeteer] (", _jsx(_components.a, { href: "https://jestjs.io/docs/puppeteer", children: "https://jestjs.io/docs/puppeteer" }), ")"] }), "\n", _jsxs(_components.li, { children: ["[Puppeteer] (", _jsx(_components.a, { href: "https://pptr.dev/", children: "https://pptr.dev/" }), ")"] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "api-comúnmente-utilizadas", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#api-comúnmente-utilizadas", children: _jsx(_components.span, { children: "#" }) }), "API comúnmente utilizadas"] }), "\n", _jsx(_components.p, { children: "En los próximos pasos, confiaremos en las API proporcionadas por Jest, Puppeteer y jest-puppeteer para ayudarnos en nuestras pruebas." }), "\n", _jsxs(_components.p, { children: ["Jest ofrece principalmente API para organizar pruebas y afirmar resultados esperados. Puedes explorar los detalles específicos en la [documentación] (", _jsx(_components.a, { href: "https://jestjs.io/docs/api", children: "https://jestjs.io/docs/api" }), ")."] }), "\n", _jsxs(_components.p, { children: ["Las API de Puppeteer están diseñadas principalmente para interactuar con los navegadores, y su soporte para pruebas puede ser menos sencillo. Puedes consultar la [documentación de Puppeteer] (", _jsx(_components.a, { href: "https://pptr.dev/", children: "https://pptr.dev/" }), ") para entender las funcionalidades que ofrece. En nuestros ejemplos de prueba posteriores, cubriremos algunos casos de uso comunes."] }), "\n", _jsxs(_components.p, { children: ["Dado que las API de Puppeteer no fueron diseñadas originalmente para pruebas, su uso para escribir pruebas puede resultar desafiante. Para simplificar el proceso de escribir pruebas de Puppeteer, jest-puppeteer incluye una biblioteca incorporada llamada ", _jsx(_components.code, { children: "expect-puppeteer" }), ". Ofrece un conjunto de API concisas y amigables para el usuario. La biblioteca se detalla en su ", _jsx(_components.a, { href: "https://github.com/argos-ci/jest-puppeteer#recipes", children: "documentación" }), ", que presenta diversas características útiles, como se muestra en los ejemplos a continuación:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// Afirmar que la página actual contiene 'Texto en la página'\nawait expect(page).toMatchTextContent('Texto en la página');\n\n// Afirmar que la página actual tiene un elemento div que contiene 'Inicio'\nawait expect(page).toMatchElement('div', { text: 'Inicio' });\n\n// Afirmar que se hará clic en un botón que contiene el texto \"Inicio\"\nawait expect(page).toClick('button', { text: 'Inicio' });\n\n// Afirmar que se llenará un formulario\nawait expect(page).toFillForm('form[name=\"myForm\"]', {\n firstName: 'James',\n lastName: 'Bond',\n});\n" }) }), "\n", _jsx(_components.p, { children: "En los siguientes ejemplos, combinaremos las API proporcionadas por estas bibliotecas para completar nuestros escenarios de prueba." }), "\n", _jsx(_components.p, { children: "Ahora es el momento de comenzar a aprender a escribir código de prueba utilizando nuestra simple aplicación de tareas pendientes." }), "\n", _jsxs(_components.h2, { id: "la-simple-aplicación-de-tareas-pendientes", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#la-simple-aplicación-de-tareas-pendientes", children: _jsx(_components.span, { children: "#" }) }), "La simple aplicación de tareas pendientes"] }), "\n", _jsxs(_components.p, { children: ["Suponiendo que tenemos una simple aplicación de tareas pendientes ejecutándose en ", _jsx(_components.code, { children: "http://localhost:3000" }), ", el código HTML principal para esta aplicación es el siguiente:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "

La lista de Alex

\n
Comprar una manzana
\n
Para Navidad
\n \n
\n
Leer documento de inicio de Logto
\n
\n Enlace del documento:\n Empiece \n
\n \n

\n \n

\n" }) }), "\n", _jsx(_components.p, { children: "Cuando realizamos pruebas de extremo a extremo, nuestro objetivo es cubrir los siguientes escenarios:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Cuando accedemos a la URL de la aplicación, la aplicación y sus datos deberían cargarse correctamente." }), "\n", _jsx(_components.li, { children: "Se debería poder hacer clic en el botón de verificación del artículo." }), "\n", _jsx(_components.li, { children: "Al hacer clic en un enlace externo dentro de las notas del artículo, debería abrirse el enlace en una nueva pestaña." }), "\n", _jsx(_components.li, { children: "Puede agregar un artículo desde el formulario." }), "\n"] }), "\n", _jsx(_components.p, { children: "Más adelante, escribiremos código de prueba para validar estos escenarios." }), "\n", _jsxs(_components.h2, { id: "espera-que-la-aplicación-y-sus-datos-se-hayan-cargado", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#espera-que-la-aplicación-y-sus-datos-se-hayan-cargado", children: _jsx(_components.span, { children: "#" }) }), "Espera que la aplicación y sus datos se hayan cargado"] }), "\n", _jsx(_components.p, { children: "Consideramos que la aplicación se ha cargado con éxito cuando se cumplen las siguientes condiciones:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Un elemento con el ID \"app\" debería existir en la página después de acceder a la URL de la aplicación." }), "\n", _jsx(_components.li, { children: "Los datos dentro de la aplicación deberían representarse correctamente." }), "\n"] }), "\n", _jsx(_components.p, { children: "Entonces, hemos escrito el siguiente código de prueba:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('debe cargar la aplicación con éxito', async () => {\n // Ir a la página de la aplicación\n await page.goto('http://localhost:3000');\n\n // Esperar a que se cargue la aplicación\n await page.waitForSelector('#app');\n\n // Esperar a que se carguen los datos\n await expect(page).toMatchElement('div[class=title]', {\n text: \"La lista de Alex\",\n });\n});\n" }) }), "\n", _jsx(_components.p, { children: "En el código:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "page.goto" }), " es equivalente a ingresar \"", _jsx(_components.a, { href: "http://localhost:3000", children: "http://localhost:3000" }), "\" en el navegador, lo que te permite navegar a cualquier URL."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "page.waitForSelector" }), " se utiliza para esperar a que un selector CSS específico coincida con un elemento en particular, con un tiempo de espera predeterminado de 30 segundos."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "expect(page).toMatchElement" }), " proviene de la biblioteca ", _jsx(_components.code, { children: "expect-puppeteer" }), ", es similar a ", _jsx(_components.code, { children: "page.waitForSelector" }), ", pero también soporta emparejar el texto dentro de un elemento. Además, el tiempo de espera predeterminado para ", _jsx(_components.code, { children: "toMatchElement" }), " es solo de 500 ms."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Puede parecer perfecto a primera vista, pero cuando ejecutamos esta prueba y la desplegamos en un entorno CI, ocasionalmente falla después de múltiples ejecuciones. El mensaje de error indica:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "Después de esperar 500 ms, no podemos encontrar un “div” con un nombre de clase “title” y que contiene el texto \"La lista de Alex\".\n" }) }), "\n", _jsx(_components.p, { children: "Basándonos en la información de falla y en el hecho de que esta prueba pasa la mayoría de las veces, podemos deducir que los datos solicitados por la aplicación pueden no siempre volver dentro de los primeros 500 ms después de la carga de la aplicación. Por lo tanto, queremos esperar a que los datos se carguen antes de hacer la afirmación." }), "\n", _jsx(_components.p, { children: "Normalmente, hay dos enfoques comunes para lograr esto:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Aumenta el tiempo de espera de la afirmación" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Desde el mensaje de error, podemos ver que el tiempo de espera predeterminado para ", _jsx(_components.code, { children: "toMatchElement" }), " está configurado a 500 ms. Podemos aumentar el tiempo de espera agregando la opción ", _jsx(_components.code, { children: "timeout" }), " a la función así:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "await expect(page).toMatchElement('div[class=title]', {\n text: \"La lista de Alex\",\n timeout: 2000, // Incrementar a 2s\n});\n" }) }), "\n", _jsx(_components.p, { children: "Este enfoque puede reducir la aparición de pruebas fallidas en cierta medida, pero no resuelve completamente el problema porque no podemos saber con certeza cuánto tiempo se necesita para recuperar los datos." }), "\n", _jsx(_components.p, { children: "Por lo tanto, solo usamos este enfoque cuando estamos seguros sobre el tiempo de espera necesario, como en escenarios como \"un tooltip aparece después de pasar el cursor sobre un elemento durante más de 2 segundos.\"" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Espera a que se complete la solicitud de red antes de hacer una afirmación" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Este es el enfoque correcto. Aunque tal vez no sepamos cuánto tiempo llevará la solicitud de datos, esperar a que se complete la solicitud de red siempre es una opción segura. En este punto, podemos usar ", _jsx(_components.code, { children: "page.waitForNavigation({ waitUntil: 'networkidle0' })" }), " para esperar a que se completan las solicitudes de red:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('debe cargar la aplicación con éxito', async () => {\n\tawait page.goto('http://localhost:3000');\n\n\t/\n\t * Esperar a que terminen las solicitudes de red.\n\t * Agregar aquí para asegurar que tanto la aplicación como los datos se hayan cargado.\n\t */\n\tawait page.waitForNavigation({ waitUntil: 'networkidle0' });\n\n\tawait page.waitForSelector('#app');\n\tawait expect(page).toMatchElement('div[class=title]', {\n\t\ttext: \"La lista de Alex\",\n\t});\n});\n" }) }), "\n", _jsx(_components.p, { children: "De esta manera, antes de que ejecutemos la afirmación para la aplicación y sus datos cargados, podemos asegurarnos de que nuestras solicitudes de red ya hayan concluido. Esto asegura que la prueba genere consistentemente los resultados correctos." }), "\n", _jsxs(_components.h2, { id: "espera-hacer-clic-en-un-botón-específico", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#espera-hacer-clic-en-un-botón-específico", children: _jsx(_components.span, { children: "#" }) }), "Espera hacer clic en un botón específico"] }), "\n", _jsx(_components.p, { children: "A continuación, estamos probando la funcionalidad de hacer clic en el botón de verificación dentro de un artículo." }), "\n", _jsxs(_components.p, { children: ["En la aplicación de ejemplo, hemos notado que todos los artículos comparten la misma estructura. Sus botones de verificación tienen el selector CSS ", _jsx(_components.code, { children: "li[class$=item] > button" }), ", y el texto del botón siempre es \"Check\". Esto significa que no podemos especificar directamente en qué botón de verificación de qué artículo hacer clic. Por lo tanto, necesitamos una nueva solución."] }), "\n", _jsx(_components.p, { children: "Supongamos que queremos hacer clic en el botón de verificación del artículo \"Leer documento de inicio de Logto\". Podemos desglosar esto en dos pasos:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Primero, obtener una referencia de ese artículo específico." }), "\n", _jsx(_components.li, { children: "Luego, hacer clic en el botón de verificación ubicado dentro de ese artículo." }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('debería poder hacer clic en el botón de verificación del artículo leer doc', async () => {\n // Obtener la referencia del artículo leer doc\n const readDocItem = await expect(page).toMatchElement(\n 'li[class$=item]:has(div[class$=itemName])',\n { text: 'Leer documento de inicio de Logto' }\n );\n\n // Esperar a hacer clic en el botón relacionado\n await expect(readDocItem).toClick('button', { text: 'Check' });\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Como se muestra en el código, usamos la función ", _jsx(_components.code, { children: "toMatchElement" }), " para emparejar el artículo con el ", _jsx(_components.code, { children: "itemName" }), " configurado en \"Leer documento de inicio de Logto\". Luego, usamos la referencia ", _jsx(_components.code, { children: "readDocItem" }), " para hacer clic en el botón con el contenido de texto 'Check' ubicado debajo de ella."] }), "\n", _jsxs(_components.p, { children: ["Es importante notar que al obtener el ", _jsx(_components.code, { children: "readDocItem" }), ", el selector CSS utilizado es ", _jsx(_components.code, { children: "li[class$=item]:has(div[class$=itemName])" }), ". Este selector empareja el elemento ", _jsx(_components.code, { children: "li" }), " raíz del artículo, no el ", _jsx(_components.code, { children: "itemName" }), " dentro de él, porque tenemos la intención de hacer clic en el ", _jsx(_components.code, { children: "button" }), " bajo la etiqueta ", _jsx(_components.code, { children: "li" }), " más tarde."] }), "\n", _jsxs(_components.p, { children: ["El uso de ", _jsx(_components.code, { children: "expect(readDocItem).toClick" }), " es similar a ", _jsx(_components.code, { children: "toMatchElement" }), ". En el código de ejemplo, pasamos ", _jsx(_components.code, { children: "{ text: 'Check' }" }), " para emparejar aún más el ", _jsx(_components.code, { children: "textContent" }), " del botón. Sin embargo, puedes decidir si quieres o no emparejar el contenido de texto del botón según tus necesidades."] }), "\n", _jsxs(_components.h2, { id: "espera-que-se-abra-un-enlace-externo-en-una-nueva-pestaña", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#espera-que-se-abra-un-enlace-externo-en-una-nueva-pestaña", children: _jsx(_components.span, { children: "#" }) }), "Espera que se abra un enlace externo en una nueva pestaña"] }), "\n", _jsx(_components.p, { children: "A continuación, queremos probar si podemos abrir un enlace externo en una nueva pestaña al hacer clic en él dentro de las notas del artículo." }), "\n", _jsx(_components.p, { children: "En la aplicación de ejemplo, hemos encontrado que el artículo \"Leer documento de inicio de Logto\" tiene un enlace externo al documento de Logto dentro de sus notas. Aquí está nuestro código de prueba:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('debe abrir un enlace externo en una nueva pestaña', async () => {\n // Estrechar a un artículo específico obteniendo la referencia del artículo de leer documento\n const readDocItem = await expect(page).toMatchElement(\n 'li[class$=item]:has(div[class$=itemName])',\n { text: 'Leer documento de inicio de Logto' }\n );\n\n await expect(readDocItem).toClick('div[class=itemNotes] a', { text: 'Empezar' });\n\n const target = await browser.waitForTarget(\n (target) => target.url() === 'https://docs.logto.io/docs/tutorials/get-started'\n );\n\n const logtoDocPage = await target.page();\n expect(logtoDocPage).toBeTruthy();\n\n // Recuerda cerrar la página después de probar\n await logtoDocPage?.close();\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["En el código, utilizamos ", _jsx(_components.code, { children: "toClick" }), " para hacer clic en el enlace dentro de ", _jsx(_components.code, { children: "itemNotes" }), "."] }), "\n", _jsxs(_components.p, { children: ["Posteriormente, usamos ", _jsx(_components.code, { children: "browser.waitForTarget" }), " para capturar una pestaña recién abierta con la URL \"", _jsx(_components.a, { href: "https://docs.logto.io/docs/tutorials/get-started", children: "https://docs.logto.io/docs/tutorials/get-started" }), ".\""] }), "\n", _jsxs(_components.p, { children: ["Después de obtener la pestaña, usamos ", _jsx(_components.code, { children: "target.page()" }), " para obtener una instancia de la página de documentos de Logto y verificar más si la página se ha cargado."] }), "\n", _jsx(_components.p, { children: "Además, recuerda cerrar la página recién abierta después de completar nuestra prueba." }), "\n", _jsxs(_components.h2, { id: "espera-crear-un-artículo-a-partir-del-formulario", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#espera-crear-un-artículo-a-partir-del-formulario", children: _jsx(_components.span, { children: "#" }) }), "Espera crear un artículo a partir del formulario"] }), "\n", _jsx(_components.p, { children: "Ahora, queremos probar la funcionalidad de agregar un artículo." }), "\n", _jsx(_components.p, { children: "Necesitamos rellenar el nombre del artículo y las notas del artículo en el formulario, hacer clic en el botón \"Agregar\" y verificar si el contenido que agregamos aparece en la lista:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('debe crear un artículo a partir del formulario', async () => {\n // Llenar el formulario y enviar\n await expect(page).toFill('form input[name=itemName]', 'Contactar con John');\n await expect(page).toFill('form input[name=itemNotes]', 'Enviar un correo a john@fake.com');\n await expect(page).toClick('form button[type=submit]', { text: 'Agregar' });\n\n // Espera que se haya creado el artículo\n await expect(page).toMatchElement('li[class$=item]:has(div[class$=itemName])', {\n text: 'Contactar con John',\n });\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Observarás que usamos la función ", _jsx(_components.code, { children: "expect(page).toFill(inputSelector, content)" }), " para rellenar el contenido del formulario. Esta función reemplaza todo el contenido del input con el ", _jsx(_components.code, { children: "content" }), "."] }), "\n", _jsxs(_components.p, { children: ["Si quieres añadir algunos caracteres al input sin reemplazar el contenido existente, puedes usar ", _jsx(_components.code, { children: "page.type(selector, content)" }), " para agregar directamente el contenido deseado al input."] }), "\n", _jsxs(_components.p, { children: ["Sin embargo, cuando tenemos muchos campos para rellenar en nuestro formulario, llamar a ", _jsx(_components.code, { children: "toFill" }), " varias veces no es conveniente. En este caso, podemos usar el siguiente enfoque para rellenar todo el contenido en una sola llamada:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "await expect(page).toFillForm('form', {\n itemName: 'Contactar con John',\n itemNotes: 'Enviar un correo a john@fake.com',\n});\n" }) }), "\n", _jsx(_components.p, { children: "La clave del objeto proporcionado es el atributo de nombre del elemento de entrada." }), "\n", _jsxs(_components.h2, { id: "resumen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#resumen", children: _jsx(_components.span, { children: "#" }) }), "Resumen"] }), "\n", _jsx(_components.p, { children: "Hemos cubierto un ejemplo simple para introducir requisitos de prueba comunes y técnicas correspondientes para escribir código al utilizar jest-puppeteer para pruebas de extremo a extremo. Esperamos que esto te ayude a captar rápidamente los conceptos básicos de la escritura de código de prueba jest-puppeteer." }), "\n", _jsx(LogtoCloudButton, { children: " Prueba Logto hoy " })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }