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ë   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. postim në blog të Heroku  Rregullimi i shembullit nga postimi në blog ishte një aplikacion React i testuar me   dhe   . Ky është një fillim i mrekullueshëm… por çka nëse përdor   në vend të Puppeteer? A është e mundur? Puppeteer Jest Dramaturg  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.    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ë. Paketa e ndërtimit Chrome për Testim  Hyrje në Aplikacionin për Testim  Meqenëse sapo po e provoja këtë, unë forcova   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: depon e GitHub që fillimisht ishte referuar  Verifikoni që lidhja funksionon dhe ridrejtohet në vendndodhjen e duhur.  Verifikoni që futja e tekstit të shfaq si duhet hyrjen e përdoruesit.  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   në vend të npm. Këtu është një lidhje me   . pnpm 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 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  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   të skedarit të krijuar   : 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'] }, // }, ], …  Shkëmbeni kodin e testit të kukullave me kodin e testit të dramaturgut  Kodi origjinal kishte një skedar testimi Puppeteer në   . E zhvendosa atë skedar te   . 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: 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); }); });  Hiq   , duke përdorur në vend të kësaj serverin e internetit të Playwright start-server-and-test  Për të testuar aplikacionin tim React, më duhej ta rrotulloja atë (në   ) 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   . http://localhost:8080 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   nga projekti im. start-server-and-test   ~/project$ pnpm remove start-server-and-test  Në   , unë hoqa nga komenti seksionin webServer në fund, duke e modifikuar që të duket kështu: 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, },  Më pas, hoqa skriptin   nga skedari origjinal   . Në vend të kësaj, skenari im i testit dukej kështu: test:ci package.json  "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%    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. Shënim:  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   në rreshtin 19: src/App.js   <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   dhe klikova   .  Testet Aktivizo Heroku CI  Më në fund, modifikova skedarin   për të hequr skriptin e testimit i cili ishte caktuar të thërriste   . Unë e kisha hequr tashmë   nga skedari im   . Skripti   në   ishte tani ai që përdorej dhe Heroku CI do ta kërkonte atë si parazgjedhje. app.json npm test:ci test:ci package.json test package.json  Skedari im   , i cili sigurohej të përdorte paketën e ndërtimit të Chrome për Testim, dukej kështu: app.json   { "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.   ta instaloja me komandën   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. Mund playwright install chromium  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ë   . Do të më duhej vetëm dramaturgu që ta kërkonte atje. /app/.chrome-for-testing/chrome-linux64/chrome  Ndihma e dramaturgut të gjejë shfletuesin e instaluar Chrome    Nëse nuk ju interesojnë detajet e mprehta këtu, mund ta kapërceni këtë seksion dhe thjesht të kopjoni të plotë   poshtë. Kjo duhet t'ju japë atë që ju nevojitet për të ngritur dhe punuar me Playwright në Heroku CI. Shënim: app.json  Në dokumentacionin e Playwright, zbulova se mund të vendosni një variabël mjedisi që i tregon Playwright nëse keni përdorur një   . Kjo ndryshore env është   . Vendosa të filloj atje. vendndodhje të personalizuar për të gjitha instalimet e shfletuesit të tij PLAYWRIGHT_BROWSERS_PATH  Në   , vendosa një variabël   si kjo: app.json env   { "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   . Si mund ta kuptoja se ku do të dukej dramaturgu? chromium-1140  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   , ja çfarë do të shihnim: 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 ...  Kjo është ajo që unë dua. Me një magji   vogël, bëra këtë: 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  Me gjithë këtë, më duhej thjesht të shtoja një skript   në   . Për shkak se   është vendosur tashmë në   , skenari im do të ishte pak më i thjeshtë. Ky ishte skedari im i fundit   : 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" } } } }  Do të tregoj shkurtimisht se çfarë bën   : test-setup  Duke llogaritur për   , përdor   me   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   . PLAYWRIGHT_BROWSERS_PATH playwright install -- dry-run awk CHROMIUM_PATH  Krijon një dosje të re (dhe çdo dosje të nevojshme prind) në   , e cila është dosja aktuale ku Playwright do të kërkojë binarin   . CHROMIUM_PATH/chrome-linux chrome  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   , Playwright duhet të jetë në gjendje të përdorë instalimin e Chrome nga buildpack. Ishte koha për të kryer testet edhe një herë.  app.json  Suksese!  Skripti   funksionoi siç pritej.  test-setup  Dramaturgu ishte në gjendje të hynte në binarin   dhe të ekzekutonte testet, të cilat kaluan.  chrome  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   !) 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. dhe për ju  Kodi për këtë udhëzim është i disponueshëm në   . depon time të GitHub  Gëzuar kodimin!

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

Kjo audio është prodhuar në gjuhën origjinale të tregimit!

Shume gjate; Te lexosh

Make resilience your competitive advantage

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

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

About Author

KOMENTE

VARUR TAGS

KY ARTIKU U PARAQIT NË

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps