Qmonus Documents /
FrontTester /11.チュートリアル

FrontTester チュートリアル

1~5. GUI開発チュートリアル

本章はAPIFrontのGUI開発チュートリアルを最後まで実行していることを前提に進めます。
実行されてない方は実行いただいた後に本章を進めることを推奨します。

6. GUI試験の記述

GUI試験は納品物の品質保証の観点からも必須の試験となります。
ここではFrontTesterを用いたGUI試験について解説します。
 

6-1. FrontTesterの書き方について

FrontTesterの詳細な書き方は2. 基本操作説明に存在します。チュートリアルに進む前にご一読ください。

 

6-2. 事前準備

FrontTesterの実装に先立って、試験項目を増やすためGUI開発チュートリアルで実装したHelloWorld.vueのコードを変更します。
今回は新たにURLの入力欄を設け、入力validationとして下記2点を追加します。

  • 30文字以下
  • 必須入力

また、responseコードを確認可能にします。

./client/src/components/HelloWorld.vue

html
<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-img
          :src="require('../assets/logo.svg')"
          class="my-3"
          contain
          height="200"
        />
      </v-col>

      <v-col class="mb-4">
        <h1 class="display-2 font-weight-bold mb-3">
          Qmonus GUI開発チュートリアル
        </h1>

        <p class="subheading font-weight-regular">
          チュートリアルの内容は下記を参照ください。
          <br>
          <a
            href="https://developer.qmonus.net/document/casval/tutorial"
          >Tutorial page</a>
        </p>
      </v-col>
    </v-row>
    <v-row justify="center" class="ml-15">
      <v-col >
        <v-text-field
          v-model="url"
          label="Target URL"
          single-line dense 
          variant="underlined"
          :rules="[required, limit_length]"
          counter="10"
        ></v-text-field>
      </v-col>
      <v-col cols=5>
        <v-btn height=50 @click=getHealthCheck()>GET HealthCheck</v-btn>
      </v-col>
    </v-row>
    <v-row class="text-center">
      <v-col>
        Status Code : 
      </v-col>
      <v-col>
        {{res_code}}
      </v-col>
    </v-row>
      <v-row class="text-center">
      <v-col >
        Response Body : 
      </v-col>
      <v-col >
        {{res_data}}
      </v-col>
    </v-row>
  </v-container>

</template>

<script>

export default {
  name: 'TOP',

  data: () => ({
    res_data : {},
    res_code: "",
    url: "",
    required: value => !!value || "必ず入力してください", // 入力必須の制約
    limit_length: value => value.length <= 30 || "30文字以内で入力してください" // 文字数の制約

  }),
  methods: {
    getHealthCheck: function () {
      this.$api.get(this.url, {
      })
        .then(response => {
          this.res_data = response.data
          this.res_code = response.status
        })
        .catch(err => {
          this.res_code = err.response.status
          console.error(err)
        })
    }
  }
}
</script>

この状態で実行してみましょう。
Validationが起きること

  • 30文字以下
  • 必須入力

responseが帰ってくることが確認できました。

  • 200 /healthcheck/ref/versions
  • 404 /test/path

 

6-3. 試験対象の決定

今回はサンプルでは下記6点を検証します。

  1. APIリクエスト
    1. ページランディング
    2. [validation1] 何も入力しないでエラーメッセージ
    3. [validation2] 30文字超過でエラーメッセージ
    4. 間違ったURLでアクセスして404
    5. 正しいURLで200
  2. リンクが正しいか
    1. tutorialのリンクを踏んでページ遷移

フローは下記のようになります。

実際の開発ではページ遷移図やエラー一覧等あると思います。それらをもとに画面遷移と試験タイミングを整理し、試験フローを起こしてください。
今回、試験シナリオは1件、試験ファイルは3つに分割します。

scenario1

試験ファイル名 試験内容
000_login.js ランディングチェック
001_api.js APIリクエストのための入力、ボタン押下
002_link.js tutorialページのリンク押下
index.json 試験パラメータ

試験シナリオ

試験を実行の単位です。ディレクトリが相当します。

試験ファイル

試験ファイルはjavascriptで記述します。試験ファイルの分割はページや機能ごとの分割を推奨していますが、
ボリュームが大きくなる場合、試験安定性や可読性の面から複数シナリオや複数ファイルへの分割をお勧めします。

index.json

index.jsonは試験パラメータを保存するファイルです。入力パラメータなど環境や試験によって値が変わる可能性があるものを切り出してください。
今回の実装では試験対象URLや認証アカウント情報、テキストを入力する際の文字列などです。
これらをjsonファイルに切り出すことで、異なる環境や試験で試験ファイルを変更することなく、試験のパラメータのみを変更することで試験が実施可能になります。

json
{
...
    "params": {
        "url": "https://api-front-xxx.sdk-lab.qmonus.net/",
        "username": "test_user",
...

Tips
index.jsonで定義する、params,optionsはAPIリクエストで試験を実行する際のrequestBodyになります。
従って、index.jsonに適切に切り出すことでAPIリクエストでの実行を視野に入れた際に実装が簡易化できます。

 

6-4.E2E試験開発

LabからFrontTesterをデプロイします。環境更新よりFrontTesterをチェックして、最新バージョンを選択してください。
それ以外に関しては変更の必要はありません。

それでは実際に記述していきます。

 

6-4-1.ファイルの準備

画面左下よりscenario1ディレクトリを作成し、その下に表で紹介した4ファイルを作成してください。

各ファイルの値は下記のようになります。

000_login.js

jsx
module.exports = async ( { params , root , page , actions ,expect} )=>{
  await actions.logger("Login Start.");

  //ログインページ
  await page.goto(params.url, {waitUntil: "domcontentloaded"});

  //loginpageの判定
  let titleSelector = await root.$("head > title");
  let title = await (await titleSelector.getProperty('textContent')).jsonValue();

  //Login with Qmonus account
  if (title == "Login | Qmonus-SDK") {
    await page.locator('img').first().click();

    await page.locator('[placeholder="username"]').fill(params.username);
    await page.locator('[placeholder="password"]').fill(params.password);

    await page.locator('button:has-text("Login")').click();
  }

  await root.waitForTimeout(500);
  await actions.screenshot("Landing Success.");
}

001_apiReques.js

jsx
module.exports = async ( { params , root , page , actions ,expect} )=>{
  await actions.logger("API Request Test Start.");

  // 一度書いて削除
  await page.locator('input[type="text"]').fill('/test');
  await page.locator('input[type="text"]').fill('');

  let message = await page.locator('text=必ず入力してください');
  await expect(message).toHaveText("必ず入力してください");

  await root.waitForTimeout(200);
  await actions.screenshot( "required" );

  // 30文字超過
  await page.locator('input[type="text"]').fill(params.api.limit_length);

  message = await page.locator('text=30文字以内で入力してください');
  await expect(message).toHaveText("30文字以内で入力してください");

  await root.waitForTimeout(200);
  await actions.screenshot( "limit_length" );

  // 正しいpath
  await page.locator('input[type="text"]').fill(params.api.success_path);
  await page.locator('button:has-text("GET HealthCheck")').click();

  // 200確認
  let code = await page.locator('text=200');
  await expect(code).toHaveText("200");

  await root.waitForTimeout(200);
  await actions.screenshot( "API Success" );

  // 404 path
  await page.locator('input[type="text"]').fill(params.api.fail_path);
  await page.locator('button:has-text("GET HealthCheck")').click();

  // 404確認
  code = await page.locator('text=404');
  await expect(code).toHaveText("404");

  await root.waitForTimeout(200);
  await actions.screenshot( "API Failed" );
}

002_link.js

jsx
module.exports = async ( { params , root , page , actions ,expect} )=>{
  await actions.logger("Tutorial Link Test Start.");

  // Click text=Tutorial page
  await page.locator(`text=${params.link.text}`).click();
  await expect(page).toHaveURL(params.link.url);

  await root.waitForTimeout(500);
  await actions.screenshot( "page goto Success." );
}

index.json
params.url,params.username,params.passwordは使用している環境のURL及び作成したアカウント情報に置き換えてください。
また、Git上には上げないようご注意ください。

json
{
  "description": "",
  "paramSchema": {
    "type": "object",
    "properties": {}
  },
  "params": {
    "url": "https://api-front-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.sdk-lab.qmonus.net/",
    "username": "{your_test_account_id}",
    "password": "{your_test_account_password}",
  "api":{
      "limit_length": "/test/test/test/test/test/test/test",
      "success_path": "/healthcheck/ref/versions",
      "fail_path": "/test"
    },
    "link":{
      "text": "Tutorial page",
      "url": "https://developer.qmonus.net/document/casval/tutorial"
    }
  },
  "defaultOptions": {
    "lang": "en-US",
    "client": "chrome",
    "viewport": {
      "width": 1366,
      "height": 768
    },
    "headless": true,
    "snapshotQuality": 80
  }
}

index.jsonを確認すると、試験環境の情報や入力パラメータが切り出されいていることがわかります。

 

6-5. 実行確認

上記が対応できたらPortalより試験を実行します。Start New Testより、scenario1を選択して下記画面を確認してください。

上記画面のようにindex.jsonの内容は実行前に都度変更も可能です。Test Startを押下して試験が開始されます、E2E Test Statusより確認可能です。

試験が完了したことを確認した後Evidenceのボタンを押下します。スクリーンショットが撮られ、試験が正常に実行されたことが確認できます。

10.マイグレーションガイド