Web開発において最低限のテストを自動でする

## はじめに
お正月、ダラダラしすぎると社会復帰できなくなるので、プログラミングをしてみた。昨年からPMしているWeb開発の案件で、どうやらクライアントも開発を依頼しているパートナーもテストがあまり得意ではないらしく、私さえ黙っていれば、全然動いてねーじゃん！みたいなものが納品できてしまいそうな雰囲気だ。が、そんなのありえないし、パートナーにもっとテストきちんとやってくださいと言って、言うけど、時間（お金）を取られるのも嫌なので、最低限クリアすべきテストを自動で行うプログラムを Python（BeautifulSoup/requests） で書いてみた。自動テストと偉そうに言うほどではないが、なレベル感。

出来上がったものはこちら
▶ [kurab/simple_web_inspector](https://github.com/kurab/simple_web_inspector)

気軽にテストしたり配ったあと説明したくないので、DB使ったり、class 作ってファイルに分けたりは、今回はしないことにした。

## 最低限テストしたい項目
今回は、最低限ということで、主にリンク切れ、仮置きリンクなどを調べることにした。
具体的には、

- http status
- TDK: <br>見えづらいのでバグが混入しやすい
- 空リンク(href="" or 設定なし): <br>開発過程での仮置き放置
- 仮置きリンクの疑い(href="#"): <br>同上
- デッドリンク(404): <br>リンクが間違ってるか作るはずだったページが作られてないか
- リダイレクトリンク(301, 302): <br>開発時点でリダイレクトするなら、リダイレクト先にリンクして欲しい
- 読み込みファイルの数とステータス(css, js, font, favicon, img): <br>ブラウザでもエラー出るけど、そんなの見ないって人は割といるので

これくらい当たり前に確認して欲しいけど、手動ではやってられない。普通自動でやると思うけど、どうやらそれは普通じゃないらしい。これが当たり前にクリアされ、最低限のレベルが上がることを期待。

## 最初に URL リストを作る
URL リストなんて、手動で作ってられないので、ザーッと取ってくることにする。LP などの、サイト内からは辿れないページは、手動で追加する方針。

▶ [internal_url_collector.py](https://github.com/kurab/simple_web_inspector/blob/main/internal_url_collector.py)

やっていることは、ページ内の a タグの href をすべて取得し、

- 外部リンク
- アンカーリンク
- javascriptによる何らかの操作

などを除外してフルパスに整形して出力。その結果として出力された URL 群に対して同じことをやって、重複していないURLを追加していく。の繰り返し。

なお、プロトコルは、https で統一されているものとし、リダイレクトされているものは、その先のページまでは追わないこととした。

というだけ。サイトの階層分くらい繰り返せば良いかと思っていたけど、ページネーションなどがあると割とたくさん検出されてしまう。結果を見ながら適当に調整。

一時ファイルを2つ使うのが、いまいちで、もっとスマートな方法は暇があったら検討したい。

## URLリストを元に検査する

▶ [simple_web_inspector.py](https://github.com/kurab/simple_web_inspector/blob/main/simple_web_inspector.py)

前述の最低限テストしたいことを検査している。
今回は、結果の出力を Markdown にしている。やってみて、割といまいちというか、もうちょっと工夫が必要かなと思ったが、なぜ Markdown にしたかと言うと、常々、こういった網羅的なテストの結果はバージョン管理した方が良いと思っており、エクセルだのスプレッドシートだのではなく、csv でもなく、テキストファイルにしたかった。ただのテキストだと見づらいので、Markdown にした。

用途のイメージとしては、git の develop ブランチが更新されたら、それをフックしてテスト実行。テスト他関連ドキュメントがソースコードの履歴に対応して保存されていくイメージ。そんなことを夢見ている。

Markdownって何？という相手には、PDF に出力して渡せばよい。


## レポートサンプル
ページごとのレポートは、こんな感じになる。

<b>Basic Information</b>

| item        | value                           |
| :---------- | :------------------------------ |
| url         | https://www.yourdomain.com/dir/ |
| httpStatus  | 200                             |
| title       | Home Page                       |
| description | (not set)                       |
| keywords    | test, automation, web           |


<b>Link Analysis</b>

| Invalid item                   | count |
| :----------------------------- | :---: |
| Empty Link('' or no href attr) |   2   |
| Temporary Link suspected(#)    |  10   |
| Dead Link(404)                 |   3   |
| Redirected Link(301, 302)      |   0   |

<b>Dead Link List (404 Not Found)</b>

- https://www.yourdomain.com/dir/warranty
- https://www.yourdomain.com/dir/terms-conditions
- https://www.yourdomain.com/dir/privacy-policy-cookie-restriction-mode


<b>Media Analysis</b>

| type    | total | dead | moved |
| :------ | :---: | :--: | :---: |
| css     |   4   |  0   |   0   |
| js      |  25   |  0   |   0   |
| font    |   5   |  0   |   0   |
| favicon |   1   |  0   |   0   |
| img     |  65   |  0   |   0   |


## おわりに

こういうのがあると、クライアントに対しては、改善提案できるかも知れないし（上記サンプルならjs多すぎるからコンパイルしようとか）、そもそもがヤバいっすねと言えるかも知れないし、開発パートナーに対しては、こんなもの納品するつもりですか？とも言えるし、何よりバグの少ないプロダクトが出来るし、良いことだらけである。

2021年、この世から新型コロナウィルスとしょーもないバグがたくさん消えますように。あけましておめでとうございます。