Perkasakan ETests Anda dengan Pengarang Drama dan Integrasi Timun

pengenalan

Dalam siaran ini, saya akan membimbing anda tentang sebab Penulis Drama dan Timun ialah alat yang luar biasa untuk ujian hujung ke hujung (E2E). Kami kemudiannya akan menyelami langkah-langkah untuk menyepadukan Playwright untuk penggunaan yang lancar dalam aplikasi bahagian hadapan JavaScript. Akhir sekali, saya akan berkongsi beberapa petua profesional untuk memaksimumkan kecekapan anda dengan Penulis Drama.

Mengapa Penulis Drama dan Timun?

Walaupun terdapat banyak alatan yang berkebolehan untuk membina suite ujian E2E, tiada satu pun yang sepadan dengan sinergi Penulis Drama dan Timun.

Inilah sebab Penulis Drama menonjol dalam pasaran untuk menulis ujian E2E, untuk menamakan beberapa:

• 1. Mana-mana pelayar, Mana-mana platform, Satu API
  • a. Pelayar silang. Penulis drama menyokong semua enjin rendering moden termasuk Chromium, WebKit dan Firefox.
  • b. Merentas platform. Uji pada Windows, Linux dan macOS, secara tempatan atau pada CI, tanpa kepala atau berkepala.
  • c. silang bahasa. Gunakan API Playwright dalam TypeScript, JavaScript, Python, .NET dan Java.
• 2. Berdaya tahan, Tiada ujian mengelupas
  • a. Auto-tunggu. Penulis drama menunggu elemen boleh diambil tindakan sebelum melakukan tindakan.
  • b. Pernyataan yang mengutamakan web. Penegasan penulis drama dibuat khusus untuk web dinamik.
• 3. Alat Perkasa
  • a. Codegen. Hasilkan ujian dengan merekodkan tindakan anda. Simpan mereka dalam mana-mana bahasa.
  • b. Pengarang drama. Periksa halaman, jana pemilih, langkah melalui pelaksanaan ujian, lihat titik klik dan terokai log pelaksanaan.

Namun, tanpa Timun menguruskan kod ujian boleh menjadi mimpi ngeri penyelenggaraan. Timun memudahkan ujian menulis dalam bahasa yang mudah dibaca manusia, menjadikannya boleh diakses walaupun kepada pihak berkepentingan bukan teknikal. Sebagai asas kepada Pembangunan Didorong Tingkah Laku (BDD), Timun bertindak sebagai dokumentasi teknikal dan mempercepatkan onboarding untuk jurutera baharu.

Integrasi Penulis Drama dan Timun

Langkah 1: Pasang Ketergantungan

Pasang pakej yang diperlukan menggunakan npm atau benang.

npm install @playwright/test playwright-core @cucumber/cucumber cucumber-html-reporter concurrently

Langkah 2: Sediakan Struktur Projek

Atur projek anda seperti ini:

cucumber.js
cucumber.report.js
/e2e
  /features
    example.feature
  /steps
    example.steps.js

Langkah 3: Konfigurasikan Timun

Buat Fail Konfigurasi Timun - fail cucumber.js dalam akar projek anda dengan kandungan berikut:

// filepath: /cucumber.js
module.exports = {
  default: {
    require: ["./steps/**/*.js"],
    format: ["pretty"],
    paths: ["./features/**/*.feature"],
  },
};

Langkah 4: Konfigurasikan Pelaporan Ujian

Buat cucumber.report.js - Fail untuk mengkonfigurasi laporan ujian. Pilihan konfigurasi boleh didapati di sini

// filepath: /cucumber.report.js
import reporter from 'cucumber-html-reporter

const options = {
  theme: 'bootstrap',
  output: report/report.html',
  jsonFile: 'report/report.json',
  brandTitle: 'E2E Test Report'
};

Langkah 5: Tulis Fail Ciri

Buat fail ciri dalam direktori ciri, cth., example.feature:

npm install @playwright/test playwright-core @cucumber/cucumber cucumber-html-reporter concurrently

Langkah 6: Tulis Definisi Langkah

Buat fail definisi langkah dalam direktori langkah, cth., example.steps.js:

cucumber.js
cucumber.report.js
/e2e
  /features
    example.feature
  /steps
    example.steps.js

Langkah 7: Tambah Skrip Ujian NPM

Tambahkan skrip pada package.json anda untuk menjalankan ujian:

// filepath: /cucumber.js
module.exports = {
  default: {
    require: ["./steps/**/*.js"],
    format: ["pretty"],
    paths: ["./features/**/*.feature"],
  },
};

pakej npm secara serentak ialah alat berguna yang membolehkan anda melaksanakan dua proses pada ujian yang sama, untuk melaksanakan ujian E2E, anda juga perlu menjalankan aplikasi, kadangkala secara tempatan dan kadangkala dari jauh.

Langkah 8: Jalankan Ujian

Laksanakan ujian dengan:

// filepath: /cucumber.report.js
import reporter from 'cucumber-html-reporter

const options = {
  theme: 'bootstrap',
  output: report/report.html',
  jsonFile: 'report/report.json',
  brandTitle: 'E2E Test Report'
};

Petua Pro Penulis Drama

• 1. Mesej Ralat - Bacanya dengan teliti—mereka sering menentukan masalahnya.
• 2. Pembangunan Berulang - Uji sebahagian kecil kod untuk mengasingkan dan menyelesaikan isu.
• 3. Pemeriksa Drama - Ia boleh membantu untuk merekodkan tindakan dan menjana skrip ujian secara automatik, jadi anda perlu menulis hanya sekeping kod. Anda boleh melancarkan Playwright Inspector seperti di bawah

// filepath: /e2e/features/example.feature
Feature: Example feature

  Scenario: Open a webpage
    Given I open the "https://example.com" page
    Then the title should be "Example.com"

• 4. Mesej Konsol Log - Cetak mesej konsol penyemak imbas dalam mod tanpa kepala seperti di bawah

// filepath: /e2e/steps/example.steps.js
import { Before, Given, Then, setDefaultTimeout, After } from '@cucumber/cucumber';
import { chromium, expect } from 'playwright';

setDefaultTimeout(30 * 1000); //milliseconds
let browser, page, context;

Before(async function(){
  browser = await chromium.launch({headless: true});
  context = await brwoser.newContext();
  page = await content.newPage();
});

Given('I open the {string} page', async function (url) {
  await page.goto(url);
});

Then('the title should be {string}', async function (title) {
  const pageTitle = await page.title();
  expect(pageTitle).toHaveText(title);
});

After(async function(){
  await context.close();
  await browser.close();
});

• 5. Mengendalikan Lazy Loading - Untuk elemen memuatkan malas, gunakan fungsi berikut
  • a. waitForSelector atau waitFor
  • b. waitForTimeout
  • c. tatalIntoViewIfNeeded
• 6. Nyahpepijat DOM - Gunakan document.querySelector atau pemilih pertanyaan lain dalam konsol penyemak imbas untuk mencari elemen
• 7. Tangkap tangkapan skrin kegagalan

Jika anda telah sampai di sini, maka saya telah melakukan usaha yang memuaskan untuk memastikan anda terus membaca. Sila berbaik hati untuk meninggalkan sebarang komen atau berkongsi pembetulan.

Blog Saya yang Lain:

• Sepadukan Komponen Web/MFE dengan HTML statik biasa
• Temuduga Kejuruteraan Perisian Memecah
• Pengalaman langsung saya dengan komponen web - pembelajaran dan batasan
• Rangka Kerja Keputusan Mikro-Frontend
• Uji Perkhidmatan Web SOAP menggunakan Alat Posmen

Atas ialah kandungan terperinci Perkasakan ETests Anda dengan Pengarang Drama dan Integrasi Timun. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!