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

はじめに

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

出来上がったものはこちら
▶ kurab/simple_web_inspector

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

最低限テストしたい項目

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

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

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

最初に URL リストを作る

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

▶ internal_url_collector.py

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

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

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

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

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

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

URLリストを元に検査する

▶ simple_web_inspector.py

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

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

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

レポートサンプル

ページごとのレポートは、こんな感じになる。

Basic Information

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

Link Analysis

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

Dead Link List (404 Not Found)

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

Media Analysis

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