CodeceptJSでHandsontableのセルをクリックする方法

おはこんばんは。最近、CodeceptJSでE2Eテストを書くことが増えたのですが、CodeceptJSでHandsontableの項目名セルをクリックするのに少し苦戦したので、対策についてご紹介しようと思います。

背景

CodeceptJSでは、I.click(locator)でlocatorに指定されたリンクやボタンのクリックを実行します。ただ、Handsontableの項目名セルを指定するとうまくクリックが実行されませんでした。

Handsontableの項目名セルが検知しているイベントとCodeceptJSがI.click(locator)で発火しているイベントが違うみたいです...恐らく...

対策

今回はCodeceptJSのI.click(locator)は利用せず、mouseEventでmousedownを発火して対応するようにしました。

以下のように該当のセルにmousedownを発火するメソッドを定義します。

e2e/configs/components/Handsontable.ts  

export = {
  /**
   * I.clickではHandsontableの項目セルがクリックされないので独自で定義している
   * @param row 該当セルの行
   * @param line 該当セルの列
   */
  clickCell: async function (row: number, line: number): Promise<void> {
    await I.executeScript(
      (row, line) => {
        const trElement = document.querySelectorAll(".ht_master table tr");
        if (trElement?.length < row) return;
        const tdElement = trElement[row-1].childNodes;
        if (tdElement?.length < line) return;
  		
        const mousedownEvent = new MouseEvent("mousedown", {
          bubbles: true,
          cancelable: true,
        });
        tdElement[line-1].dispatchEvent(mousedownEvent);
      },
      row,
      line
    );
  },
}

そしてCodeceptJSで上記を呼び出せるように設定ファイルへ追記してあげます。

codecept.conf.js

include: {
  Handsontable: "./e2e/configs/components/Handsontable.ts",		
}

steps.d.ts

type Handsontable = typeof import("./e2e/configs/components/Handsontable");
				
declare namespace CodeceptJS {		
  interface SupportObject {
    Handsontable: Handsontable;	
  }
}

これでCodeceptJSで利用できるようになったので、以下のように呼び出してあげればOKです。お疲れ様でした。

Scenario(
  "test",
  async ({ Handsontable }) => {
    await Handsontable.clickCell(1, 1);
  }
);

さいごに

CodeceptJSでHandsontableのセルをクリックする方法をご紹介しました。CodeceptJSとHandsontableは闇があったりするので、ちょっと苦戦しますね。
今回の記事が誰かの参考になれば幸いです。