Testimi i dramaturgut dhe i shfletuesit Chrome në Heroku: Një udhëzues fillestar

Gjithmonë më ka pëlqyer të shikoj testet e njësisë sime të ekzekutohen (dhe të kalojnë). Ata janë të shpejtë dhe kalimi i testeve më jep sigurinë se pjesët e mia individuale sillen ashtu siç duhet. Anasjelltas, shpesh kam luftuar për t'i dhënë përparësi testeve nga fundi në fund për shfletuesin, sepse shkrimi dhe ekzekutimi i tyre ishte jashtëzakonisht i ngadalshëm.

Për fat të mirë, mjetet për testimin nga fundi në fund në shfletues janë bërë shumë më të mirë dhe më të shpejtë me kalimin e viteve. Dhe me një konfigurim të shfletuesit pa kokë, unë mund të ekzekutoj testet e shfletuesit tim si pjesë e CI-së sime.

Kohët e fundit, hasa në këtë postim në blog të Heroku që fliste për automatizimin e testimit në shfletues me Chrome pa kokë brenda Heroku CI. Heroku ka një buildpack që instalon Chrome pa kokë, të cilin mund ta përdorni për testet tuaja në tubacionin CI.

Rregullimi i shembullit nga postimi në blog ishte një aplikacion React i testuar me Puppeteer dhe Jest . Ky është një fillim i mrekullueshëm… por çka nëse përdor Dramaturg në vend të Puppeteer? A është e mundur?

Vendosa të hetoj. Siç rezulton - po, ju mund ta bëni këtë edhe me Dramaturg! Pra, kam kapur hapat që ju nevojiten për të ekzekutuar testet e Playwright në shfletuesin pa kokë Chrome të përdorur në Heroku CI. Në këtë postim, unë do t'ju përshkruaj hapat për t'u konfiguruar.

Një fjalë e shpejtë mbi automatizimin e shfletuesit për testimin nga fundi në fund

Testimi nga fundi në fund kap se si përdoruesit në të vërtetë ndërveprojnë me aplikacionin tuaj në një shfletues, duke vërtetuar rrjedhat e plota të punës. Playwright e bën këtë proces mjaft të qetë me testimin në Chrome, Firefox dhe Safari. Natyrisht, ekzekutimi i një sprove të plotë të testeve të shfletuesit në CI është mjaft i rëndë, kjo është arsyeja pse modaliteti pa kokë ndihmon.

Paketa e ndërtimit Chrome për Testim nga Heroku instalon Chrome në një aplikacion Heroku, kështu që ju mund të kryeni testet tuaja të Dramaturgut në Heroku CI me një konfigurim vërtet të lehtë.

Hyrje në Aplikacionin për Testim

Meqenëse sapo po e provoja këtë, unë forcova depon e GitHub që fillimisht ishte referuar në postimin e blogut Heroku. Aplikacioni ishte një aplikacion i thjeshtë React me një lidhje, një hyrje teksti dhe një buton dërgimi. Kishte tre teste:

1. Verifikoni që lidhja funksionon dhe ridrejtohet në vendndodhjen e duhur.
2. Verifikoni që futja e tekstit të shfaq si duhet hyrjen e përdoruesit.
3. Verifikoni që dërgimi i formularit përditëson tekstin e shfaqur në faqe.

Mjaft e thjeshtë. Tani, më duhej të ndryshoja kodin për të përdorur "Playwright" në vend të "Puppeteer" dhe "Jest". Oh, dhe unë gjithashtu doja të përdorja pnpm në vend të npm. Këtu është një lidhje me depon time të pirun GitHub .

Ndrysho kodin për të përdorur dramaturg

Le të ecim nëpër hapat që bëra për të modifikuar kodin. Fillova me depon time të pirun, identike me repon heroku-examples .

Përdorni pnpm

Doja të përdorja pnpm në vend të npm. (Preferenca personale.) Pra, ja çfarë bëra në fillim:

 ~/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

Shto dramaturg në projekt

Më pas, hoqa Puppeteer dhe Jest, dhe shtova Dramaturg.

 ~/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.

Hoqa gjithashtu seksionin e konfigurimit Jest nga package.json .

Konfiguro Playwright për të përdorur vetëm Chromium

Ju mund të kryeni testet tuaja të Dramaturgut në Chrome, Firefox dhe Safari. Meqenëse u fokusova në Chrome, hoqa shfletuesit e tjerë nga seksioni i projects të skedarit të krijuar 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'] }, // }, ], …

Shkëmbeni kodin e testit të kukullave me kodin e testit të dramaturgut

Kodi origjinal kishte një skedar testimi Puppeteer në src/tests/puppeteer.test.js . E zhvendosa atë skedar te tests/playwright.spec.js . Më pas, e përditësova testin për të përdorur konventat e Dramaturgut, të cilat përshkruheshin mjaft qartë. Skedari i ri i testimit dukej kështu:

 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); }); });

Hiq start-server-and-test , duke përdorur në vend të kësaj serverin e internetit të Playwright

Për të testuar aplikacionin tim React, më duhej ta rrotulloja atë (në http://localhost:8080 ) në një proces të veçantë fillimisht dhe më pas mund të ekzekutoja testet e mia. Ky do të ishte rasti nëse kam përdorur Puppeteer apo Dramaturg. Me Puppeteer, shembulli Heroku përdori paketën start-server-and-test .

Sidoqoftë, mund të konfiguroni Playwright që të rrotullojë aplikacionin përpara se të ekzekutojë testet. Kjo është mjaft e përshtatshme!

Unë hoqa start-server-and-test nga projekti im.

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

Në playwright.config.js , unë hoqa nga komenti seksionin webServer në fund, duke e modifikuar që të duket kështu:

 /* Run your local dev server before starting the tests */ webServer: { command: 'pnpm start', url: 'http://127.0.0.1:8080', reuseExistingServer: !process.env.CI, },

Më pas, hoqa skriptin test:ci nga skedari origjinal package.json . Në vend të kësaj, skenari im i testit dukej kështu:

 "scripts": { … "test": "playwright test --project=chromium --reporter list" },

Instaloni shfletuesin Playwright në makinën time lokale

Playwright instalon binarët më të fundit të shfletuesit për t'i përdorur për testet e tij. Pra, në makinën time lokale, më duhej Playwright për të instaluar versionin e tij të 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%

Shënim: Buildpack Chrome for Testing në Heroku instalon shfletuesin që do të përdorim për testim. Ne do të konfigurojmë CI-në tonë në mënyrë që Playwright të përdorë atë shfletues në vend që të shpenzojë kohën dhe burimet duke instaluar të vetin.

Ekzekutoni testet në nivel lokal

Me këtë, isha gati. Ishte koha për të provuar testet e mia në nivel lokal.

 ~/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! Kjo është e drejtë. E modifikova testin tim për të pritur që lidhja në aplikacion të më çojë te dokumentacioni i Playwright në vend të atij të Puppeteer. Më duhej të përditësoja src/App.js në rreshtin 19:

 <Link href="https://playwright.dev/" rel="noopener"> Playwright Documentation </Link>

Tani, ishte koha për të kryer përsëri testet…

 ~/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)

Testet kaluan! Më pas, ishte koha për të na futur në Heroku CI.

Vendoseni në Heroku për të përdorur tubacionin CI

Kam ndjekur udhëzimet në postimin e blogut Heroku për të vendosur aplikacionin tim në një tubacion Heroku CI.

Krijo një tubacion Heroku

Në Heroku, unë krijova një tubacion të ri dhe e lidha atë me depon time të pirun GitHub.

Më pas, shtova aplikacionin tim në skenë.

Më pas, shkova te skeda Testet dhe klikova Aktivizo Heroku CI .

Më në fund, modifikova skedarin app.json për të hequr skriptin e testimit i cili ishte caktuar të thërriste npm test:ci . Unë e kisha hequr tashmë test:ci nga skedari im package.json . Skripti test në package.json ishte tani ai që përdorej dhe Heroku CI do ta kërkonte atë si parazgjedhje.

Skedari im app.json , i cili sigurohej të përdorte paketën e ndërtimit të Chrome për Testim, dukej kështu:

 { "environments": { "test": { "buildpacks": [ { "url": "heroku-community/chrome-for-testing" }, { "url": "heroku/nodejs" } ] } } }

Ekzekutimi fillestar i testit

E shtyva kodin tim te GitHub dhe kjo shkaktoi një test test në Heroku CI.

Testi dështoi, por nuk u shqetësova. E dija që do të kishte disa konfigurime të Dramaturgut për të bërë.

Duke gërmuar në regjistrin e provës, gjeta këtë:

 Error: browserType.launch: Executable doesn't exist at /app/.cache/ms-playwright/chromium-1140/chrome-linux/chrome

Dramaturgu po kërkonte shembullin e shfletuesit Chrome. Mund ta instaloja me komandën playwright install chromium si pjesë e konfigurimit tim të testit CI. Por kjo do të shkatërronte të gjithë qëllimin e të paturit të paketës së ndërtimit të Chrome për Testim. Chrome ishte instaluar tashmë; Thjesht më duhej ta tregoja siç duhet.

Duke parë përsëri regjistrin tim të konfigurimit të testit për Heroku, gjeta këto rreshta:

 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

Pra, shfletuesi që doja të përdorja ishte në /app/.chrome-for-testing/chrome-linux64/chrome . Do të më duhej vetëm dramaturgu që ta kërkonte atje.

Ndihma e dramaturgut të gjejë shfletuesin e instaluar Chrome

Shënim: Nëse nuk ju interesojnë detajet e mprehta këtu, mund ta kapërceni këtë seksion dhe thjesht të kopjoni të plotë app.json poshtë. Kjo duhet t'ju japë atë që ju nevojitet për të ngritur dhe punuar me Playwright në Heroku CI.

Në dokumentacionin e Playwright, zbulova se mund të vendosni një variabël mjedisi që i tregon Playwright nëse keni përdorur një vendndodhje të personalizuar për të gjitha instalimet e shfletuesit të tij . Kjo ndryshore env është PLAYWRIGHT_BROWSERS_PATH . Vendosa të filloj atje.

Në app.json , vendosa një variabël env si kjo:

 { "environments": { "test": { "env": { "PLAYWRIGHT_BROWSERS_PATH": "/app/.chrome-for-testing" }, ...

E shtyva kodin tim te GitHub për të parë se çfarë do të ndodhte me testet e mia në CI.

Siç pritej, dështoi përsëri. Sidoqoftë, gabimi i regjistrit tregoi këtë:

 Error: browserType.launch: Executable doesn't exist at /app/.chrome-for-testing/chromium-1140/chrome-linux/chrome

Kjo më afroi shumë. Vendosa të bëja këtë:

• Krijo dosjet e nevojshme për vendin ku Playwright pret të jetë shfletuesi Chrome. Kjo do të ishte një komandë si:

 mkdir -p "$PLAYWRIGHT_BROWSERS_PATH/chromium-1140/chrome-linux"

• Krijo një lidhje simbolike në këtë dosje për të treguar binarin e Chrome të instaluar nga buildpack Heroku. Kjo do të dukej diçka si kjo:

 ln -s \ $PLAYWRIGHT_BROWSERS_PATH/chrome-linux64/chrome \ $PLAYWRIGHT_BROWSERS_PATH/chromium-1140/chrome-linux/chrome

Megjithatë, isha i shqetësuar nëse kjo do të ishte e qëndrueshme për të ardhmen. Përfundimisht, Playwright do të përdorte një version të ri të Chromium dhe nuk do të dukej më si një dosje chromium-1140 . Si mund ta kuptoja se ku do të dukej dramaturgu?

Pikërisht atëherë zbulova se mund të kryeni një instalim të thatë të shfletuesit.

 ~/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

Kjo linjë "Instaloni vendndodhjen" ishte vendimtare. Dhe, nëse vendosim PLAYWRIGHT_BROWSERS_PATH , ja çfarë do të shihnim:

 ~/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 ...

Kjo është ajo që unë dua. Me një magji awk vogël, bëra këtë:

 ~/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

Me gjithë këtë, më duhej thjesht të shtoja një skript test-setup në app.json . Për shkak se PLAYWRIGHT_BROWSERS_PATH është vendosur tashmë në env , skenari im do të ishte pak më i thjeshtë. Ky ishte skedari im i fundit 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" } } } }

Do të tregoj shkurtimisht se çfarë bën test-setup :

1. Duke llogaritur për PLAYWRIGHT_BROWSERS_PATH , përdor playwright install -- dry-run me awk për të përcaktuar dosjen rrënjësore ku Playwright do të kërkojë shfletuesin Chrome. E vendos këtë si vlerë për ndryshoren CHROMIUM_PATH .

   
   

2. Krijon një dosje të re (dhe çdo dosje të nevojshme prind) në CHROMIUM_PATH/chrome-linux , e cila është dosja aktuale ku Playwright do të kërkojë binarin chrome .

   
   

3. Krijon një lidhje simbolike në atë dosje për Chrome për të treguar instalimin e paketës së ndërtimit Heroku të Chrome ( /app/.chrome-for-testing/chrome-linux64/chrome ).

Ekzekutoni përsëri testet

Me skedarin tim të përditësuar app.json , Playwright duhet të jetë në gjendje të përdorë instalimin e Chrome nga buildpack. Ishte koha për të kryer testet edhe një herë.

Suksese!

Skripti test-setup funksionoi siç pritej.

Dramaturgu ishte në gjendje të hynte në binarin chrome dhe të ekzekutonte testet, të cilat kaluan.

konkluzioni

Testimi nga fundi në fund për aplikacionet e mia në ueb po bëhet më pak i rëndë, kështu që unë po i jap përparësi gjithnjë e më shumë. Ditët e fundit, kjo ka nënkuptuar që të përdoret më shumë edhe Dramaturgu. Është fleksibël dhe i shpejtë. Dhe tani që kam bërë punën (për mua dhe për ju !) për ta vënë atë në funksion me buildpack-in e Chrome për Testim në Heroku CI, mund të filloj edhe një herë të krijoj paketat e mia të testimit të automatizimit të shfletuesit.

Kodi për këtë udhëzim është i disponueshëm në depon time të GitHub .

Gëzuar kodimin!