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

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 Heroku blogiga duch keldim. Heroku-da boshsiz Chrome-ni o'rnatadigan to'plam mavjud bo'lib, siz uni CI quvuridagi testlaringiz uchun ishlatishingiz mumkin.

Blog postidagi namuna sozlamalari Puppeteer va Jest bilan sinovdan o'tgan React ilovasi edi. Bu ajoyib boshlanish... lekin qo'g'irchoq o'rniga Dramaturgidan foydalansam nima bo'ladi? Bu mumkinmi?

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 for Testing to'plami Chrome-ni Heroku ilovasiga o'rnatadi, shuning uchun siz Heroku CI-da Playwright testlarini juda engil sozlash bilan o'tkazishingiz mumkin.

Sinov uchun ariza bilan tanishish

Men buni endigina sinab ko'rganim uchun, dastlab Heroku blog postida havola qilingan GitHub repo-ni ajratib oldim. Ilova havola, matn kiritish va yuborish tugmasiga ega oddiy React ilovasi edi. Uchta sinov bor edi:

1. Havola ishlayotganligini va to'g'ri manzilga yo'naltirishini tekshiring.
2. Matn kiritish foydalanuvchi kiritgan ma'lumotlarni to'g'ri ko'rsatishini tekshiring.
3. 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 pnpm dan foydalanmoqchi edim. Mana mening GitHub repo- ga havola.

Dramaturgdan foydalanish uchun kodni o'zgartiring

Keling, kodni o'zgartirish uchun qilgan qadamlarimni ko'rib chiqaylik. Men heroku-examples repo bilan bir xil bo'lgan vilkalar repo bilan boshladim.

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 [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

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, package.json dan Jest konfiguratsiya bo'limini olib tashladim.

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 playwright.config.js faylining projects bo'limidan boshqa brauzerlarni olib tashladim:

 /* 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 src/tests/puppeteer.test.js manzilida Puppeteer test fayli mavjud edi. Men bu faylni tests/playwright.spec.js ga ko'chirdim. Keyin men dramaturgning konventsiyalaridan foydalanish uchun testni yangiladim, ular juda toza ko'rsatilgan. Yangi test fayli quyidagicha ko'rinish oldi:

 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 olib tashlang, Buning o'rniga Playwright's webServer-dan foydalaning

React ilovamni sinab ko'rish uchun avval uni alohida jarayonda ( http://localhost:8080 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 start-server-and-test paketi ishlatilgan.

Biroq, siz Playwright-ni sinovlarni boshlashdan oldin dasturni aylantirish uchun sozlashingiz mumkin. Bu juda qulay!

Men loyihamdan start-server-and-test olib tashladim.

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

playwright.config.js da men pastki qismidagi webServer bo'limiga izohni olib tashladim va uni shunday ko'rinishga o'zgartirdim:

 /* 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 test:ci skriptini original package.json faylidan olib tashladim. Buning o'rniga, mening sinov skriptimi shunday ko'rinardi:

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

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

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 src/App.js yangilashim kerak edi:

 <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, Testlar yorlig'iga o'tdim va Heroku CI-ni yoqish-ni bosing.

Nihoyat, npm test:ci qo'ng'iroq qilish uchun o'rnatilgan test skriptini olib tashlash uchun app.json faylini o'zgartirdim. Men package.json faylimdan test:ci skriptini allaqachon olib tashlagan edim. package.json -dagi test skripti endi foydalaniladigan skript edi va Heroku CI sukut bo'yicha uni qidiradi.

Sinov uchun Chrome to'plamidan foydalanishga ishonch hosil qilgan app.json faylim quyidagicha ko'rinish oldi:

 { "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 playwright install chromium buyrug'i bilan o'rnatishim mumkin edi . 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.

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 /app/.chrome-for-testing/chrome-linux64/chrome manzilida edi. Menga dramaturg uni izlashi kerak edi.

Dramaturgga o'rnatilgan Chrome brauzerini topishga yordam berish

Eslatma: Agar bu yerdagi mayda-chuyda tafsilotlar sizni qiziqtirmasa, bu bo‘limni o‘tkazib yuborib, app.json to‘liq nusxasini pastroqqa ko‘chirishingiz mumkin. Bu sizga Heroku CI-da dramaturg bilan ishlash uchun kerak bo'lgan narsalarni berishi kerak.

Dramaturg hujjatlarida, agar siz uning barcha brauzer oʻrnatishlari uchun maxsus joylashuvdan foydalansangiz, dramaturgga bildiradigan muhit oʻzgaruvchisini oʻrnatishingiz mumkinligini topdim. Bu env o'zgaruvchisi PLAYWRIGHT_BROWSERS_PATH . Men u erdan boshlashga qaror qildim.

app.json da men shunday env o'zgaruvchisini o'rnatdim:

 { "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 chromium-1140 jildiga o'xshamaydi. Dramaturg qayerga qarashini qanday aniqlash mumkin?

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 PLAYWRIGHT_BROWSERS_PATH o'rnatsak, biz quyidagilarni ko'ramiz:

 ~/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 awk sehr bilan men buni qildim:

 ~/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 app.json ga test-setup skriptini qo'shishim kerak edi. PLAYWRIGHT_BROWSERS_PATH allaqachon env da o'rnatilganligi sababli, mening skriptim biroz soddaroq bo'lar edi. Bu mening oxirgi app.json faylim edi:

 { "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 nima qilishini qisqacha ko'rib chiqaman:

1. PLAYWRIGHT_BROWSERS_PATH hisobi, Playwright Chrome brauzerini qidiradigan asosiy jildni aniqlash uchun dramaturg o'rnatish -- awk bilan playwright install -- dry-run foydalanadi. Buni CHROMIUM_PATH o‘zgaruvchisi uchun qiymat sifatida o‘rnatadi.

   
   

2. CHROMIUM_PATH/chrome-linux ga yangi jild (va barcha kerakli asosiy papkalarni) yaratadi, bu esa Playwright chrome binarini qidiradigan haqiqiy jilddir.

   
   

3. Chrome brauzerining Heroku buildpack oʻrnatilishiga ( /app/.chrome-for-testing/chrome-linux64/chrome ) ishora qilish uchun ushbu jildda belgili havola yaratadi.

Sinovlarni qayta ishga tushiring

Yangilangan app.json faylim bilan dramaturg Chrome oʻrnatish paketidan foydalanishi mumkin. Sinovlarni yana bir bor o'tkazish vaqti keldi.

Muvaffaqiyat!

test-setup skripti kutilganidek ishladi.

Dramaturg chrome ikkilik fayliga kirishga muvaffaq bo'ldi va sinovlardan o'tdi.

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 va siz uchun !) bajarganimdan so‘ng, men yana bir bor brauzerimni avtomatlashtirish test to‘plamlarini yaratishni boshlashim mumkin.

Ushbu ko'rsatma uchun kod mening GitHub omborimda mavjud.

Baxtli kodlash!