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)

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