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

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 pòs blog Heroku 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.

Egzanp konfigirasyon ki soti nan pòs blog la se te yon aplikasyon React teste ak Puppeteer ak Jest . Sa a se yon bon kòmansman ... men e si mwen itilize Dramatè olye de Marionèt? Èske li posib?

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.

Chrome for Testing buildpack 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è.

Entwodiksyon Aplikasyon pou Tès

Depi mwen te jis ap eseye sa a soti, mwen fouchèt GitHub repo a ki te orijinèlman referans 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:

1. Verifye ke lyen an ap travay ak redireksyon nan bon kote.
2. Verifye ke opinyon tèks la byen montre opinyon itilizatè a.
3. 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 pnpm olye de npm. Men yon lyen ki mennen nan 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 heroku-examples yo.

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 [email protected] 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 projects yo nan dosye playwright.config.js ki te pwodwi a:

 /* 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 src/tests/puppeteer.test.js . Mwen deplase dosye sa a nan tests/playwright.spec.js . 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:

 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 start-server-and-test , Sèvi ak WebServer Playwright la pito

Pou teste aplikasyon React mwen an, mwen te bezwen vire li (nan http://localhost:8080 ) 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 start-server-and-test la.

Sepandan, ou ka configured Playwright pou vire aplikasyon an anvan ou fè tès yo. Sa a se trè pratik!

Mwen retire start-server-and-test nan pwojè mwen an.

 ~/project$ pnpm remove start-server-and-test

Nan playwright.config.js , mwen dekomantè seksyon WebServer nan pati anba a, modifye li pou gade tankou sa a:

 /* 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 test:ci script la nan fichye package.json orijinal la. Olye de sa, script tès mwen an te sanble ak sa a:

 "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%

Remak: 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.

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 src/App.js nan liy 19:

 <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 Tès epi klike Pèmèt Heroku CI .

Finalman, mwen modifye fichye app.json pou retire script tès la ki te mete pou rele npm test:ci . Mwen te deja retire script test:ci a nan fichye package.json mwen an. Script test la nan package.json se kounye a youn nan yo itilize, ak Heroku CI ta gade pou yon sèl pa default.

Fichye app.json mwen an, ki te asire w ke ou sèvi ak Chrome for Testing buildpack, te sanble ak sa a:

 { "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 te kapab enstale li ak kòmand playwright install chromium 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.

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 /app/.chrome-for-testing/chrome-linux64/chrome . Mwen ta jis bezwen Dramatè gade la pou li.

Ede dramaturge jwenn navigatè Chrome enstale a

Remak: Si w pa enterese nan detay ki pi enpòtan yo isit la, ou ka sote seksyon sa a epi tou senpleman kopye plen app.json anba a. Sa a ta dwe ba ou sa ou bezwen pou leve kanpe ak kouri ak Dramatè sou Heroku CI.

Nan dokiman Playwright a, mwen te jwenn ke ou ka mete yon varyab anviwònman ki di Playwright si ou te itilize yon kote koutim pou tout enstale navigatè li yo . Varyab env sa a se PLAYWRIGHT_BROWSERS_PATH . Mwen deside kòmanse la.

Nan app.json , mwen mete yon varyab env tankou sa a:

 { "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 chromium-1140 ankò. Ki jan mwen ta ka konnen ki kote Dramatè ta gade?

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 PLAYWRIGHT_BROWSERS_PATH , men sa nou ta wè:

 ~/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 awk , mwen te fè sa:

 ~/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 test-setup nan app.json . Paske PLAYWRIGHT_BROWSERS_PATH deja mete nan env , script mwen an ta yon ti kras pi senp. Sa a te dosye final app.json mwen an:

 { "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 test-setup fè:

1. Kontablite pou PLAYWRIGHT_BROWSERS_PATH , sèvi ak playwright install -- dry-run ak awk pou detèmine dosye rasin kote Playwright pral chèche navigatè Chrome a. Mete sa a kòm valè pou varyab CHROMIUM_PATH la.

   
   

2. Kreye yon nouvo katab (ak nenpòt ki dosye paran ki nesesè yo) nan CHROMIUM_PATH/chrome-linux , ki se katab aktyèl la kote Dramatik ap chèche binè chrome a.

   
   

3. 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 app.json 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ò.

Siksè!

Script test-setup la te kouri jan yo espere.

Otè te kapab jwenn aksè nan binè chrome a epi kouri tès yo, ki te pase.

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 menm ak pou ou !) 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ò.

Kòd pou pwosedi sa a disponib nan depo GitHub mwen an.

Ala bon sa bon kodaj!