前提条件

• ECCUBE がローカルに保存されている事

コード全体

(1) 【spec】E2Eテストコード

《場所》
e2e-tests/spec/admin/tenant/individual_settings.spec.ts

《test関数説明》
個別設定：個別設定ページで値を入力し保存・反映がされるか確認
定休日カレンダー設定_新規作成：定休日が新規作成できるかどうか確認
定休日カレンダー設定_複数行_ページ遷移確認：定休日レコードが複数ある場合のページネーション確認

import {test} from "../../../fixtures/admin_login.fixture";
import {AdminShopIndividualSettingsPage} from "../../../pages/admin/tenant/individual_settings.page";

test('個別設定',
    {tag: ["@tenant_owner_a"]},
    async ({loginPage,page}) => { 
        const ShopIndividualSettingsPage = new AdminShopIndividualSettingsPage(page);

        // ログイン確認
        await loginPage.seeAfterLoginSuccess();

        // 店舗設定を開く
        await ShopIndividualSettingsPage.gotoIndividualSetting();

        // タブタイトルの存在確認
        await ShopIndividualSettingsPage.seeTabTitle();

        // 値入力
        await ShopIndividualSettingsPage.fillIndividualSetting(
            {
                businessHours: 'サンプル営業時間',
                postage: '123456789',
                taxSet: '999999999'
            }
        );
        // 保存
        await ShopIndividualSettingsPage.clickRegisterButton();

        // 反映確認
        await ShopIndividualSettingsPage.seeInputIndividualSetting();

        // 値入力
        await ShopIndividualSettingsPage.fillIndividualSetting(
            {
                businessHours: '',
                postage: '',
                taxSet: ''
            }
        );
        // 保存
        await ShopIndividualSettingsPage.clickRegisterButton();

        // 反映確認
        await ShopIndividualSettingsPage.seeDeleteIndividualSetting();
        await ShopIndividualSettingsPage.seeSavedMessage();
    }
);

test('定休日カレンダー設定_新規作成',
    {tag: ["@tenant_owner_a"]},
    async ({loginPage,page}) => {
        const ShopIndividualSettingsPage = new AdminShopIndividualSettingsPage(page);

        // ログイン確認
        await loginPage.seeAfterLoginSuccess();

        // 店舗設定を開く
        await ShopIndividualSettingsPage.gotoIndividualSetting();

        // 値入力
        await ShopIndividualSettingsPage.fillCalendarHoliday(
            {
                calendarTitle: '定休日はありません_新規作成',
                calendarHoliday: '2024-10-07'
            }
        );
        // 保存
        await ShopIndividualSettingsPage.clickCreateButton();
        await ShopIndividualSettingsPage.clickRegisterButton();

        // 反映確認
        await ShopIndividualSettingsPage.seeInputHolidayCalendar();
    }
);

test('定休日カレンダー設定_複数行_ページ遷移確認',
    {tag: ["@tenant_owner_a"]},
    async ({loginPage,page}) => {
        const ShopIndividualSettingsPage = new AdminShopIndividualSettingsPage(page);

        // ログイン確認
        await loginPage.seeAfterLoginSuccess();

        // 店舗設定を開く
        await ShopIndividualSettingsPage.gotoIndividualSetting();

        // 11行のカレンダー作成
        await ShopIndividualSettingsPage.createCalendar(10);

        // 次へボタン押下
        await ShopIndividualSettingsPage.clickNextPageButton();

        // 画面遷移されているか確認
        await ShopIndividualSettingsPage.seePrevPageButton();
    }
);

(2) 【page】(1)で使うクラス・関数まとめ

《場所》
e2e-tests/pages/admin/tenant/individual_settings.page.ts

import {expect, Locator, Page} from "@playwright/test";
import {ECCUBE_ADMIN_ROUTE} from "../../../config/default.config";
import {createCalendar} from "../../../fixtures/admin/tenant/individual_settings.fixture";

export class AdminShopIndividualSettingsPage {
    readonly page: Page;
    readonly url: string;
    readonly businessHours: Locator;        // 店舗情報
    readonly postage: Locator;              // 送料
    readonly taxSet: Locator;               // 税設定
    readonly registerButton: Locator;       // 登録
    readonly createButton: Locator;         // 新規作成
    readonly calendarTitle: Locator;        // 入力：カレンダータイトル
    readonly calendarHoliday: Locator;      // 入力：定休日
    readonly confCalenderTitle: Locator;    // 確認：カレンダータイトル
    readonly calenderRow01: Locator;        // 登録カレンダー1行目
    readonly nextPage: Locator;             // 次へ
    readonly prevPage: Locator;             // 前へ

    constructor(page: Page) {
        this.page = page;
        this.url = `${ECCUBE_ADMIN_ROUTE}/tenant/tradelaw`;
        this.businessHours = page.locator('#shop_master_business_hour');
        this.postage = page.locator('#shop_master_delivery_free_amount');
        this.taxSet = page.locator('#shop_master_invoice_registration_number');
        this.calendarTitle = page.locator('#calendar_item_new #calendar_title');
        this.calendarHoliday = page.locator('#calendar_item_new #calendar_holiday');
        this.nextPage = page.locator('.pagination .page-item:has-text("次へ")');
        this.prevPage = page.locator('.pagination .page-item:has-text("前へ")');
        this.registerButton = page.getByRole('button', {name: '登録'});
        this.createButton = page.getByRole('button', {name: '新規作成'});
        this.calenderRow01 = page.locator('.card-body .table tbody tr').nth(1);
    }

    // 対象URLへ遷移
    async goto() {
        await this.page.goto(this.url);
    }

    // メニュー操作
    async gotoIndividualSetting() {
        await this.page.getByRole('link', {name: '店舗設定'}).click();
        await this.page.getByRole('link', {name: '個別設定'}).click();
    }

    // タブタイトルの存在確認
    async seeTabTitle() {
        await expect(this.page).toHaveTitle('店舗設定 個別設定 - EC-CUBE SHOP_tenant_1');
    }

    // 値入力：
    // 定休日以外の設定
    async fillIndividualSetting(individualSetting: {
            businessHours: string,
            postage: string,
            taxSet: string,
    }){
        await this.businessHours.fill(individualSetting.businessHours);
        await this.postage.fill(individualSetting.postage);
        await this.taxSet.fill(individualSetting.taxSet);
    }
    // 定休日設定
    async fillCalendarHoliday(calendarHolidaySetting: {
        calendarTitle: string,
        calendarHoliday: string,
    }){
        await this.calendarTitle.fill(calendarHolidaySetting.calendarTitle);
        await this.calendarHoliday.fill(calendarHolidaySetting.calendarHoliday);
    }

    //　反映確認：
    // 入力判定
    async seeInputIndividualSetting() {
        await expect(this.businessHours).toHaveValue('サンプル営業時間');
        await expect(this.postage).toHaveValue('123,456,789');
        await expect(this.taxSet).toHaveValue('999999999');
    }
    async seeInputHolidayCalendar() {
        await expect(this.calenderRow01).toContainText('定休日はありません_新規作成');
        await expect(this.calenderRow01).toContainText('2024/10/07');
    }

    // 削除判定
    async seeDeleteIndividualSetting() {
        await expect(this.businessHours).toHaveValue('');
        await expect(this.postage).toHaveValue('');
        await expect(this.taxSet).toHaveValue('');
    }
    // async seeDeleteHolidayCalendar() {
    //     await expect(this.businessHours).toHaveValue('');
    //     await expect(this.postage).toHaveValue('');
    // }

    // 登録ボタン押下
    async clickRegisterButton() {
        await this.registerButton.click();
    }

    // 新規作成ボタン押下
    async clickCreateButton() {
        await this.createButton.click();
    }

    // 登録ボタンの表示確認
    async seeRegisterButton() {
        await expect(this.registerButton).toBeVisible();
    }

    // 次へボタン押下
    async clickNextPageButton() {
        await this.nextPage.click();
    }

    // 前へボタン押下
    async seePrevPageButton() {
        await expect(this.prevPage).toBeVisible();
    }

    // 登録完了メッセージ
    async seeSavedMessage() {
        await expect(this.page.locator('.alert-success')).toContainText('保存しました');
    }

    // 定休日レコード作成
    async createCalendar(
        record: number,
    ) {
        for (let i = 0; i < record; i++) {
            await createCalendar();
        }
    }
}

(3) 【type】ECCUBEから返ってきてほしいリスポンスの期待型

《場所》
e2e-tests/types/calendar.type.ts

export type Calendar = {
    "id": number,
    "title": string,
    "holiday": string,
    "create_date": string,
    "update_date": string,
    "baseInfo": {
        "id": number
    }
}

(4)【fixtures】APIを使用

《場所》
e2e-tests/fixtures/admin/tenant/individual_settings.fixture.ts

import {request} from "@playwright/test";
import {Calendar} from "../../../types/calendar.type";

/**
 * 定休日カレンダーのレコード作成
 */
