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

1. Pastikan Node.js dipasang.
2. Mulakan projek PlayWright menggunakan npm atau benang:

   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright

1. 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 , , atau elemen dengan atribut [contenteditable]:<br>

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

Kotak semak dan Radio

Gunakan locator.setChecked() atau locator.check() untuk berinteraksi dengan input[type=checkbox], input[type=radio] atau elemen dengan atribut [role=checkbox]:

  npx playwright test

Pilih Kawalan

Gunakan locator.selectOption() untuk berinteraksi dengan elemen:

  npx playwright test landing-page.spec.ts

Klik Tetikus

Operasi asas:

  npx playwright test --debug

Untuk elemen yang dilindungi oleh orang lain, gunakan klik paksa:

npx playwright codegen https://leapcell.io/

Atau cetuskan acara klik secara pengaturcaraan:

// Text input
await page.getByRole('textbox').fill('Peter');

Menaip Aksara

Kaedah locator.type() mensimulasikan penaipan aksara demi aksara, mencetuskan keydown, keyup dan peristiwa penekanan kekunci:

await page.getByLabel('I agree to the terms above').check();

expect(await page.getByLabel('Subscribe to newsletter').isChecked()).toBeTruthy();

// Uncheck
await page.getByLabel('XL').setChecked(false);

Kunci Khas

Gunakan locator.press() untuk kekunci khas:

// Select by value
await page.getByLabel('Choose a color').selectOption('blue');

// Select by label
await page.getByLabel('Choose a color').selectOption({ label: 'Blue' });

// Multi-select
await page.getByLabel('Choose multiple colors').selectOption(['red', 'green', 'blue']);

Kekunci yang disokong termasuk Petikan Belakang, Tolak, Sama, Segaris Belakang, Ruang Belakang, Tab, Padam, Escape, Anak panah ke Bawah, Tamat, Enter, Laman Utama, Sisip, PageDown, PageUp, ArrowRight, ArrowUp, F1-F12, Digit0-Digit9 dan KeyA -KeyZ.

Muat Naik Fail

Gunakan locator.setInputFiles() untuk menentukan fail untuk dimuat naik. Berbilang fail disokong:

// Left click
await page.getByRole('button').click();

// Double click
await page.getByText('Item').dblclick();

// Right click
await page.getByText('Item').click({ button: 'right' });

// Shift+click
await page.getByText('Item').click({ modifiers: ['Shift'] });

// Hover
await page.getByText('Item').hover();

// Click at specific position
await page.getByText('Item').click({ position: { x: 0, y: 0 } });

Elemen Fokus

Gunakan locator.focus() untuk memfokus pada elemen:

   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright

Seret dan Lepas

Proses seret dan lepas melibatkan empat langkah:

1. Tuding tetikus pada elemen boleh seret.
2. Tekan butang kiri tetikus.
3. Gerakkan tetikus ke kedudukan sasaran.
4. Lepaskan butang kiri tetikus.

Anda boleh menggunakan kaedah locator.dragTo():

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

Sebagai alternatif, laksanakan proses secara manual:

npx playwright test

Pengendalian Dialog

Secara lalai, Playwright membatalkan dialog secara automatik seperti makluman, sahkan dan gesaan. Anda boleh pradaftar pengendali dialog untuk menerima dialog:

Running 6 tests using 6 workers

  6 passed (10s)

To open the last HTML report run:

  npx playwright show-report

Mengendalikan Halaman Baharu

Apabila halaman baharu muncul, anda boleh menggunakan acara timbul untuk mengendalikannya:

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

---

Platform Terbaik untuk Penulis Drama: Leapcell

Leapcell ialah platform pengkomputeran awan moden yang direka untuk aplikasi yang diedarkan. Ia menggunakan model bayar sambil anda pergi tanpa kos terbiar, memastikan anda hanya membayar untuk sumber yang anda gunakan.

Faedah Unik Leapcell untuk Aplikasi Penulis Drama

1. Kecekapan Kos

   • Bayar semasa anda pergi: Elakkan pembaziran sumber semasa trafik rendah dan naikkan secara automatik semasa waktu puncak.
   • Contoh dunia nyata: Contohnya, pada pengiraan getdeploying.com, menyewa mesin maya 1 vCPU dan 2 GB RAM dalam perkhidmatan awan tradisional berharga sekitar $25 sebulan. Di Leapcell, $25 boleh menyokong perkhidmatan yang mengendalikan 6.94 juta permintaan dengan purata masa tindak balas 60 ms, memberikan anda nilai yang lebih baik untuk wang.

2. Pengalaman Pembangun

   • Kemudahan penggunaan: Antara muka intuitif dengan keperluan persediaan yang minimum.
   • Automasi: Memudahkan pembangunan, ujian dan penggunaan.
   • Penyatuan lancar: Menyokong Go, Python, Node.js, Rust dan banyak lagi.

3. Skalabiliti dan Prestasi

   • Penskalaan automatik: Melaraskan sumber secara dinamik untuk mengekalkan prestasi optimum.
   • Pengoptimuman tak segerak: Mengendalikan tugas berkonkurensi tinggi dengan mudah.
   • Jangkauan global: Akses kependaman rendah disokong oleh pusat data teragih.

Untuk lebih banyak contoh penggunaan, rujuk dokumentasi.

Atas ialah kandungan terperinci Penulis Drama: Gambaran Keseluruhan Komprehensif Rangka Kerja Pengujian Automasi UI Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!