Nayax nayratpachaw unidad pruebas ukanakax t’ijt’aski (ukat pasaski) uñch’ukiñax walpun gustitu. Jupanakax jank’akiw sarapxi, ukat yant’äwinakat pasañax sapa mayni chimpunakajax kunjamtix lurañapäki ukhamarjam sarnaqapxi sasaw qhanancht’itu. Ukjamarusti, walja kutiw navegador ukatakix tukuyat tukuykama yant’äwinak nayrar uchañatakix ch’am tukuwayta kunatix qillqañas apnaqañas wali ch’amamp k’achat k’achatänwa.  Wali askiwa, herramientas ukax tukuyat tukuykamaw navegador ukan yant’añatakix juk’amp suma ukat juk’amp jank’akiw maranakanx jilxattawayi. Ukat mä jan p’iqin navegador ukan utt’ayatapampix, navegador ukan yant’äwinakap CI ukan chikanchataw apnaqasispa.  Jichhakiw aka   jikxatasiwaytxa, ukax Heroku CI ukan jan p’iqin Chrome ukamp yant’äwinak navegador ukan automatizacionapatw arsu. Heroku ukax mä buildpack ukampiw utji, ukax Chrome jan p’iqin utjki ukaruw uskt’i, ukax CI pipeline ukan yant’awinakamatakiw jawst’asispa. Heroku blog tuqin qillqt’atax  Blog post ukan uñacht’äwipax mä React app ukawa,   ukat   ukanakamp yant’ata. Ukax mä jach’a qalltawiwa ... ukampis ¿Puppeteer ukat sipans   apnaqañax kamachasmasa? ¿Ukham lurasispati? Puppeteer Jest Playwright uka  Nayajj yatjjatañwa amtawayta. Kunjamtix jikxataski — jïsa, jumax Playwright ukampiw uk lurasma! Ukhama, nayax katjawayta kuna lurawinakas wakisispa Playwright yant’awinak lurañatakix jan p’iqin Chrome navegador Heroku CI ukan apnaqata. Aka post ukanx, wakicht’atäñatakix kunayman thakhinak uñacht’ayapxäma.  Mä Jank’a Aru Automatización de Navegador ukan tukuyat tukuykama yant’añataki  Tukuyat tukuykama yant’awinakax kunjams chiqpachan apnaqirinakax app ukamp mä navegador ukan mayacht’asipxi ukx katjapxi, phuqhat irnaqäw thakhinak chiqanchañataki. Playwright ukax aka lurawix wali ch’amamp luratawa Chrome, Firefox ukat Safari ukan yant’awinakampi. Chiqans, mä phuqhat pizarra de pruebas de navegador CI ukan apnaqañax wali jach’awa, ukatwa jan p’iqin modux yanapt’i.  Heroku ukan   ukax Chrome ukar Heroku app ukar uñt’ayi, ukhamat Playwright yant’äwinakam Heroku CI ukan chiqpachan k’achacht’at wakicht’äwimp apnaqañapataki. Chrome for Testing buildpack  Yant’añataki Aplicación ukar uñt’ayaña  Kunjamakitix nayax jichhakiw aka yant’askäyäta,   . Aplicación ukax mä simple React app ukawa, mä enlace, mä texto entrada ukat mä botón de envío ukampi. Kimsa yantʼanakaw utjäna: GitHub repo ukaruw fork lurawayta ukax qalltanx Heroku blog post ukan referenciatänwa  Uñakipt’aña link ukax irnaqaski ukat chiqa chiqar kutt’ayaraki.  Qillqata uñakipañaxa suma uñacht’ayiwa apnaqiriru mantañapataki.  Formulario uñt’ayañaxa panka uñacht’ayata qillqatanakaxa machaqar tukuyi janicha ukxa chiqapa uñjaña.  Mä suma sapuru. Jichhax, Puppeteer ukat Jest ukanak apnaqañat sipanx Playwright uka apnaqañatakix código mayjt’ayañakiw wakisïna. Oh, ukat nayax npm ukat sipans   apnaqañ munaraktwa. Akax mä link ukawa   ukataki . pnpm uka nayan forked GitHub repo  Código ukar mayjt’ayaña Playwright ukar apnaqañataki  Nayax kuna lurawinakas codigo ukar mayjt’ayañatakix lurawayta ukanak uñakipt’añäni. Nayax forked repo ukampiw qalltawayta,   repo ukampiw kikipa. heroku-examples  Ukax pnpm ukampiw apnaqasi  Nayax npm ukat sipanx pnpm uka apnaqañ munta. (Preferencia personal.) Ukhamajj kuntï nayraqat lurawaykta ukajj akawa:   ~/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  Uka Proyecto ukarux Drama qillqir yapxatañamawa  Ukxarusti, Puppeteer ukat Jest ukanak apsuwaytxa, ukatx Playwright uksaruw yapxatta.   ~/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.  Ukhamarakiw Jest configuración uksanx   ukanx apsuwaytxa. package.json  Playwright ukarux Chromium Only uka apnaqañatakiw wakicht’añama  Playwright yant’awinakax Chrome, Firefox ukat Safari ukanakanw apnaqasispa. Kunjamakitix Chrome ukar uñt’ayawaytwa, ukat yaqha navegadores ukanakax   ukan sección ukan apsuwaytwa, ukax generado   archivo ukankiwa: 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'] }, // }, ], …  Código de prueba de títeres ukax Código de prueba de dramaturgo ukampiw mayjt’ayaña  Nayrïr chimpux Puppeteer yant’äw qillqatanïnwa   . Nayax uka qillqat   ukar apkatawaytwa. Ukatxa, Playwright ukan jach’a tantachäwinakap apnaqañatakiw yant’äw machaqar tukuyta, ukax wali q’umaw mapa uñacht’ayi. Machaq yant’äw qillqatax akham uñtasitänwa: 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); }); });    apsuña , Playwright ukan webServer uka lanti apnaqaña start-server-and-test  React app ukar yant’añatakix nayraqatx mä sapa proceso ukanw (   ukan) muyuntañaw wakisïna, ukatx yant’äwinakax apnaqañjamawa. Ukhamäspawa, Puppeteer jan ukax Playwright uka apnaqasa. Puppeteer ukampixa, Heroku uñacht’awix   paquete apnaqatayna. http://localhost:8080 start-server-and-test  Ukampirus Playwright ukarux app ukar muyuntañapatakiw wakicht’asma janïr yant’äwinak lurañ qalltkasa. ¡Akax wali askiwa!  Nayax proyecto ukanx   ukx apsuwaytwa. start-server-and-test   ~/project$ pnpm remove start-server-and-test    ukanx, webServer uksanx akham uñt’ayasiñatakiw mayjt’ayawayta: 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, },  Ukatxa,   qillqatax   nayrïr qillqatat apsuwaytwa. Ukhamakipansti, yant’äw guionax akham uñt’ayatawa: test:ci package.json  "scripts": { … "test": "playwright test --project=chromium --reporter list" },  Nayan Local Machine Ukan Playwright Browser ukar uñt’ayaña  Playwright ukax qhipa binarios de navegador ukanakaw yant’äwinakapatak apnaqañatakix uñstayi. Ukhama, local maquinajanx Playwright ukax Chromium uka versión ukar uñstayañatakiw munasïna.   ~/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%    Heroku ukan Chrome for Testing buildpack ukax yant’añatak apnaqañ navegador ukar uñt’ayi. Jiwasan CI ukax utt’ayañäni ukhamat Playwright ukax uka navegador uka apnaqañapataki, jan ukax pacha ukat yänakax jupan instalación ukar apst’asiñapataki. Qhanacht’awi:  Yant’awinak Local ukan t’ijt’ayaña  Ukham sasinjja, taqe kunas wakichtʼatäjjänwa. Uka cheqan yantʼanak yantʼañ horasäjjänwa.   ~/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 | });  Saram! Ukax chiqawa. Nayax yant’äwix mayjt’ayawaytwa, app ukan enlace ukax Puppeteer ukan documentación ukar puriyañat sipans Playwright ukan documentación ukar irpañ suyt’añataki. Nayax   ukar 19 chiqan machaqar tukuyañaw wakisïna: src/App.js   <Link href="https://playwright.dev/" rel="noopener"> Playwright Documentation </Link>  Jichhax, yant’äwinak wasitat t’ijtayañ pachaw purinxäna...   ~/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)  ¡Yant’anakax pasawayxänwa! Ukxarusti, Heroku CI ukar mantañ pachaw purinxäna.  Heroku ukar uñt’ayaña CI Pipeline apnaqañataki  Nayax Heroku blog post ukan yatichäwinakap arkta, app ukax Heroku CI pipeline ukan utt’ayañataki.  Mä Heroku Pipeline luraña  Heroku ukanx mä machaq pipeline lurawayta ukatx forked GitHub repo ukaruw uñt’ayawayta.   Ukxarusti, escenificación ukarux app ukar yapxatawayta.   Ukatxa,   sarawayta ukatx   ch’iqt’awayta.  Yant’awinakaruw Enable Heroku CI ukx  Tukuyañatakix,   qillqat mayjt’ayawayta yant’äw qillqat apsuñataki kunatix   jawsañatakiw utt’ayata. Nayax nayratpach   script ukax   qillqatat apsuwaytxa.   ukan   script ukax jichhax apnaqañatakïnwa, ukatx Heroku CI ukax uka script ukarux nayraqat thaqhañapawa. app.json npm test:ci test:ci package.json package.json test  Nayan   qillqatax, ukax Chrome for Testing buildpack uka apnaqañax wali askiwa, ukax akham uñt’ayatawa: app.json   { "environments": { "test": { "buildpacks": [ { "url": "heroku-community/chrome-for-testing" }, { "url": "heroku/nodejs" } ] } } }  Qallta Yant’awi T’ijtäwi  Nayax GitHub ukar código ukar ch’amanchawayta, ukat ukax Heroku CI ukan yant’äw lurañ qalltawayi.   Yantʼäw tʼijuñajj janiw phoqaskänti, ukampis janiw llakisiyätti. Nayax yattwa mä juk’a Configuración de Playwright lurañax utjani.  Yant’äw registro ukan allsusinx akham jikxatawayta:   Error: browserType.launch: Executable doesn't exist at /app/.cache/ms-playwright/chromium-1140/chrome-linux/chrome  Playwright jupax Chrome ukan navegador ukan instanciap thaqhaskäna.     kamachimpiw instalañjama, CI yant’äw wakicht’äwijan chikanchasiñapataki. Ukampis ukax taqpach amtaruw atipt’aspa, Chrome for Testing buildpack ukax utjañapataki. Chrome ukax nayratpach uñstayatawa; Uk sum uñachtʼayañakiw wakisïna. Nayax playwright install chromium  Heroku ukan yant’äw wakicht’äw registro ukar uñakipt’asax aka chimpunak jikxatawayta:   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  Ukhama, navegador ukax apnaqañ munkta ukax   ukankiwa. Nayax Playwright ukaruw ukan thaqhañapatak munasispa. /app/.chrome-for-testing/chrome-linux64/chrome  Playwright ukar yanapt’aña Instalat Chrome Navegador ukar jikxatañataki    Jumatix aka chiqan nitty-gritty detalles ukanakat jan munasksta ukhax aka t’aqaruw jaytasma ukatx mäkiw   phuqhat uñakipt’asma. Ukax kuntix wakiski uk churañamawa, Playwright ukamp Heroku CI ukan sartañataki. Qhanacht’awi: app.json  Playwright ukan qillqatanakapanx jikxatawayta, mä variable de medio ambiente ukar uñt’ayañamawa, ukax Playwright ukarux yatiyarakiw mä   apnaqatawa . Uka env variable ukax   satawa. Ukanwa qalltañ amtawayta. uñt’at uñt’ayawix taqi instalaciones de navegador ukanakatakix PLAYWRIGHT_BROWSERS_PATH    ukanx mä   variable ukham uñt’ayawayta: app.json env   { "environments": { "test": { "env": { "PLAYWRIGHT_BROWSERS_PATH": "/app/.chrome-for-testing" }, ...  Nayax GitHub ukar código ukar ch’amanchawayta, CI ukan yant’äwinakajax kunas pasani uk uñjañataki.  Kunjamtï suykayätanjja, mayampiw jan waltʼayasïna. Ukampirus, registro pantjasiwix akham uñacht’ayi:   Error: browserType.launch: Executable doesn't exist at /app/.chrome-for-testing/chromium-1140/chrome-linux/chrome  Ukaw wali jakʼachasiñatak yanaptʼitäna. Nayajj akham lurañ amtawayta:  Kawkhantix Playwright ukax Chrome ukan navegador ukan utjañap suyki ukatakix wakiskir carpetas ukanakaw lurasi. Ukajj akham mä kamachikïspawa:   mkdir -p "$PLAYWRIGHT_BROWSERS_PATH/chromium-1140/chrome-linux"  Aka carpeta ukanx mä simlink lurañaw Chrome binario ukar uñacht’ayañataki, ukax Heroku buildpack ukan utt’ayatawa. Ukajj akham uñtasitäspawa:   ln -s \ $PLAYWRIGHT_BROWSERS_PATH/chrome-linux64/chrome \ $PLAYWRIGHT_BROWSERS_PATH/chromium-1140/chrome-linux/chrome  Ukampis ukajj jutïrin yanaptʼaspati janicha uka toqetwa llakisiyäta. Qhipharux Playwright ukax machaq versión Chromium uka apnaqañapawa, ukatx janiw mä carpeta   ukar uñtasitäxaspänti. ¿Kunjamatsa Drama qillqirix kawkhans uñch’ukispa uk amuyt’iristxa? chromium-1140  Ukapachaw nayax jikxatawayta mä navegador instalación dry run lurañjama.   ~/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  Uka “Instalar ubicación” línea ukax wali wakiskiriwa. Ukat,   uñt’ayañäni ukhaxa, akax kuntix uñjsna ukawa: 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 ...  Ukaw nayajj munta. Mä juk’a   magiampiw akham lurawayta: 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  Taqi ukanak amuyt’asax, mä   script   ukar yapxatañakiw wakisïna. Kunatix   ukax   ukan utt’ayatawa, script ukax mä juk’a sapurukïspawa. Akax qhipa   qillqataxänwa: 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" } } } }  Mä juk’a pachax kuntix   luraski ukanak uñakipt’añäni: test-setup    ukat cuentas ,   with   saphi carpeta uñt’añataki kawkhantix Playwright ukax Chrome uñakipirir thaqhani. Ukax   uka mayjt’ayir chimpunakjam uñt’ayatawa. PLAYWRIGHT_BROWSERS_PATH playwright install -- dry-run awk CHROMIUM_PATH  Mä machaq carpeta (ukat kuna wakiskir awki carpetas)   ukar luraña, ukax chiqpach carpeta ukawa kawkhantix Playwright ukax   binario ukar thaqhani. CHROMIUM_PATH/chrome-linux chrome  Uka carpeta ukan mä símbolo uñstayi Chrome ukan Heroku buildpack ukan instalación ukar uñacht’ayañataki (   ). /app/.chrome-for-testing/chrome-linux64/chrome  Yant’awinak Mayamp t’ijt’ayaña  Nayan machaq   qillqatajampixa, Playwright ukax Chrome ukan instalación ukax buildpack ukan apnaqañapawa. Mä kutimpiw yantʼanak tʼijtʼañ horasäjjäna.  app.json  Kusapana!    script ukax kunjamtix suyapkän ukhamarjamaw t’ijtäna.  test-setup  Drama qillqirix binario   ukar mantañ atipxatayna ukat yant’awinak apnaqañ atipxatayna, ukax pasawayiwa.  chrome  Tukuyawi  Nayan web ukan aplicacionanakajatak tukuyat tukuykam yant’awinakax juk’amp ch’amäxiwa, ukatwa juk’amp nayrar sartayañax utji. Aka qhipa urunakanx ukax Playwright ukar juk’amp apnaqañaw sañ munaraki. Ukax flexible ukat rápido ukhamawa. Ukat jichhax lurawinak lurawayta (nayataki   !) Chrome for Testing buildpack ukamp Heroku CI ukan sartayañataki, ukatx mä kutimpiw suites de prueba de automatización de navegador ukar lurañ qalltasma. ukhamarak jumataki  Aka thakhi saräwitak código ukax   utji . GitHub ukan imañ utajan  ¡Kusisiña codificación ukampi!

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

¡Aka audiox sarnaqäwin nayrïr arut luratawa!

Sinti jaya pachanakawa; Uñxatt’añataki

Make resilience your competitive advantage

Heroku ukan dramaturgo ukat Chrome Navegador ukan yant’awipa: Qalltirinakatakix mä guia

Heroku ukan dramaturgo ukat Chrome Navegador ukan yant’awipa: Qalltirinakatakix mä guia

About Author

AKHAM LURASMA

HANG TAGS ukax mä juk’a pachanakanwa

AKA ARTÍCULO UKHAMARAKI UKHAMARAKI

Related Stories

Your Most Frequently Asked HackerNoon Questions, answered by a Shakespearean Bot

Your Most Frequently Asked HackerNoon Questions, answered by a Shakespearean Bot

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps