【Day 19】E2Eテスト - gauge ts #TypeScript

はじめに

2023年アドベントカレンダー19日目です。

本日は「ユーザーはトップページでブログタイトルの一覧を見ることができる」を進めていきます。

APIのE2Eテスト環境をGaugeとTypeScriptで構築していきます

Gauge

Gaugeとは

Gaugeとは、オープンソースのテスト自動化フレームワークです。
大きな特徴として、テストケースをMarkdown形式で書くことができます。これにより、テスト仕様を非技術者にとっても読みやすくなります。

Install

こちらのページから自分に合ったものをInstallしていきましょう

versionが出ていればInstall完了です。

$ gauge version
Gauge version: 1.5.6
Commit Hash: 9b96118

Plugins
-------
html-report (4.2.0)
java (0.10.3)
screenshot (0.1.0)

次にお使いのIDEに拡張機能も入れていきます

VSCode
IntelliJ

いれなくてもCLIからの操作であれば問題ありません。

CreateProject

Gaugeではテンプレートが用意されているのでそれを利用します

$ gauge init -t
dotnet
java
java_gradle
java_maven
java_maven_selenium
js
js_simple
kotlin_maven
python
python_selenium
ruby
ruby_selenium
ts

今回はTypeScriptで開発していくのでtsを選択します

gauge init

$ gauge init ts

2023/12/16現在、この方法でインストールすると404エラーになってしまうようです。

Initializing template from https://github.com/getgauge/template-ts/releases/latest/download/ts.zip
Error ----------------------------------

[Gauge]
Failed to initialize project. Error downloading file: https://github.com/getgauge/template-ts/releases/latest/download/ts.zip.
404 Not Found. Please use a valid Gauge template URI or check network connection

Get Support ----------------------------
        Docs:          https://docs.gauge.org
        Bugs:          https://github.com/getgauge/gauge/issues
        Chat:          https://github.com/getgauge/gauge/discussions

Your Environment Information -----------
        linux, 1.5.6, 9b96118
        html-report (4.2.0), java (0.10.3), screenshot (0.1.0)

zipからの作成

こちらのリリースページを開き、Latestをzip形式でダウンロードしてきます
ダウンロードしたzipファイルを指定してinitします

gauge init ./template-ts-0.0.9.zip

これで↓のようなものが作成されました

$ tree -L 1
.
├── LICENSE
├── README.md
├── env
├── manifest.json
├── node_modules
├── package-lock.json
├── package.json
├── specs
├── tests
└── tsconfig.json

テスト仕様をのぞいてみましょう

specs/example.spec

# Getting Started with Gauge

This is an example markdown specification file.
Every heading in this file is a scenario.
Every bulleted point is a step.

To execute this specification, use
	gauge run specs

This is a context step that runs before every scenario
* Open todo application

## Display number of items
* Add task "first task"
* Must display "1 item left"
* Add task "second task"
* Must display "2 items left"

## Must list only active tasks
* Add tasks 

   |description|
   |-----------|
   |first task |
   |second task|
   |third task |
   |fourth task|
   |fifth task |

* Complete tasks 

   |description|
   |-----------|
   |second task|
   |fifth task |
* View "Active" tasks
* Must have 

   |description|
   |-----------|
   |first task |
   |third task |
   |fourth task|
* Must not have 

   |description|
   |-----------|
   |second task|
   |fifth task |

A tear down step for every scenario
___
* Clear all tasks

Markdownで書かれていましたね
複数のデータを扱うときはテーブル構造で書くようです。

試しにサンプルのテストを実行してみましょう

$ gauge run specs
# Getting Started with Gauge
  ## Display number of items     ✔ ✔ ✔ ✔ ✔ ✔
  ## Must list only active tasks         ✔ ✔ ✔ ✔ ✔ ✔ ✔

Successfully generated html-report to => /home/maaaashi/source/LifeSync/hoge/reports/html-report/index.html

Specifications: 1 executed      1 passed        0 failed        0 skipped
Scenarios:      2 executed      2 passed        0 failed        0 skipped

Total time taken: 17.16s

テストが実行できました👍

明日からはこの環境を使って、Rustで構築したAPIのE2Eテスト ⇒ Unitテスト ⇒ 実装と進めていきます