【ECCUBE】【Playwrite】テストコードを作成する

したい事

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

実際のコード

1. 会員情報の登録確認

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

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

【EC-CUBE】【Front】新規会員登録画面に新規入力項目を追加

(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) テストコードを記述