PupeteerでWebコンポーネントのテスト

はじめに

一年ほど前に自分のプロジェクト向けにStencilを使ってWebコンポーネントを作ったりしていたのですが、その頃はまだそこまでWebコンポーネントが使われている感じではありませんでした。最近ではWebコンポーネントの活用が増えてきていて、実際今入っているプロジェクトで使っているAmazon AmplifyのコンポーネントもWebコンポーネントで実装されています。

今回はWebコンポーネントを含むページのE2EテストをPupeteerで実装する際に必要だった知識のメモです。

PupeteerでShadow DOMにアクセス

Pupeteerのチームも近年のWebコンポーネントの普及を受けてShadow Domのサポートを検討しているようですが、現段階では特にまだShadow Domにアクセスするための特別な仕組みはないようです。

自分の場合、AmplifyのWebコンポーネント（Submitボタン）をクリックする必要があったのですが

Shadow DOMに対して例えば

await page.click("button[type='submit']");

といった形でアクセスはできず、今回は以下の形で対応しました。

const submitButton = (
  await page.evaluateHandle(
    `document.querySelector("amplify-sign-in").shadowRoot.querySelector("amplify-button").shadowRoot.querySelector("button[type='submit']")`
  )
).asElement();

await submitButton.click();
...

ただやはりもう少しスマートな形でShadow Dom要素へのアクセスがPupeteerで出来るようになってほしいですね。

まとめ

今回はPupeteerでWebコンポーネントを含むページのE2Eテストを行った際の備忘録でした。