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   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. Heroku blog yazısına  Bloq yazısındakı nümunə quraşdırma,   və   ilə sınaqdan keçirilmiş React proqramı idi. Bu əla başlanğıcdır... amma mən Kuklaçı əvəzinə   istifadə etsəm nə olar? Bu mümkündürmü? Puppeteer Jest Dramaturqdan  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   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 Chrome qurma paketi  Test üçün ərizəyə giriş  Sadəcə bunu sınadığım üçün   çə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: əvvəlcə Heroku blog yazısında istinad edilən GitHub repo-nu  Bağlantının işlədiyini və düzgün yerə yönləndirdiyini yoxlayın.  Mətn daxiletməsinin istifadəçi daxiletməsini düzgün göstərdiyini yoxlayın.  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ə   istifadə etmək istədim. Budur   keçid. pnpm mənim çəngəlli GitHub repoma  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   repo ilə eyni olan çəngəlli repo ilə başladım. heroku-examples  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 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  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   saytından Jest konfiqurasiya bölməsini sildim. package.json  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   faylının   bölməsindən digər brauzerləri sildim: playwright.config.js projects  /* 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   ünvanında Puppeteer test faylı var idi. Həmin faylı   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ü: 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); }); });    , əvəzinə Playwright's webServer istifadə edərək silin start-server-and-test  React tətbiqimi sınamaq üçün əvvəlcə onu ayrı bir prosesdə (   ü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   paketindən istifadə etdi. http://localhost:8080 start-server-and-test  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   sildim. start-server-and-test   ~/project$ pnpm remove start-server-and-test    -də aşağıdakı webServer bölməsini şərhdən çıxardım və onu belə görünməsi üçün dəyişdirdim: 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, },  Sonra, orijinal   faylından   skriptini sildim. Bunun əvəzinə test skriptim belə görünürdü: package.json test:ci  "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%    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. Qeyd:  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ə   yeniləməliyəm: src/App.js   <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   sekmesine keçdim və   düyməsini kliklədim.  Testlər Heroku CI-ni aktiv et  Nəhayət,   çağırmaq üçün təyin edilmiş test skriptini silmək üçün   faylını dəyişdirdim. Mən   faylımdan   skriptini artıq silmişdim.   -dakı   skripti indi istifadə ediləcək biri idi və Heroku CI defolt olaraq onu axtarırdı. npm test:ci app.json package.json test:ci package.json test  Test üçün Chrome qurma paketindən istifadə etməyə əmin olan   faylım belə görünürdü: app.json   { "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   əmri ilə quraşdıra   . 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. playwright install chromium bilərdim  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   ünvanında idi. Mənə sadəcə dramaturq lazımdır ki, onu orada axtarsın. /app/.chrome-for-testing/chrome-linux64/chrome  Dramaturqun Quraşdırılmış Chrome Brauzerini tapmasına kömək etmək    Buradakı incə detallar sizi maraqlandırmırsa, bu bölməni atlaya və sadəcə olaraq tam   aşağıya köçürə bilərsiniz. Bu, Heroku CI-də Playwright ilə işləmək üçün sizə lazım olanı verməlidir. Qeyd: app.json  Dramaturqun sənədlərində mən aşkar etdim ki, siz   istifadə etsəniz, ona onu bildirən mühit dəyişənini təyin edə bilərsiniz. Bu env dəyişəni   -dir. Oradan başlamaq qərarına gəldim. onun bütün brauzer quraşdırmaları üçün xüsusi yerdən PLAYWRIGHT_BROWSERS_PATH    -da mən belə bir   dəyişəni təyin etdim: app.json env   { "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   qovluğuna bənzəməyəcək. Dramaturqun hara baxacağını necə anlaya bilərdim? chromium-1140  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   təyin etsək, burada görərik: 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 ...  Mənim istədiyim budur. Bir az   sehri ilə bunu etdim: 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  Bütün bunları başa düşdükdən sonra, sadəcə olaraq   -a   skripti əlavə etməli oldum.   artıq   daxilində qurulduğuna görə mənim skriptim bir az daha sadə olardı. Bu mənim son   faylım idi: app.json test-setup 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" } } } }    nə etdiyini qısaca nəzərdən keçirəcəyəm: test-setup    üçün mühasibatlıq, Playwright-ın Chrome brauzerini axtaracağı kök qovluğu müəyyən etmək üçün dramaturq quraşdırma --   ilə   istifadə edir. Bunu   dəyişəni üçün dəyər kimi təyin edir. PLAYWRIGHT_BROWSERS_PATH awk playwright install -- dry-run CHROMIUM_PATH    üçün yeni qovluq (və istənilən əsas qovluqlar) yaradır ki, bu da Playwright'ın   binarını axtaracağı faktiki qovluqdur. CHROMIUM_PATH/chrome-linux chrome  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ş   faylımla, dramaturq buildpack-dan Chrome quraşdırmasından istifadə edə bilməlidir. Yenidən sınaqları keçirməyin vaxtı gəldi.  app.json  Uğurlar!    skripti gözlənildiyi kimi işlədi.  test-setup  Dramaturq   binarına daxil ola bildi və sınaqlardan keçdi, onlar keçdi.  chrome  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   !), mən brauzeri avtomatlaşdırma test paketlərimi yenidən qurmağa başlaya bilərəm. və sizin üçün  Bu araşdırma üçün kod mənim   mövcuddur. GitHub depomda  Xoşbəxt kodlaşdırma!

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

Bu audio hekayənin orijinal dilində hazırlanmışdır!

Çox uzun; Oxumaq

Make resilience your competitive advantage

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

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

About Author

ŞƏRHLƏR

ETİKET ASIN

BU MƏQALƏ TƏQDİM EDİLMİŞDİR

Related Stories

How Azarus's Technology is Transforming Viewer Engagement on Stream

Optimizing Operations for Real Estate Investors - Interview with Startups of the Year Nominee, Azibo

Women in Tech: Azize Sultan Shares Her Inspiring Journey from Architecture to Tech Leadership

How Azarus's Technology is Transforming Viewer Engagement on Stream

Optimizing Operations for Real Estate Investors - Interview with Startups of the Year Nominee, Azibo

Women in Tech: Azize Sultan Shares Her Inspiring Journey from Architecture to Tech Leadership

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps