hujung hadapan web
tutorial js
Penulis Drama: Gambaran Keseluruhan Komprehensif Rangka Kerja Pengujian Automasi UI Web
Penulis Drama: Gambaran Keseluruhan Komprehensif Rangka Kerja Pengujian Automasi UI Web
PlayWright ialah rangka kerja ujian automasi UI Web yang dibangunkan oleh Microsoft.
Ia bertujuan untuk menyediakan rangka kerja ujian automasi merentas platform, merentas bahasa, dan merentas penyemak imbas yang turut menyokong penyemak imbas mudah alih.
Seperti yang diterangkan pada halaman utama rasminya:
- Penantian automatik, penegasan yang bijak untuk elemen halaman dan pengesanan pelaksanaan menjadikannya sangat berkesan dalam mengendalikan ketidakstabilan halaman web.
- Ia mengawal penyemak imbas dalam proses yang berbeza daripada yang menjalankan ujian, menghapuskan pengehadan pelari ujian dalam proses dan menyokong penembusan Shadow DOM.
- PlayWright mencipta konteks penyemak imbas untuk setiap ujian. Konteks penyemak imbas adalah setara dengan profil penyemak imbas serba baharu, yang membolehkan pengasingan ujian penuh kos sifar. Membuat konteks penyemak imbas baharu hanya mengambil masa beberapa milisaat.
- Menyediakan ciri seperti penjanaan kod, penyahpepijatan langkah demi langkah dan pelihat surih.
PlayWright lwn Selenium lwn Cypress
Apakah rangka kerja ujian automasi UI Web terbaik yang tersedia hari ini? Pilihan yang menonjol termasuk Selenium berusia sedekad, Cypress yang popular baru-baru ini, dan yang kami perkenalkan di sini—PlayWright. Bagaimana mereka berbeza? Di bawah ialah ringkasan perbandingan untuk rujukan anda
| Feature | PlayWright | Selenium | Cypress |
|---|---|---|---|
| Supported Languages | JavaScript, Java, C#, Python | JavaScript, Java, C#, Python, Ruby | JavaScript/TypeScript |
| Supported Browsers | Chrome, Edge, Firefox, Safari | Chrome, Edge, Firefox, Safari, IE | Chrome, Edge, Firefox, Safari |
| Testing Framework | Frameworks for supported languages | Frameworks for supported languages | Frameworks for supported languages |
| Usability | Easy to use and configure | Complex setup with a learning curve | Easy to use and configure |
| Code Complexity | Simple | Moderate | Simple |
| DOM Manipulation | Simple | Moderate | Simple |
| Community Maturity | Improving gradually | Highly mature | Fairly mature |
| Headless Mode Support | Yes | Yes | Yes |
| Concurrency Support | Supported | Supported | Depends on CI/CD tools |
| iframe Support | Supported | Supported | Supported via plugins |
| Driver | Not required | Requires a browser-specific driver | Not required |
| Multi-Tab Operations | Supported | Not supported | Supported |
| Drag and Drop | Supported | Supported | Supported |
| Built-in Reporting | Yes | No | Yes |
| Cross-Origin Support | Supported | Supported | Supported |
| Built-in Debugging | Yes | No | Yes |
| Automatic Wait | Yes | No | Yes |
| Built-in Screenshot/Video | Yes | No video recording | Yes |
Perbandingan Utama:
- Bahasa yang Disokong: PlayWright dan Selenium menyokong Java, C# dan Python, menjadikannya lebih popular dalam kalangan jurutera ujian yang mungkin tidak biasa dengan JavaScript/TypeScript.
- Pendekatan Teknikal: Kedua-dua PlayWright dan Selenium menggunakan Protokol Nyahpepijat Jauh Google untuk mengawal penyemak imbas berasaskan Chromium. Untuk pelayar seperti Firefox, tanpa protokol sedemikian, mereka menggunakan suntikan JavaScript. Selenium merangkum ini dalam Pemacu, manakala PlayWright memanggilnya secara langsung. Cypress, sebaliknya, menggunakan JavaScript untuk mengawal penyemak imbas.
- Sokongan Penyemak Imbas: Selenium menyokong Internet Explorer, yang tidak relevan kerana IE sedang ditamatkan secara berperingkat.
- Kemudahan Penggunaan: Ketiga-tiga rangka kerja mempunyai keluk pembelajaran. Walau bagaimanapun, PlayWright dan Cypress lebih mesra pengguna untuk senario mudah berbanding Selenium.
Bermula
Walaupun PlayWright menyokong berbilang bahasa, ia sangat bergantung pada Node.js. Tidak kira sama ada anda menggunakan versi Python atau Java, PlayWright memerlukan persekitaran Node.js semasa permulaan, memuat turun pemacu Node.js. Oleh itu, kami akan menumpukan pada JavaScript/TypeScript untuk panduan ini.
Pemasangan dan Demo
- Pastikan Node.js dipasang.
- Mulakan projek PlayWright menggunakan npm atau benang:
# Using npm npm init playwright@latest # Using yarn yarn create playwright
- Ikuti gesaan:
- Pilih TypeScript atau JavaScript (lalai: TypeScript).
- Nyatakan nama direktori ujian.
- Tentukan sama ada hendak memasang penyemak imbas yang disokong PlayWright (lalai: Benar).
Jika anda memilih untuk memuat turun penyemak imbas, PlayWright akan memuat turun Chromium, Firefox dan WebKit, yang mungkin mengambil sedikit masa. Proses ini berlaku hanya semasa persediaan pertama melainkan versi PlayWright dikemas kini.
Struktur Projek
Selepas permulaan, anda akan mendapat templat projek:
playwright.config.ts # PlayWright configuration file package.json # Node.js configuration file package-lock.json # Node.js dependency lock file tests/ # Your test directory example.spec.ts # Template test case tests-examples/ # Example tests directory demo-todo-app.spec.ts # Example test case
Jalankan contoh kes ujian:
npx playwright test
Ujian dilaksanakan secara senyap (dalam mod tanpa kepala), dan keputusan dipaparkan sebagai:
Running 6 tests using 6 workers 6 passed (10s) To open the last HTML report run: npx playwright show-report
Contoh Kod Sumber
Berikut ialah contoh.spec.ts kes ujian:
import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
await page.goto('https://playwright.dev/');
await expect(page).toHaveTitle(/Playwright/);
});
test('get started link', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.getByRole('link', { name: 'Get started' }).click();
await expect(page).toHaveURL(/.*intro/);
});
- Ujian Pertama: Mengesahkan tajuk halaman mengandungi "Penulis Drama".
- Ujian Kedua: Mengklik pautan "Bermula" dan mengesahkan URL.
Setiap kaedah ujian mempunyai:
- Sebuah nama ujian (cth., 'mempunyai gelaran').
- Fungsi untuk melaksanakan logik ujian.
Kaedah utama termasuk:
- page.goto: Navigasi ke URL.
- expect(page).toHaveTitle: Menegaskan tajuk halaman.
- page.getByRole: Menempatkan elemen mengikut peranannya.
- tunggu: Menunggu operasi tak segerak selesai.
Menjalankan Ujian dari Baris Perintah
Berikut ialah arahan biasa:
- Jalankan semua ujian:
# Using npm npm init playwright@latest # Using yarn yarn create playwright
- Jalankan fail ujian tertentu:
playwright.config.ts # PlayWright configuration file package.json # Node.js configuration file package-lock.json # Node.js dependency lock file tests/ # Your test directory example.spec.ts # Template test case tests-examples/ # Example tests directory demo-todo-app.spec.ts # Example test case
- Nyahpepijat kes ujian:
npx playwright test
Rakaman Kod
Gunakan ciri codegen untuk merekod interaksi:
Running 6 tests using 6 workers 6 passed (10s) To open the last HTML report run: npx playwright show-report
Kod yang direkodkan boleh disalin ke dalam fail anda. Nota: Perakam mungkin tidak mengendalikan tindakan yang rumit seperti melayang.
Panduan Penulis Drama Mendalam
Tindakan dan Tingkah Laku
Bahagian ini memperkenalkan beberapa tindakan Penulis Drama biasa untuk berinteraksi dengan elemen halaman. Ambil perhatian bahawa objek pencari yang diperkenalkan sebelum ini sebenarnya tidak mengesan elemen pada halaman semasa penciptaannya. Walaupun elemen itu tidak wujud pada halaman, menggunakan kaedah pencari elemen untuk mendapatkan objek pencari tidak akan membuang sebarang pengecualian. Carian elemen sebenar hanya berlaku semasa interaksi. Ini berbeza daripada kaedah findElement Selenium, yang mencari terus elemen pada halaman dan membuang pengecualian jika elemen itu tidak ditemui.
Input Teks
Gunakan kaedah isian untuk input teks, terutamanya menyasarkan ,