Тестирање на драматург и на прелистувачот Chrome во Heroku: водич за почетници

Отсекогаш сум сакал да ги гледам тестовите на мојата единица како се извршуваат (и поминуваат). Тие се брзи, а полагањето тестови ми дава уверување дека моите поединечни парчиња се однесуваат како што треба. Спротивно на тоа, честопати се мачев да им дадам приоритет на тестовите од крај до крај за прелистувачот бидејќи нивното пишување и извршување беше исцрпувачки бавно.

За среќа, алатките за тестирање од крај до крај во прелистувачот станаа многу подобри и побрзи со текот на годините. И со поставување на прелистувач без глава, можам да ги извршам тестовите на моите прелистувачи како дел од мојот CI.

Неодамна, наидов на овој блог пост на Heroku кој зборува за автоматизирање на тестирањето во прелистувачот со безглавен Chrome во рамките на Heroku CI. Heroku има buildpack кој инсталира безглавен Chrome, кој можете да го повикате за вашите тестови во CI гасоводот.

Пример за поставување од објавата на блогот беше апликацијата React тестирана со Puppeteer и Jest . Тоа е одличен почеток... но што ако користам Драматург наместо Куклар? Дали е можно?

Решив да истражам. Како што се испоставува - да, можете да го направите ова и со Драматург! Така, ги снимив чекорите што ќе ви требаат за да ги извршите тестовите на Playwright на прелистувачот Chrome без глава што се користи во Heroku CI. Во овој пост, ќе ве прошетам низ чекорите за поставување.

Брз збор за автоматизација на прелистувачот за тестирање од крај до крај

Тестирањето од крај до крај доловува како корисниците всушност комуницираат со вашата апликација во прелистувач, потврдувајќи ги целосните работни текови. Драматург го прави овој процес прилично беспрекорен со тестирањето во Chrome, Firefox и Safari. Се разбира, извршувањето на целосна листа на тестови на прелистувачот во CI е прилично тешко, поради што режимот без глава помага.

Градежниот пакет на Chrome за тестирање од Heroku го инсталира Chrome на апликацијата Heroku, за да можете да ги извршите вашите тестови за Playwright во Heroku CI со навистина лесно поставување.

Вовед во Апликацијата за тестирање

Бидејќи само што го пробував ова, го откинав репото на GitHub што првично беше наведено во блог постот на Heroku. Апликацијата беше едноставна апликација React со врска, внесување текст и копче за поднесување. Имаше три тестови:

1. Потврдете дека врската работи и се пренасочува на вистинската локација.
2. Проверете дали внесувањето текст правилно го прикажува внесувањето на корисникот.
3. Потврдете дека поднесувањето на формуларот го ажурира текстот прикажан на страницата.

Прилично едноставно. Сега, само требаше да го сменам кодот за да го користам Playwright наместо Puppeteer и Jest. О, и јас исто така сакав да користам pnpm наместо npm. Еве линк до моето чаталено складиште на GitHub .

Изменете го кодот за да користите драматург

Ајде да одиме низ чекорите што ги презедов за да го модифицирам кодот. Почнав со моето чаталено репо, идентично со heroku-examples .

Користете pnpm

Сакав да користам pnpm наместо npm. (Лична желба.) Значи, еве што направив прво:

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

Додајте драматург во проектот

Следно, ги отстранив Puppeteer и Jest и додадов Драматург.

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

Го отстранив и делот за конфигурација Jest од package.json .

Конфигурирајте го Playwright да користи само Chromium

Можете да ги извршите вашите тестови за Playwright во Chrome, Firefox и Safari. Бидејќи бев фокусиран на Chrome, ги отстранив другите прелистувачи од делот 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'] }, // }, ], …

Разменете го кодот за тест за кукли за тест кодот за драматург

Оригиналниот код имаше тест датотека Puppeteer на 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); }); });

Отстранете го start-server-and-test , наместо тоа, користејќи го веб-серверот на Playwright

