Hotel Planisphere

このサイトはテスト自動化の学習用の練習サイトです。

Seleniumなどのブラウザテスト自動化を学習したい方が、実際にテストスクリプトを実行するためのテスト対象サイトとして作成されています。

書籍やブログなどでのサンプルやデモにもお使いいただけます。ライセンスはMIT Licenseです。

自動テストの学習を目的として作成されていますが、テスト設計や技法の学習に使うことも可能です。

サイトの構成

ホテルの予約サイトを模した作りになっています。ログイン・会員登録・ホテルの宿泊予約のそれぞれの入力フォームを用意しています。レスポンシブデザインに対応しているためモバイルブラウザでも表示できます。

ご利用上の注意

  • 2020年7月時点でのGoogle Chromeの最新版で動作確認をしています。
  • サイトはGitHub Pagesでホストされています。
  • 入力データについて
    • データはブラウザのCookieおよびSession Storage、Local Storageに保存されます。
    • DBなどサーバ側での保存はありません。
    • HTMLの仕様上、フォームへの入力内容はURLの末尾に付加されて送信されます。Githubサーバのログなどに残る可能性があるのでお気をつけください。
  • 負荷テストには利用しないでください。
  • このサイトを利用することによって生じた損害などにつきましては、一切の責任を負いません。

構成の詳細

ログイン画面

シンプルなテキストインプットとボタンの画面です。ログイン情報はCookieに保存されます。会員登録画面で保存したユーザの他、登録済みのユーザ(下記)があります。

会員登録画面

複数種類のインプットがある画面です。この画面で登録したユーザはLocal Storageに保存され、ログインに使用することができるようになります。

マイページ画面

ログイン後に表示される画面です。登録したユーザ情報が表示され、確認に使うことができます。また、新規登録したユーザの場合アイコン画像の設定と退会(情報削除)ができます。


宿泊プラン一覧画面

「宿泊予約」のメニューから表示できる画面です。表示されるプランは「未ログイン」「一般会員」「プレミアム会員」によって変わります。プラン情報はAjaxで非同期に読み込まれます(トップの一つを除く)。

宿泊予約画面

宿泊の予約を行う画面です。新規ウィンドウで開きます。複数種類のインプットのほか、合計金額が入力内容で動的に計算され表示されます。基本料および宿泊数・人数の許容値は選択したプランで変わります。

宿泊予約確認画面

宿泊予約の確定後に表示される画面です。予約で入力した内容の確認表示があります。また、アニメーション付きのダイアログが表示されます。

登録済みユーザ
# メールアドレス パスワード 会員ランク
1 ichiro@example.com password プレミアム会員
2 sakura@example.com pass1234 一般会員
3 jun@example.com pa55w0rd! プレミアム会員
4 yoshiki@example.com pass-pass 一般会員

サンプルコード

このサイトをテスト対象とした自動テストスクリプトです。学習の参考としてお使いください。

Java開発者向け
selenide
フレームワーク
Selenide
プログラミング言語
Java
テスティングフレームワーク
JUnit 5
コードを見る
JavaScript開発者向け
webdriverio
フレームワーク
WebDriverIO
プログラミング言語
JavaScript
テスティングフレームワーク
Mocha
コードを見る
Ruby開発者向け
capybara
フレームワーク
Capybara
プログラミング言語
Ruby
テスティングフレームワーク
RSpec
コードを見る
Java開発者向け
selenium4-java
フレームワーク
Selenium WebDriver
プログラミング言語
Java
テスティングフレームワーク
JUnit 5
コードを見る