Latihan: Memulai dengan Playwright

Selesai

Mari kita mulai dengan menginstal Playwright, lalu mari kita jelajahi alat dan validasi bahwa kita dapat menjalankan tes contoh yang datang saat menginstal Playwright.

Menginstal Playwright

Mulailah dengan membuka terminal dan membuat direktori baru untuk proyek Anda. Anda juga dapat menginstal Playwright di proyek yang ada, tetapi untuk latihan ini, mari kita buat yang baru dan sebut saja learn-playwright.

mkdir learn-playwright

Navigasikan ke direktori baru:

cd learn-playwright

Dalam direktori kosong baru ini, instal Playwright dan jelajahi apa yang terinstal.

npm init playwright@latest

Saat menjalankan perintah ini, Anda akan diajukan beberapa pertanyaan untuk mengonfigurasi proyek Playwright:

• Pilih bahasa yang ingin Anda gunakan untuk pengujian Anda. Kami merekomendasikan TypeScript.
• Pilih nama direktori pengujian. Kami merekomendasikan tes.
• Tambahkan GitHub Action untuk mengotomatiskan pengujian. Kami merekomendasikan Ya.
• Instal Browser Playwright. Sebaiknya pilih default True.

Anda sekarang akan melihat output berikut di terminal:

Initializing NPM project (npm init -y)…

Wrote to /learn-playwright/package.json:

{

  "name": "learn-playwright",
  "version": "1.0.0",*
  "description": "",*
  "main": "index.js",*
  "scripts": {*
    "test": "echo \"Error: no test specified\" && exit 1"*
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Installing Playwright Test (npm install --save-dev @playwright/test)…

added 4 packages, and audited 5 packages in 2s

found 0 vulnerabilities
Installing Types (npm install --save-dev @types/node)…

added 2 packages, and audited 7 packages in 580ms

found 0 vulnerabilities
Writing playwright.config.ts.
Writing .github/workflows/playwright.yml.
Writing tests/example.spec.ts.
Writing tests-examples/demo-todo-app.spec.ts.
Writing package.json.
Downloading browsers (npx playwright install)…
✔ Success! Created a Playwright Test project at /learn-playwright

Inside that directory, you can run several commands:

  npx playwright test
    Runs the end-to-end tests.

  npx playwright test --ui
    Starts the interactive UI mode.

  npx playwright test --project=chromium
    Runs the tests only on Desktop Chrome.

  npx playwright test example
    Runs the tests in a specific file.

  npx playwright test --debug
    Runs the tests in debug mode.

  npx playwright codegen
    Auto generate tests with Codegen.

We suggest that you begin by typing:

    npx playwright test

And check out the following files:
  - ./tests/example.spec.ts - Example end-to-end test
  - ./tests-examples/demo-todo-app.spec.ts - Demo Todo App end-to-end tests
  - ./playwright.config.ts - Playwright Test configuration

Visit https://playwright.dev/docs/intro for more information. ✨

Happy hacking! 🎭

Output memberi tahu kami bahwa proyek npm baru dibuat dengan file package.json, dan bahwa Uji Playwright diinstal. Ini juga memberi tahu kami file yang dibuat:

• playwright.config.ts: File Konfigurasi Uji Playwright.
• .github/workflows/playwright.yml: GitHub Action untuk mengotomatiskan pengujian
• tests/: Folder tingkat atas yang dicari Playwright secara rekursif untuk pengujian dengan contoh skrip pengujian.
• tests-examples/: Folder penahapan dengan skrip uji aplikasi todo demo untuk dicoba.
• package.json: File proyek npm.

Selanjutnya, kita diberi tahu bahwa Playwright telah mengunduh browser. Playwright mengunduh versi terbaru browser tempat kita dapat menjalankan pengujian. Ini menggunakan biner browser yang diinstal secara lokal, sehingga Anda tidak perlu menginstal browser di komputer Anda.

Setelah selesai, kita mendapatkan pesan sukses dan daftar perintah yang dapat kita jalankan untuk berinteraksi dengan proyek Uji Playwright.

Memvalidasi runner uji Playwright

Untuk menjalankan pengujian di Playwright, gunakan perintah uji npx playwright. Perintah menjalankan semua pengujian di tests/ folder, yang merupakan nama folder yang kami tentukan di langkah 2 saat menginstal.

npx playwright test

Saat menjalankan perintah, Anda akan melihat output berikut:

Running 6 tests using 5 workers
      6 passed (4.0s)

To open last HTML report run:

  npx playwright show-report

Hasil keluaran menunjukkan bahwa enam pengujian dijalankan menggunakan lima pekerja. Secara default, Playwright menjalankan pengujian secara paralel dengan menggunakan pekerja. Jumlah inti CPU yang tersedia menentukan jumlah pekerja. Playwright menggunakan setengah dari inti CPU yang tersedia.

Mari kita buka laporan HTML untuk melihat detail selengkapnya tentang uji coba.

npx playwright show-report

Pesan berikut memberi tahu kami laporan sedang dilayani secara lokal, dan jendela browser terbuka dengan laporan.

Serving HTML report at http://localhost:9323. Press Ctrl+C to quit.

Laporan ini memberi kita wawasan berikut:

• Kami memiliki dua kasus pengujian (memiliki judul dan memulai tautan)
• Kami menjalankan masing-masing di tiga mesin browser (kromium, Firefox, webkit)
• Kasus pengujian ditentukan dalam file example.spec.ts
• Uji coba memakan waktu 5,2 detik dengan keenam tes lulus (tidak ada yang dilewati)

Memilih baris tertentu memberi Anda rangkaian terperinci dari test case tersebut. Misalnya, jika kita memilih baris pertama, kita mendapatkan detail berikut:

• Tes ini disebut memiliki judul.
• Nama file adalah example.spec.ts dan nomor baris adalah 3.
• Kasus pengujian dijalankan pada Chromium
• Tes Sebelum Hooks berjalan terlebih dahulu. Ini meluncurkan browser dan mengatur konteks browser dan halaman (pengaturan awal) untuk isolasi pengujian.
• Tes Action pada baris 4 dijalankan berikutnya. Ini menghasilkan navigasi ke halaman tertentu.
• Kemudian, pengujian Pernyataan pada baris 7 dijalankan. Ini memvalidasi bahwa halaman memiliki judul tertentu.
• Uji After Hooks dijalankan terakhir. Dibutuhkan tindakan pembersihan konteks apa pun yang diperlukan.
• Kasus pengujian membutuhkan waktu 661ms untuk diselesaikan.

Untuk menjalankan pengujian hanya di browser Chromium, kita dapat menggunakan opsi --project.

npx playwright test --project chromium

Lanjutkan dan jalankan perintah. Perhatikan bahwa dua pengujian dijalankan menggunakan dua pekerja. Ketika Anda membuka laporan, Anda melihat bahwa pengujian hanya dijalankan di browser Chromium.

Selamat! Anda berhasil menginstal Playwright dan menjalankan tes contoh. Di bagian berikutnya, kita akan melihat pengujian secara lebih rinci, serta file konfigurasi Playwright.