puppeteerでテスト自動化しよう

こんばんは。

今日もpuppeteerをやっていこう。

ちょっと復習。

puppeteerを使う環境は昨日できたはずだから、今日はコードを書いていこうね。

まずは、moduleを作っていこう。

puppeteerを使おうと決めた君には、puppeteerにやってほしいことが色々あるはずだ。

でも、それを1つのコードに入れ込もうとしていないかい？

それは、見づらさやメンテナンスのしにくさに繋がってしまう。

1つずつパーツを作ってそれを組み合わせて、実行は1つだけで全部できちゃう！って状態にするのが、完成形だよ

puppeteerには、とりあえずこれは書いとけよってコードがあるよ。

それがこれ↓

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await browser.close();
})();

 

1行目：puppeteer使うやで！（宣言）

2行目：非同期処理やで！（asyncとawaitはセット）

　　　※非同期処理とは…送信側と受信側のタイミングの一致を気にせずデータを進めること…らしい

3行目："browser"っていう変数は、"puppeteerを始めるまで待つってことやで！"

（launch（ローンチ）って始めました的な意味らしい（衝撃））

4行目："page"っていう変数は、"browserで新しいページ開くってことやで！"

5行目：ブラウザ閉じるまでまつやで

 

はい。内容見て分かるように、何もしてないっすね。

ブラウザ開いて秒で閉じる。

 

簡単でしょ…？

 

基本的に

Ａの処理を待って、次はＢの処理待って…って感じで、作っていけばいい。

ぶっちゃけ非同期処理とかわからんでも作れる。

作ったもん。

 

最初が作れたら、あとの動きはawaitしていくだけ。

ブラウザが開き終わるまでにボタン探されたってそりゃ見つからないもんね。

 

んで、書き方について躓いたらこの子の出番。

①Recordってボタンを押す

②実際に書きたい動きを行う（ボタンぽちっとするとか）

自分がやった内容が１．２．３…と書かれていくよ。

③　②を最後まで行ったら、Stopを押す

 すると…

ほら見て～～～！

もうできちゃったよ～～！

すごーい！！天才！！

 

あとは、copy to clickboardすればいいだけ！

 

ちなみに、この↑のコードは、yahooのサイトで、yahoo!のボタン押しただけ。

 

このrecordくんは、ブラウザのサイズまで決めれるので、スマホの大きさでも確認できるよ！（実機で確認したほうがいいとは思うけどね）

 

 

ちなみに、puppeteer recorderくんを入れた状態で右クリックをすると

Puppeteer Recorderってのが出てくるよ。

これでスクリーンショットを取るってもできる。

最高だね。

 

moduleとしては、こんな感じで作っていけばいいと思います。

 

ただ、そのままこのコードを使うと、こんなデメリットもある。

 

\\なんだ、このコード何やってるか全然わからねぇ状態になる//

 

なんでかというと、selectorで、htmlの要素を追いかけてくれてるわけですけども、実際わかんないわけよ。

「trのtdの……。え？これ一体何やってんの？」状態

コードを追いかけるのがめんどくさいの極みマンになる。

自分で書いてもそんな感じにはなっちゃうんだけどもさ、できる限り簡単にわかりやすくまとめたいじゃん？

 

だから、次回はmodule同士をまとめる、コンパクトにするコードを作っちゃいましょう。

 

 

---

余談

 

昨日、このブログの設定いじってるときに、googleアナリティクスを入れれる所見つけたから、googleアナリティクス埋め込み始めたんよ。

 

ブログ書いている自分以外来てないよね。

つまり、自分で盛り上げていくしかない！！

人の役に立つためには、まず自分がしっかり理解しておかないといけないなと改めて感じました。

ぶっちゃけ、非同期処理とかわからんかったから調べると、奥がかなりふかそうだったので理解するまでがマジで長い。

あと、非同期処理だけで1記事書ける人がすごい。

金、土は暇になりそうなので、まとまって時間とれるときに書いていこうと思います。

---