// Promise<typeファイル->type名>
export const createCalendar = async (): Promise<Calendar> => {
    
    // 新規HTTPリクエストする
    const context = await request.newContext();

    // GETでURLにアクセスー＞リスポンスを返却
    // APIクッキーの作成
    await context.get(`/fixture/get_mall_role`);

    // ECCUBE側(FixtureController.php)の指定ルートにPOST依頼をかけている
    // 処理結果を変数に格納
    const CalendarResponse = await context.post('/fixture/calendar/generate_calendar');
    
    // 結果をJSONに変換
    return await CalendarResponse.json();
}

(5) 【generator】DBの操作

《場所》
tests/Eccube/Tests/Fixture/Generator.php

    /**
     * Calendar オプジェクトを生成して返す.
     * @return Calendar
     */
    public function createCalendar()
    {
        // 新規カレンダーオブジェクトを作成
        $Calendar = new Calendar();

        // カレンダーを登録したい店舗を変数に格納
        $tenant_a = 2;
        $tenant = $this->entityManager->getRepository(BaseInfo::class)->find($tenant_a);

        // レコードに値を設定し保存
        $title = '年中無休で営業しております';
        $Calendar
            ->setBaseInfo($tenant)
            ->setTitle($title)
            ->setHoliday(new \DateTime())
            ->setCreateDate(new \DateTime())
            ->setUpdateDate(new \DateTime());
        $this->entityManager->persist($Calendar);
        $this->entityManager->flush();

        // 登録結果を返す
        return $Calendar;
    }

(6) 【fixture】ECCUBE側でHTTPリクエストの受け取り + レコード作成

    /**
     * 定休日カレンダーの作成
     */
    // ルート名は任意
    #[Route(
        '/calendar/generate_calendar',
        name: 'generate_calendar',
        methods: ['POST'],
    )]
    public function generateCalendarWithClass(Request $request, bool $baseOrderOnly = true): Response
    {   
        // カレンダーレコードを作成。
        $Calendar = $this->generator->createCalendar();

        // createCalendar()の実行結果をjsonファイルとして返す。
        return new Response(
            $Calendar->toJSON(),
            Response::HTTP_CREATED,
            ['Content-Type' => 'application/json']
        );
    }

関連サイト

前提条件

・postmanがローカルに保存されいてる状態

使用手順

1. 新規リクエストの作成

サイドメニュー->コレクション->「+」マーク押下

2. リクエストを実行

GETの隣にある「▽」を押下 -> アクセスしたいURL入力 -> 送信押下

3. 結果の確認

したい事

E2E側からの操作でECCUBEのDBにレコードを追加したい。
今回は、dtb_calendarにレコードを追加をする。

実行手順

1. EntityManagerを使い、dtb_calendarにレコードを追加
2. ルート名の設定 + レコード作成結果を返す
3. E2E側でECCUBE側に対してのHTTPリクエスト処理を作成
4. テストコードを作成

1. EntityManagerを使い、dtb_calendarにレコードを追加

《場所》
tests/Eccube/Tests/Fixture/Api/Controller/FixtureController.php

    /**
     * Calendar オプジェクトを生成して返す.
     * @return Calendar
     */
    public function createCalendar()
    {
        // 新規カレンダーオブジェクトを作成
        $Calendar = new Calendar();

        // カレンダーを登録したい店舗を変数に格納
        $tenant_a = 2;
        $tenant = $this->entityManager->getRepository(BaseInfo::class)->find($tenant_a);

        // レコードに値を設定し保存
        $title = '年中無休で営業しております';
        $Calendar
            ->setBaseInfo($tenant)
            ->setTitle($title)
            ->setHoliday(new \DateTime())
            ->setCreateDate(new \DateTime())
            ->setUpdateDate(new \DateTime());
        $this->entityManager->persist($Calendar);
        $this->entityManager->flush();

        // 登録結果を返す
        return $Calendar;
    }

《疑問》

疑問：店舗情報を取得しているのはなぜか？
結論：レコード追加先の店舗を設定するため。

疑問：setBaseInfo()をEntity/Calendar.phpで探してもなかった。ではどこか？
結論：TenantTrait.phpに関数が存在する。

src/Eccube/Entity/Calendar.php

    class Calendar extends AbstractEntity
    {
        use Traits\TenantTrait;
　　　　 .....
    }

src/Eccube/Entity/Traits/TenantTrait.php

    /**
     * テナント情報を設定する
     *
     * @param BaseInfo $baseInfo
     * @return $this
     */
    public function setBaseInfo(BaseInfo $baseInfo)
    {
        $this->baseInfo = $baseInfo;
        return $this;
    }

2. ルート名の設定 + レコード作成結果を返す

《場所》
tests/Eccube/Tests/Fixture/Generator.php

    /**
     * 定休日カレンダーの作成
     */
    // ルート名は任意
    #[Route(
        '/calendar/generate_calendar',
        name: 'generate_calendar',
        methods: ['POST'],
    )]
    public function generateCalendarWithClass(Request $request, bool $baseOrderOnly = true): Response
    {   
        // レコード作成
        $Calendar = $this->generator->createCalendar();

        // createCalendar()の実行結果をJSON形式で返す
        return new Response(
            $Calendar->toJSON(),
            Response::HTTP_CREATED,
            ['Content-Type' => 'application/json']
        );
    }

#[Route]：アクセス名・期待したいるメゾット (GET? POST?)

3. postmanでカレンダーレコード作成関数の実行確認

（1）http://localhost:8080/fixture/get_mall_role にアクセスしAPIクッキーを作成
（2）http://localhost:8080/fixture/calendar/generate_calendar にアクセスしテストを実行

4. E2E側でECCUBE側に対してHTTPリクエストする処理を作成

《場所》
e2e-tests/fixtures/admin/tenant/individual_settings.fixture.ts

/**
 * 定休日カレンダーのレコード作成
 */
// Promise<typeファイル->type名>
export const createCalendar = async (): Promise<Calendar> => {
    
    // 新規HTTPリクエストする
    const context = await request.newContext();

    // GETでURLにアクセスー＞リスポンスを返却
    // APIクッキーの作成
    await context.get(`/fixture/get_mall_role`);

    // ECCUBE側(FixtureController.php)の指定ルートにPOST依頼をかけている
    // 処理結果を変数に格納
    const CalendarResponse = await context.post('/fixture/calendar/generate_calendar');
    
    // 結果をJSONに変換
    return await CalendarResponse.json();
}

5. テストコードを作成

《場所》
e2e-tests/spec/admin/tenant/individual_settings.spec.ts

test('定休日カレンダー設定_複数行_ページ遷移確認',
    {tag: ["@tenant_owner_a"]},
    async ({loginPage,page}) => {
　　　　 // レコード
        const ShopIndividualSettingsPage = new AdminShopIndividualSettingsPage(page);

　　　　　......
　　　　　
        // 10行のカレンダー作成
        await ShopIndividualSettingsPage.createCalendar(10);
    }
);

《場所》
e2e-tests/pages/admin/tenant/individual_settings.page.ts

export class AdminShopIndividualSettingsPage {

    // 定休日レコード作成
    async createCalendar(
        record: number,
    ) {
        for (let i = 0; i < record; i++) {
            await createCalendar();
        }
    }
}

E2Eテストの実行

リスポンス情報と共に”1 passed (5.0s)”が返却されたため成功！！(^▽^)/

1. 会員情報の登録確認
2. 画面遷移とテキスト表示確認
3. 管理側 -> コンテンツ管理 -> ファイル管理 -> htmlファイルのダウンロード実行確認

実際のコード

1. 会員情報の登録確認

フロント側 -> 新規会員登録 -> 趣味項目を追加し、DBへの登録確認

(1) 下記に従い、新規会員登録画面に新規入力項目を追加

(2) テストコードを記述

EntryPageクラス
場所：e2e-tests/pages/front/entry.page.ts

// 外部ライブラリからlocatorとpageクラスをimport
import {Locator, Page} from "@playwright/test";

export class EntryPage {
　　// 読み込み専用の変数設定 
    readonly page: Page;
    readonly url: string;
    readonly termsLink: Locator;

　　// 変数に値を格納
    constructor(page: Page) {
        // 上記で設定した変数に↓が格納
　　　　 // playrightのpageオブジェクト
        this.page = page;
　　　　　// テスト対象のurl
        this.url = `/entry`;
        this.termsLink = page.locator('.ec-checkbox .ec-link');
    }
　　
　　// 遷移関数
    async goto() {
        await this.page.goto(this.url);
    }

　　// 指定リンクを押下
    async clickServiceTermsLink() {
        await this.termsLink.click();
    }
}

テスト実行関数
場所：e2e-tests/spec/front/entry.spec.ts

// クラスの使用宣言
import {expect, test} from "@playwright/test";
import {EntryPage} from "../../pages/front/entry.page";

