Pembangunan Aplikasi Desktop Electron · Pelajaran

Aliran Kerja Pengujian Hujung ke Hujung

Laksanakan strategi pengujian hujung ke hujung untuk mengesahkan aliran pengguna dan kefungsian lengkap aplikasi desktop Electron anda.

Pelajaran 3 daripada 411 langkah

Aliran Kerja Pengujian Hujung ke Hujung ialah pelajaran Pembangunan Aplikasi Desktop Electron percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Aplikasi Desktop Electron, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Aplikasi Desktop Electron merangkumi sejumlah 4 pelajaran.

Apakah Pengujian Hujung ke Hujung?

Pengujian Hujung ke Hujung (E2E) mensimulasikan senario pengguna sebenar untuk mengesahkan bahawa aplikasi berfungsi seperti yang dijangka dari awal hingga akhir. Anggaplah ia sebagai melihat sesuatu dari perspektif pengguna!

Bagi aplikasi Electron, ujian E2E menyemak sama ada UI anda (HTML/CSS/JS) berinteraksi dengan betul dengan logik bahagian belakang (Node.js) dan ciri OS asli.

Mengapa E2E untuk Aplikasi Electron?

Aplikasi Electron adalah kompleks kerana menggabungkan teknologi web dengan keupayaan desktop asli. Ujian unit menyemak bahagian kecil, tetapi E2E memastikan semuanya berfungsi bersama.

Aliran Pengguna Sebenar: Meniru cara pengguna menavigasi dan berinteraksi.
Semakan Integrasi: Mengesahkan komunikasi antara proses utama dan proses pemapar.
Mengesan Regresi: Mengesan jika perubahan baharu merosakkan ciri sedia ada.
Keyakinan: Memberi anda ketenangan bahawa aplikasi anda stabil.

Memilih Alat E2E

Beberapa alat boleh menjalankan pengujian E2E untuk aplikasi web, dan banyak daripadanya boleh disesuaikan untuk Electron. Pilihan popular termasuk:

Playwright: Rangka kerja moden daripada Microsoft yang terkenal dengan kelajuan dan kebolehpercayaannya. Ia mempunyai sokongan terbina dalam untuk Electron.
Cypress: Alat mesra pembangun yang menjalankan ujian secara terus dalam pelayar (atau pemapar Electron).
WebDriver (Selenium): Pilihan klasik, walaupun penyediaannya khusus untuk Electron sering lebih kompleks.

Kita akan menumpukan pada Playwright kerana sokongannya yang kukuh terhadap Electron.

Menyediakan Playwright untuk Electron

Mula-mula, anda perlu memasang Playwright dan pemacu Electronnya dalam projek anda. Buka terminal dalam direktori akar aplikasi Electron anda dan jalankan:

npm install --save-dev @playwright/test playwright-electron

Perintah ini menambahkan pakej yang diperlukan kepada kebergantungan pembangunan anda. Ingat, ujian Playwright biasanya dijalankan dalam folder ujian yang berasingan.

Aplikasi Electron Contoh Kita

Untuk pengujian, mari gunakan aplikasi Electron yang mudah. Cipta fail berikut dalam akar projek anda:

package.json:

{ "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^28.0.0"
  }
}

Aplikasi Contoh: Proses Utama & UI

Seterusnya, cipta fail proses utama dan antara muka pengguna:

main.js:

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false,
      contextIsolation: true
    }
  });
  mainWindow.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

Aplikasi Contoh: HTML & Pramuat

Akhir sekali, cipta UI mudah kita dan skrip pramuat kosong:

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Electron App</title>
    <style>
        body { font-family: sans-serif; text-align: center; padding-top: 50px; }
        h1 { color: #333; }
        button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Hello, CoddyKit!</h1>
    <p id="message">Click the button below.</p>
    <button id="myButton">Change Message</button>

    <script>
        document.getElementById('myButton').addEventListener('click', () => {
            document.getElementById('message').textContent = 'Message Changed!';
        });
    </script>
</body>
</html>

Menulis Ujian E2E Pertama Anda

Cipta fail bernama e2e.spec.js dalam folder tests. Ujian ini melancarkan aplikasi Electron anda dan mengesahkan tajuknya.

tests/e2e.spec.js:

const { test, expect, _electron: electron } = require('@playwright/test');

test('app launches and shows title', async () => {
  // Launch the Electron app from the current directory
  const electronApp = await electron.launch({ args: ['.'] });
  // Get the first window that opens
  const window = await electronApp.firstWindow();
  // Assert the window title
  expect(await window.title()).toBe('My Electron App');
  // Close the app after the test
  await electronApp.close();
});

Berinteraksi & Membuat Penegasan

Mari kembangkan ujian kita untuk mengklik butang dan mengesahkan perubahan mesej. Ini menunjukkan interaksi pengguna dan cara membuat penegasan.

Tambahkan pada tests/e2e.spec.js:

const { test, expect, _electron: electron } = require('@playwright/test');

// ... (previous test)

test('button click changes message', async () => {
  const electronApp = await electron.launch({ args: ['.'] });
  const window = await electronApp.firstWindow();

  // Locate the paragraph and button elements by their IDs
  const messageParagraph = window.locator('#message');
  const button = window.locator('#myButton');

  // Wait for elements to be visible and check initial text
  await messageParagraph.waitFor();
  await expect(messageParagraph).toHaveText('Click the button below.');

  // Click the button
  await button.click();

  // Assert that the text has changed
  await expect(messageParagraph).toHaveText('Message Changed!');

  await electronApp.close();
});

Semakan Aliran Kerja E2E

Manakah antara berikut merupakan manfaat utama menggunakan pengujian End-to-End (E2E) untuk aplikasi Electron?

Jawab dalam pelajaran interaktif

Imbas Kembali: Aliran Kerja E2E

Dalam pelajaran ini, kami meneroka pengujian End-to-End (E2E) untuk aplikasi Electron. Kami mempelajari bahawa pengujian E2E mensimulasikan interaksi pengguna yang lengkap bagi memastikan semua bahagian aplikasi anda berfungsi bersama dengan lancar.

Kami mengenal pasti Playwright sebagai alat yang berkuasa untuk E2E Electron.
Kami menyediakan aplikasi Electron ringkas dan menulis pengujian untuk melancarkannya, berinteraksi dengan elemen UI serta membuat penegasan.

Pengujian E2E amat penting untuk membina aplikasi desktop yang kukuh dan boleh dipercayai!

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 47

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Aliran Kerja Pengujian Hujung ke Hujung” percuma?

Ya — teks penuh “Aliran Kerja Pengujian Hujung ke Hujung” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pembangunan Aplikasi Desktop Electron, tingkat taraf kepada CoddyKit PRO. Kursus Pembangunan Aplikasi Desktop Electron merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Aliran Kerja Pengujian Hujung ke Hujung”?

Laksanakan strategi pengujian hujung ke hujung untuk mengesahkan aliran pengguna dan kefungsian lengkap aplikasi desktop Electron anda. Anda berlatih Pembangunan Aplikasi Desktop Electron menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Aplikasi Desktop Electron?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Aplikasi Desktop Electron di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Aliran Kerja Pengujian Hujung ke Hujung” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Aplikasi Desktop Electron ini?

Ya. Setiap pelajaran Pembangunan Aplikasi Desktop Electron menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Pembangunan Aplikasi Desktop Electron