Nimekuwa nikipenda kutazama majaribio ya kitengo changu kikiendeshwa (na kufaulu). Wao ni haraka, na kufaulu majaribio kunanipa hakikisho kwamba vipande vyangu binafsi vinatenda kama inavyopaswa kufanya. Kinyume chake, mara nyingi nilijitahidi kuweka kipaumbele majaribio ya mwisho hadi mwisho kwa kivinjari kwa sababu kuandika na kuiendesha ilikuwa polepole sana.  Kwa bahati nzuri, zana za majaribio ya kivinjari-mwisho-hadi-mwisho zimekuwa bora zaidi na haraka zaidi kwa miaka. Na kwa usanidi wa kivinjari usio na kichwa, ninaweza kuendesha majaribio ya kivinjari changu kama sehemu ya CI yangu.  Hivi majuzi, nilikutana na   likizungumza juu ya kufanya majaribio ya kivinjari kiotomatiki na Chrome isiyo na kichwa ndani ya Heroku CI. Heroku ina kifurushi cha ujenzi ambacho husakinisha Chrome isiyo na kichwa, ambayo unaweza kuomba kwa ajili ya majaribio yako katika bomba la CI. chapisho hili la blogi ya Heroku  Mfano wa usanidi kutoka kwa chapisho la blogi ulikuwa programu ya React iliyojaribiwa na   na   . Huo ni mwanzo mzuri ... lakini vipi ikiwa nitatumia   badala ya Puppeteer? Je, inawezekana? Puppeteer Jest Playwright  Niliamua kuchunguza. Inavyobadilika - ndio, unaweza kufanya hivi na Playwright pia! Kwa hivyo, nilinasa hatua ambazo ungehitaji kupata majaribio ya Playwright yanayoendeshwa kwenye kivinjari cha Chrome kisicho na kichwa kinachotumiwa katika Heroku CI. Katika chapisho hili, nitakutembeza kupitia hatua za kusanidi.  Neno Haraka juu ya Uendeshaji wa Kivinjari kwa Majaribio ya Mwisho hadi Mwisho  Jaribio la mwisho hadi mwisho hunasa jinsi watumiaji huingiliana na programu yako katika kivinjari, na kuthibitisha utendakazi kamili. Playwright hufanya mchakato huu kuwa rahisi na majaribio katika Chrome, Firefox na Safari. Bila shaka, kuendesha slate kamili ya majaribio ya kivinjari katika CI ni nzito sana, ndiyo sababu hali isiyo na kichwa husaidia.    kutoka kwa Heroku husakinisha Chrome kwenye programu ya Heroku, ili uweze kufanya majaribio yako ya Playwright katika Heroku CI kwa usanidi mwepesi sana. Kifurushi cha ujenzi cha Chrome kwa Majaribio  Utangulizi wa Ombi la Kujaribiwa  Kwa kuwa nilikuwa nikijaribu hii tu, nilibadilisha   kwenye chapisho la blogi ya Heroku. Programu ilikuwa programu rahisi ya React yenye kiungo, maandishi, na kitufe cha kuwasilisha. Kulikuwa na majaribio matatu: repo la GitHub ambalo hapo awali lilirejelewa  Thibitisha kuwa kiungo kinafanya kazi na uelekeze kwenye eneo sahihi.  Thibitisha kuwa maandishi ya maandishi yanaonyesha ingizo la mtumiaji vizuri.  Thibitisha kuwa kuwasilisha fomu kunasasisha maandishi yanayoonyeshwa kwenye ukurasa.  Rahisi sana. Sasa, nilihitaji tu kubadilisha msimbo ili kutumia Playwright badala ya Puppeteer na Jest. Lo, na pia nilitaka kutumia   badala ya npm. Hapa kuna kiunga cha   . pnpm repo yangu ya GitHub iliyogawanyika  Rekebisha Msimbo wa Kutumia Mtunzi wa Tamthilia  Wacha tupitie hatua nilizochukua kurekebisha nambari. Nilianza na repo yangu iliyogawanyika, sawa na repo   . heroku-examples  Tumia pnpm  Nilitaka kutumia pnpm badala ya npm. (Upendeleo wa kibinafsi.) Kwa hivyo, hivi ndivyo nilifanya kwanza:   ~/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  Ongeza Mwandishi wa kucheza kwenye Mradi  Kisha, niliondoa Puppeteer na Jest, na nikaongeza Playwright.   ~/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.  Pia niliondoa sehemu ya usanidi ya Jest kutoka   . package.json  Sanidi Playwright ili kutumia Chromium Pekee  Unaweza kufanya majaribio yako ya Playwright katika Chrome, Firefox na Safari. Kwa kuwa niliangazia Chrome, niliondoa vivinjari vingine kutoka kwa sehemu ya   ya faili iliyotengenezwa   : 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'] }, // }, ], …  Badilishana Msimbo wa Jaribio la Mwanamichezo kwa Msimbo wa Jaribio la Mwandishi wa kucheza  Msimbo asili ulikuwa na faili ya jaribio la Puppeteer katika   . Nilihamisha faili hiyo kwa   . Kisha, nilisasisha jaribio ili kutumia mikusanyiko ya Playwright, ambayo ilipangwa kwa usafi kabisa. Faili mpya ya majaribio ilionekana kama hii: 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); }); });  Ondoa   , Kwa kutumia webServer ya Playwright badala yake start-server-and-test  Ili kujaribu programu yangu ya React, nilihitaji kuizungusha (kwa   ) kwa mchakato tofauti kwanza, kisha ningeweza kuendesha majaribio yangu. Hii itakuwa kesi ikiwa nilitumia Puppeteer au Playwright. Na Puppeteer, mfano wa Heroku ulitumia kifurushi   . http://localhost:8080 start-server-and-test  Hata hivyo, unaweza kusanidi Playwright ili kusogeza programu kabla ya kufanya majaribio. Hii ni rahisi sana!  Niliondoa   kutoka kwa mradi wangu. start-server-and-test   ~/project$ pnpm remove start-server-and-test  Katika   , nilitoa maoni kwa sehemu ya webServer chini, nikiirekebisha ionekane kama hii: 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, },  Kisha, niliondoa   script kutoka kwa faili asili   . Badala yake, hati yangu ya mtihani ilionekana kama hii: test:ci package.json  "scripts": { … "test": "playwright test --project=chromium --reporter list" },  Sakinisha Kivinjari cha Playwright kwenye Mashine Yangu ya Karibu Nawe  Playwright husakinisha jozi za hivi punde zaidi za kivinjari ili kutumia kwa majaribio yake. Kwa hivyo, kwenye mashine yangu ya ndani, nilihitaji Playwright kusakinisha toleo lake la 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%    Kifurushi cha ujenzi cha Chrome cha Kujaribu kwenye Heroku husakinisha kivinjari tutakachotumia kufanya majaribio. Tutasanidi CI yetu ili Playwright itumie kivinjari hicho badala ya kutumia wakati na rasilimali kusakinisha chake. Kumbuka:  Fanya Majaribio Ndani ya Nchi  Pamoja na hayo, nilikuwa tayari. Ilikuwa wakati wa kujaribu majaribio yangu ndani ya nchi.   ~/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 | });  Lo! Hiyo ni kweli. Nilirekebisha jaribio langu ili kutarajia kiungo kwenye programu kunipeleka kwenye hati za Playwright badala ya za Puppeteer. Nilihitaji kusasisha   kwenye mstari wa 19: src/App.js   <Link href="https://playwright.dev/" rel="noopener"> Playwright Documentation </Link>  Sasa, ulikuwa wakati wa kufanya majaribio tena...   ~/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)  Mitihani imepita! Kisha, ilikuwa wakati wa kutuingiza kwenye Heroku CI.  Peleka kwa Heroku ili Kutumia Bomba la CI  Nilifuata maagizo katika chapisho la blogi ya Heroku ili kusanidi programu yangu kwenye bomba la Heroku CI.  Unda Bomba la Heroku  Katika Heroku, niliunda bomba mpya na kuiunganisha kwa repo yangu ya GitHub iliyogawanyika.   Ifuatayo, niliongeza programu yangu kwenye hatua.   Kisha, nilienda kwenye kichupo cha   na kubofya   .  Majaribio Wezesha Heroku CI  Hatimaye, nilirekebisha faili ya   ili kuondoa hati ya majaribio ambayo iliwekwa kuwaita   . Tayari nilikuwa nimeondoa   script kutoka kwa   faili yangu. Hati   katika   sasa ndiyo ya kutumia, na Heroku CI ingetafuta hiyo kwa chaguo-msingi. app.json npm test:ci test:ci package.json test package.json  Faili yangu ya   , ambayo ilihakikisha kutumia kifurushi cha ujenzi cha Chrome kwa Majaribio, ilionekana kama hii: app.json   { "environments": { "test": { "buildpacks": [ { "url": "heroku-community/chrome-for-testing" }, { "url": "heroku/nodejs" } ] } } }  Mbio za Mtihani wa Awali  Nilisukuma nambari yangu kwa GitHub, na hii ilisababisha jaribio katika Heroku CI.   Jaribio lilishindwa, lakini sikuwa na wasiwasi. Nilijua kungekuwa na usanidi wa Playwright wa kufanya.  Kuchimba karibu kwenye logi ya majaribio, nilipata hii:   Error: browserType.launch: Executable doesn't exist at /app/.cache/ms-playwright/chromium-1140/chrome-linux/chrome  Playwright alikuwa akitafuta mfano wa kivinjari cha Chrome.   kuisakinisha na   kama sehemu ya usanidi wangu wa jaribio la CI. Lakini hiyo ingeshinda dhumuni zima la kuwa na kifurushi cha ujenzi cha Chrome cha Kujaribu. Chrome ilikuwa tayari imesakinishwa; Nilihitaji tu kuielekeza vizuri. Ningeweza playwright install chromium  Nikiangalia nyuma kwenye logi yangu ya usanidi wa majaribio ya Heroku, nilipata mistari hii:   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  Kwa hivyo, kivinjari nilichotaka kutumia kilikuwa   . Ningehitaji tu Playwright kuitafuta hapo. /app/.chrome-for-testing/chrome-linux64/chrome  Kumsaidia Mwandishi wa kucheza Kutafuta Kivinjari Kilichosakinishwa cha Chrome    Ikiwa hupendi maelezo ya nitty-gritty hapa, unaweza kuruka sehemu hii na unakili   kamili chini chini. Hii inapaswa kukupa unachohitaji ili kuamka na kukimbia na Playwright kwenye Heroku CI. Kumbuka: app.json  Katika hati za Playwright, niligundua kuwa unaweza kuweka utofauti wa mazingira ambao huambia Playwright ikiwa ulitumia   . Tofauti hiyo ya env ni   . Niliamua kuanzia hapo. eneo maalum kwa usakinishaji wake wote wa kivinjari PLAYWRIGHT_BROWSERS_PATH  Katika   , niliweka kutofautisha   kama hii: app.json env   { "environments": { "test": { "env": { "PLAYWRIGHT_BROWSERS_PATH": "/app/.chrome-for-testing" }, ...  Nilisukuma nambari yangu kwa GitHub ili kuona nini kitatokea na majaribio yangu katika CI.  Kama ilivyotarajiwa, ilishindwa tena. Walakini, kosa la logi lilionyesha hii:   Error: browserType.launch: Executable doesn't exist at /app/.chrome-for-testing/chromium-1140/chrome-linux/chrome  Hiyo ilinipata karibu sana. Niliamua kwamba ningefanya hivi:  Unda folda zinazohitajika ambapo Playwright inatarajia kivinjari cha Chrome kiwe. Hiyo itakuwa amri kama hii:   mkdir -p "$PLAYWRIGHT_BROWSERS_PATH/chromium-1140/chrome-linux"  Unda ulinganifu katika folda hii ili kuelekeza kwenye binary ya Chrome iliyosakinishwa na Heroku buildpack. Hiyo ingeonekana kitu kama hiki:   ln -s \ $PLAYWRIGHT_BROWSERS_PATH/chrome-linux64/chrome \ $PLAYWRIGHT_BROWSERS_PATH/chromium-1140/chrome-linux/chrome  Walakini, nilikuwa na wasiwasi ikiwa hii itakuwa dhibitisho la siku zijazo. Hatimaye, Playwright angetumia toleo jipya la Chromium, na haingeonekana kama folda ya   tena. Ningewezaje kujua ni wapi mwandishi wa kucheza angeonekana? chromium-1140  Hapo ndipo nilipogundua unaweza kufanya usakinishaji wa kivinjari kavu.   ~/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  Njia hiyo ya "Sakinisha eneo" ilikuwa muhimu. Na, ikiwa tutaweka   , hivi ndivyo tungeona: 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 ...  Hiyo ndiyo ninayotaka. Kwa uchawi mdogo   , nilifanya hivi: 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  Pamoja na yote yaliyofikiriwa, nilihitaji tu kuongeza hati ya   kwa   . Kwa sababu   tayari imewekwa   , hati yangu itakuwa rahisi kidogo. Hii ilikuwa faili yangu ya mwisho   : 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" } } } }  Nitapitia kwa ufupi kile   hufanya: test-setup  Uhasibu wa   , hutumia   na   kubainisha folda ya mizizi ambapo Playwright itatafuta kivinjari cha Chrome. Huweka hii kama thamani ya tofauti ya   . PLAYWRIGHT_BROWSERS_PATH playwright install -- dry-run awk CHROMIUM_PATH  Huunda folda mpya (na folda zozote kuu zinazohitajika) hadi   , ambayo ndiyo folda halisi ambapo Playwright itatafuta binary   . CHROMIUM_PATH/chrome-linux chrome  Huunda kiunganishi katika folda hiyo ili Chrome ielekeze kwenye usakinishaji wa mfuko wa ujenzi wa Heroku wa Chrome (   ). /app/.chrome-for-testing/chrome-linux64/chrome  Fanya Majaribio Tena  Kwa faili yangu iliyosasishwa   , Playwright inapaswa kuwa na uwezo wa kutumia usakinishaji wa Chrome kutoka kwa kifurushi cha ujenzi. Ilikuwa ni wakati wa kuendesha majaribio kwa mara nyingine tena.  app.json  Mafanikio!  Hati ya   iliendelea kama ilivyotarajiwa.  test-setup  Playwright aliweza kufikia mfumo wa jozi   na kuendesha majaribio, ambayo yalifaulu.  chrome  Hitimisho  Majaribio ya mwisho hadi mwisho ya programu zangu za wavuti yanazidi kuwa magumu, kwa hivyo ninayapa kipaumbele zaidi na zaidi. Katika siku za hivi majuzi, hiyo imemaanisha kutumia Playwright zaidi pia. Ni rahisi na haraka. Na sasa kwa kuwa nimefanya kazi (kwa ajili yangu   !) ili kuianzisha na kufanya kazi na kifurushi cha ujenzi cha Chrome kwa Majaribio katika Heroku CI, ninaweza kuanza kuunda vyumba vyangu vya majaribio ya otomatiki ya kivinjari kwa mara nyingine tena. na kwako  Nambari ya mapitio haya inapatikana kwenye   . hazina yangu ya GitHub  Furahia kuweka msimbo!

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

Sauti hii imetolewa katika lugha asilia ya hadithi!

Ndefu sana; Kusoma

Jaribio la Playwright na Kivinjari cha Chrome katika Heroku: Mwongozo wa Wanaoanza

Jaribio la Playwright na Kivinjari cha Chrome katika Heroku: Mwongozo wa Wanaoanza

About Author

MAONI

HANG TAGS

MAKALA HII ILIWASILISHWA NDANI

Related Stories

Details of the Aerial Voyage.—Kennedy silenced

Speed up Swift compile time

Master Crypto Security: Your Complete Guide to Safe Wallet Management

Sweet Security Unveils First Unified Detection And Response Platform

Details of the Aerial Voyage.—Kennedy silenced

Speed up Swift compile time

Master Crypto Security: Your Complete Guide to Safe Wallet Management

Sweet Security Unveils First Unified Detection And Response Platform

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps