Electron Desktop App Development · レッスン

エンドツーエンドテストのワークフロー

エンドツーエンドテスト戦略を実装し、Electronデスクトップアプリケーションのユーザーフロー全体と機能を検証します。

「エンドツーエンドテストのワークフロー」はCoddyKit上の無料Electron Desktop App Developmentレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはElectron Desktop App Development学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Electron Desktop App Developmentコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

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!

よくある質問

「エンドツーエンドテストのワークフロー」レッスンは無料ですか？

はい。「エンドツーエンドテストのワークフロー」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Electron Desktop App Developmentコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Electron Desktop App Developmentコースには全4レッスンが含まれています。

「エンドツーエンドテストのワークフロー」で何を学びますか？

エンドツーエンドテスト戦略を実装し、Electronデスクトップアプリケーションのユーザーフロー全体と機能を検証します。ブラウザで直接実行するハンズオンコードでElectron Desktop App Developmentを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Electron Desktop App Developmentを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのElectron Desktop App Developmentは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「エンドツーエンドテストのワークフロー」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このElectron Desktop App Developmentレッスンでコードを書いて実行できますか？

はい。すべてのElectron Desktop App Developmentレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Electron Desktop App Developmentに戻る