Automasi menggunakan Playwright dan TypeScript dan JavaScript

Penulis Drama Dengan TypeScript | Pemasangan JavaScript

Penulis drama ialah alat Automasi API dan berasaskan web moden daripada Microsoft dengan bekerjasama dengan pasukan Puppeteer, Puppeteer ialah perpustakaan JavaScript yang menyediakan API peringkat tinggi untuk mengawal Chrome atau Firefox melalui DevTools Protocol atau WebDriver BiDi. Puppeteer berjalan dalam tanpa kepala (tiada UI yang kelihatan) secara lalai.

Penulis drama menyokong pelayar berasaskan web moden untuk automasi aplikasi web melalui API tunggal dan juga menyokong automasi untuk API.

Seni Bina Penulis Drama

Playwright berfungsi pada Web Socket Protocol setelah sambungan diwujudkan akan mencetuskan ujian dan menghantar permintaan dalam format JSON ke pelayan menggunakan Web Socket Protocol yang bermaksud setelah sambungan diwujudkan oleh Playwright tidak perlu membuat sambungan semula untuk menghantar permintaan kepada pelayan sehingga pelaksanaan ujian lengkap. Penulis drama perlu memutuskan sambungan melalui kaedah playwright.quit().

Membolehkan kami memahami perbezaan antara Sambungan Protokol HTTP Sambungan Protokol Web Soket

Perbezaan antara WebSocket & HTTP Protocol
Ciri-ciri Penulis Drama :
Mana-mana pelayar • Mana-mana platform • Satu API
Pelayar silang. Penulis drama menyokong semua enjin rendering moden termasuk Chromium, WebKit dan Firefox.

Merentas platform. Uji pada Windows, Linux dan macOS, secara tempatan atau pada CI, tanpa kepala atau berkepala.

Merentas bahasa. Gunakan API Playwright dalam TypeScript, JavaScript, Python, .NET, Java.

Uji Web Mudah Alih. Emulasi mudah alih asli Google Chrome untuk Android dan Safari Mudah Alih. Enjin pemaparan yang sama berfungsi pada Desktop anda dan dalam Awan.

1. Berdaya tahan • Tiada ujian mengelupas

Auto-tunggu. Penulis drama menunggu elemen boleh diambil tindakan sebelum melakukan tindakan. Ia juga mempunyai set acara introspeksi yang kaya. Gabungan kedua-duanya menghapuskan keperluan untuk tamat masa tiruan — punca utama ujian mengelupas.

Pernyataan yang mengutamakan web. Penegasan penulis drama dibuat khusus untuk web dinamik. Semakan dicuba semula secara automatik sehingga syarat yang diperlukan dipenuhi.

Menjejak. Konfigurasikan strategi percubaan semula ujian, tangkap jejak pelaksanaan, video, tangkapan skrin untuk menghapuskan kepingan.

1. Tiada tukar ganti • Tiada had

Penyemak imbas menjalankan kandungan web milik asal yang berbeza dalam proses yang berbeza. Penulis drama sejajar dengan seni bina pelayar moden dan menjalankan ujian di luar proses. Ini menjadikan Playwright bebas daripada had biasa pelari ujian dalam proses.

Berbilang semuanya. Senario ujian yang merangkumi berbilang tab, berbilang asal dan berbilang pengguna. Cipta senario dengan konteks yang berbeza untuk pengguna yang berbeza dan jalankannya pada pelayan anda, semuanya dalam satu ujian.

Acara yang dipercayai. Tuding elemen, berinteraksi dengan kawalan dinamik, menghasilkan acara yang dipercayai. Penulis drama menggunakan saluran paip input penyemak imbas sebenar yang tidak dapat dibezakan daripada pengguna sebenar.

Uji bingkai, menembusi Shadow DOM. Pemilih pengarang drama menembusi bayangan DOM dan membenarkan memasukkan bingkai dengan lancar.

1. Pengasingan penuh • Pelaksanaan pantas

Konteks penyemak imbas. Penulis drama mencipta konteks penyemak imbas untuk setiap ujian. Konteks penyemak imbas adalah setara dengan profil penyemak imbas serba baharu. Ini memberikan pengasingan ujian penuh dengan overhed sifar. Membuat konteks penyemak imbas baharu hanya memerlukan beberapa milisaat.

Log masuk sekali. Simpan keadaan pengesahan konteks dan gunakan semula dalam semua ujian. Ini memintas operasi log masuk berulang dalam setiap ujian, namun memberikan pengasingan penuh ujian bebas.

1. Peralatan Berkuasa

Kodegen. Hasilkan ujian dengan merekodkan tindakan anda. Simpan mereka ke dalam mana-mana bahasa.

Pemeriksa penulis drama. Periksa halaman, jana pemilih, langkah melalui pelaksanaan ujian, lihat titik klik, terokai log pelaksanaan.

Pemerhati Jejak. Tangkap semua maklumat untuk menyiasat kegagalan ujian. Surih drama mengandungi siaran skrin pelaksanaan ujian, syot kilat DOM langsung, peneroka tindakan, sumber ujian dan banyak lagi.

Mari kita mula menggunakan Playwright dengan TypeScript/JavaScript

Pemasangan Playwright untuk TypeScript/JavaScript
Pra-syarat untuk pemasangan seperti berikut : Node.js 18

Windows 10 , Windows Server 2016 atau Windows Subsystem for Linux (WSL).
macOS 13 Ventura atau macOS 14 Sonoma.
Debian 11, Debian 12, Ubuntu 20.04 atau Ubuntu 22.04, Ubuntu 24.04, pada seni bina x86–64 dan arm64.
Mulakan dengan memasang Playwright menggunakan npm, yarn atau pnpm. Sebagai alternatif, anda juga boleh memulakan dan menjalankan ujian anda menggunakan Sambungan Kod VS.

Buat folder, contohnya TypeScriptWithPlaywright begitu juga buat folder untuk JavaScriptwithPlaywright dan navigasi ke folder dan buka gesaan arahan tetingkap

Pemasangan Penulis Drama
Klik pada enter dan skrin berikut akan muncul dan pilih bahasa Skrip dan kemudian tekan enter

Pilih Bahasa Skrip
Selepas memilih bahasa skrip dan kemudian tekan enter skrin berikut akan muncul dan akan bertanya di mana anda ingin meletakkan ujian hujung ke hujung anda. biarlah begitu.

Pemasangan Penulis Drama
Sekarang ia akan meminta aliran kerja Tindakan GitHub. Jika anda ingin mengkonfigurasi kemudian Tekan Y atau N. Ia akan meminta anda untuk memasang pelayar, jika anda ingin memasang kemudian Pilih Y yang bermaksud benar. skrin berikut akan muncul.

Nota : Pelayar Playwright boleh dipasang secara manual melalui arahan di bawah

pemasangan pengarang drama npx

Pemasangan Penulis Drama
Sekarang tekan enter dan skrin berikut akan dipaparkan.

Pemasangan Penulis Drama
Pemasangan Penulis Drama

Pemasangan Penulis Drama

Pemasangan Penulis Drama Selesai
Penulis drama secara lalai melaksanakan skrip ujian yang dilaksanakan dalam mod tanpa kepala dan arahan berikut akan meneroka untuk melaksanakan dengan penyemak imbas dan nyahpepijat tertentu, menjana skrip ujian menggunakan codegen.

ujian penulis drama npx
Menjalankan ujian hujung ke hujung.

ujian penulis drama npx --ui
Memulakan mod UI interaktif.

ujian penulis drama npx --project=chromium
Menjalankan ujian hanya pada Desktop Chrome.

contoh ujian penulis drama npx
Menjalankan ujian dalam fail tertentu.

ujian penulis drama npx --debug
Menjalankan ujian dalam mod nyahpepijat.

npx penulis drama codegen
Auto menjana ujian dengan Codegen.

Kami mencadangkan agar anda mulakan dengan menaip:

npx playwright test

Sekarang mari jalankan skrip ujian dengan menggunakan arahan berikut dan untuk melihat laporan. Penulis drama akan melaksanakan ujian dalam kromium, Firefox dan WebKit Parallelly.

ujian penulis drama npx

laporan rancangan penulis drama npx

Laporan lalai Penulis drama hanya menyokong TypeScript/JavaScript
Penulis drama secara lalai mengkonfigurasi skrip ujian anda untuk dilaksanakan dalam penyemak imbas berikut dengan mod tanpa kepala. Konfigurasi akan dipaparkan dalam folder bernama playwright.config.js

