Men har doim birlik testlari ishlayotganini (va o'tishini) ko'rishni yaxshi ko'raman. Ular tez va testlardan o'tish menga shaxsiy buyumlarim xuddi shunday harakat qilishiga ishonch hosil qiladi. Aksincha, men ko'pincha brauzer uchun oxirigacha testlarga ustunlik berishga qiynalardim, chunki ularni yozish va ishga tushirish juda sekin edi.  Yaxshiyamki, brauzerda sinovdan o'tkazish vositalari yillar davomida ancha yaxshilandi va tezroq bo'ldi. Va boshsiz brauzer sozlamalari bilan men brauzer sinovlarini CIning bir qismi sifatida bajarishim mumkin.  Yaqinda men Heroku CI-da boshsiz Chrome bilan brauzer ichidagi testlarni avtomatlashtirish haqida gapiradigan ushbu   duch keldim. Heroku-da boshsiz Chrome-ni o'rnatadigan to'plam mavjud bo'lib, siz uni CI quvuridagi testlaringiz uchun ishlatishingiz mumkin. Heroku blogiga  Blog postidagi namuna sozlamalari   va   bilan sinovdan o'tgan React ilovasi edi. Bu ajoyib boshlanish... lekin qo'g'irchoq o'rniga   foydalansam nima bo'ladi? Bu mumkinmi? Puppeteer Jest Dramaturgidan  Men tergov qilishga qaror qildim. Ma'lum bo'lishicha - ha, buni dramaturg bilan ham qilishingiz mumkin! Shunday qilib, men Heroku CI-da ishlatiladigan boshsiz Chrome brauzerida Playwright testlarini o'tkazish uchun kerak bo'ladigan qadamlarni oldim. Ushbu postda men sizga sozlash bo'yicha qadamlarni ko'rsataman.  Yakuniy sinov uchun brauzerni avtomatlashtirish bo'yicha tezkor so'z  Oxir-oqibat test foydalanuvchilarning brauzerda ilovangiz bilan qanday o‘zaro munosabatda bo‘lishini aniqlaydi va to‘liq ish jarayonlarini tasdiqlaydi. Dramaturg bu jarayonni Chrome, Firefox va Safari-da sinovdan o'tkazish orqali juda muammosiz qiladi. Albatta, CI-da brauzer sinovlarining to'liq jadvalini o'tkazish juda og'ir, shuning uchun boshsiz rejim yordam beradi.  Heroku tomonidan ishlab chiqarilgan   Chrome-ni Heroku ilovasiga o'rnatadi, shuning uchun siz Heroku CI-da Playwright testlarini juda engil sozlash bilan o'tkazishingiz mumkin. Chrome for Testing to'plami  Sinov uchun ariza bilan tanishish  Men buni endigina sinab ko'rganim uchun,   ajratib oldim. Ilova havola, matn kiritish va yuborish tugmasiga ega oddiy React ilovasi edi. Uchta sinov bor edi: dastlab Heroku blog postida havola qilingan GitHub repo-ni  Havola ishlayotganligini va to'g'ri manzilga yo'naltirishini tekshiring.  Matn kiritish foydalanuvchi kiritgan ma'lumotlarni to'g'ri ko'rsatishini tekshiring.  Shaklni yuborish sahifada ko'rsatilgan matnni yangilashiga ishonch hosil qiling.  Juda oddiy. Endi, men Puppeteer va Jest o'rniga Dramaturgidan foydalanish uchun kodni o'zgartirishim kerak edi. Oh, men ham npm o'rniga   foydalanmoqchi edim. Mana   ga havola. pnpm dan mening GitHub repo-  Dramaturgdan foydalanish uchun kodni o'zgartiring  Keling, kodni o'zgartirish uchun qilgan qadamlarimni ko'rib chiqaylik. Men   repo bilan bir xil bo'lgan vilkalar repo bilan boshladim. heroku-examples  pnpm dan foydalaning  Men npm o'rniga pnpm dan foydalanmoqchi edim. (Shaxsiy afzallik.) Shunday qilib, men avval nima qildim:   ~/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  Loyihaga dramaturg qo'shing  Keyin men Qo'g'irchoqboz va Jestni olib tashladim va dramaturgni qo'shdim.   ~/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.  Shuningdek,   dan Jest konfiguratsiya bo'limini olib tashladim. package.json  Playwright-ni faqat Chromium-dan foydalanish uchun sozlang  Dramaturg testlarini Chrome, Firefox va Safari’da o‘tkazishingiz mumkin. Men Chrome brauzeriga e'tibor qaratganim uchun yaratilgan   faylining   bo'limidan boshqa brauzerlarni olib tashladim: 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'] }, // }, ], …  Qo'g'irchoqboz test kodini dramaturg uchun test kodiga almashtiring  Asl kodda   manzilida Puppeteer test fayli mavjud edi. Men bu faylni   ga ko'chirdim. Keyin men dramaturgning konventsiyalaridan foydalanish uchun testni yangiladim, ular juda toza ko'rsatilgan. Yangi test fayli quyidagicha ko'rinish oldi: 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); }); });    olib tashlang, Buning o'rniga Playwright's webServer-dan foydalaning start-server-and-test  React ilovamni sinab ko'rish uchun avval uni alohida jarayonda (   da) aylantirishim kerak edi, keyin esa testlarimni bajarishim mumkin edi. Men qo'g'irchoqboz yoki dramaturgdan foydalansam ham shunday bo'lardi. Puppeteer bilan Heroku misolida   paketi ishlatilgan. http://localhost:8080 start-server-and-test  Biroq, siz Playwright-ni sinovlarni boshlashdan oldin dasturni aylantirish uchun sozlashingiz mumkin. Bu juda qulay!  Men loyihamdan   olib tashladim. start-server-and-test   ~/project$ pnpm remove start-server-and-test    da men pastki qismidagi webServer bo'limiga izohni olib tashladim va uni shunday ko'rinishga o'zgartirdim: 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, },  Keyin   skriptini original   faylidan olib tashladim. Buning o'rniga, mening sinov skriptimi shunday ko'rinardi: test:ci package.json  "scripts": { … "test": "playwright test --project=chromium --reporter list" },  Mening mahalliy kompyuterimga dramaturg brauzerini o'rnating  Dramaturg o'z testlarida foydalanish uchun so'nggi brauzer ikkiliklarini o'rnatadi. Shunday qilib, mening mahalliy kompyuterimda uning Chromium versiyasini o'rnatish uchun dramaturg kerak edi.   ~/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 sinov uchun Chrome to‘plami biz sinov uchun foydalanadigan brauzerni o‘rnatadi. Biz CIni shunday o‘rnatamizki, dramaturg o‘z brauzerini o‘rnatishga vaqt va resurslarni sarflash o‘rniga o‘sha brauzerdan foydalanadi. Eslatma:  Mahalliy sinovlarni o'tkazing  Shu bilan men hamma narsaga tayyor bo'ldim. Sinovlarimni mahalliy darajada sinab ko'rish vaqti keldi.   ~/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! Bu to'g'ri. Ilovadagi havola meni Qo'g'irchoqboz o'rniga Dramaturg hujjatlariga olib borishini kutish uchun testimni o'zgartirdim. 19-qatorda   yangilashim kerak edi: src/App.js   <Link href="https://playwright.dev/" rel="noopener"> Playwright Documentation </Link>  Endi testlarni yana o'tkazish vaqti keldi...   ~/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)  Sinovlar o'tdi! Keyinchalik, bizni Heroku CI-ga olib borish vaqti keldi.  CI quvur liniyasidan foydalanish uchun Heroku-ga joylashtiring  Ilovamni Heroku CI quvuriga o‘rnatish uchun Heroku blogidagi ko‘rsatmalarga amal qildim.  Heroku quvur liniyasini yarating  Heroku-da men yangi quvur liniyasi yaratdim va uni vilkalar GitHub repo-ga uladim.   Keyinchalik, men o'z ilovamni sahnalashtirishga qo'shdim.   Keyin,   yorlig'iga o'tdim va   bosing.  Testlar Heroku CI-ni yoqish-ni  Nihoyat,   qo'ng'iroq qilish uchun o'rnatilgan test skriptini olib tashlash uchun   faylini o'zgartirdim. Men   faylimdan   skriptini allaqachon olib tashlagan edim.   -dagi   skripti endi foydalaniladigan skript edi va Heroku CI sukut bo'yicha uni qidiradi. npm test:ci app.json package.json test:ci package.json test  Sinov uchun Chrome to'plamidan foydalanishga ishonch hosil qilgan   faylim quyidagicha ko'rinish oldi: app.json   { "environments": { "test": { "buildpacks": [ { "url": "heroku-community/chrome-for-testing" }, { "url": "heroku/nodejs" } ] } } }  Dastlabki sinov  Men o'z kodimni GitHub-ga yubordim va bu Heroku CI-da sinovni ishga tushirdi.   Sinov muvaffaqiyatsiz tugadi, lekin men tashvishlanmadim. Men dramaturg konfiguratsiyasi bo'lishini bilardim.  Sinov jurnalini qazib, men buni topdim:   Error: browserType.launch: Executable doesn't exist at /app/.cache/ms-playwright/chromium-1140/chrome-linux/chrome  Dramaturg Chrome brauzeri namunasini qidirayotgan edi. Men uni CI test sozlamalarimning bir qismi sifatida   buyrug'i bilan o'rnatishim   . Ammo bu Chrome uchun sinov to'plamiga ega bo'lish maqsadini yo'q qiladi. Chrome allaqachon o'rnatilgan; Men buni to'g'ri ko'rsatishim kerak edi. playwright install chromium mumkin edi  Heroku uchun test o'rnatish jurnaliga qarab, men quyidagi qatorlarni topdim:   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  Shunday qilib, men foydalanmoqchi bo'lgan brauzer   manzilida edi. Menga dramaturg uni izlashi kerak edi. /app/.chrome-for-testing/chrome-linux64/chrome  Dramaturgga o'rnatilgan Chrome brauzerini topishga yordam berish    Agar bu yerdagi mayda-chuyda tafsilotlar sizni qiziqtirmasa, bu bo‘limni o‘tkazib yuborib,   to‘liq nusxasini pastroqqa ko‘chirishingiz mumkin. Bu sizga Heroku CI-da dramaturg bilan ishlash uchun kerak bo'lgan narsalarni berishi kerak. Eslatma: app.json  Dramaturg hujjatlarida, agar siz   foydalansangiz, dramaturgga bildiradigan muhit oʻzgaruvchisini oʻrnatishingiz mumkinligini topdim. Bu env o'zgaruvchisi   . Men u erdan boshlashga qaror qildim. uning barcha brauzer oʻrnatishlari uchun maxsus joylashuvdan PLAYWRIGHT_BROWSERS_PATH    da men shunday   o'zgaruvchisini o'rnatdim: app.json env   { "environments": { "test": { "env": { "PLAYWRIGHT_BROWSERS_PATH": "/app/.chrome-for-testing" }, ...  CI-dagi testlarim bilan nima sodir bo'lishini ko'rish uchun kodimni GitHub-ga yubordim.  Kutilganidek, u yana muvaffaqiyatsizlikka uchradi. Biroq, jurnal xatosi buni ko'rsatdi:   Error: browserType.launch: Executable doesn't exist at /app/.chrome-for-testing/chromium-1140/chrome-linux/chrome  Bu meni juda yaqin qildi. Men buni qilishga qaror qildim:  Playwright Chrome brauzerini kutgan joyda kerakli papkalarni yarating. Bu shunday buyruq bo'ladi:   mkdir -p "$PLAYWRIGHT_BROWSERS_PATH/chromium-1140/chrome-linux"  Heroku buildpack tomonidan oʻrnatilgan Chrome ikkilik fayliga ishora qilish uchun ushbu jildda ramziy havola yarating. Bu shunday ko'rinadi:   ln -s \ $PLAYWRIGHT_BROWSERS_PATH/chrome-linux64/chrome \ $PLAYWRIGHT_BROWSERS_PATH/chromium-1140/chrome-linux/chrome  Biroq, bu kelajakka oid bo'ladimi, degan xavotirda edim. Oxir-oqibat, dramaturg Chromium-ning yangi versiyasidan foydalanadi va u endi   jildiga o'xshamaydi. Dramaturg qayerga qarashini qanday aniqlash mumkin? chromium-1140  O'shanda men siz brauzerni quruq ishga tushirishingiz mumkinligini aniqladim.   ~/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  "O'rnatish joyi" qatori juda muhim edi. Va agar biz   o'rnatsak, biz quyidagilarni ko'ramiz: 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 ...  Men shuni xohlayman. Bir oz   sehr bilan men buni qildim: 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  Bularning barchasini tushunganimdan so'ng, men   ga   skriptini qo'shishim kerak edi.   allaqachon   da o'rnatilganligi sababli, mening skriptim biroz soddaroq bo'lar edi. Bu mening oxirgi   faylim edi: 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" } } } }    nima qilishini qisqacha ko'rib chiqaman: test-setup    hisobi, Playwright Chrome brauzerini qidiradigan asosiy jildni aniqlash uchun dramaturg o'rnatish --   bilan   foydalanadi. Buni   o‘zgaruvchisi uchun qiymat sifatida o‘rnatadi. PLAYWRIGHT_BROWSERS_PATH awk playwright install -- dry-run CHROMIUM_PATH    ga yangi jild (va barcha kerakli asosiy papkalarni) yaratadi, bu esa Playwright   binarini qidiradigan haqiqiy jilddir. CHROMIUM_PATH/chrome-linux chrome  Chrome brauzerining Heroku buildpack oʻrnatilishiga (   ) ishora qilish uchun ushbu jildda belgili havola yaratadi. /app/.chrome-for-testing/chrome-linux64/chrome  Sinovlarni qayta ishga tushiring  Yangilangan   faylim bilan dramaturg Chrome oʻrnatish paketidan foydalanishi mumkin. Sinovlarni yana bir bor o'tkazish vaqti keldi.  app.json  Muvaffaqiyat!    skripti kutilganidek ishladi.  test-setup  Dramaturg   ikkilik fayliga kirishga muvaffaq bo'ldi va sinovlardan o'tdi.  chrome  Xulosa  Mening veb-ilovalarimni oxirigacha sinovdan o'tkazish qiyinroq bo'lib bormoqda, shuning uchun men unga tobora ko'proq ustuvor ahamiyat beryapman. So'nggi kunlarda bu dramaturgdan ham ko'proq foydalanishni anglatadi. Bu moslashuvchan va tez. Endi men Heroku CI da Chrome for Testing to‘plamini ishga tushirish bo‘yicha ishni (men uchun   !) bajarganimdan so‘ng, men yana bir bor brauzerimni avtomatlashtirish test to‘plamlarini yaratishni boshlashim mumkin. va siz uchun  Ushbu ko'rsatma uchun kod mening   mavjud. GitHub omborimda  Baxtli kodlash!

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

Ushbu audio hikoyaning asl tilida yaratilgan!

Juda uzoq; O'qish

Dramaturg va Chrome brauzerini Heroku’da sinovdan o‘tkazish: yangi boshlanuvchilar uchun qo‘llanma

Dramaturg va Chrome brauzerini Heroku’da sinovdan o‘tkazish: yangi boshlanuvchilar uchun qo‘llanma

About Author

IZOHLAR

TEGI QILISH

USHBU MAQOLA TAQDIM ETILGAN

Related Stories

Meet Uzi World Digital, Winner of Startups of the year 2024 in Kolkata, West Bengal, India

Meet UzairaAdvisory, Winner of Startups of The Year 2024 in Business

Meet UzairaAdvisory, Startups of The Year 2024 Nominee

Meet Uzi World Digital, Winner of Startups of the year 2024 in Kolkata, West Bengal, India

Meet UzairaAdvisory, Winner of Startups of The Year 2024 in Business

Meet UzairaAdvisory, Startups of The Year 2024 Nominee

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps