Siempre me ha gustado ver cómo se ejecutan (y pasan) mis pruebas unitarias. Son rápidas y pasar las pruebas me da la seguridad de que mis piezas individuales se comportan como se supone que deben hacerlo. Por el contrario, a menudo me costaba priorizar las pruebas de extremo a extremo para el navegador porque escribirlas y ejecutarlas era extremadamente lento.  Afortunadamente, las herramientas para realizar pruebas de extremo a extremo en el navegador han mejorado y son mucho más rápidas con el paso de los años. Y con una configuración de navegador sin interfaz gráfica, puedo ejecutar mis pruebas de navegador como parte de mi integración continua.  Recientemente, me encontré con esta   que habla sobre la automatización de las pruebas en el navegador con Chrome sin interfaz gráfica dentro de Heroku CI. Heroku tiene un paquete de compilación que instala Chrome sin interfaz gráfica, que puedes invocar para tus pruebas en el flujo de trabajo de CI. publicación del blog de Heroku  La configuración de ejemplo de la publicación del blog fue una aplicación React probada con   y   . Es un gran comienzo... pero ¿qué pasa si uso   en lugar de Puppeteer? ¿Es posible? Puppeteer Jest Playwright  Decidí investigar y resultó que sí, ¡también puedes hacer esto con Playwright! Así que capté los pasos que necesitarías para ejecutar las pruebas de Playwright en el navegador Chrome sin interfaz gráfica que se usa en Heroku CI. En esta publicación, te guiaré por los pasos necesarios para configurarlo.  Unas breves palabras sobre la automatización del navegador para las pruebas de extremo a extremo  Las pruebas de extremo a extremo capturan cómo interactúan los usuarios con tu aplicación en un navegador, lo que permite validar flujos de trabajo completos. Playwright hace que este proceso sea bastante sencillo con las pruebas en Chrome, Firefox y Safari. Por supuesto, ejecutar una serie completa de pruebas de navegador en CI es bastante pesado, por lo que el modo sin interfaz gráfica resulta de gran ayuda.  El   de Heroku instala Chrome en una aplicación de Heroku, de modo que puedes ejecutar tus pruebas de Playwright en Heroku CI con una configuración realmente liviana. paquete de compilación Chrome for Testing  Introducción a la aplicación para pruebas  Como estaba probando esto, bifurqué el   en la publicación del blog de Heroku. La aplicación era una aplicación React simple con un enlace, una entrada de texto y un botón de envío. Hubo tres pruebas: repositorio de GitHub al que se hizo referencia originalmente  Verifique que el enlace funcione y redirija a la ubicación correcta.  Verifique que la entrada de texto muestre correctamente la entrada del usuario.  Verifique que al enviar el formulario se actualice el texto que se muestra en la página.  Bastante simple. Ahora, solo necesitaba cambiar el código para usar Playwright en lugar de Puppeteer y Jest. Ah, y también quería usar   en lugar de npm. Aquí hay un enlace a   . pnpm mi repositorio de GitHub bifurcado  Modificar el código para utilizar Playwright  Repasemos los pasos que seguí para modificar el código. Empecé con mi repositorio bifurcado, idéntico al repositorio   . heroku-examples  Utilice pnpm  Quería usar pnpm en lugar de npm (es una preferencia personal). Esto fue lo que hice primero:   ~/project$ corepack enable pnpm ~/project$ corepack use pnpm@latest Installing pnpm@9.12.3 in the project… … Progress: resolved 1444, reused 1441, downloaded 2, added 1444, done … Done in 14.4s ~/project$ rm package-lock.json ~/project$ pnpm install # just to show everything's good Lockfile is up to date, resolution step is skipped Already up to date Done in 1.3s  Añadir dramaturgo al proyecto  A continuación eliminé Puppeteer y Jest, y agregué Playwright.   ~/project$ pnpm remove \ babel-jest jest jest-puppeteer @testing-library/jest-dom ~/project$ $ pnpm create playwright Getting started with writing end-to-end tests with Playwright: Initializing project in '.' ✔ Do you want to use TypeScript or JavaScript? · JavaScript ✔ Where to put your end-to-end tests? · tests ✔ Add a GitHub Actions workflow? (y/N) · false ✔ Install Playwright browsers (can be done manually via 'pnpm exec playwright install')? (Y/n) · false ✔ Install Playwright operating system dependencies (requires sudo / root - can be done manually via 'sudo pnpm exec playwright install-deps')? (y/N) · false Installing Playwright Test (pnpm add --save-dev @playwright/test)… … Installing Types (pnpm add --save-dev @types/node)… … Done in 2.7s Writing playwright.config.js. Writing tests/example.spec.js. Writing tests-examples/demo-todo-app.spec.js. Writing package.json.  También eliminé la sección de configuración de Jest de   . package.json  Configurar Playwright para usar solo Chromium  Puedes ejecutar tus pruebas de Playwright en Chrome, Firefox y Safari. Como me concentré en Chrome, eliminé los demás navegadores de la sección   del archivo   generado: projects playwright.config.js  /* Configure projects for major browsers */ projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'] }, }, // { // name: 'firefox', // use: { ...devices['Desktop Firefox'] }, // }, // // { // name: 'webkit', // use: { ...devices['Desktop Safari'] }, // }, ], …  Cambie el código de prueba de titiritero por el código de prueba de dramaturgo  El código original tenía un archivo de prueba de Puppeteer en   . Moví ese archivo a   . Luego, actualicé la prueba para usar las convenciones de Playwright, que se asignaron de manera bastante clara. El nuevo archivo de prueba se veía así: src/tests/puppeteer.test.js tests/playwright.spec.js   const ROOT_URL = 'http://localhost:8080'; const { test, expect } = require('@playwright/test'); const inputSelector = 'input[name="name"]'; const submitButtonSelector = 'button[type="submit"]'; const greetingSelector = 'h5#greeting'; const name = 'John Doe'; test.beforeEach(async ({ page }) => { await page.goto(ROOT_URL); }); test.describe('Playwright link', () => { test('should navigate to Playwright documentation page', async ({ page }) => { await page.click('a[href="https://playwright.dev/"]'); await expect(page.title()).resolves.toMatch('| Playwright'); }); }); test.describe('Text input', () => { test('should display the entered text in the text input', async ({ page }) => { await page.fill(inputSelector, name); // Verify the input value const inputValue = await page.inputValue(inputSelector); expect(inputValue).toBe(name); }); }); test.describe('Form submission', () => { test('should display the "Hello, X" message after form submission', async ({ page }) => { const expectedGreeting = `Hello, ${name}.`; await page.fill(inputSelector, name); await page.click(submitButtonSelector); await page.waitForSelector(greetingSelector); const greetingText = await page.textContent(greetingSelector); expect(greetingText).toBe(expectedGreeting); }); });  Eliminar   , utilizar en su lugar el servidor web de Playwright start-server-and-test  Para probar mi aplicación React, primero tuve que ponerla en marcha (en   ) en un proceso independiente y luego pude ejecutar mis pruebas. Esto sería así independientemente de si usara Puppeteer o Playwright. Con Puppeteer, el ejemplo de Heroku utilizó el paquete   . http://localhost:8080 start-server-and-test  Sin embargo, puedes configurar Playwright para que inicie la aplicación antes de ejecutar las pruebas. ¡Esto es bastante conveniente!  Eliminé   de mi proyecto. start-server-and-test   ~/project$ pnpm remove start-server-and-test  En   , descomenté la sección webServer en la parte inferior, modificándola para que se vea así: playwright.config.js  /* Run your local dev server before starting the tests */ webServer: { command: 'pnpm start', url: 'http://127.0.0.1:8080', reuseExistingServer: !process.env.CI, },  Luego, eliminé el script   del archivo   original. En su lugar, mi script de prueba se veía así: test:ci package.json  "scripts": { … "test": "playwright test --project=chromium --reporter list" },  Instalar Playwright Browser en mi máquina local  Playwright instala los binarios más recientes del navegador para usarlos en sus pruebas. Por lo tanto, en mi máquina local, necesitaba que Playwright instalara su versión de Chromium.   ~/project$ pnpm playwright install chromium Downloading Chromium 130.0.6723.31 (playwright build v1140) from https://playwright.azureedge.net/builds/chromium/1140/chromium-linux.zip 164.5 MiB [====================] 100%    El paquete de compilación de Chrome para pruebas en Heroku instala el navegador que usaremos para las pruebas. Configuraremos nuestra CI para que Playwright use ese navegador en lugar de invertir tiempo y recursos en instalar el suyo propio. Nota:  Ejecutar pruebas localmente  Con eso, ya estaba todo listo. Era hora de probar mis pruebas localmente.   ~/project$ pnpm test > playwright test --project=chromium --reporter list Running 3 tests using 3 workers ✓ 1 [chromium] > playwright.spec.js:21:3 > Text input > should display the entered text in the text input (911ms) ✘ 2 [chromium] > playwright.spec.js:14:3 > Playwright link > should navigate to Playwright documentation page (5.2s) ✓ 3 [chromium] > playwright.spec.js:31:3 > Form submission > should display the "Hello, X" message after form submission (959ms) ... - waiting for locator('a[href="https://playwright.dev/"]') 13 | test.describe('Playwright link', () => { 14 | test('should navigate to Playwright documentation page', async ({ page }) => { > 15 | await page.click('a[href="https://playwright.dev/"]'); | ^ 16 | await expect(page.title()).resolves.toMatch('| Playwright'); 17 | }); 18 | });  ¡Ah! Así es. Modifiqué mi prueba para esperar que el enlace en la aplicación me lleve a la documentación de Playwright en lugar de a la de Puppeteer. Necesitaba actualizar   en la línea 19: src/App.js   <Link href="https://playwright.dev/" rel="noopener"> Playwright Documentation </Link>  Ahora, era el momento de ejecutar las pruebas nuevamente…   ~/project$ pnpm test > playwright test --project=chromium --reporter list Running 3 tests using 3 workers ✓ 1 [chromium] > playwright.spec.js:21:3 > Text input > should display the entered text in the text input (1.1s) ✓ 2 [chromium] > playwright.spec.js:14:3 > Playwright link > should navigate to Playwright documentation page (1.1s) ✓ 3 [chromium] > playwright.spec.js:31:3 > Form submission > should display the "Hello, X" message after form submission (1.1s) 3 passed (5.7s)  ¡Las pruebas han pasado! Ahora es el momento de pasar a Heroku CI.  Implementar en Heroku para utilizar el pipeline de CI  Seguí las instrucciones de la publicación del blog de Heroku para configurar mi aplicación en una canalización CI de Heroku.  Crear una canalización de Heroku  En Heroku, creé una nueva canalización y la conecté a mi repositorio de GitHub bifurcado.   A continuación, agregué mi aplicación al entorno de pruebas.   Luego, fui a la pestaña   y hice clic   .  Pruebas en Habilitar Heroku CI  Finalmente, modifiqué el archivo   para eliminar el script de prueba que estaba configurado para llamar   . Ya había eliminado el script   de mi archivo   . El script   en   era ahora el que se debía usar y Heroku CI lo buscaría de forma predeterminada. app.json npm test:ci test:ci package.json test package.json  Mi archivo   , que se aseguró de usar el paquete de compilación de Chrome para pruebas, se veía así: app.json   { "environments": { "test": { "buildpacks": [ { "url": "heroku-community/chrome-for-testing" }, { "url": "heroku/nodejs" } ] } } }  Prueba inicial  Envié mi código a GitHub y esto activó una ejecución de prueba en Heroku CI.   La prueba falló, pero no me preocupé. Sabía que habría que realizar algunas configuraciones en Playwright.  Investigando en el registro de pruebas encontré esto:   Error: browserType.launch: Executable doesn't exist at /app/.cache/ms-playwright/chromium-1140/chrome-linux/chrome  Playwright buscaba la instancia del navegador Chrome.   instalarla con el comando   como parte de mi configuración de prueba de CI. Pero eso anularía el propósito de tener el paquete de compilación de Chrome para pruebas. Chrome ya estaba instalado; solo necesitaba señalarlo correctamente. Podría playwright install chromium  Al volver a mirar mi registro de configuración de pruebas para Heroku, encontré estas líneas:   Installed Chrome dependencies for heroku-24 Adding executables to PATH /app/.chrome-for-testing/chrome-linux64/chrome /app/.chrome-for-testing/chromedriver-linux64/chromedriver Installed Chrome for Testing STABLE version 130.0.6723.91  Entonces, el navegador que quería usar estaba en   . Solo necesitaba que Playwright lo buscara allí. /app/.chrome-for-testing/chrome-linux64/chrome  Cómo ayudar a Playwright a encontrar el navegador Chrome instalado    Si no te interesan los detalles esenciales, puedes omitir esta sección y simplemente copiar el archivo   completo más abajo. Esto debería darte lo que necesitas para comenzar a usar Playwright en Heroku CI. Nota: app.json  En la documentación de Playwright, descubrí que se puede configurar una variable de entorno que le indica a Playwright si se utilizó una   . Esa variable de entorno es   . Decidí comenzar por ahí. ubicación personalizada para todas las instalaciones de su navegador PLAYWRIGHT_BROWSERS_PATH  En   , establezco una variable   como esta: app.json env   { "environments": { "test": { "env": { "PLAYWRIGHT_BROWSERS_PATH": "/app/.chrome-for-testing" }, ...  Subí mi código a GitHub para ver qué pasaría con mis pruebas en CI.  Como era de esperar, volvió a fallar. Sin embargo, el error de registro mostró lo siguiente:   Error: browserType.launch: Executable doesn't exist at /app/.chrome-for-testing/chromium-1140/chrome-linux/chrome  Eso me dejó bastante cerca. Decidí que haría esto:  Cree las carpetas necesarias para el lugar donde Playwright espera que se encuentre el navegador Chrome. Sería un comando como el siguiente:   mkdir -p "$PLAYWRIGHT_BROWSERS_PATH/chromium-1140/chrome-linux"  Crea un enlace simbólico en esta carpeta para apuntar al binario de Chrome instalado por el paquete de compilación de Heroku. Se vería así:   ln -s \ $PLAYWRIGHT_BROWSERS_PATH/chrome-linux64/chrome \ $PLAYWRIGHT_BROWSERS_PATH/chromium-1140/chrome-linux/chrome  Sin embargo, me preocupaba si esto sería a prueba de futuro. Con el tiempo, Playwright usaría una nueva versión de Chromium y ya no se vería como una carpeta   . ¿Cómo podía averiguar dónde buscaría Playwright? chromium-1140  Fue entonces cuando descubrí que se puede realizar una prueba de instalación del navegador.   ~/project$ pnpm playwright install chromium --dry-run browser: chromium version 130.0.6723.31 Install location: /home/alvin/.cache/ms-playwright/chromium-1140 Download url: https://playwright.azureedge.net/builds/chromium/1140/chromium-linux.zip Download fallback 1: https://playwright-akamai.azureedge.net/builds/chromium/1140/chromium-linux.zip Download fallback 2: https://playwright-verizon.azureedge.net/builds/chromium/1140/chromium-linux.zip  La línea “Ubicación de instalación” fue crucial. Y, si configuramos   , esto es lo que veríamos: PLAYWRIGHT_BROWSERS_PATH   ~/project$ PLAYWRIGHT_BROWSERS_PATH=/app/.chrome-for-testing \ pnpm playwright install chromium --dry-run browser: chromium version 130.0.6723.31 Install location: /app/.chrome-for-testing/chromium-1140 ...  Eso es lo que quiero. Con un poco de magia   , hice esto: awk   ~/project$ CHROMIUM_PATH=$( \ PLAYWRIGHT_BROWSERS_PATH=/app/.chrome-for-testing \ pnpm playwright install --dry-run chromium \ | awk '/Install location/ {print $3}' ) ~/project$ echo $CHROMIUM_PATH /app/.chrome-for-testing/chromium-1140  Una vez resuelto todo esto, solo necesitaba agregar un script   a   . Como   ya está configurado en   , mi script sería un poco más simple. Este fue mi archivo   final: test-setup app.json PLAYWRIGHT_BROWSERS_PATH env app.json   { "environments": { "test": { "env": { "PLAYWRIGHT_BROWSERS_PATH": "/app/.chrome-for-testing" }, "buildpacks": [ { "url": "heroku-community/chrome-for-testing" }, { "url": "heroku/nodejs" } ], "scripts": { "test-setup": "CHROMIUM_PATH=$(pnpm playwright install --dry-run chromium | awk '/Install location/ {print $3}'); mkdir -p \"$CHROMIUM_PATH/chrome-linux\"; ln -s $PLAYWRIGHT_BROWSERS_PATH/chrome-lin ux64/chrome $CHROMIUM_PATH/chrome-linux/chrome" } } } }  Explicaré brevemente lo que hace   : test-setup  Teniendo en cuenta   , se utiliza   con   para determinar la carpeta raíz donde Playwright buscará el navegador Chrome. Establece este valor para la variable   . PLAYWRIGHT_BROWSERS_PATH playwright install -- dry-run awk CHROMIUM_PATH  Crea una nueva carpeta (y cualquier carpeta principal necesaria) en   , que es la carpeta real donde Playwright buscará el binario   . CHROMIUM_PATH/chrome-linux chrome  Crea un enlace simbólico en esa carpeta para que Chrome apunte a la instalación del paquete de compilación Heroku de Chrome (   ). /app/.chrome-for-testing/chrome-linux64/chrome  Ejecutar pruebas nuevamente  Con mi archivo   actualizado, Playwright debería poder usar la instalación de Chrome desde el paquete de compilación. Era hora de ejecutar las pruebas una vez más.  app.json  ¡Éxito!  El script   se ejecutó como se esperaba.  test-setup  Playwright pudo acceder al binario   y ejecutar las pruebas, que pasaron.  chrome  Conclusión  Las pruebas de extremo a extremo para mis aplicaciones web se están volviendo menos complicadas, por lo que le estoy dando cada vez más prioridad. En los últimos días, eso ha significado también usar más Playwright. Es flexible y rápido. Y ahora que he hecho el trabajo (¡para mí   !) para ponerlo en funcionamiento con el paquete de compilación Chrome for Testing en Heroku CI, puedo comenzar a desarrollar mis suites de pruebas de automatización del navegador una vez más. y para ti  El código para este tutorial está disponible en mi   . repositorio de GitHub  ¡Feliz codificación!

2022 - HackerNoon Contributor of the Year - Engineering

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Jobs

2022 - HackerNoon Contributor of the Year - Kubernetes

2022 - HackerNoon Contributor of the Year - Npm

2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Jobs

Nominated for 2022 - HackerNoon Contributor of the Year - Npm

Nominated for 2022 - HackerNoon Contributor of the Year - Kubernetes

Nominated for 2022 - HackerNoon Contributor of the Year - Engineering

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Pruebas del navegador Chrome y Playwright en Heroku: una guía para principiantes

Pruebas del navegador Chrome y Playwright en Heroku: una guía para principiantes

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps