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テストを行った際の備忘録でした。
Author And Source
この問題について(PupeteerでWebコンポーネントのテスト), 我々は、より多くの情報をここで見つけました https://qiita.com/taisuke-j/items/11eb7a504ebf4b0e06fb著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .