シンクロ・フード エンジニアブログ

飲食店ドットコムを運営する、株式会社シンクロ・フードの技術ブログです

クロスブラウザテストツールに LambdaTest を導入しました

こんにちは。開発部の竹内です。

Web開発において、異なるブラウザやデバイスでの表示・動作確認は欠かせません。しかし、物理デバイスでの確認には限界があり、すべての環境を網羅するのは困難です。より効率的にクロスブラウザテストを実施するために、クラウドベースのテストツール LambdaTest を導入しました。本記事では、その導入の背景や運用、課題について紹介します。

背景

開発時に Web ページのクロスブラウザでの確認が十分にできていないことがありました。特に iOS や Android といったモバイル環境の確認は開発者が私物のデバイスを使って行っており、以下のような課題がありました。

  • 確認できる人が限られる
  • 一部のブラウザ・OS環境での確認が漏れる可能性がある
  • 物理デバイスを用意するコストと手間が発生する

このような課題を解決し、開発者やデザイナーが手軽にクロスブラウザテストを行える環境を整備することを目的として、クラウドベースのテストツールを導入することにしました。

ツール選定

クロスブラウザテストが可能なツールはいくつか存在しますが、以下の要件を重視して選定を行いました。

  • 手動テストに対応していること
    • 今回は自動テストはスコープから外し、手動での動作確認が可能であることを条件としました。
  • コストが安価であること
    • 他のクラウドテストツールと比較し費用対効果の高いものを選択しました。

この2点を重視し、最終的に LambdaTest を導入することに決定しました。

LambdaTest でできること

LambdaTest を導入することで、以下のような環境でのクロスブラウザテストが可能になりました。

  • Windows・MacOS の各種ブラウザでのテスト
  • Android・iOS の各種ブラウザでのテスト
  • Android・iOS のアプリのテスト

これにより、開発者やデザイナーが どの環境からでも一貫したクロスブラウザテストを実施できるようになりました。

実行イメージ

上記の画像のようにブラウザ内に対象環境が表示され、直感的に操作することができます。
開発者ツールの使用も可能です。

導入後の運用と課題

メリット

導入後、開発チーム全体でテストが容易に行えるようになり、クロスブラウザ対応の精度が向上しました。特に以下の点が大きな改善点です。

  • 持っている物理デバイスに依存せずテストが可能になった
  • 開発者・デザイナーの誰でも簡単に利用できるようになった
  • テストの見落としが減少した

課題・問題点

一方で、運用を開始してみると、以下のような課題も浮かび上がりました。

  • レスポンス速度の遅延
    • 操作時にレスポンスが遅く感じるという意見が多かったです。
  • 社内 VPN 経由での接続が必要
    • 現在、テスト環境へアクセスするには社内 VPN を介する必要があり、これがパフォーマンス低下の一因となっています。
    • しかし、現在 VPN 環境の見直しを進めており、今後の改善を計画しています。

まとめ

LambdaTest の導入により、開発チーム全体が手軽にクロスブラウザテストを実施できるようになりました。 今後も開発環境の改善に向けて取り組んでいきます!