За да ја тестирам мојата апликација React, прво требаше да ја вртам (на http://localhost:8080 ) во посебен процес, а потоа можев да ги извршам моите тестови. Ова би било случај без разлика дали користев куклар или драмски писател. Со Puppeteer, примерот на Heroku го користеше пакетот start-server-and-test .

Сепак, можете да го конфигурирате Playwright да ја врти апликацијата пред да изврши тестови. Ова е прилично погодно!

Го отстранив start-server-and-test од мојот проект.

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

Во playwright.config.js , го откоментирав делот webServer на дното, менувајќи го да изгледа вака:

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

Потоа, ја отстранив test:ci скриптата од оригиналната датотека package.json . Наместо тоа, мојата тест скрипта изгледаше вака:

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

Инсталирајте го прелистувачот Playwright на мојата локална машина

Playwright ги инсталира најновите бинарни датотеки на прелистувачот за да ги користи за своите тестови. Така, на мојата локална машина, ми требаше Playwright да ја инсталира својата верзија на Chromium.

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

Забелешка: Buildpack Chrome for Testing на Heroku го инсталира прелистувачот што ќе го користиме за тестирање. Ќе го поставиме нашиот CI така што Playwright го користи тој прелистувач наместо да ги троши времето и ресурсите за инсталирање на сопствениот.

Извршете ги тестовите локално

Со тоа, јас бев целосно подготвен. Време беше да ги испробам моите тестови локално.

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

О! Така е. Го изменив мојот тест за да очекувам врската во апликацијата да ме однесе до документацијата на Playwright наместо до документацијата на Puppeteer. Требаше да го ажурирам src/App.js на линијата 19:

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

Сега, време беше повторно да се извршат тестовите…

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

Тестовите поминаа! Следно, време беше да не однесеме на Хероку ЦИ.

Распоредете во Хероку за да користите CI Pipeline

Ги следев инструкциите во постот на блогот Heroku за да ја поставам мојата апликација во цевководот Heroku CI.

Направете гасовод Хероку

Во Хероку, создадов нов гасовод и го поврзав со моето чаталено складиште на GitHub.

Следно, ја додадов мојата апликација на инсценирање.

Потоа, отидов во јазичето Тестови и кликнав Овозможи Heroku CI .

Конечно, ја изменив датотеката app.json за да ја отстранам тест скриптата која беше поставена да повикува npm test:ci . Веќе ја отстранив test:ci скриптата од мојата датотека package.json . test скриптата во package.json сега беше таа што требаше да се користи, а Heroku CI стандардно ќе ја бара таа.

Мојата датотека app.json , која се погрижи да го користи buildpack Chrome за тестирање, изгледаше вака:

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

Почетно тестирање

Го турнав мојот код до GitHub, и ова предизвика тест во Heroku CI.

Тестот не успеа, но не бев загрижен. Знаев дека ќе има некоја конфигурација на Драматург да направам.

Копајќи во дневникот за тестирање, го најдов ова:

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

Драматург го бараше примерот на прелистувачот Chrome. Можев да го инсталирам со командата playwright install chromium како дел од моето поставување за тестирање CI. Но, тоа би ја поразило целата цел да се има buildpack Chrome за тестирање. Хром веќе беше инсталиран; Само требаше да укажам на тоа правилно.

Гледајќи назад во мојот дневник за поставување тестови за Heroku, ги најдов овие редови:

 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

Значи, прелистувачот што сакав да го користам беше на /app/.chrome-for-testing/chrome-linux64/chrome . Ќе ми треба само Драматург да го бара таму.

Помагање на драмскиот писател да го најде инсталираниот прелистувач на Chrome

Забелешка: ако не ве интересираат неразбирливите детали овде, можете да го прескокнете овој дел и едноставно да го копирате целосниот app.json подолу. Ова треба да ви го даде она што ви е потребно за да започнете со работа со Playwright на Heroku CI.

Во документацијата на Playwright, открив дека можете да поставите променлива на опкружувањето што му кажува на Playwright дали сте користеле прилагодена локација за сите инсталации на прелистувачот . Променливата env е PLAYWRIGHT_BROWSERS_PATH . Решив да почнам таму.

Во app.json , поставив променлива env вака:

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

Го турнав мојот код до GitHub за да видам што ќе се случи со моите тестови во CI.

Очекувано, повторно не успеа. Сепак, грешката во дневникот го покажа ова:

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

Тоа ме зближи прилично. Решив да го направам ова:

• Направете ги папките потребни за местото каде што Playwright очекува да биде прелистувачот Chrome. Тоа би била команда како:

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

• Создадете символик во оваа папка за да укаже на бинарната верзија на Chrome инсталирана од Heroku buildpack. Тоа би изгледало отприлика вака:

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

Сепак, бев загрижен дали ова ќе биде доказ за иднината. На крајот, Playwright би користел нова верзија на Chromium и повеќе нема да изгледа како папка chromium-1140 . Како би можел да сфатам каде ќе изгледа Драматургот?

Тогаш открив дека можете да извршите суво инсталирање на прелистувачот.

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

Линијата „Инсталирај локација“ беше клучна. И, ако поставиме 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 ...

Тоа е она што го сакам. Со 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

Со сето тоа сфатив, едноставно требаше да додадам скрипта 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" } } } }

Накратко ќе проучам што прави test-setup :

1. Сметководството за PLAYWRIGHT_BROWSERS_PATH , користи playwright install -- dry-run со awk за да ја одреди основната папка каде што Playwright ќе го бара прелистувачот Chrome. Го поставува ова како вредност за променливата CHROMIUM_PATH .

   
   

2. Создава нова папка (и сите потребни родителски папки) во CHROMIUM_PATH/chrome-linux , што е вистинската папка каде што Playwright ќе ја бара бинарната содржина chrome .

   
   

3. Создава символик во таа папка за Chrome за да укаже на инсталацијата на buildpack на Heroku на Chrome ( /app/.chrome-for-testing/chrome-linux64/chrome ).

Стартувај тестови повторно

Со мојата ажурирана датотека app.json , Playwright треба да може да ја користи инсталацијата на Chrome од buildpack. Време беше уште еднаш да се извршат тестовите.

Успех!

Скриптата test-setup работи како што се очекуваше.

Драматургот можеше да пристапи до бинарната верзија chrome и да ги изврши тестовите, кои поминаа.

Заклучок

Тестирањето од крај до крај за моите веб-апликации станува се помалку незгодно, па затоа се повеќе и повеќе давам приоритет. Во последниве денови, тоа значеше и повеќе да се користи Драматург. Тој е флексибилен и брз. И сега, кога ја завршив работата (за мене и за вас !) да ја подигнам и да работи со buildpack Chrome за тестирање во Heroku CI, можам повторно да почнам да ги градам моите тест пакети за автоматизација на прелистувачот.

Кодот за овој преглед е достапен во моето складиште на GitHub .

Среќно кодирање!