Mwen te toujou renmen gade tès inite mwen yo kouri (ak pase). Yo rapid, epi pase tès yo ban mwen asirans ke moso endividyèl mwen yo konpòte yo tankou yo sipoze. Kontrèman, mwen souvan plede bay priyorite tès fen-a-fen pou navigatè a paske ekri ak kouri yo te fatigan ralanti.  Erezman, zouti yo pou tès bout-a-fen nan navigatè yo te vinn pi bon ak pi vit pandan ane yo. Ak yon konfigirasyon navigatè san tèt, mwen ka fè tès navigatè mwen an kòm yon pati nan CI mwen an.  Dènyèman, mwen te rankontre   sa a k ap pale de otomatize tès nan navigatè a ak Chrome san tèt nan Heroku CI. Heroku gen yon buildpack ki enstale Chrome san tèt, ke ou ka envoke pou tès ou yo nan tiyo CI a. pòs blog Heroku  Egzanp konfigirasyon ki soti nan pòs blog la se te yon aplikasyon React teste ak   ak   . Sa a se yon bon kòmansman ... men e si mwen itilize   olye de Marionèt? Èske li posib? Puppeteer Jest Dramatè  Mwen deside envestige. Kòm li vire soti - wi, ou ka fè sa ak Dramatè tou! Se konsa, mwen te kaptire etap sa yo ou ta bezwen jwenn tès Teyatr ap kouri sou navigatè Chrome san tèt yo itilize nan Heroku CI. Nan pòs sa a, mwen pral fè ou nan etap sa yo pou mete kanpe.  Yon Pawòl Rapid sou Otomatik Navigatè pou Tès fen-a-fen  Tès fen-a-fen kaptire ki jan itilizatè yo aktyèlman kominike avèk app ou a nan yon navigatè, valide workflows konplè. Dramatik fè pwosesis sa a trè san pwoblèm ak tès nan Chrome, Firefox, ak Safari. Natirèlman, kouri yon adwaz konplè nan tès navigatè nan CI se trè lou, ki se poukisa mòd san tèt ede.    soti nan Heroku enstale Chrome sou yon app Heroku, konsa ou ka fè tès Playwright ou yo nan Heroku CI ak yon konfigirasyon ki vrèman lejè. Chrome for Testing buildpack  Entwodiksyon Aplikasyon pou Tès  Depi mwen te jis ap eseye sa a soti, mwen fouchèt   nan pòs la Heroku blog. Aplikasyon an se te yon senp aplikasyon React ak yon lyen, yon antre tèks, ak yon bouton soumèt. Te gen twa tès: GitHub repo a ki te orijinèlman referans  Verifye ke lyen an ap travay ak redireksyon nan bon kote.  Verifye ke opinyon tèks la byen montre opinyon itilizatè a.  Verifye ke lè w soumèt fòm nan mete ajou tèks ki parèt sou paj la.  Assez senp. Kounye a, mwen jis te bezwen chanje kòd la pou m sèvi ak Dramatè olye de Marionèt ak Jest. Oh, e mwen te vle tou sèvi ak   olye de npm. Men yon lyen ki mennen nan   . pnpm repo GitHub forked mwen an  Modifye kòd la pou itilize otè dramatik  Ann mache nan etap mwen te fè pou m modifye kòd la. Mwen te kòmanse ak repo fouchèt mwen an, ki idantik ak repo   yo. heroku-examples  Sèvi ak pnpm  Mwen te vle sèvi ak pnpm olye de npm. (Preferans pèsonèl.) Se konsa, men sa mwen te fè premye:   ~/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  Ajoute otè nan pwojè a  Apre sa, mwen retire Marionèt ak Jest, epi mwen te ajoute Dramatè.   ~/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.  Mwen tou retire seksyon konfigirasyon Jest nan   . package.json  Konfigure Playwright pou itilize Chromium sèlman  Ou ka fè tès Dramatè ou yo nan Chrome, Firefox, ak Safari. Depi mwen te konsantre sou Chrome, mwen retire lòt navigatè yo nan seksyon   yo nan dosye   ki te pwodwi a: 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'] }, // }, ], …  Echanje kòd tès marionèt la pou kòd tès otè a  Kòd orijinal la te gen yon dosye tès Puppeteer nan   . Mwen deplase dosye sa a nan   . Lè sa a, mwen mete ajou tès la pou m itilize konvansyon Dramatè a, ki te trase byen pwòp. Nouvo dosye tès la te sanble ak sa a: 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); }); });  Retire   , Sèvi ak WebServer Playwright la pito start-server-and-test  Pou teste aplikasyon React mwen an, mwen te bezwen vire li (nan   ) nan yon pwosesis separe an premye, epi Lè sa a, mwen te kapab kouri tès mwen yo. Sa a ta ka a si mwen te itilize marionèt oswa otè. Avèk Puppeteer, egzanp Heroku a te itilize pake   la. http://localhost:8080 start-server-and-test  Sepandan, ou ka configured Playwright pou vire aplikasyon an anvan ou fè tès yo. Sa a se trè pratik!  Mwen retire   nan pwojè mwen an. start-server-and-test   ~/project$ pnpm remove start-server-and-test  Nan   , mwen dekomantè seksyon WebServer nan pati anba a, modifye li pou gade tankou sa a: 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, },  Apre sa, mwen retire   script la nan fichye   orijinal la. Olye de sa, script tès mwen an te sanble ak sa a: test:ci package.json  "scripts": { … "test": "playwright test --project=chromium --reporter list" },  Enstale navigatè Playwright sou machin lokal mwen an  Dramatè enstale dènye binè navigatè yo pou itilize pou tès li yo. Se konsa, sou machin lokal mwen an, mwen te bezwen Playwright enstale vèsyon li nan 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%    Chrome for Testing buildpack sou Heroku enstale navigatè a nou pral itilize pou tès la. Nou pral mete CI nou an pou Playwright sèvi ak navigatè sa a olye pou yo depanse tan ak resous yo enstale pwòp li yo. Remak:  Kouri Tès lokalman  Avèk sa, mwen te tout fikse. Li te tan pou eseye tès mwen yo lokalman.   ~/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 | });  Oh! Se vre. Mwen modifye tès mwen an pou mwen espere lyen ki nan app a mennen m 'nan dokiman Dramatè a olye pou yo ale nan dokiman Marionèt la. Mwen te bezwen mete ajou   nan liy 19: src/App.js   <Link href="https://playwright.dev/" rel="noopener"> Playwright Documentation </Link>  Koulye a, li te tan yo kouri tès yo ankò ...   ~/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)  Tès yo pase! Apre sa, li te tan fè nou sou Heroku CI.  Deplwaye nan Heroku pou itilize CI Pipeline  Mwen te swiv enstriksyon yo nan pòs blog Heroku a pou mete aplikasyon mwen an nan yon tiyo Heroku CI.  Kreye yon tiyo Heroku  Nan Heroku, mwen te kreye yon nouvo tiyo epi konekte li nan repo GitHub forked mwen an.   Apre sa, mwen te ajoute aplikasyon mwen an nan staging.   Lè sa a, mwen te ale nan tab la   epi klike   .  Tès Pèmèt Heroku CI  Finalman, mwen modifye fichye   pou retire script tès la ki te mete pou rele   . Mwen te deja retire script   a nan fichye   mwen an. Script   la nan   se kounye a youn nan yo itilize, ak Heroku CI ta gade pou yon sèl pa default. app.json npm test:ci test:ci package.json test package.json  Fichye   mwen an, ki te asire w ke ou sèvi ak Chrome for Testing buildpack, te sanble ak sa a: app.json   { "environments": { "test": { "buildpacks": [ { "url": "heroku-community/chrome-for-testing" }, { "url": "heroku/nodejs" } ] } } }  Premye tès kouri  Mwen te pouse kòd mwen an nan GitHub, e sa te deklanche yon tès kouri nan Heroku CI.   Egzamen an te echwe, men mwen pa t enkyete. Mwen te konnen ta gen kèk konfigirasyon otè pou fè.  Fouye nan jounal tès la, mwen jwenn sa a:   Error: browserType.launch: Executable doesn't exist at /app/.cache/ms-playwright/chromium-1140/chrome-linux/chrome  Otè dramatik t ap chèche egzanp navigatè Chrome a. Mwen   enstale li ak kòmand   kòm yon pati nan konfigirasyon tès CI mwen an. Men, sa ta defèt tout objektif la nan gen Chrome pou Tès buildpack la. Chrome te deja enstale; Mwen jis bezwen montre li byen. te kapab playwright install chromium  Lè m gade dèyè nan jounal konfigirasyon tès mwen an pou Heroku, mwen te jwenn liy sa yo:   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  Se konsa, navigatè a mwen te vle itilize te nan   . Mwen ta jis bezwen Dramatè gade la pou li. /app/.chrome-for-testing/chrome-linux64/chrome  Ede dramaturge jwenn navigatè Chrome enstale a    Si w pa enterese nan detay ki pi enpòtan yo isit la, ou ka sote seksyon sa a epi tou senpleman kopye plen   anba a. Sa a ta dwe ba ou sa ou bezwen pou leve kanpe ak kouri ak Dramatè sou Heroku CI. Remak: app.json  Nan dokiman Playwright a, mwen te jwenn ke ou ka mete yon varyab anviwònman ki di Playwright si ou te itilize yon   . Varyab env sa a se   . Mwen deside kòmanse la. kote koutim pou tout enstale navigatè li yo PLAYWRIGHT_BROWSERS_PATH  Nan   , mwen mete yon varyab   tankou sa a: app.json env   { "environments": { "test": { "env": { "PLAYWRIGHT_BROWSERS_PATH": "/app/.chrome-for-testing" }, ...  Mwen pouse kòd mwen an nan GitHub pou wè sa ki ta rive ak tès mwen yo nan CI.  Kòm espere, li echwe ankò. Sepandan, erè boutèy la te montre sa a:   Error: browserType.launch: Executable doesn't exist at /app/.chrome-for-testing/chromium-1140/chrome-linux/chrome  Sa te fè m byen pre. Mwen deside ke mwen ta fè sa:  Kreye dosye ki nesesè pou kote Playwright espere navigatè Chrome a. Sa ta yon kòmandman tankou:   mkdir -p "$PLAYWRIGHT_BROWSERS_PATH/chromium-1140/chrome-linux"  Kreye yon lyen senbolik nan katab sa a pou montre binè Chrome enstale pa Heroku buildpack la. Sa ta sanble yon bagay tankou sa a:   ln -s \ $PLAYWRIGHT_BROWSERS_PATH/chrome-linux64/chrome \ $PLAYWRIGHT_BROWSERS_PATH/chromium-1140/chrome-linux/chrome  Sepandan, mwen te konsène sou si sa a ta dwe prèv lavni. Evantyèlman, dramaturge ta sèvi ak yon nouvo vèsyon Chromium, epi li pa ta sanble ak yon katab   ankò. Ki jan mwen ta ka konnen ki kote Dramatè ta gade? chromium-1140  Sa a lè mwen te dekouvri ou ka fè yon enstalasyon navigatè kouri sèk.   ~/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  Liy "Enstale kote" sa a te kritik. Epi, si nou mete   , men sa nou ta wè: 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 ...  Se sa mwen vle. Avèk yon ti maji   , mwen te fè sa: 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  Avèk tout sa ki kalkile, mwen tou senpleman te bezwen ajoute yon script   nan   . Paske   deja mete nan   , script mwen an ta yon ti kras pi senp. Sa a te dosye final   mwen an: 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" } } } }  Mwen pral yon ti tan mache nan sa   fè: test-setup  Kontablite pou   , sèvi ak   ak   pou detèmine dosye rasin kote Playwright pral chèche navigatè Chrome a. Mete sa a kòm valè pou varyab   la. PLAYWRIGHT_BROWSERS_PATH playwright install -- dry-run awk CHROMIUM_PATH  Kreye yon nouvo katab (ak nenpòt ki dosye paran ki nesesè yo) nan   , ki se katab aktyèl la kote Dramatik ap chèche binè   a. CHROMIUM_PATH/chrome-linux chrome  Kreye yon lyen senbolik nan katab sa a pou Chrome lonje dwèt sou enstalasyon Heroku buildpack Chrome (   ). /app/.chrome-for-testing/chrome-linux64/chrome  Kouri Tès Ankò  Avèk fichye   mete ajou mwen an, Playwright ta dwe kapab itilize enstalasyon Chrome nan buildpack la. Li te tan yo kouri tès yo yon lòt fwa ankò.  app.json  Siksè!  Script   la te kouri jan yo espere.  test-setup  Otè te kapab jwenn aksè nan binè   a epi kouri tès yo, ki te pase.  chrome  Konklizyon  Tès bout-a-fen pou aplikasyon entènèt mwen an ap vin mwens ankonbran, kidonk mwen bay li priyorite pi plis ak plis. Nan jou ki sot pase yo, sa te vle di itilize Dramatè plis tou. Li fleksib ak vit. Epi kounye a ke mwen te fè travay la (pou mwen   !) Pou jwenn li moute ak kouri ak Chrome for Testing buildpack nan Heroku CI, mwen ka kòmanse bati suite tès automatisation navigatè mwen an yon lòt fwa ankò. menm ak pou ou  Kòd pou pwosedi sa a disponib nan   mwen an. depo GitHub  Ala bon sa bon kodaj!

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

Odyo sa a pwodui nan lang orijinal istwa a!

Twò lontan; Pou li

Make resilience your competitive advantage

Tès otè ak navigatè Chrome nan Heroku: Gid pou yon debutan

Tès otè ak navigatè Chrome nan Heroku: Gid pou yon debutan

About Author

KÒMANtè

KANDYE TAGS

ATIK SA A TE PREZANTE NAN

Related Stories

Meet Fastex: HackerNoon Company of the Week

HackerNoon Contributor Nikita Vasilev on Programming, Python, and More

Women in Cybersecurity with SheSec Pakistan on The HackerNoon Podcast

How To Clone Hackernoon HTML Page

Meet Fastex: HackerNoon Company of the Week

HackerNoon Contributor Nikita Vasilev on Programming, Python, and More

Women in Cybersecurity with SheSec Pakistan on The HackerNoon Podcast

How To Clone Hackernoon HTML Page

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps