LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

今年もT-DASHを使ってみた！ by T-DASHAdvent Calendar 2024

Day 12
@haku2024

T-DASHを用いたテストデモ

Last updated at Posted at 2024-12-13

はじめに

T-Dashは、シンプルで効果的なテスト自動化ツールとして注目を集めています。その大きな特徴の一つは、プログラミングの知識がなくても、直感的な操作だけでテストを作成できる点です。この利便性は、テスト初心者にとっても非常に魅力的です。

今回、私は初めてT-Dashを使い、以下の3つの基本機能を対象にテストを実施してみます。

  • ページングテスト（下の図はテスト画面）
    截屏2024-12-12 14.52.40.png

  • オーバー動作テスト（下の図はテスト画面）
    截屏2024-12-12 14.52.55.png

  • ドラッグ＆ドロップテスト（下の図はテスト画面）

3.png

これらの例を通じて、T-Dashの良かった点や悪かった点について考察していきます。本記事が、T-Dashの導入を検討している方にとって参考になれば幸いです。

1. ページングテスト

1.1 ページングテストって

「ページングテスト」は、画面におけるページネーション機能の動作を確認するためのテストです。具体的には、データが複数のページに分割されて表示される際に、ユーザーが期待通りに操作できるか、また、すべてのページが正しく読み込まれるかを検証します。

今回は「次へ」ボタンをクリックした際に、正しいページが表示されるかを確認します。

サンプルコード
このテスト画面は、pagination.jsを使用して実装されたページングテストです。具体的な情報や使い方については、公式サイトである http://pagination.js.org/ を参照してください。

テスト画面のサンプルコード
<head>
  <link href="pagination.css" rel="stylesheet" type="text/css"> <!-- ページネーションのスタイルシートをリンク -->
  <style type="text/css">
    ul, li {
        list-style: none; /* リストのスタイルをなしに設定 */
    }

    #wrapper {
        width: 900px; /* ラッパーの幅を900pxに設定 */
        margin: 20px auto; /* 上下に20pxのマージンを設定し、中央揃え */
    }

    .data-container {
        margin-top: 20px; /* データコンテナの上部に20pxのマージンを設定 */
    }

    .data-container ul {
        padding: 0; /* パディングを0に設定 */
        margin: 0; /* マージンを0に設定 */
    }

    .data-container li {
        margin-bottom: 5px; /* 各リスト項目の下部に5pxのマージンを設定 */
        padding: 5px 10px; /* 各リスト項目に上下5px、左右10pxのパディングを設定 */
        background: #eee; /* 背景色を薄いグレーに設定 */
        color: #666; /* テキスト色を灰色に設定 */
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <section>
      <div class="data-container"></div> <!-- データコンテナ -->
      <div id="demo"></div> <!-- デモ表示用の要素 -->
    </section>
  </div>
  <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script> <!-- jQueryライブラリを読み込む -->
  <script src="pagination.js"></script> <!-- ページネーションスクリプトを読み込む -->
  <script>
    // http://pagination.js.org/ を使用して実装されたページネーション
    $(function() {
      $('#demo').pagination({
        dataSource: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], // ページネーション用のデータソース
        pageSize: 5, // 一ページあたりの項目数
        showPageNumbers: false, // ページ番号を表示しない
        showNavigator: true, // ナビゲーターを表示する
        className: 'paginationjs-theme-blue paginationjs-big', // ページネーションのクラス名
        callback: function(data, pagination) {
          const html = data.map(d => `<li>${d}</li>`); // データからリスト項目を生成
          $('.data-container').html(html); // データコンテナに生成したHTMLを挿入
        }
      })
    })
  </script>
</body>

ページングテスト画面のイメジです。
截屏2024-12-12 14.52.40.png

1.2 T-DASHでテストする

截屏2024-12-12 16.57.42.png

T-DASHでのテスト実施の流れは、上の図のように沿って進められます：

  1. 新しいプロジェクトを作成
  2. テストスイート（テストシナリオ）を作成
  3. 画面要素を設定
  4. テストを実行
  5. 結果レポートを確認

公式YouTube動画
公式サイトのYouTubeチャンネルには、これらの手順を詳しく解説した動画が公開されています。公式YouTube動画をご覧ください：

1.2.1 新しいプロジェクトを作成

「プロジェクト作成」ボタンをクリックして、【pagination】のプロジェクトを作成します。
截屏2024-12-13 9.21.54.png

1.2.2 テストスイート（テストシナリオ）を作成

【pagination】プロジェクトに入った後、以下の画像のように、①テストスイート画面に入るためにクリックします。②paginationを選択します。③【最後のページにジャンプ】のテストケースを作成します。
截屏2024-12-13 9.29.36.png
【最後のページにジャンプ】のテストケースをクリックすると、テスト手順を作成します。
截屏2024-12-13 10.09.17.png

テスト手順の説明：
  • URLをブラウザで開く

このステップでは、指定されたURLをブラウザで開き、テスト対象のページにアクセスします。これにより、テストを実行するための環境が整います。

  • 「pagination」画面の「next」が表示されていたらクリックする

ここでは、ページネーション画面において「次へ」ボタンが表示されているかを確認し、表示されていればそのボタンをクリックします。この操作は、次のページに遷移するために必要です。

  • 「pagination」画面の「item」に「11」の文字列が表示されていることを検証する

このステップでは、ページネーション画面において特定の要素（アイテム）に「11」という文字列が表示されているかを確認します。

  • 「pagination」画面の「nowPage」に「3 / 3」の文字列が表示されていることを検証する

最後に、現在のページ情報が正しく表示されているかを確認します。「nowPage」要素に「3 / 3」という文字列が表示されていることを検証することで、ユーザーが現在どのページにいるかが正確であることを確認します。

1.2.3 画面要素を設定

テストスイートを作成後、以下の画像のように画面要素を設定します。
截屏2024-12-13 10.26.33.png

画面要素の説明：
要素名 値(XPath) 説明
next //li[contains(@class, 'paginationjs-next')] この要素は「次へ」ボタンを示します。XPath //li[contains(@class, 'paginationjs-next')] は、クラス名に「paginationjs-next」を含むリスト項目（li）を選択するためのパスを指定しています。このボタンをクリックすることで、次のページに移動します。
item //li この要素はページ内の各アイテムを示します。XPath //li は、すべてのリスト項目（li）を選択します。これにより、ページネーション内のアイテム数や内容を確認することができます。
nowPage //div[contains(@class, 'paginationjs-nav')] この要素は現在のページ情報を表示する部分です。XPath //div[contains(@class, 'paginationjs-nav')] は、クラス名に「paginationjs-nav」を含むディブ（div）を選択します。この部分には、現在のページ番号や全体のページ数が表示されます。

XPathについて
公式では、画面のXPath識別ツールを提供しています。具体的な使用方法は、公式のドキュメントをご参照ください。

1.2.4 テストを実行

テストスイートの画面に戻り、「選択したテストを実行する」ボタンをクリックして、テストを実行します。
image.png
実行画面は以下のような内容です。
4.png

1.2.5 結果レポートを確認

テストを実行した後、「テストレポートを開く」ボタンをクリックすると、テストの結果を確認できます。
5.png

1.3 使用後の感想

  • :smile: プログラミングが不要で、画面要素のXPath識別ツールが提供されているため、とても便利だと感じました。
  • :confused: しかし、ループ処理の動作を見当たらなかったのが残念です。例えば、今回のページネーションテストケースは合計3ページしかないため、比較的スムーズに進みましたが、多くのページがある場合、どのようにテストの順序を作成すればよいか悩んでいます。もしループ判断の動作があれば、さらに良いと思います。

2. オーバー動作テスト

2.1 オーバー動作テストって

「オーバー動作テスト」は、画面に特定の要素にマウスをオーバーした際の挙動を確認するためのテストです。
今回のテストはマウスをオーバーした際、ボタンにクリックさせることができるかを確認します。
截屏2024-12-12 14.52.55.png

テスト画面のサンプルコード
<!DOCTYPE html>
<html>
  <head>
    <title>Hover and Hidden Elements - Hidden</title> <!-- ホバーと隠れた要素 - 隠れた -->
     <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script> <!-- jQueryライブラリを読み込む -->
    <style>
      #background {
        padding: 5px 10px; /* 内側の余白 */
        width: 300px; /* 幅 */
        height: 150px; /* 高さ */
        background-color: #eee; /* 背景色 */
        color: #777; /* 文字色 */
      }

      #background button {
        display: none; /* ボタンを初期状態で非表示にする */
        margin: 20px; /* ボタンの外側の余白 */
      }

      #background:hover button {
        display: block; /* ホバー時にボタンを表示する */
      }
    </style>
  </head>
  <body>
    <h2>
      hidden.html <!-- ページタイトル -->
    </h2>
    <div id="background">
      <p>
        This is a &lt;div&gt; holding a hidden button which becomes visible on
        hover. <!-- ホバー時に表示される隠れたボタンを持つ<div> -->
      </p>

      <button>Click me</button> <!-- ボタン -->
    </div>

    <p id="message"></p> <!-- メッセージ表示用の空の<p> -->

    <script type="text/javascript">
      $("button").click(function() {
        $("#message").text("the button was clicked"); // ボタンクリック時にメッセージを表示
      });
    </script>
  </body>
</html>

2.2 T-DASHでテストする

2.2.1 新しいプロジェクトを作成

「プロジェクト作成」ボタンをクリックして、【hiddenButtonTest】のプロジェクトを作成します。
截屏2024-12-13 11.20.27.png

2.2.2 テストスイート（テストシナリオ）を作成

【hiddenButtonTest】プロジェクトに入った後、以下の画像のように、テストスイート画面に入るためにクリックします。hiddenButtonTestを選択します。【case001】のテストケースを作成します。
截屏2024-12-13 11.25.35.png
【case001】のテストケースをクリックすると、テスト手順を作成します。
截屏2024-12-13 11.26.22.png

テスト手順の説明：
  • URLをブラウザで開く

このステップでは、指定されたURLをブラウザで開きます。これにより、テスト対象のページにアクセスします。

  • 「hiddenPage」画面の「hiddenArea」にマウスオーバーする

次に、「hiddenPage」画面に移動し、「hiddenArea」という要素にマウスオーバーします。この操作によって、隠された要素が表示されることを確認します。

  • 「hiddenPage」画面の「hiddenButton」が表示されていたらクリックする

「hiddenArea」にマウスオーバーした後、「hiddenButton」というボタンが表示されているかを確認し、表示されている場合はそのボタンをクリックします。この操作は、隠されたボタンの機能をテストするためです。

  • 「hiddenPage」画面の「message」に「the button was clicked」の文字列が表示されていることを検証する

最後に、「hiddenPage」画面の「message」要素に「the button was clicked」という文字列が表示されているかを検証します。このステップは、ボタンが正常にクリックされたことによって期待されるメッセージが表示されるかどうかを確認するためです。

2.2.3 画面要素を設定

テストスイートを作成後、以下の画像のように画面要素を設定します。
image.png

画面要素の説明：
要素名 値(XPath) 説明
hiddenArea //div[@id='background'] この要素は「hiddenArea」を示しており、IDが「background」のdiv要素を選択します。この要素は隠された領域であり、マウスオーバーすることで表示されることが期待されます。
hiddenButton //button この要素は「hiddenButton」を示しており、ページ内のすべてのボタン要素を選択します。具体的には、隠された状態から表示されるボタンです。このボタンをクリックすることで、特定のアクションが実行されます。
message //p[@id='message'] この要素は「message」を示しており、IDが「message」のp要素を選択します。この部分には、ボタンがクリックされた後に表示されるメッセージが含まれています。
2.2.4 テストを実行

テストスイートの画面に戻り、「選択したテストを実行する」ボタンをクリックして、テストを実行します。実行画面は以下のような内容です。
6.png

2.2.5 結果レポートを確認

テストを実行した後、「テストレポートを開く」ボタンをクリックすると、テストの結果を確認できます。
7.png

2.3 使用後の感想

T-DASHには「マウスオーバーする」動作が提供されており、とても便利だと感じました！

3. ドラッグ＆ドロップテスト

3.1 ドラッグ＆ドロップテストって

「ドラッグ＆ドロップテスト」とは、画面における操作方法の一つで、特定の要素をマウスでドラッグ（引きずる）し、目的の位置にドロップ（落とす）することを指します。
今回のテストは特定の要素（basketball）を選択し、それをドラッグすることで、他の要素や領域に移動させることができるかを確認します。
3.png

テスト画面のサンプルコード
<!DOCTYPE html>
<html>
<head>
  <title>Drag n Drop</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body class="basketball">
  <header>
    <p>Get all the basketballs in the hoop</p> <!-- バスケットボールをフープに入れる -->
  </header>
  <main>
    <div class="balls">
      <img src="basketball.png" draggable /> <!-- ドラッグ可能なバスケットボール画像 -->
      <img src="basketball.png" draggable />
      <img src="basketball.png" draggable />
      <img src="basketball.png" draggable />
    </div>
    <div class="hoop"></div> <!-- フープのための空のdiv -->
  </main>

  <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script> <!-- jQueryライブラリを読み込む -->
  <script>

      let dragging; // ドラッグ中の要素を保持する変数
      $('.balls img').on('dragstart', (e) => {
        dragging = e.target; // ドラッグが開始されたとき、対象の要素を設定
      })

      $('.hoop')
        .on('dragover', (e) => {
          e.preventDefault(); // ドロップを許可するためにデフォルトの動作を防ぐ
        })
        .on('dragenter', (e) => {
          $(e.target).addClass('over'); // 要素がドラッグされてきたとき、クラス'over'を追加
        })
        .on('dragleave', (e) => {
          $(e.target).removeClass('over'); // ドラッグが離れたとき、クラス'over'を削除
        })
        .on('drop', (e) => {
          e.stopPropagation(); // イベントのバブリングを防ぐ
          e.preventDefault(); // デフォルトの動作を防ぐ

          $(e.target).removeClass('over'); // 'over'クラスを削除

          if (dragging) {
            $(dragging).remove(); // ドロップされた要素を削除
          }

          if (!$('.balls img').length) { // すべてのボールがドロップされた場合
            $('main').addClass('success').html('<div>Success!</div>'); // 成功メッセージを表示
          }
        })
  </script>
</body>
</html>

3.2 T-DASHでテストする

3.2.1 新しいプロジェクトを作成

「プロジェクト作成」ボタンをクリックして、【dragTest】のプロジェクトを作成します。
截屏2024-12-13 13.11.06.png

3.2.2 テストスイート（テストシナリオ）を作成

【dragTest】プロジェクトに入った後、以下の画像のように、テストスイート画面に入るためにクリックしてdragTestを選択します。【case001】のテストケースを作成します。
截屏2024-12-13 13.13.36.png
【case001】のテストケースをクリックすると、テスト手順を作成します。
截屏2024-12-13 13.14.30.png

テスト手順の説明：
  • URLをブラウザで開く

このステップでは、指定されたURLをブラウザで開きます。これにより、テスト対象のページにアクセスします。

  • 「Drag」画面の「ball」をドラッグする

次に、「Drag」画面に移動し、「ball」という要素をドラッグします。この操作は、ボールを特定の位置に移動させるための準備です。

  • 「Drag」画面の「hoop」にドロップする

続いて、ドラッグした「ball」を「hoop」という要素にドロップします。この操作によって、ボールがバスケットゴールに投げ入れられることをシミュレートします。

  • 同様の操作を繰り返す

上記のドラッグとドロップの操作をさらに3回繰り返します。これにより、複数回の投球をテストし、システムが正しく反応するか確認します。

  • 「Drag」画面の「message」に「Success!」の文字列が表示されていることを検証する

最後に、「Drag」画面の「message」要素に「Success!」という文字列が表示されているかを検証します。このステップは、ボールが正しく投げ入れられたことを確認するための重要なチェックです。

3.2.3 画面要素を設定

テストスイートを作成後、以下の画像のように画面要素を設定します。
截屏2024-12-13 13.21.03.png

画面要素の説明：
要素名 値(XPath) 説明
ball //div[@class='balls']/img[1] この要素は「ball」を示しており、クラス名が「balls」のdiv内の最初の画像（img）を選択します。この画像は、ドラッグアンドドロップ操作で移動させる対象のボールです。
hoop //div[@class='hoop'] この要素は「hoop」を示しており、クラス名が「hoop」のdivを選択します。この要素は、ボールをドロップするためのバスケットゴールを表しています。
message //div この要素は「message」を示しており、ページ内のdiv要素を選択します。この部分には、ドラッグアンドドロップ操作の結果として表示されるメッセージが含まれています。
3.2.4 テストを実行

テストスイートの画面に戻り、「選択したテストを実行する」ボタンをクリックして、テストを実行します。実行画面は以下のような内容です。
8.png

3.2.5 結果レポートを確認

テストを実行した後、「テストレポートを開く」ボタンをクリックすると、テストの結果を確認できます。
9.png

3.3 使用後の感想

「ドラッグする」と「ドロップする」動作が提供されており、とても便利だと感じましたけど、同じ操作を繰り返す場合、指定した回数だけループ処理できる機能があればさらに良いと思います。

おわりに

  • 優点 :smiley:
    プログラミングの知識がなくても簡単に自動化を導入できる点が魅力です。主にマウス操作で完結するため、専門的な技術がなくても直感的に利用できます。

  • 課題点 :confused:
    プログラミングの知識が不要とはいえ、特定の条件設定やループ処理など、より複雑なロジックを伴うテストには対応が難しい場合があります。

本記事が、T-DASHの利用に関するご参考となれば幸いです。最後までお読みいただき、ありがとうございました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?