import { defineConfig, peranti } daripada '@playwright/test';

/**

• Baca pembolehubah persekitaran daripada fail.
• https://github.com/motdotla/dotenv*/ // import dotenv daripada 'dotenv'; // import laluan dari 'path'; // dotenv.config({ path: path.resolve(__dirname, '.env') });

/**

• Lihat https://playwright.dev/docs/test-configuration.
  /
  eksport defineConfig lalai({
  testDir: './tests',
  / Jalankan ujian dalam fail secara selari /
  sepenuhnyaSejajar: benar,
  / Gagal binaan pada CI jika anda secara tidak sengaja meninggalkan ujian.hanya dalam kod sumber. /
  forbidOnly: !!process.env.CI,
  / Cuba semula pada CI sahaja /
  cuba semula: process.env.CI ? 2 : 0,
  / Tarik diri daripada ujian selari pada CI. /
  pekerja: process.env.CI ? 1 : tidak ditentukan,
  / Wartawan untuk digunakan. Lihat https://playwright.dev/docs/test-reporters /
  wartawan: 'html',
  / Tetapan dikongsi untuk semua projek di bawah. Lihat https://playwright.dev/docs/api/class-testoptions. /
  gunakan: {
  / URL asas untuk digunakan dalam tindakan seperti await page.goto('/'). */
  // baseURL: 'http://127.0.0.1:3000',

  /* Kumpul jejak apabila mencuba semula ujian yang gagal. Lihat https://playwright.dev/docs/trace-viewer */
  jejak: 'percubaan-mula-mula',
  },

/* Konfigurasikan projek untuk penyemak imbas utama */
projek: [
{
nama: 'kromium',
gunakan: { ...peranti['Desktop Chrome'] },
},

npx playwright test

],

/* Jalankan pelayan pembangun setempat anda sebelum memulakan ujian */
// webServer: {
// arahan: 'npm run start',
// url: 'http://127.0.0.1:3000',
// reuseExistingServer: !process.env.CI,
// },
});
Sekarang mari kita ubah suai untuk melaksanakan skrip ujian mod bukan tajuk (UI) dan dengan menambah pelayar tambahan. Penulis drama juga menyediakan pilihan untuk merekodkan pelaksanaan skrip ujian dan pilihan paparan jejak yang berguna untuk penyahpepijatan. Jika anda mendayakan pilihan pemapar surih boleh dapat melihat apakah status sebelum ujian, apakah status semasa ujian dan apakah status selepas ujian. Saya telah mengubah suai fail konfigurasi penulis drama dan ia adalah seperti di bawah :

// @ts-semak
const { defineConfig, peranti } = memerlukan('@playwright/test');

module.exports = defineConfig({
testDir: './tests',
sepenuhnyaSejajar: benar,
forbidOnly: !!process.env.CI,
cuba semula: process.env.CI ? 2 : 0,
pekerja: process.env.CI ? 1 : tidak ditentukan,
wartawan: 'html',
gunakan: {
jejak: 'hidup', // Dayakan pengesanan
video: 'on', // Rakam video untuk setiap ujian
tanpa kepala: palsu, // Jalankan ujian dalam mod kepala
},
projek: [
{
nama: 'kromium',
gunakan: { ...peranti['Desktop Chrome'] },
},
{
nama: 'firefox',
gunakan: { ...peranti['Desktop Firefox'] },
},
{
nama: 'webkit',
gunakan: { ...peranti['Desktop Safari'] },
},
{
nama: 'Microsoft Edge',
gunakan: {
...peranti['Desktop Edge'],
saluran: 'msedge'
},
},
{
nama: 'Google Chrome',
gunakan: {
...peranti['Desktop Chrome'],
saluran: 'chrome'
},
},
],
});
Kini skrip ujian boleh melaksanakan ujian pada penyemak imbas yang disebut dalam fail konfigurasi dalam mod tanpa kepala dengan rakaman, pilihan pemapar jejak.

Selamat Belajar!! Selamat Automasi!! Selamat Menguji

Sila hubungi saya sebarang maklumat/Pertanyaan di santoshvqa@gmail.com & Profil LinkedIn

https://www.linkedin.com/in/santosh-kulkarni-ab571639/

Atas ialah kandungan terperinci Automasi menggunakan Playwright dan TypeScript dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!