test('ECCUBE 新規会員登録チェック', async ({ page }) => {
    // 変数設定
    const entryPage = new EntryPage(page);
    const name01 = 'テスト';
    const name02 = '太郎';
    const kana01 = 'テスト';
    const kana02 = 'タロウ';
    const hobby = '趣味';
    const pref = '27';
    const add_num = '5400010';
    const add01 = '大阪府中央区';
    const add02 = 'ドエル南本町';
    const phone_num = '11122223333';
    const email01 = 'testtaro@gmail.com';
    const email02 = 'testtaro@gmail.com';
    const pass01 = 'sainetJp5018+++---';
    const pass02 = 'sainetJp5018+++---';

    // 新規会員登録画面に遷移
    await entryPage.goto();
　　
    // 対象(idで指定)の入力項目に値を入力
    await page.locator('#entry_name_name01').fill(name01);
    await page.locator('#entry_name_name02').fill(name02);
    await page.locator('#entry_kana_kana01').fill(kana01);
    await page.locator('#entry_kana_kana02').fill(kana02);
    await page.locator('#entry_postal_code').fill(add_num);
    await page.locator('#entry_address_pref').selectOption(pref);
    await page.locator('#entry_hobby').fill(hobby);
    await page.locator('#entry_address_addr01').fill(add01);
    await page.locator('#entry_address_addr02').fill(add02);
    await page.locator('#entry_phone_number').fill(phone_num);
    await page.locator('#entry_email_first').fill(email01);
    await page.locator('#entry_email_second').fill(email02);
    await page.locator('#entry_plain_password_first').fill(pass01);
    await page.locator('#entry_plain_password_second').fill(pass02);
    await page.locator('#entry_user_policy_check').click();
　　
　　// name："指定テキストが入る" という名前のボタン要素を押下
    await page.getByRole('button', { name: '同意する' }).click();
    await page.getByRole('button', { name: '会員登録をする' }).click();
   
　　// 完了画面の表示確認
　　await expect(page).toHaveURL('/entry/complete');
});

2. 画面遷移とテキスト表示確認

フロント側 -> Mypage -> 趣味項目を追加し、指定のページまで画面遷移とテキスト表示確認

(1) 下記に従い、MyPageに趣味項目を追加

(2) テストコードを記述

config：eccubeへの接続情報が記載 (URLやログイン情報)
fixtures：テスト実行事前準備ファイル格納
(ECCUBEにログインしたり、受注情報を登録したりする)
(fixturesがないと、ECCUBEにアクセスできない)
pages：specで使う関数・クラスまとめ
spec：テストコード格納
type：

コード理解

場所：e2e-tests/spec/admin/order/order/list.spec.ts
関数：EA0401-UC03-T01 配送CSVダウンロード

ここでは、from 以降のパスでexportされているクラスや、定数を取得(import)している。

import {expect, test} from "../../../../fixtures/admin_login.fixture";
import {Order_count} from "../../../../types/order_count.type";
import {createOrder, hasExistingOrders} from "../../../../fixtures/admin/order/order.fixture";
import {AdminOrderListPage} from "../../../../pages/admin/order/order/list.page";
import {Download} from "@playwright/test";
import {Iconv} from "iconv";

EA0401-UC03-T01 配送CSVダウンロード

test('EA0401-UC03-T01 配送CSVダウンロード', async ({ loginPage, page }) => {
    // ログイン実行がされたか確認
    await loginPage.seeAfterLoginSuccess();
    // 受注数を数えている？？
    const existingOrdersCnt: Order_count = await hasExistingOrders();
    // 対象のid要素を取得
    const OrderList = new AdminOrderListPage(page);
    // documentをダウンロードし終えるまで待機
    await page.waitForLoadState('domcontentloaded');
    // 一覧押下
    await OrderList.gotoViaMenu();
    // 件数確認
    await OrderList.confirmTotalResultCount(existingOrdersCnt.product_count);
    // ダウンロードが開始されるまで待機
    const downloadPromise = page.waitForEvent('download', { timeout: 2000});
    // csvボタン -> 出荷・受注CSVが表示されるか確認
    await OrderList.downloadOrderDeliveryCsv();
    // イベント実行されたか確認
    const download: Download = await downloadPromise;
    // assert filename
    // ダウンロードしたファイルとが、指定のファイル名と一致するか確認
    expect(download.suggestedFilename()).toMatch(new RegExp('^shipping_\\d{14}\\.csv$'));
    // get and assert stats
    const fs = require('fs').promises;
    //　疑問：何している？
    expect((await fs.stat(await download.path() as string)).size).toBeGreaterThan(200);
    
    const path: string = await download.path();
    const content: string = await fs.readFile(path);
    const iconv = new Iconv('SHIFT_JIS', 'UTF-8');
    const utf8Content = iconv.convert(content).toString();
    const rows = utf8Content.trim().split('\n');
    const rowCount = rows.length;
    expect(rowCount).toBeGreaterThan(existingOrdersCnt.product_count + 1);
});