Saya sentiasa suka menonton ujian unit saya berjalan (dan lulus). Mereka pantas, dan lulus ujian memberi saya jaminan bahawa bahagian individu saya berkelakuan seperti yang sepatutnya. Sebaliknya, saya sering bergelut untuk mengutamakan ujian hujung ke hujung untuk penyemak imbas kerana menulis dan menjalankannya adalah sangat perlahan.  Nasib baik, alat untuk ujian dalam penyemak imbas hujung ke hujung telah menjadi lebih baik dan lebih pantas selama ini. Dan dengan persediaan penyemak imbas tanpa kepala, saya boleh menjalankan ujian penyemak imbas saya sebagai sebahagian daripada CI saya.  Baru-baru ini, saya terjumpa   ini bercakap tentang mengautomasikan ujian dalam penyemak imbas dengan Chrome tanpa kepala dalam Heroku CI. Heroku mempunyai buildpack yang memasang Chrome tanpa kepala, yang boleh anda gunakan untuk ujian anda dalam saluran paip CI. catatan blog Heroku  Contoh persediaan daripada catatan blog ialah apl React yang diuji dengan   dan   . Itu permulaan yang bagus … tetapi bagaimana jika saya menggunakan   dan bukannya Puppeteer? Adakah mungkin? Puppeteer Jest Penulis Drama  Saya memutuskan untuk menyiasat. Ternyata — ya, anda juga boleh melakukan ini dengan Penulis Drama! Jadi, saya menangkap langkah yang anda perlukan untuk menjalankan ujian Playwright pada penyemak imbas Chrome tanpa kepala yang digunakan dalam Heroku CI. Dalam siaran ini, saya akan membimbing anda melalui langkah-langkah untuk membuat persediaan.  Perkataan Pantas tentang Automasi Penyemak Imbas untuk Ujian Hujung-ke-Hujung  Ujian hujung ke hujung menangkap cara pengguna sebenarnya berinteraksi dengan apl anda dalam penyemak imbas, mengesahkan aliran kerja yang lengkap. Penulis drama menjadikan proses ini cukup lancar dengan ujian dalam Chrome, Firefox dan Safari. Sudah tentu, menjalankan ujian pelayar penuh dalam CI agak berat, itulah sebabnya mod tanpa kepala membantu.    daripada Heroku memasang Chrome pada apl Heroku, supaya anda boleh menjalankan ujian Playwright anda dalam Heroku CI dengan persediaan yang sangat ringan. Pek binaan Chrome untuk Pengujian  Pengenalan kepada Permohonan untuk Pengujian  Memandangkan saya baru sahaja mencuba ini, saya telah membatalkan   dalam catatan blog Heroku. Aplikasi itu ialah apl React yang ringkas dengan pautan, input teks dan butang hantar. Terdapat tiga ujian: repo GitHub yang pada asalnya dirujuk  Sahkan bahawa pautan berfungsi dan mengubah hala ke lokasi yang betul.  Sahkan bahawa input teks memaparkan input pengguna dengan betul.  Sahkan bahawa penyerahan borang mengemas kini teks yang dipaparkan pada halaman.  Cukup mudah. Sekarang, saya hanya perlu menukar kod untuk menggunakan Playwright dan bukannya Puppeteer dan Jest. Oh, dan saya juga mahu menggunakan   dan bukannya npm. Berikut ialah pautan ke   . pnpm repo GitHub bercabang saya  Ubah suai Kod untuk Menggunakan Penulis Drama  Mari kita ikuti langkah yang saya ambil untuk mengubah suai kod. Saya bermula dengan repo bercabang saya, sama dengan repo   . heroku-examples  Guna pnpm  Saya mahu menggunakan pnpm dan bukannya npm. (Keutamaan peribadi.) Jadi, inilah yang saya lakukan dahulu:   ~/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  Tambahkan Penulis Drama pada Projek  Seterusnya, saya mengalih keluar Puppeteer dan Jest, dan saya menambah Playwright.   ~/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.  Saya juga mengalih keluar bahagian konfigurasi Jest daripada   . package.json  Konfigurasikan Penulis Drama untuk menggunakan Chromium Sahaja  Anda boleh menjalankan ujian Playwright anda dalam Chrome, Firefox dan Safari. Memandangkan saya tertumpu pada Chrome, saya mengalih keluar penyemak imbas lain daripada bahagian   fail   yang dijana: 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'] }, // }, ], …  Tukar Kod Ujian Puppeteer dengan Kod Ujian Penulis Drama  Kod asal mempunyai fail ujian Puppeteer di   . Saya mengalihkan fail itu ke   . Kemudian, saya mengemas kini ujian untuk menggunakan konvensyen Playwright, yang dipetakan dengan agak bersih. Fail ujian baharu kelihatan seperti ini: 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); }); });  Alih keluar   , Sebaliknya menggunakan Pelayan web Playwright start-server-and-test  Untuk menguji apl React saya, saya perlu memutarkannya (di   ) dalam proses yang berasingan dahulu, dan kemudian saya boleh menjalankan ujian saya. Ini akan berlaku sama ada saya menggunakan Puppeteer atau Drama. Dengan Puppeteer, contoh Heroku menggunakan pakej   . http://localhost:8080 start-server-and-test  Walau bagaimanapun, anda boleh mengkonfigurasi Playwright untuk memutarkan apl sebelum menjalankan ujian. Ini cukup mudah!  Saya mengalih keluar   daripada projek saya. start-server-and-test   ~/project$ pnpm remove start-server-and-test  Dalam   , saya menyahkomen bahagian webServer di bahagian bawah, mengubah suainya supaya kelihatan seperti ini: 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, },  Kemudian, saya mengalih keluar skrip   daripada fail   yang asal. Sebaliknya, skrip ujian saya kelihatan seperti ini: test:ci package.json  "scripts": { … "test": "playwright test --project=chromium --reporter list" },  Pasang Pelayar Drama Pada Mesin Setempat Saya  Penulis drama memasang binari penyemak imbas terkini untuk digunakan untuk ujiannya. Jadi, pada mesin tempatan saya, saya memerlukan Playwright untuk memasang versi Chromiumnya.   ~/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%    Pek binaan Chrome untuk Pengujian pada Heroku memasang penyemak imbas yang akan kami gunakan untuk ujian. Kami akan menyediakan CI kami supaya Playwright menggunakan penyemak imbas itu dan bukannya menghabiskan masa dan sumber memasang sendiri. Nota:  Jalankan Ujian Setempat  Dengan itu, saya sudah bersedia. Sudah tiba masanya untuk mencuba ujian saya secara tempatan.   ~/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! betul tu. Saya mengubah suai ujian saya untuk mengharapkan pautan dalam apl membawa saya ke dokumentasi Playwright dan bukannya Puppeteer. Saya perlu mengemas kini   pada baris 19: src/App.js   <Link href="https://playwright.dev/" rel="noopener"> Playwright Documentation </Link>  Kini, tiba masanya untuk menjalankan ujian sekali lagi…   ~/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)  Ujian telah berlalu! Seterusnya, tiba masanya untuk membawa kami ke Heroku CI.  Gunakan ke Heroku untuk Menggunakan Talian Paip CI  Saya mengikuti arahan dalam catatan blog Heroku untuk menyediakan apl saya dalam saluran paip Heroku CI.  Buat Saluran Paip Heroku  Di Heroku, saya mencipta saluran paip baharu dan menyambungkannya ke repo GitHub bercabang saya.   Seterusnya, saya menambahkan apl saya pada pementasan.   Kemudian, saya pergi ke tab   dan mengklik   .  Ujian Dayakan Heroku CI  Akhirnya, saya mengubah suai fail   untuk mengalih keluar skrip ujian yang ditetapkan untuk memanggil   . Saya telah pun mengalih keluar skrip   daripada fail   saya. Skrip   dalam   kini yang digunakan dan Heroku CI akan mencari yang itu secara lalai. app.json npm test:ci test:ci package.json test package.json  Fail   saya, yang memastikan anda menggunakan pek binaan Chrome untuk Pengujian, kelihatan seperti ini: app.json   { "environments": { "test": { "buildpacks": [ { "url": "heroku-community/chrome-for-testing" }, { "url": "heroku/nodejs" } ] } } }  Larian Ujian Permulaan  Saya menolak kod saya ke GitHub, dan ini mencetuskan ujian dijalankan dalam Heroku CI.   Ujian larian gagal, tetapi saya tidak bimbang. Saya tahu akan ada beberapa konfigurasi Penulis Drama yang perlu dilakukan.  Menggali di dalam log ujian, saya dapati ini:   Error: browserType.launch: Executable doesn't exist at /app/.cache/ms-playwright/chromium-1140/chrome-linux/chrome  Penulis drama sedang mencari contoh penyemak imbas Chrome. Saya   memasangnya dengan arahan   sebagai sebahagian daripada persediaan ujian CI saya. Tetapi itu akan mengalahkan keseluruhan tujuan mempunyai pek binaan Chrome untuk Pengujian. Chrome telah pun dipasang; Saya hanya perlu menunjukkannya dengan betul. boleh playwright install chromium  Melihat kembali log persediaan ujian saya untuk Heroku, saya dapati baris ini:   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  Jadi, penyemak imbas yang saya mahu gunakan ialah di   . Saya hanya memerlukan Penulis Drama untuk mencarinya. /app/.chrome-for-testing/chrome-linux64/chrome  Membantu Penulis Drama Mencari Penyemak Imbas Chrome yang Dipasang    Jika anda tidak berminat dengan butiran terperinci di sini, anda boleh melangkau bahagian ini dan hanya menyalin   penuh ke bawah. Ini sepatutnya memberi anda perkara yang anda perlukan untuk bangkit dan berjalan dengan Penulis Drama di Heroku CI. Nota: app.json  Dalam dokumentasi Playwright, saya mendapati bahawa anda boleh menetapkan pembolehubah persekitaran yang memberitahu Playwright jika anda menggunakan   . Pembolehubah env itu ialah   . Saya memutuskan untuk bermula di sana. lokasi tersuai untuk semua pemasangan penyemak imbasnya PLAYWRIGHT_BROWSERS_PATH  Dalam   , saya menetapkan pembolehubah   seperti ini: app.json env   { "environments": { "test": { "env": { "PLAYWRIGHT_BROWSERS_PATH": "/app/.chrome-for-testing" }, ...  Saya menolak kod saya ke GitHub untuk melihat perkara yang akan berlaku dengan ujian saya dalam CI.  Seperti yang dijangka, ia gagal lagi. Walau bagaimanapun, ralat log menunjukkan ini:   Error: browserType.launch: Executable doesn't exist at /app/.chrome-for-testing/chromium-1140/chrome-linux/chrome  Itu membuatkan saya agak rapat. Saya memutuskan bahawa saya akan melakukan ini:  Cipta folder yang diperlukan untuk tempat yang dijangkakan oleh Playwright pelayar Chrome. Itu akan menjadi arahan seperti:   mkdir -p "$PLAYWRIGHT_BROWSERS_PATH/chromium-1140/chrome-linux"  Cipta pautan sym dalam folder ini untuk menunjuk ke binari Chrome yang dipasang oleh pek bina Heroku. Itu akan kelihatan seperti ini:   ln -s \ $PLAYWRIGHT_BROWSERS_PATH/chrome-linux64/chrome \ $PLAYWRIGHT_BROWSERS_PATH/chromium-1140/chrome-linux/chrome  Walau bagaimanapun, saya bimbang sama ada ini akan menjadi bukti masa depan. Akhirnya, Playwright akan menggunakan versi baharu Chromium, dan ia tidak akan kelihatan seperti folder   lagi. Bagaimanakah saya boleh mengetahui di mana Penulis Drama akan melihat? chromium-1140  Ketika itulah saya mendapati anda boleh melakukan pemasangan penyemak imbas larian kering.   ~/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  Talian "Pasang lokasi" itu penting. Dan, jika kita menetapkan   , inilah yang akan kita lihat: 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 ...  Itu yang saya mahu. Dengan sedikit   , saya melakukan ini: 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  Dengan semua perkara itu, saya hanya perlu menambah skrip   pada   . Oleh kerana   sudah ditetapkan dalam   , skrip saya akan menjadi lebih mudah sedikit. Ini ialah fail   terakhir saya: 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" } } } }  Saya akan menerangkan secara ringkas apa yang dilakukan   : test-setup  Mengakaunkan   , menggunakan   dengan   untuk menentukan folder akar tempat Pengarang drama akan mencari penyemak imbas Chrome. Tetapkan ini sebagai nilai untuk pembolehubah   . PLAYWRIGHT_BROWSERS_PATH playwright install -- dry-run awk CHROMIUM_PATH  Mencipta folder baharu (dan mana-mana folder induk yang diperlukan) ke   , yang merupakan folder sebenar di mana Playwright akan mencari perduaan   . CHROMIUM_PATH/chrome-linux chrome  Mencipta symlink dalam folder itu untuk Chrome untuk menghala ke pemasangan Heroku buildpack Chrome (   ). /app/.chrome-for-testing/chrome-linux64/chrome  Jalankan Ujian Lagi  Dengan fail   saya yang dikemas kini, Playwright sepatutnya boleh menggunakan pemasangan Chrome daripada buildpack. Sudah tiba masanya untuk menjalankan ujian sekali lagi.  app.json  Berjaya!  Skrip   berjalan seperti yang diharapkan.  test-setup  Penulis drama dapat mengakses binari   dan menjalankan ujian, yang lulus.  chrome  Kesimpulan  Ujian hujung ke hujung untuk aplikasi web saya semakin tidak menyusahkan, jadi saya lebih mengutamakannya. Dalam beberapa hari kebelakangan ini, ini bermakna menggunakan Penulis Drama juga. Ia fleksibel dan pantas. Dan sekarang setelah saya melakukan kerja (untuk saya   !) untuk menyediakan dan menjalankannya dengan Chrome for Testing buildpack dalam Heroku CI, saya boleh mula membina suite ujian automasi penyemak imbas saya sekali lagi. dan untuk anda  Kod untuk panduan ini tersedia dalam   saya. repositori GitHub  Selamat mengekod!

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

Audio ini dihasilkan dalam bahasa asal cerita!

Terlalu panjang; Untuk membaca

Penulis drama dan Ujian Penyemak Imbas Chrome dalam Heroku: Panduan Pemula

Penulis drama dan Ujian Penyemak Imbas Chrome dalam Heroku: Panduan Pemula

About Author

KOMEN

GANTUNG TANDA

ARTIKEL INI DIBENTANGKAN DALAM

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps