Oduvijek sam volio gledati kako moji jedinični testovi rade (i prolaze). Brzi su, a polaganje testova mi daje sigurnost da se moji pojedinačni komadi ponašaju kako bi trebali. Suprotno tome, često sam se borio da odredim prioritete end-to-end testova za pretraživač jer je njihovo pisanje i pokretanje bilo strašno sporo.  Srećom, alati za end-to-end testiranje u pretraživaču su postali mnogo bolji i brži tokom godina. A sa podešavanjem pretraživača bez glave, mogu pokrenuti svoje testove pretraživača kao dio svog CI.  Nedavno sam naišao na ovaj   koji govori o automatizaciji testiranja u pretraživaču sa bezglavim Chromeom u Heroku CI. Heroku ima buildpack koji instalira Chrome bez glave, koji možete pozvati za svoje testove u CI pipelineu. Heroku blog post  Primjer podešavanja iz objave na blogu bila je React aplikacija testirana sa   i   . To je sjajan početak… ali šta ako koristim   umjesto Puppeteer? Da li je moguće? Puppeteer Jest Dramski pisac  Odlučio sam da istražim. Kako se ispostavilo — da, to možete učiniti i sa Playwrightom! Dakle, snimio sam korake koji će vam biti potrebni da pokrenete Playwright testove na bezglavom Chrome pretraživaču koji se koristi u Heroku CI. U ovom postu ću vas provesti kroz korake za postavljanje.  Kratka riječ o automatizaciji pretraživača za testiranje s kraja na kraj  Testiranje s kraja na kraj bilježi kako korisnici zapravo komuniciraju s vašom aplikacijom u pregledniku, potvrđujući potpune tokove posla. Playwright čini ovaj proces prilično besprijekornim testiranjem u Chromeu, Firefoxu i Safariju. Naravno, pokretanje čitavog niza testova pretraživača u CI je prilično teško, zbog čega bezglavi način rada pomaže.    od Herokua instalira Chrome na Heroku aplikaciju, tako da možete pokrenuti svoje Playwright testove u Heroku CI uz stvarno lagano postavljanje. Chrome for Testing buildpack  Uvod u aplikaciju za testiranje  Pošto sam ovo upravo isprobavao, razdvojio sam   u Heroku blog postu. Aplikacija je bila jednostavna React aplikacija s vezom, unosom teksta i gumbom za slanje. Bila su tri testa: GitHub repo koji je prvobitno bio referenciran  Provjerite funkcionira li veza i preusmjerava na pravu lokaciju.  Uvjerite se da unos teksta ispravno prikazuje korisnički unos.  Provjerite da li se slanjem obrasca ažurira tekst prikazan na stranici.  Prilično jednostavno. Sada sam samo trebao promijeniti kod da koristim Playwright umjesto Puppeteer and Jest. Oh, i također sam htio koristiti   umjesto npm. Evo linka na   . pnpm moj račvasti GitHub repo  Izmijenite kod da biste koristili dramaturga  Hajde da prođemo kroz korake koje sam preduzeo da modifikujem kod. Počeo sam sa svojim račvanim repo, identičnim   repo. heroku-examples  Koristite pnpm  Htio sam koristiti pnpm umjesto npm. (Lične preferencije.) Dakle, evo šta sam prvo uradio:   ~/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  Dodajte dramaturga projektu  Zatim sam uklonio Puppeteer i Jest, a dodao sam Dramatičara.   ~/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.  Također sam uklonio dio konfiguracije Jest iz   . package.json  Konfigurirajte Playwright da koristi samo Chromium  Svoje Playwright testove možete pokrenuti u Chromeu, Firefoxu i Safariju. Pošto sam bio fokusiran na Chrome, uklonio sam ostale pretraživače iz odjeljka   generiranog   fajla: projects 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'] }, // }, ], …  Zamijenite testni kod lutkara za testni kod dramatičara  Originalni kod je imao Puppeteer test fajl na   . Premjestio sam taj fajl u   . Zatim sam ažurirao test da koristim Playwrightove konvencije, koje su prilično jasno mapirane. Novi test fajl je izgledao ovako: 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); }); });  Uklonite   , koristeći umjesto toga Playwrightov webServer start-server-and-test  Da bih testirao svoju React aplikaciju, morao sam je prvo pokrenuti (na   ) u zasebnom procesu, a zatim sam mogao pokrenuti svoje testove. To bi bio slučaj bez obzira da li sam koristio Puppeteer ili Dramaturg. Sa Puppeteer-om, Heroku primjer je koristio paket   . http://localhost:8080 start-server-and-test  Međutim, možete konfigurirati Playwright da pokrene aplikaciju prije pokretanja testova. Ovo je prilično zgodno!  Uklonio sam   iz svog projekta. start-server-and-test   ~/project$ pnpm remove start-server-and-test  U   , dekomentirao sam odjeljak webServer na dnu, modifikujući ga da izgleda ovako: 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, },  Zatim sam uklonio   skriptu iz originalne datoteke   . Umjesto toga, moja test skripta je izgledala ovako: test:ci package.json  "scripts": { … "test": "playwright test --project=chromium --reporter list" },  Instalirajte pretraživač Playwright na moj lokalni računar  Playwright instalira najnovije binarne datoteke pretraživača koje koristi za svoje testove. Dakle, na mojoj lokalnoj mašini, trebao mi je Playwright da instalira svoju verziju Chromiuma.   ~/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%    Chrome for Testing buildpack na Herokuu instalira preglednik koji ćemo koristiti za testiranje. Postavićemo naš CI tako da Playwright koristi taj pretraživač umjesto da troši vrijeme i resurse na instaliranje vlastitog. Napomena:  Pokreni testove lokalno  S tim sam bio spreman. Bilo je vrijeme da isprobam svoje testove lokalno.   ~/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! Tako je. Izmijenio sam svoj test kako bih očekivao da će me veza u aplikaciji odvesti do Playwrightove dokumentacije umjesto do Puppeteerove. Trebao sam ažurirati   u redu 19: src/App.js   <Link href="https://playwright.dev/" rel="noopener"> Playwright Documentation </Link>  Sada je došlo vrijeme da ponovo izvršimo testove…   ~/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)  Testovi su prošli! Zatim je došlo vrijeme da nas odvedemo na Heroku CI.  Postavite na Heroku da biste koristili CI Pipeline  Slijedio sam upute u Heroku blog postu kako bih postavio svoju aplikaciju u Heroku CI kanal.  Kreirajte Heroku Pipeline  U Herokuu sam kreirao novi pipeline i povezao ga sa svojim račvanim GitHub repo.   Zatim sam dodao svoju aplikaciju u staging.   Zatim sam otišao na karticu   i kliknuo   .  Testovi na Omogući Heroku CI  Konačno, modificirao sam   datoteku da uklonim testnu skriptu koja je bila postavljena da poziva   . Već sam uklonio   skriptu iz mog   fajla.   skripta u   je sada bila ta koja se koristila, a Heroku CI bi je tražio po defaultu. app.json npm test:ci test:ci package.json test package.json  Moj   fajl, koji se pobrinuo da koristi Chrome for Testing buildpack, izgledao je ovako: app.json   { "environments": { "test": { "buildpacks": [ { "url": "heroku-community/chrome-for-testing" }, { "url": "heroku/nodejs" } ] } } }  Početni probni rad  Gurnuo sam svoj kod na GitHub, i to je pokrenulo probno pokretanje u Heroku CI.   Probni rad nije uspio, ali nisam bio zabrinut. Znao sam da će biti potrebno napraviti neku konfiguraciju dramaturga.  Kopajući po test logu, našao sam ovo:   Error: browserType.launch: Executable doesn't exist at /app/.cache/ms-playwright/chromium-1140/chrome-linux/chrome  Dramatičar je tražio instancu preglednika Chrome.   bih ga instalirati pomoću naredbe   kao dio svog CI testnog podešavanja. Ali to bi poništilo cijelu svrhu postojanja paketa gradnje Chrome for Testing. Chrome je već instaliran; Samo sam trebao da ukažem na to kako treba. Mogao playwright install chromium  Osvrćući se na svoj dnevnik podešavanja testa za Heroku, pronašao sam ove redove:   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  Dakle, pretraživač koji sam želeo da koristim bio je na adresi   . Samo bi mi trebao dramaturg da ga potraži tamo. /app/.chrome-for-testing/chrome-linux64/chrome  Pomaganje Playwrightu da pronađe instalirani Chrome pretraživač    Ako vas ovdje ne zanimaju sitni detalji, možete preskočiti ovaj odjeljak i jednostavno kopirati cijeli   dolje. Ovo bi vam trebalo dati ono što vam je potrebno da počnete i radite s Playwrightom na Heroku CI. Napomena: app.json  U Playwrightovoj dokumentaciji, otkrio sam da možete postaviti varijablu okruženja koja govori Playwrightu da li ste koristili   . Ta varijabla env je   . Odlučio sam da počnem tamo. prilagođenu lokaciju za sve njegove instalacije u pretraživaču PLAYWRIGHT_BROWSERS_PATH  U   , postavio sam   varijablu ovako: app.json env   { "environments": { "test": { "env": { "PLAYWRIGHT_BROWSERS_PATH": "/app/.chrome-for-testing" }, ...  Prebacio sam svoj kod na GitHub da vidim šta će se desiti sa mojim testovima u CI.  Očekivano, opet je propao. Međutim, greška dnevnika je pokazala ovo:   Error: browserType.launch: Executable doesn't exist at /app/.chrome-for-testing/chromium-1140/chrome-linux/chrome  To me je prilično približilo. Odlučio sam da uradim ovo:  Kreirajte foldere koji su potrebni za mjesto gdje Playwright očekuje da se Chrome pretraživač nalazi. To bi bila naredba poput:   mkdir -p "$PLAYWRIGHT_BROWSERS_PATH/chromium-1140/chrome-linux"  Kreirajte simboličku vezu u ovoj fascikli da biste ukazali na Chrome binarni fajl koji je instalirao Heroku buildpack. To bi izgledalo otprilike ovako:   ln -s \ $PLAYWRIGHT_BROWSERS_PATH/chrome-linux64/chrome \ $PLAYWRIGHT_BROWSERS_PATH/chromium-1140/chrome-linux/chrome  Međutim, bio sam zabrinut da li će ovo biti održivo u budućnosti. Na kraju, Playwright bi koristio novu verziju Chromiuma i više ne bi izgledao kao mapa   . Kako bih mogao shvatiti gdje će Dramski pisac gledati? chromium-1140  Tada sam otkrio da možete izvršiti instalaciju pretraživača na suho.   ~/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  Ta linija “Instaliraj lokaciju” bila je ključna. A, ako postavimo   , evo šta bismo vidjeli: 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 ...  To je ono što želim. Uz malo   magije, uradio sam ovo: 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  Kada sam sve to shvatio, jednostavno sam trebao dodati skriptu   u   . Pošto je   već postavljen u   , moja skripta bi bila malo jednostavnija. Ovo je bio moj konačni   fajl: test-setup app.json 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" } } } }  Ukratko ću proći kroz šta radi   : test-setup  Računajući za   , koristi   sa   da bi se odredio korijenski folder u kojem će Playwright tražiti Chrome pretraživač. Postavlja ovo kao vrijednost za varijablu   . PLAYWRIGHT_BROWSERS_PATH playwright install -- dry-run awk CHROMIUM_PATH  Kreira novu fasciklu (i sve potrebne roditeljske fascikle) u   , što je stvarna fascikla u kojoj će Playwright tražiti   binarni fajl. CHROMIUM_PATH/chrome-linux chrome  Kreira simboličku vezu u tom folderu za Chrome da ukazuje na Heroku buildpack instalaciju Chromea (   ). /app/.chrome-for-testing/chrome-linux64/chrome  Pokreni testove ponovo  Sa mojom ažuriranom datotekom   , Playwright bi trebao moći koristiti instalaciju Chromea iz paketa za izgradnju. Bilo je vrijeme da još jednom izvršimo testove.  app.json  Uspjeh!  Skripta   radila je kako se očekivalo.  test-setup  Dramaturg je uspeo da pristupi   binarnoj verziji i pokrene testove, koji su prošli.  chrome  Zaključak  End-to-end testiranje za moje web aplikacije postaje sve manje glomazno, pa mu sve više dajem prioritet. Posljednjih dana to je značilo i više korištenja Playwrighta. Fleksibilan je i brz. I sada kada sam obavio posao (za sebe   !) da ga pokrenem i pokrenem sa paketom gradnje Chrome for Testing u Heroku CI, mogu ponovo početi sa izgradnjom svojih testnih paketa za automatizaciju pretraživača. i za vas  Kod za ovo uputstvo je dostupan u mom   . GitHub repozitorijumu  Sretno kodiranje!

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

Ovaj audio je proizveden na originalnom jeziku priče!

Predugo; Citati

Testiranje dramaturga i Chrome pretraživača u Heroku: Vodič za početnike

Testiranje dramaturga i Chrome pretraživača u Heroku: Vodič za početnike

About Author

KOMENTARI

HANG TAGS

OVAJ ČLANAK JE PREDSTAVLJEN U

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps