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

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 chapisho hili la blogi ya Heroku 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.

Mfano wa usanidi kutoka kwa chapisho la blogi ulikuwa programu ya React iliyojaribiwa na Puppeteer na Jest . Huo ni mwanzo mzuri ... lakini vipi ikiwa nitatumia Playwright badala ya Puppeteer? Je, inawezekana?

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.

Kifurushi cha ujenzi cha Chrome kwa Majaribio kutoka kwa Heroku husakinisha Chrome kwenye programu ya Heroku, ili uweze kufanya majaribio yako ya Playwright katika Heroku CI kwa usanidi mwepesi sana.

Utangulizi wa Ombi la Kujaribiwa

Kwa kuwa nilikuwa nikijaribu hii tu, nilibadilisha repo la GitHub ambalo hapo awali lilirejelewa kwenye chapisho la blogi ya Heroku. Programu ilikuwa programu rahisi ya React yenye kiungo, maandishi, na kitufe cha kuwasilisha. Kulikuwa na majaribio matatu:

1. Thibitisha kuwa kiungo kinafanya kazi na uelekeze kwenye eneo sahihi.
2. Thibitisha kuwa maandishi ya maandishi yanaonyesha ingizo la mtumiaji vizuri.
3. 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 pnpm badala ya npm. Hapa kuna kiunga cha 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 [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

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 projects ya faili iliyotengenezwa 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 src/tests/puppeteer.test.js . Nilihamisha faili hiyo kwa tests/playwright.spec.js . Kisha, nilisasisha jaribio ili kutumia mikusanyiko ya Playwright, ambayo ilipangwa kwa usafi kabisa. Faili mpya ya majaribio ilionekana kama hii:

 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 start-server-and-test , Kwa kutumia webServer ya Playwright badala yake

Ili kujaribu programu yangu ya React, nilihitaji kuizungusha (kwa http://localhost:8080 ) kwa mchakato tofauti kwanza, kisha ningeweza kuendesha majaribio yangu. Hii itakuwa kesi ikiwa nilitumia Puppeteer au Playwright. Na Puppeteer, mfano wa Heroku ulitumia kifurushi start-server-and-test .

Hata hivyo, unaweza kusanidi Playwright ili kusogeza programu kabla ya kufanya majaribio. Hii ni rahisi sana!

Niliondoa start-server-and-test kutoka kwa mradi wangu.

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

Katika playwright.config.js , nilitoa maoni kwa sehemu ya webServer chini, nikiirekebisha ionekane kama hii:

 /* 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 test:ci script kutoka kwa faili asili package.json . Badala yake, hati yangu ya mtihani ilionekana kama hii:

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

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

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 src/App.js kwenye mstari wa 19:

 <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 Majaribio na kubofya Wezesha Heroku CI .

Hatimaye, nilirekebisha faili ya app.json ili kuondoa hati ya majaribio ambayo iliwekwa kuwaita npm test:ci . Tayari nilikuwa nimeondoa test:ci script kutoka kwa package.json faili yangu. Hati test katika package.json sasa ndiyo ya kutumia, na Heroku CI ingetafuta hiyo kwa chaguo-msingi.

Faili yangu ya app.json , ambayo ilihakikisha kutumia kifurushi cha ujenzi cha Chrome kwa Majaribio, ilionekana kama hii:

 { "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. Ningeweza kuisakinisha na playwright install chromium 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.

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 /app/.chrome-for-testing/chrome-linux64/chrome . Ningehitaji tu Playwright kuitafuta hapo.

Kumsaidia Mwandishi wa kucheza Kutafuta Kivinjari Kilichosakinishwa cha Chrome

Kumbuka: Ikiwa hupendi maelezo ya nitty-gritty hapa, unaweza kuruka sehemu hii na unakili app.json kamili chini chini. Hii inapaswa kukupa unachohitaji ili kuamka na kukimbia na Playwright kwenye Heroku CI.

Katika hati za Playwright, niligundua kuwa unaweza kuweka utofauti wa mazingira ambao huambia Playwright ikiwa ulitumia eneo maalum kwa usakinishaji wake wote wa kivinjari . Tofauti hiyo ya env ni PLAYWRIGHT_BROWSERS_PATH . Niliamua kuanzia hapo.

Katika app.json , niliweka kutofautisha env kama hii:

 { "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 chromium-1140 tena. Ningewezaje kujua ni wapi mwandishi wa kucheza angeonekana?

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 PLAYWRIGHT_BROWSERS_PATH , hivi ndivyo tungeona:

 ~/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 awk , nilifanya hivi:

 ~/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 test-setup kwa app.json . Kwa sababu PLAYWRIGHT_BROWSERS_PATH tayari imewekwa env , hati yangu itakuwa rahisi kidogo. Hii ilikuwa faili yangu ya mwisho 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 test-setup hufanya:

1. Uhasibu wa PLAYWRIGHT_BROWSERS_PATH , hutumia playwright install -- dry-run na awk kubainisha folda ya mizizi ambapo Playwright itatafuta kivinjari cha Chrome. Huweka hii kama thamani ya tofauti ya CHROMIUM_PATH .

   
   

2. Huunda folda mpya (na folda zozote kuu zinazohitajika) hadi CHROMIUM_PATH/chrome-linux , ambayo ndiyo folda halisi ambapo Playwright itatafuta binary chrome .

   
   

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

Mafanikio!

Hati ya test-setup iliendelea kama ilivyotarajiwa.

Playwright aliweza kufikia mfumo wa jozi chrome na kuendesha majaribio, ambayo yalifaulu.

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 na kwako !) 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.

Nambari ya mapitio haya inapatikana kwenye hazina yangu ya GitHub .

Furahia kuweka msimbo!