[T-DASH] スマートフォンWEBのテスト自動化をする

# Outline

T-DASHは、ローカルでは基本的にはPCのchrome , Edge, FirefoxをもちいたWEBテストがメインなっている。
ただ、スマートフォン（SP もしくは モバイル）のWEBのテストを行うことができる。
一つはローカル環境でemulatorを用いたテスト。もう一つは、cloud deviceのサービスを用いた実機のテスト。
それぞれのテストに関して説明する

※ T-DASH version 4.2.001 を用いて構築したものである。

https://service.valtes.co.jp/t-dash/




# スクリプティング

## PCとSP 画面が同じ

テスト実行する前に、まずスクリプティングを行う必要がある。
SP WEB画面が、レスポンシブ対応したUIであれば、PCのWEBで画面要素を取得して、それをもとにスクリプトして問題はない。

PC WEBページの画面キャプチャ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/b79b0e8e-5955-237a-dd13-af2f43449bc5.png)

SP WEBページの画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/cf2534c5-26e2-60aa-4c21-e70d51b30127.png)

この画面要素をもとにテストケースを作成すればよい。

## PCとSP 画面が異なる

SP画面・機能がPCと異なる場合、要素をとるとき、残念ながらT-DASHの画面キャプチャで要素の値（XPath）をとることはできない。
Developer toolを使い、XPathを手動でとる必要がある。
また、Pluginなどを使って、UserAgentにモバイル情報を設定し、ブラウザをモバイルとして動作するようにする。
一つのUserAgent変更するものに、User-Agent Switcher for Chromeがある
これを持ちいて、SP画面にすることができる（emulator）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/a85d2b80-d0b3-e964-d76b-10d7200a17c5.png)



https://chromewebstore.google.com/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg


XPathの取り方は、こちらを参考にしてください

https://qiita.com/emurin/items/f65c2a74ad34c4e4e69f

XPathが取得出来たら、PCと同じで、テストケースを作成する。

# 技術的な情報

テスト実行でブラウザ起動時にoptionを指定することで、ブラウザをSP modeとして立ち上げることができる。
そのため、T-DASHの標準機能ではなく、robot frameworkでoptionを指定してブラウザを立ち上げる
そのコマンドは以下の通り
```
Open Browser  ${BROWSER}  options=${chrome_options}
```
${BROWSER} は起動するブラウザ（今回Chrome）

${chrome_options} は起動時のoption
add_argumentを用いて、設定したいoptionを追加設定する。
設定可能なoptionは以下のサイトを参考にするといい


https://qiita.com/kawagoe6884/items/cea239681bdcffe31828

# テスト実行 (Emulatorで実行)

先ほど説明したように、テスト実行時にもUserAgentを設定してブラウザを起動してテストを行う。
そのため、UserAgentを設定したブラウザを起動するカスタム動作を定義する必要がある。

## カスタム動作

以下設定内容をChromeOpt.yamlのファイル名で保存する

```
ACT-CAT-CUSTOM-d824db62-a8c6-45aa-875c-3dab32c8f101:
  action_category_name: ChromeOpti
  icon: ''
  color: '#67b6a4'
  custom_data:
    file_name: ChromeOption
    pip_list: []
    library_list:
    - SeleniumLibrary
  actions:
    ACT-CUSTOM-7bedfd74-6493-49af-bcc4-da7d9d184f47:
      action_name: SP モードでchromeを起動する
      action_type: operation
      action_format: SP モードでchromeを起動して、「設定値1」にアクセスする
      action_note: ''
      action_args:
      - value1
      action_def:
      - - '${UA} = '
        - Set Variable
        - Mozilla/5.0 (iPhone; CPU iPhone OS 16_5_1 like Mac OS X) AppleWebKit/605.1.15
          (KHTML, like Gecko) Mobile/20F75 [FBAN/FBIOS;FBDV/iPhone15,3;FBMD/iPhone;FBSN/iOS;FBSV/16.5.1;FBSS/3;FBID/phone;FBLC/en_US;FBOP/5]
      - - ${height} =
        - Set Variable
        - '720'
      - - '${width} = '
        - Set Variable
        - '540'
      - - ${chrome_options} =
        - Evaluate
        - selenium.webdriver.ChromeOptions()
      - - Call Method
        - ${chrome_options}
        - add_argument
        - --window-size\=${width},${height}
      - - Call Method
        - ${chrome_options}
        - add_argument
        - --user-agent\="${UA}"
      - - Open Browser
        - ${value1}
        - Chrome
        - options=${chrome_options}

```
次に、作成されたChromeOpti.yamlをT-DASHの動作定義 -> カスタム動作 -> カスタム動作をインポート にてインポートする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/83295e7b-9bec-f360-7223-3b2f1ae5bb0d.png)

実際にインポートされた設定内容を開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/e888cfe6-c455-a5d7-7cec-433558fec694.png)

ブラウザの起動オプションを設定することができる

| パラメータ | 意味 |
|:-----------|:------------|
| ${UA}       | User Agent : モバイルの端末情報        |
| ${height}       | ブラウザの高さ        |
| ${width}       | ブラウザの幅        |


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/5b90d049-d177-3cae-966b-8ff5000328ce.png)

User Agentの設定値は、こちらのサイトなどから取得する

http://www.openspc2.org/userAgent/

## スクリプト

ブラウザの起動時、標準関数の「URLでブラウザを開く」を使用しない。
その代わりに、今回追加したカスタム動作「SP モードでchromeを起動する」を使用する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/3b594da8-0e2e-e18b-3ad6-d0221b516ff4.png)



# テスト実行 (Cloud deviceで実行)

T-DASHで実機のスマートフォンを使ってテストをする場合、AnyTestと連携して実施する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/963df28c-c4e5-0f77-4c8d-6debb7deb2be.png)


先ほどのemulatorとは異なり、PCと同じ標準関数「URLでブラウザを開く」を使い、テストケースを作成する。
実行するときに、テスト環境選択（AnyTestと連携設定されている前提）でAnyTestを選択するだけである。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/0c532afd-762e-0cd5-fd86-04f0e18efe6c.png)


https://service.valtes.co.jp/t-dash/function/tutorial/anytest_vol_002