お世話になります、フロントエンド担当をしている小原正大です。Webページの表示を監視して差異があった場合、どのページで表示の変化が起きているかを知ることが出来るプログラムを実装したのでそのことについて書こうと思います。 何につかったの？ 僕がフロントエンドを担当しているサービス『料理サプリ』で大規模なフロントエンドコードのリファクタリング行う際に表示テストを自動化するために作成しました。『料理サプリ』はPC・スマホ合わせて大体350-400ページの表示パターンが存在する比較的規模の大きいサイトです。全ページに影響を与えるような作業は大規模な回収となり、今回のリファクタリングでは表示テストの計画などの段取りが必要でした。従来の人手によるQAでは細かいバグを見過ごしたり時間がかかり効率が悪いので、可能な限り自動化しようと考え実装しました。 実装の概要 この監視のシステムは以下の２つ実装を組合わ

ウォールオブゲート入口に立ちはだかり、頑なに移動しない堅牢な壁。 奴らを崩すには「すみません」と言うしかない。 たまに、言っても無視される場合は、乗車口を替えろ! そいつは危ない奴かもしれない。 気をつけろ‼ コルクマン乗車口付近はぎゅうぎゅうだが、座先付近は空いている場合はこいつが栓をしているかもしれない。 外側から押すと更に深く栓をすることになるまさにコルクマン。 たまに内側からの降車客もシャットアウトする頑固な奴もいるぞ! 気をつけろ‼ フォールサーモン遡上する鮭のごとく乗客の流れに逆らう奴だ！ 類いまれなる筋力と、迷惑を省みない精神力が要求される猛者だ。 気をつけろ‼ ウィンドトーカーズあなたを挟んで会話されて気まずくなったことはないだろうか？ それがこいつらだ！ そっと席をたち片方が席を詰めるのを誘導してやれ！ ただし、なにしてんのこいつ? みたいな顔をされるかもしれない両刃の剣