[e2e]puppeteerでShadow-root内のタグを弄る方法

今年もあと半分

７月になり、今年も後半戦に入りましたね。
毎朝４時に起こしてくる犬と日々の暑さで、毎日死にそうな え～すけさんですよ。

画面のテストってめんどくさい

いや、なんならテスト全般めんどくさいんですけどね。
予算や時間や人のレベルなどにより、自動化ツールとか導入していないプロジェクトなどではWeb系の画面周りのテストって、ブラウザで動かしてはキャプチャ取ってを繰り返しなので、
新人にとってはパソコンの操作に慣れるための良い時間つぶしになるかもしれませんが、
ある程度のレベルの人からすると人生の無駄時間を過ごす羽目になってしまい、
ホントにやる気が全く起きないわけで。。。

更に設計・実装が考えられていないようなテストケース（デグレにもならないであろうような箇所のテストや同じコードを使って変な分岐も入っていないのに複数画面で同じようなテストをするみたいなケース）があったりすると、本当に「何を考えてテストケース作ったんや？何を持ってレビューしてOKだしたんや？」と◯意が湧いてきちゃうね(ﾆｯｺﾘ

で、puppeteerってわけよ

有名どこだとSeleniumなどの他にもツールもいっぱいあるけど、ionicなどで作られたスマホ向けのハイブリッドアプリとかのテストをしたいときに、デバイス・表示モード（ダークモードとか）ごとにテストしたいじゃんみたいな時の指定の仕方がなんとなく楽だったのでpuppeteerを使ってみた次第です。

使い方とかはいつか書く

現在IONICで作られたアプリのテストケースを既にいくつか書いていて、そのなかで画面のスクロール関係でちょっとハマったので、備忘録としてコードを残す。
※設定とかはやる気が起きたら書く（きっと書かない

今回のケースとしては、ion-content内にion-listがあった際に、list上のこの部分まで移動（スクロール）させたあとにキャプチャ撮りたいって場面、あると思います。

ぴえんコード

await page.evaluate(() => {
  document
    .querySelector(
      `ion-content ion-list`,
    ).scrollTo(0, 0);
});

一見完璧に動くと思うでしょ？それがね、全然動かないの。。。

理由としては、ion-contentの直下に#shadow-rootなるアレが出来てしまって、その中にスクロールを設定してるdiv.inner-scrollの中にslotでion-listがいるもんだから、それを理解しないで【タグ構成的にこうだから。。。】と上記のようにバカ正直に書いても全然スクロールしてくれなくてぴえんぴえん

ハッピーハッピーハーッピーコード

await page.evaluate(() => {
  document
    .querySelector(
      `ion-content`,
    ).shadowRoot.querySelector(".inner-scroll").scrollTo(0, 0);
});

shadow-rootを持ってるタグ（今回はion-content）をquerySelectorで取ってきたあとに、shadowRootを介して更にquerySelectorで取ってこれた値に対してscrollToで指定してあげてる感じです。

まとめ

今回はIONICで作られたアプリを元に説明しましたが、shadow-rootってところだけを観点にすれば別にどんなWebサイトでも流用できるんじゃないかなということで、お役に立てばと思います。
※動作不良に関する問合せは受け付けません。