Heroku-da dramaturq və Chrome Brauzer Testi: Başlayanlar üçün Bələdçi

Mən həmişə vahid testlərimin işləməsini (və keçməsini) seyr etməyi çox sevirdim. Onlar sürətlidirlər və testlərdən keçmək mənə əminlik verir ki, mənim fərdi parçalarım olması lazım olduğu kimi davranır. Əksinə, mən tez-tez brauzer üçün uçdan-uca testlərə üstünlük verməkdə çətinlik çəkirdim, çünki onları yazmaq və idarə etmək çox yavaş idi.

Xoşbəxtlikdən, brauzerdaxili sınaq üçün alətlər illər ərzində daha yaxşı və daha sürətli olmuşdur. Başsız brauzer quraşdırması ilə mən CI-nin bir hissəsi kimi brauzer testlərimi həyata keçirə bilərəm.

Bu yaxınlarda, Heroku CI daxilində başsız Chrome ilə brauzerdaxili testlərin avtomatlaşdırılmasından bəhs edən bu Heroku blog yazısına rast gəldim. Heroku, CI boru kəmərində testlər üçün istifadə edə biləcəyiniz başsız Chrome quraşdıran bir quruluş paketinə malikdir.

Bloq yazısındakı nümunə quraşdırma, Puppeteer və Jest ilə sınaqdan keçirilmiş React proqramı idi. Bu əla başlanğıcdır... amma mən Kuklaçı əvəzinə Dramaturqdan istifadə etsəm nə olar? Bu mümkündürmü?

Mən araşdırmaq qərarına gəldim. Göründüyü kimi - bəli, bunu Dramaturqla da edə bilərsiniz! Beləliklə, Heroku CI-də istifadə olunan başsız Chrome brauzerində Playwright testlərini əldə etmək üçün lazım olan addımları çəkdim. Bu yazıda sizə quraşdırma üçün addımlar atacağam.

Başdan-başa Sınaq üçün Brauzer Avtomatlaşdırmasına dair Sürətli Söz

Başdan-başa sınaq istifadəçilərin brauzerdə tətbiqinizlə necə qarşılıqlı əlaqədə olduğunu göstərir və tam iş axınlarını təsdiqləyir. Dramaturq bu prosesi Chrome, Firefox və Safari-də sınaqdan keçirərək olduqca qüsursuz edir. Əlbəttə ki, CI-də brauzer testlərinin tam cədvəlini işə salmaq olduqca ağırdır, buna görə də başsız rejim kömək edir.

Heroku-dan olan Test üçün Chrome qurma paketi Chrome-u Heroku proqramında quraşdırır, beləliklə, siz Heroku CI-də Playwright testlərinizi həqiqətən yüngül quraşdırma ilə keçirə bilərsiniz.

Test üçün ərizəyə giriş

Sadəcə bunu sınadığım üçün əvvəlcə Heroku blog yazısında istinad edilən GitHub repo-nu çəngəllədim. Tətbiq linki, mətn daxiletməsi və göndərmə düyməsi olan sadə React proqramı idi. Üç sınaq var idi:

1. Bağlantının işlədiyini və düzgün yerə yönləndirdiyini yoxlayın.
2. Mətn daxiletməsinin istifadəçi daxiletməsini düzgün göstərdiyini yoxlayın.
3. Formanın göndərilməsinin səhifədə göstərilən mətni yenilədiyini yoxlayın.

Olduqca sadə. İndi mənə Kuklaçı və Zarafat əvəzinə Dramaturqdan istifadə etmək üçün kodu dəyişməli oldum. Oh, mən də npm əvəzinə pnpm istifadə etmək istədim. Budur mənim çəngəlli GitHub repoma keçid.

Dramaturqdan istifadə etmək üçün kodu dəyişdirin

Kodu dəyişdirmək üçün atdığım addımları nəzərdən keçirək. Mən heroku-examples repo ilə eyni olan çəngəlli repo ilə başladım.

pnpm istifadə edin

Mən npm əvəzinə pnpm istifadə etmək istədim. (Şəxsi üstünlük.) Beləliklə, ilk etdiyim budur:

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

Layihəyə dramaturq əlavə edin

Sonra mən Kuklaçı və Zarafatı çıxardım və Dramaturq əlavə etdim.

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

Mən həmçinin package.json saytından Jest konfiqurasiya bölməsini sildim.

Playwright'ı Yalnız Chromium istifadə etmək üçün konfiqurasiya edin

Dramaturq testlərinizi Chrome, Firefox və Safari-də keçirə bilərsiniz. Diqqətimi Chrome üzərində saxladığım üçün yaradılan playwright.config.js faylının projects bölməsindən digər brauzerləri sildim:

 /* Configure projects for major browsers */ projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'] }, }, // { // name: 'firefox', // use: { ...devices['Desktop Firefox'] }, // }, // // { // name: 'webkit', // use: { ...devices['Desktop Safari'] }, // }, ], …

Kukla Test Kodunu Dramaturq Test Kodu ilə dəyişdirin

Orijinal kodun src/tests/puppeteer.test.js ünvanında Puppeteer test faylı var idi. Həmin faylı tests/playwright.spec.js qovluğuna köçürdüm. Daha sonra, dramaturqun olduqca təmiz şəkildə qurulan konvensiyalarından istifadə etmək üçün testi yenilədim. Yeni test faylı belə görünürdü:

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

start-server-and-test , əvəzinə Playwright's webServer istifadə edərək silin

React tətbiqimi sınamaq üçün əvvəlcə onu ayrı bir prosesdə ( http://localhost:8080 ünvanında) fırlatmalı oldum və sonra testlərimi keçirə bildim. Bu, mən Kuklaçı və ya Dramaturqdan istifadə etsəydim belə olardı. Puppeteer ilə Heroku nümunəsi start-server-and-test paketindən istifadə etdi.

Bununla belə, siz Playwright-ı testləri işə salmazdan əvvəl proqramı işə salmaq üçün konfiqurasiya edə bilərsiniz. Bu olduqca rahatdır!

Mən layihəmdən start-server-and-test sildim.

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

playwright.config.js -də aşağıdakı webServer bölməsini şərhdən çıxardım və onu belə görünməsi üçün dəyişdirdim:

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

Sonra, orijinal package.json faylından test:ci skriptini sildim. Bunun əvəzinə test skriptim belə görünürdü:

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

Dramaturq Brauzerini Yerli Maşınımda quraşdırın

Dramaturq testləri üçün istifadə etmək üçün ən son brauzer ikili fayllarını quraşdırır. Beləliklə, yerli maşınımda Chromium versiyasını quraşdırmaq üçün mənə Dramaturq lazım idi.

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

Qeyd: Heroku-da Test üçün Chrome qurma paketi sınaq üçün istifadə edəcəyimiz brauzeri quraşdırır. Biz CI-mizi elə quraşdıracağıq ki, Dramaturt özünün quraşdırılmasına vaxt və resurslar sərf etmək əvəzinə həmin brauzerdən istifadə etsin.

Yerli Testləri Çalışın

Bununla hər şey hazır idi. Testlərimi yerli olaraq sınamağın vaxtı gəldi.

 ~/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! Düzdü. Tətbiqdəki keçidin məni Kuklaçının əvəzinə Dramaturqun sənədlərinə aparmasını gözləmək üçün testimi dəyişdirdim. 19-cu sətirdə src/App.js yeniləməliyəm:

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

İndi testləri yenidən keçirməyin vaxtı gəldi...

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

Testlər keçdi! Sonra bizi Heroku CI-yə çatdırmağın vaxtı gəldi.

CI Boru Kəmərindən istifadə etmək üçün Heroku-ya yerləşdirin

Tətbiqimi Heroku CI boru kəmərində quraşdırmaq üçün Heroku bloq yazısındakı təlimatlara əməl etdim.

Heroku boru kəməri yaradın

Heroku-da mən yeni bir boru xətti yaratdım və onu çəngəlli GitHub repoma bağladım.

Sonra proqramımı səhnələşdirməyə əlavə etdim.

Sonra Testlər sekmesine keçdim və Heroku CI-ni aktiv et düyməsini kliklədim.

Nəhayət, npm test:ci çağırmaq üçün təyin edilmiş test skriptini silmək üçün app.json faylını dəyişdirdim. Mən package.json faylımdan test:ci skriptini artıq silmişdim. package.json -dakı test skripti indi istifadə ediləcək biri idi və Heroku CI defolt olaraq onu axtarırdı.

Test üçün Chrome qurma paketindən istifadə etməyə əmin olan app.json faylım belə görünürdü:

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

İlkin Test İşi

Kodumu GitHub-a itələdim və bu, Heroku CI-də sınaq işinə səbəb oldu.

Sınaq uğursuz oldu, amma narahat olmadım. Mən bilirdim ki, hansısa Dramaturq konfiqurasiyası olacaq.

Test jurnalında qazaraq bunu tapdım:

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

Dramaturq Chrome brauzerinin nümunəsini axtarırdı. Mən onu CI test quraşdırmamın bir hissəsi kimi playwright install chromium əmri ilə quraşdıra bilərdim . Ancaq bu, Test üçün Chrome qurma paketinə sahib olmağın bütün məqsədini məğlub edəcək. Chrome artıq quraşdırılıb; Sadəcə bunu düzgün qeyd etməliyəm.

Heroku üçün test quraşdırma jurnalına baxaraq bu sətirləri tapdım:

 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

Beləliklə, istifadə etmək istədiyim brauzer /app/.chrome-for-testing/chrome-linux64/chrome ünvanında idi. Mənə sadəcə dramaturq lazımdır ki, onu orada axtarsın.

Dramaturqun Quraşdırılmış Chrome Brauzerini tapmasına kömək etmək

Qeyd: Buradakı incə detallar sizi maraqlandırmırsa, bu bölməni atlaya və sadəcə olaraq tam app.json aşağıya köçürə bilərsiniz. Bu, Heroku CI-də Playwright ilə işləmək üçün sizə lazım olanı verməlidir.

Dramaturqun sənədlərində mən aşkar etdim ki, siz onun bütün brauzer quraşdırmaları üçün xüsusi yerdən istifadə etsəniz, ona onu bildirən mühit dəyişənini təyin edə bilərsiniz. Bu env dəyişəni PLAYWRIGHT_BROWSERS_PATH -dir. Oradan başlamaq qərarına gəldim.

app.json -da mən belə bir env dəyişəni təyin etdim:

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

CI-dəki testlərimlə nə baş verəcəyini görmək üçün kodumu GitHub-a itələdim.

Gözlənildiyi kimi, yenə uğursuz oldu. Bununla belə, log xətası bunu göstərdi:

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

Bu məni çox yaxınlaşdırdı. Bunu etmək qərarına gəldim:

• Playwright'ın Chrome brauzerinin olmasını gözlədiyi yer üçün lazım olan qovluqları yaradın. Bu belə bir əmr olardı:

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

• Heroku buildpack tərəfindən quraşdırılmış Chrome binarına işarə etmək üçün bu qovluqda simvolik əlaqə yaradın. Bu belə görünəcək:

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

Ancaq bunun gələcək üçün sübut olub-olmayacağından narahat idim. Nəhayət, Dramaturq Chromium-un yeni versiyasından istifadə edəcək və o, artıq chromium-1140 qovluğuna bənzəməyəcək. Dramaturqun hara baxacağını necə anlaya bilərdim?

Məhz o zaman kəşf etdim ki, bir brauzer quraşdırmasını quru işlədə bilərsiniz.

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

Bu "Məkanı quraşdırın" xətti çox vacib idi. Və əgər biz PLAYWRIGHT_BROWSERS_PATH təyin etsək, burada görərik:

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

Mənim istədiyim budur. Bir az awk sehri ilə bunu etdim:

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

Bütün bunları başa düşdükdən sonra, sadəcə olaraq app.json -a test-setup skripti əlavə etməli oldum. PLAYWRIGHT_BROWSERS_PATH artıq env daxilində qurulduğuna görə mənim skriptim bir az daha sadə olardı. Bu mənim son app.json faylım idi:

 { "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" } } } }

test-setup nə etdiyini qısaca nəzərdən keçirəcəyəm:

1. PLAYWRIGHT_BROWSERS_PATH üçün mühasibatlıq, Playwright-ın Chrome brauzerini axtaracağı kök qovluğu müəyyən etmək üçün dramaturq quraşdırma -- awk ilə playwright install -- dry-run istifadə edir. Bunu CHROMIUM_PATH dəyişəni üçün dəyər kimi təyin edir.

   
   

2. CHROMIUM_PATH/chrome-linux üçün yeni qovluq (və istənilən əsas qovluqlar) yaradır ki, bu da Playwright'ın chrome binarını axtaracağı faktiki qovluqdur.

   
   

3. Chrome-un Heroku buildpack quraşdırmasına işarə etmək üçün həmin qovluqda simvolik keçid yaradır ( /app/.chrome-for-testing/chrome-linux64/chrome ).

Testləri Yenidən Çalışın

Yenilənmiş app.json faylımla, dramaturq buildpack-dan Chrome quraşdırmasından istifadə edə bilməlidir. Yenidən sınaqları keçirməyin vaxtı gəldi.

Uğurlar!

test-setup skripti gözlənildiyi kimi işlədi.

Dramaturq chrome binarına daxil ola bildi və sınaqlardan keçdi, onlar keçdi.

Nəticə

Veb tətbiqlərim üçün başdan-ayağa sınaqdan keçmək getdikcə daha çətin olur, ona görə də mən ona getdikcə daha çox üstünlük verirəm. Son günlər bu, dramaturqdan da daha çox istifadə etmək demək idi. Çevik və sürətlidir. İndi onu Heroku CI-də Test üçün Chrome qurma paketi ilə işə salmaq üçün işi gördüyüm üçün (mənim və sizin üçün !), mən brauzeri avtomatlaşdırma test paketlərimi yenidən qurmağa başlaya bilərəm.

Bu araşdırma üçün kod mənim GitHub depomda mövcuddur.

Xoşbəxt kodlaşdırma!