Electron Desktop App Development · Lezione

Flussi di test end-to-end

Implementi strategie di test end-to-end per verificare il flusso utente completo e le funzionalità dell’applicazione desktop Electron.

Flussi di test end-to-end è una lezione Electron Desktop App Development gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Electron Desktop App Development, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Electron Desktop App Development include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

What is End-to-End Testing?

End-to-End (E2E) testing simulates real user scenarios to verify that an application works as expected from start to finish. Think of it as putting yourself in the user's shoes!

For Electron apps, E2E tests check if your UI (HTML/CSS/JS) correctly interacts with your backend logic (Node.js) and native OS features.

Why E2E for Electron Apps?

Electron applications are complex, combining web technologies with native desktop capabilities. Unit tests check small parts, but E2E ensures everything works together.

Real User Flow: Mimics how a user navigates and interacts.
Integration Checks: Verifies communication between main and renderer processes.
Catch Regressions: Detects if new changes break existing features.
Confidence: Gives you peace of mind that your app is stable.

Choosing an E2E Tool

Several tools can perform E2E testing for web applications, and many are adaptable for Electron. Popular choices include:

Playwright: A modern framework from Microsoft, known for speed and reliability. It has built-in support for Electron.
Cypress: A developer-friendly tool that runs tests directly in the browser (or Electron's renderer).
WebDriver (Selenium): A classic choice, though often more complex to set up for Electron specifically.

We'll focus on Playwright due to its strong Electron support.

Setting Up Playwright for Electron

First, you need to install Playwright and its Electron driver in your project. Open your terminal in your Electron app's root directory and run:

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

This command adds the necessary packages to your development dependencies. Remember, Playwright tests are typically run in a separate test folder.

Our Sample Electron App

To test, let's use a simple Electron app. Create these files in your project root:

package.json:

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

Sample App: Main Process & UI

Next, create the main process file and the user interface:

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

Sample App: HTML & Preload

Finally, our simple UI and an empty preload script:

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>

Writing Your First E2E Test

Create a file named e2e.spec.js in a tests folder. This test launches your Electron app and verifies its title.

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

Interacting & Asserting

Let's expand our test to click the button and verify the message changes. This demonstrates user interaction and making assertions.

Add to 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();
});

E2E Workflow Check

Which of the following are key benefits of using End-to-End (E2E) testing for an Electron application?

Recap: E2E Workflows

In this lesson, we explored End-to-End (E2E) testing for Electron applications. We learned that E2E tests simulate full user interactions to ensure all parts of your app work together seamlessly.

We identified Playwright as a powerful tool for Electron E2E.
We set up a simple Electron app and wrote tests to launch it, interact with UI elements, and make assertions.

E2E testing is vital for building robust and reliable desktop applications!

Domande Frequenti

La lezione «Flussi di test end-to-end» è gratuita?

Sì — il testo completo di «Flussi di test end-to-end» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Electron Desktop App Development, passa a CoddyKit PRO. Il corso Electron Desktop App Development include 4 lezioni in totale.

Cosa imparerò in «Flussi di test end-to-end»?

Implementi strategie di test end-to-end per verificare il flusso utente completo e le funzionalità dell’applicazione desktop Electron. Eserciti Electron Desktop App Development con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Electron Desktop App Development?

Non è richiesta alcuna esperienza precedente. Electron Desktop App Development su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Flussi di test end-to-end»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Electron Desktop App Development?

Sì. Ogni lezione Electron Desktop App Development include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Electron Desktop App Development