EC-CUBEプラグイン開発者のみなさん、E2Eテストは作ってますか？
GitHub Actions でテストの自動化はしていますか？

従来、EC-CUBEのプラグインのE2Eテストをするためには、さまざまなステップが必要でした。
多くの方は、手動でテストされていると思います。

別記事であるComposerを使いこなしてEC-CUBE4系プラグインの開発効率を爆上げするを応用して、10分で簡単にE2Eテストを書いてみましょう！

この方法は、EC-CUBE4.0.x〜4.2.x まで使用可能です。

2系のプラグイン/決済モジュールについても応用可能ですので、順次まとめたいと思います。

前提条件

[EC-CUBE4.0.xのみ] EC-CUBEオーナーズストアの認証キーを取得しておきます
Node.js 14 以上がインストールされていること
docker-compose が利用できること

Windows の方は、 WSL2 の利用をおすすめします。

プラグインを用意

まず、開発したいプラグインを用意します。
ここでは SimplePayment プラグインを例にします。
プラグイン名や、プラグインコードなどは適宜読み替えてください。

git clone https://github.com/EC-CUBE/sample-payment-plugin

プラグインを一から開発したい方は、公式ドキュメントプラグインを開発する#プラグインの雛形を生成を参考に雛形を生成し、 app/Plugin/<プラグインコード> ディレクトリを EC-CUBE とは別の階層にコピーしておいてください。

用意できたら、プラグインのディレクトリに移動します。

cd sample-payment-plugin

docker-compose.yml と docker-compose.dev.yml を用意

以下をコピーして、 docker-compose.yml と docker-compose.dev.yml を用意します。

EC-CUBE4.0.x の場合

docker-compose.dev.yml にオーナーズストアの認証キーと、プラグインコードを設定しておきます。

## docker-compose.yml
version: "3"

networks:
  backend:
    driver: bridge

volumes:
  mailcatcher-data:
    driver: local

  ### ignore folder volume #####
  var:
    driver: local
  vendor:
    driver: local
  node_modules:
    driver: local

services:
  ### ECCube4 ##################################
  ec-cube:
    image: ghcr.io/nanasess/ec-cube-php:7.4-apache-4.0
    ports:
      - 8080:80
      - 4430:443
    volumes:
      - "var:/var/www/html/var"
      - "vendor:/var/www/html/vendor"
      - "node_modules:/var/www/html/node_modules"
    environment:
      # EC-CUBE environments
      APP_ENV: "dev"
      APP_DEBUG: 1
      DATABASE_URL: "sqlite:///var/eccube.db"
      DATABASE_SERVER_VERSION: 3
      DATABASE_CHARSET: 'utf8'
      MAILER_DSN: "smtp://mailcatcher:1025"
      ECCUBE_AUTH_MAGIC: "<change.me>"
    networks:
      - backend

  ### Mailcatcher ##################################
  mailcatcher:
    image: schickling/mailcatcher
    ports:
      - "1080:1080"
      - "1025:1025"
    networks:
      - backend

## docker-compose.dev.yml
version: '3'

services:
  ec-cube:
    entrypoint: >
      /bin/bash -c "
      docker-php-entrypoint ls &&
      bin/console doctrine:query:sql \"UPDATE dtb_base_info SET authentication_key = '$${ECCUBE_AUTHENTICATION_KEY}'\" &&
      composer config repositories.plugin '{\"type\": \"path\", \"url\": \"../plugin\"}' &&
      bin/console eccube:composer:require ec-cube/$${PLUGIN_CODE} &&
      bin/console eccube:plugin:enable --code=$${PLUGIN_CODE} &&
      apache2-foreground
      "
    environment:
      PLUGIN_CODE: <プラグインコード>
      ECCUBE_AUTHENTICATION_KEY: <オーナーズストアの認証キー>
    volumes:
      - ".:/var/www/plugin:cached"

EC-CUBE4.1.x の場合

docker-compose.dev.yml にプラグインコードとプラグイン名を設定しておきます。

## docker-compose.yml
version: "3"

networks:
  backend:
    driver: bridge

volumes:
  mailcatcher-data:
    driver: local

  ### ignore folder volume #####
  var:
    driver: local
  vendor:
    driver: local
  node_modules:
    driver: local

services:
  ### ECCube4 ##################################
  ec-cube:
    image: ghcr.io/nanasess/ec-cube-php:7.4-apache-4.1
    ports:
      - 8080:80
      - 4430:443
    volumes:
      - "var:/var/www/html/var"
      - "vendor:/var/www/html/vendor"
      - "node_modules:/var/www/html/node_modules"
    environment:
      # EC-CUBE environments
      APP_ENV: "dev"
      APP_DEBUG: 1
      DATABASE_URL: "sqlite:///var/eccube.db"
      DATABASE_SERVER_VERSION: 3
      DATABASE_CHARSET: 'utf8'
      MAILER_DSN: "smtp://mailcatcher:1025"
      ECCUBE_AUTH_MAGIC: "<change.me>"
    networks:
      - backend

  ### Mailcatcher ##################################
  mailcatcher:
    image: schickling/mailcatcher
    ports:
      - "1080:1080"
      - "1025:1025"
    networks:
      - backend

## docker-compose.dev.yml
version: '3'

services:
  ec-cube:
    entrypoint: >
      /bin/bash -c "
      docker-php-entrypoint ls &&
      composer config repositories.plugin '{\"type\": \"path\", \"url\": \"../plugin\"}' &&
      bin/console eccube:composer:require $${PLUGIN_NAME} &&
      bin/console eccube:plugin:enable --code=$${PLUGIN_CODE} &&
      apache2-foreground
      "
    environment:
      PLUGIN_CODE: <プラグインコード> # 例) SamplePayment
      PLUGIN_NAME: ec-cube/<すべて小文字のPluginCode> # 例) ec-cube/samplepayment4
    volumes:
      - ".:/var/www/plugin:cached"

EC-CUBE4.2.x の場合

docker-compose.dev.yml にプラグインコードとプラグイン名を設定しておきます。

## docker-compose.yml
version: "3"

networks:
  backend:
    driver: bridge

volumes:
  mailcatcher-data:
    driver: local

  ### ignore folder volume #####
  var:
    driver: local
  vendor:
    driver: local
  node_modules:
    driver: local

services:
  ### ECCube4 ##################################
  ec-cube:
    image: ghcr.io/ec-cube/ec-cube-php:7.4-apache-4.2
    ports:
      - 8080:80
      - 4430:443
    volumes:
      - "var:/var/www/html/var"
      - "vendor:/var/www/html/vendor"
      - "node_modules:/var/www/html/node_modules"
    environment:
      # EC-CUBE environments
      APP_ENV: "dev"
      APP_DEBUG: 1
      DATABASE_URL: "sqlite:///var/eccube.db"
      DATABASE_SERVER_VERSION: 3
      DATABASE_CHARSET: 'utf8'
      MAILER_DSN: "smtp://mailcatcher:1025"
      ECCUBE_AUTH_MAGIC: "<change.me>"
    networks:
      - backend

  ### Mailcatcher ##################################
  mailcatcher:
    image: schickling/mailcatcher
    ports:
      - "1080:1080"
      - "1025:1025"
    networks:
      - backend

## docker-compose.dev.yml
version: '3'

services:
  ec-cube:
    entrypoint: >
      /bin/bash -c "
      docker-php-entrypoint ls &&
      composer config repositories.plugin '{\"type\": \"path\", \"url\": \"../plugin\"}' &&
      bin/console eccube:composer:require $${PLUGIN_NAME} &&
      bin/console eccube:plugin:enable --code=$${PLUGIN_CODE} &&
      apache2-foreground
      "
    environment:
      PLUGIN_CODE: <プラグインコード> # 例) SamplePayment
      PLUGIN_NAME: ec-cube/<すべて小文字のPluginCode> # 例) ec-cube/samplepayment4
    volumes:
      - ".:/var/www/plugin:cached"

EC-CUBE を起動する

以下のコマンド一発で、プラグインインストール済みでセットアップされたEC-CUBEが起動します。

docker-compose up -d -f docker-compose.yml -f docker-compose.dev.yml

http://localhost:8080 へアクセスしてフロント画面が起動しているのを確認してください。
管理画面は http://localhost:8080/admin/ です。(ID: admin, PASS: password)

(オプション) 起動時にプラグインの初期設定を完了する

docker-compose.dev.yml の entrypoint にスクリプトを書いておくことで、EC-CUBEの起動時にプラグインの初期設定が完了した状態にできます。
これを活用することで、E2Eテストの自動化が格段にしやすくなります。

### docker-compose.dev.yml の entrypoint の例です
### dtb_payment_option に支払い方法の設定を INSERT しておくことで、
### EC-CUBE 起動直後にプラグインで追加された支払い方法を利用できるようにしています。
    entrypoint: >
      /bin/bash -c "
      docker-php-entrypoint ls &&
      bin/console doctrine:query:sql \"UPDATE dtb_base_info SET authentication_key = '$${ECCUBE_AUTHENTICATION_KEY}'\" &&
      composer config repositories.plugin '{\"type\": \"path\", \"url\": \"../plugin\"}' &&
      bin/console eccube:composer:require ec-cube/SamplePayment &&
      bin/console eccube:plugin:enable --code=SamplePayment &&
      bin/console doctrine:query:sql \"INSERT INTO dtb_payment_option VALUES(1,7,'paymentoption');\" &&
      bin/console doctrine:query:sql \"INSERT INTO dtb_payment_option VALUES(1,6,'paymentoption');\" &&
      bin/console doctrine:query:sql \"INSERT INTO dtb_payment_option VALUES(1,5,'paymentoption');\" &&
      apache2-foreground
      "

playwright のセットアップ

E2Eテストを実行するための Playwright をセットアップします。

npm init playwright@latest

上記のコマンドを実行するといろいろ聞かれますが、特にこだわりなければ yes で良いと思います。
Do you want to use TypeScript or JavaScript? は TypeScript がおすすめです。

テストコードを自動生成する

Playwright には、E2Eテストのコードを自動生成する機能があります。
これを使って、E2Eテストを書いてみましょう！

npx playwright codegen http://localhost:8080

上記のコマンドを実行すると、ブラウザと Playwright Inspector が自動で起動します。
EC-CUBEのトップページが表示されていると思いますので、プラグインの機能を操作してみてください。
Playwright Inspector にテストコードが自動生成されていきます。

テストコードをコピーして実行してみる

Playwright をセットアップすると、tests というディレクトリが生成されます。
この中に example.spec.ts というテストファイルが生成されています。

このファイルに、先ほど生成されたテストコードを貼りつけましょう。

以下の例は、商品をカートに投入するテストコードです。

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {

  await page.goto('http://localhost:8080/');

  await page.getByRole('link', { name: '新入荷' }).click();
  await expect(page).toHaveURL('http://localhost:8080/products/list?category_id=2');

  await page.getByRole('link', { name: 'チェリーアイスサンド ￥3,080' }).click();
  await expect(page).toHaveURL('http://localhost:8080/products/detail/2');

  await page.getByRole('button', { name: 'カートに入れる' }).click();

  await page.getByRole('link', { name: 'カートへ進む' }).click();
  await expect(page).toHaveURL('http://localhost:8080/cart');

});

テストを実行

以下のコマンドでテストを実行してみましょう！

npx playwright test

デフォルトでは、 Chromium(Chrome), Firefox, Webkit(Safari) が自動的に起動してテストが実行されます。

起動するブラウザを変更したい場合は、 playwright.config.ts の projects の項目を編集してください。

(おまけ) GitHub Actions で実行する

.github/workflows/playwright.yml が生成されていると思います。
このファイルの - name: Run Playwright tests の前あたりに以下のコードを記述してください。

    - name: Setup EC-CUBE
      env:
        PLUGIN_CODE: <プラグインコード>
        PLUGIN_NAME: ec-cube/<すべて小文字のプラグインコード>
        # EC-CUBE 4.0.x のみ
        ECCUBE_AUTHENTICATION_KEY: ${{ secrets.ECCUBE_AUTHENTICATION_KEY }}
      run: docker compose up -d

EC-CUBE 4.0.x の場合は、オーナーズストアの認証キーを GitHub の secrets に登録してください。

くれぐれも機密情報をリポジトリに push しないようご注意ください。

まとめ

Composer と docker-compose を使いこなせば、プラグインの開発効率が爆上がりします。
いままで、E2Eテストする工数が取れない... とか、 環境構築が面倒で... と思っていた方も、この方法なら10分でできますのでぜひ挑戦してみてください！

Discussion