"musubi"

プログラミングに関する記事を1日1つ挙げていく予定であります。

puppeteerでテスト自動化していくよ

こんばんは。

今日ほんとはgit bashが使えるようになるまでのやり方書こうと思ったんやけども、

急にpuppeteer書きたくなったから本能に従うわ✊

 

まずpuppeteerとは何かを説明しよう!

puppeteer

web上の情報を抽出する(スクレイピング)技術の1つ

 何に使えるかって?

例えば、好きなジャンルの絵があったとする。

その絵をまとめてみたい!…でも、調べるのは面倒だし、大変…

そんな時に使えたりするよ!(雑)

スクレイピングを禁止しているサイトもあるから気を付けて。規約に触れない程度にするんだよ。確かtwitterとかはだめだった気がするよ。

 

エンジニアなら"テスト自動化 puppeteer"なんて調べ方するんじゃないかな

Web上のボタン操作なんて簡単に操作できるからね、便利なもんよ。

 

テスト自動化って言ったって、いろいろあるだろう

私が今まで調べたのは、

  • selenium(Webdriver)
  • selenium(IDE)
  • puppeteer
  • Selenide
  • Katalon Recoder
  • Cypress
  • Testcafe
  • Appium
  • TestComplete
  • Sumartphone Test Farm   …etc

 こうやって見るとめちゃくちゃテスト自動化の手段があるんですよ。

使わない手はないですよね?(テスト、面倒ですよね?)

 

色々あってあさ~く調べてはおるんやけども、

 

アプリとかじゃない限り、上3つのどれかを使っているところが多いんじゃなかろうか?

Seleniumは有名どころだしね。

でも、私は、puppeteerを選んだよ。理由は3つ。

  1.  導入が簡単(node.jsぐらい)
  2.  バージョン確認が楽(chromeのバージョンに捉われない)
  3.  テストできる幅が広い(スクショからPDF出力とかまで)

あとこれに加えて、reactで作ってるからjsと相性が良さそうってのもある。

 

変わって、Seleniumは、以下3つの理由で選ばなかった。

  1. 環境構築がくそめんどくさい
  2. バージョンに捉われる
  3. エビデンスとるのが大変らしい

どの言語を使ってるかってので変わってくるとは思うけど、Seleniumは複数言語(JavaPHPC#PythonRubyJavascriptなど)に対応しているので、使いやすいのがいいとは思う。

 

ただ!!!!

 

私は環境構築がめんどくさすぎてSeleniumを諦めた!!

しかもchromeのバージョンもよく見とかないと動かないときがあるとか。

そんなお暇はないので!!

…まぁ、機能が増えるたびにどんなものもメンテナンスは必要やけどな。

 

さ、習うより慣れろ。

さっそくインストールしてみましょ。

 

puppeteerのインストール方法

npmでインストールしていくのが簡単だと思うから、下のコマンドをgit bashに打ち込もう。

※ちなみに、npmとはNode.jsのパッケージ(必要なソフトやライブラリ)を管理するものよ。お得セット!みたいな覚え方でいいと思う。

$ npm install --save puppeteer

 

めっちゃ楽だね。

あとはnodeのバージョンとかを確認するコマンドもかいとこう

$ node -v

 

もうnodeが通るから、あとは書いてくだけだと思います。

seleniumだとpath通してあれしてこれして大変。挫折の道。

 

次に、自分がどこにソースを置くか決めようね。

どこにおいてもいいとは思うけど、迷ったら面倒だから、OSの下にでも置いちゃおう。

フォルダ自力で作ってもいいけど、フォルダを作るコマンドはこれ

$ mkdir XXXX

ディレクトリを作るって意味です。XXXXの部分はファイル名だよ。

プロジェクト名とかpuppeteerとかでいいんでないかしら。

 

git labやgit hubでプロジェクト管理するならつなげたり色々しておくんなまし。

 

さて、次は実際のコードだ!!!

と思うやろ?

はやる気持ちはわかるが、一度落ち着いて↓インストール↓するんや。

puppeteer recorder

https://chrome.google.com/webstore/detail/puppeteer-recorder/djeegiggegleadkkbgopoonhjimgehda

 これがあると、まじで楽。

やってほしい操作を実際にやると、それをコードにしてくれる。

そんな神拡張機能

損はないぞ。

とりあえず動くやつ作りたいんや!という少年少女の諸君は入れておこう。

 

さて、明日はさっそくコードを書いていこう。

というか、puppeteer recorderを最大限活用して楽してこ?

 

 

 

------

ここからは余談。

 

puppeteerってめちゃくちゃ導入簡単だし、これでテストもできちゃうんだから最強!って思うじゃん?

まぁテスト自動化ってのが都合が良すぎる言葉なんだけど、そんなことはないよ。

だって、既存のシステムだけで成り立つシステムなんてないっしょ。

常に新しい機能やらなんやらがつくわけじゃない。

だから、メンテナンスは必要。

1回作ったら完成!なんてあり得ないんよね。(そうであってほしいけど)

メンテはする。でもテストも楽したい!っていうなら導入検討してください。

メンテする時間もかけれないなら、いつまでも同じ作業をどうぞ行ってください。

それぐらいは、めんどくさがらずやろうな。

作ったものがゴミになっちゃうぞ☆

(弊社のpuppeteerコードくんもゴミになりかけてるので、腐らないようメンテ頑張ります🤖)

------