ノーコードテスト自動化・効率化ツールのTricentisについて、なんでも投稿してみよう！ by Tricentis Advent Calendar 2025

Testimで始める Web UI テスト入門

Posted at 2025-12-07

WebアプリケーションのUIテストをちゃんとやろうとすると、変化の激しいUIに追従するのが面倒だったりすると思います。この記事では、SaaS型のテスト自動化プラットフォーム「Testim」を使って、ローカルで動かしているDjangoアプリを題材に、Web UIテストを記述・実行する一連の流れを紹介します。

対象読者は、開発とテストを自分たちで回している Web 開発者/チームを想定しています。

Testim とは

Testim は、ブラウザやモバイルアプリの E2E テストを、ノーコード / ローコードで作成・管理できる SaaS プラットフォームです。

ざっくり特徴を挙げると:

ブラウザUIテストを、ブラウザ拡張機能を使って記録してテストケース化できる
テストステップを再利用・抽象化出来る
- ステップ単位でグループ・ライブラリ化
- シナリオを Suite にまとめて一括実行できる等
クラウド上のブラウザや、ローカルのブラウザを使ってテスト実行できる
GitHub Actions, Jenkins, CircleCIなどのCIからCLI経由でテスト実行できる

「ブラウザ操作の記録」と「SaaS 上での管理・実行」がセットになっているため、テストコードを書くというより、GUI を使ってテストフローを組み立てていく感覚に近いツールです。

Testim は機能が多く、全部を理解しようとすると結構なボリュームになります。
この記事では、機能一覧を網羅するのではなく、「手元の開発環境で動かしている Web アプリに対して、Testim を使って UI テストを書き、将来的には CI からも回せるようにする」といったことを目標に基本的な外面を説明します。

テスト対象の Django アプリを用意する

今回はサンプルとして、Django Admin を活用した簡単なアプリケーションを題材にします。
リポジトリは GitHub 上に用意しています。

リポジトリ: https://github.com/kamijin-fanta/testim-sandbox

Django Admin を使う理由は…

ほとんどコードを書かずに、実運用に近い CRUD UI が手に入る
ログイン / 一覧 / 詳細 / 作成 / 編集といった典型的な画面遷移が揃っている
テスト観点 (ログイン・フォーム入力・バリデーションなど) を説明しやすい

セットアップ手順

事前に Python と uv がインストールされている前提です。
ローカル環境で次のコマンドを実行します。

git clone git@github.com:kamijin-fanta/testim-sandbox.git
cd testim-sandbox

uv python install
uv run manage.py migrate
uv run manage.py createsuperuser
uv run manage.py runserver

このアプリでは、Todoという Title フィールドのみ含むモデルを定義しており、その追加・確認・削除がAdmin画面経由で可能です。

http://localhost:8000/admin/ にアクセスすると、Django Admin のログイン画面が表示されます。
ここを起点に、「ログインして管理画面を操作する UI テスト」を Testim で作っていきます。

Testim の UI からブラウザテストを作成する

アカウント作成

まずは Testim のアカウントを作成します。

https://app.testim.io/#/signup からサインアップ
7 日間の PRO プランのフリートライアルが利用可能

クレカ登録なしで試せる試せます。仕事用のメールアドレスの入力を求められます。

Chrome Extension のインストール

Testim では、Chrome Extension を介してブラウザ操作を記録します。Testim の UI から「Start Record」を選ぶと、Chrome Extension のインストール案内が出ます

開発ワークフローとしては、

ローカルで runserver 等でlocalhostに立ち上げたWebアプリをブラウザで開く
ブラウザの操作をTestim Extension 経由で操作を記録し、テストとして保存
動作確認後、Suite にまとめて回す

という流れになります。開発者が手元でブラウザを開いて機能確認するフェーズと非常に相性が良さそうですね。

Django Admin ログインテストを作ってみる

ここでは「Django Admin にログインできること」を確認するシンプルなテストを想定します。

例:

BASE_URL = http://localhost:8000/admin/ を設定
URLへアクセスして、ログイン画面に遷移
ユーザー名とパスワードを入力
ログインボタンをクリック
TODOアイテムの追加ボタンをクリック
内容を記述
保存
削除
ログアウト

実際の Testim UI 上での手順は以下のようになります

新規テストの作成: NEW TESTをクリック
Record を開始: 赤いボタンをクリック
別ブラウザが開くので、適時操作を行う

ざっくりとしたイメージは以下の動画のような感じです。操作するたびに自動的にステップが登録されていて小気味よいですね。

レコーディングが終わり、以下のようになりました。レコーディングボタンの右にあるRunボタン(もしくはF5)を押すと、自動的にブラウザが開いてテストが開始します。

グループ化・抽象化

Testim のテストは、個々のステップを「グループ」としてまとめて再利用できます。

例: 「ログイン処理」を 1 つのグループにする
他のテストケースから「ログイングループ」を呼び出して再利用する

これにより、ログインフローが変わった場合も、該当グループだけ修正すれば済みます。コードでいう「関数化 / 共通化」に近いイメージですね。

Suite による一括実行

複数のテストを「Suite」にまとめておくと、一括で実行できます。

例えば…

login テスト
create object テスト
edit object テスト
delete object テスト

これらを 1 つの Suite に入れて、「管理画面の基本操作フロー」をまとめて回すような形です。

画面操作としては、Test Listメニュー→SUITES→NEW SUITEで以下のように新規作成画面が表示されます。Suiteに追加するテストをチェックボックスで選択してOKです。

このSuiteの単位で定期実行・CIを行ったりするため、実運用では必須に近い機能になっていそうです。

Secret 機能でパスワードを保護する

ログインテストにはどうしてもパスワードが出てきますが、これを平文でテスト内に埋め込むのは避けたいところです。

Testim には Secret 機能があり、

パスワードや API キーを Secret として登録
テストステップからは Secret 名で参照
値そのものはマスクされ、ログや画面には表示されない

という形で扱えます。

メニューのResourcesをクリックすると以下のような画面となりますので、NEW SECRETからシークレットを定義します。

Secretを使う際は、テスト編集画面のステップにカーソルを当て歯車をクリックし、AssignでSecretを選択し、先程作った名前を選択します。

CI やチーム開発を前提にするなら、最初から Secret を使っておくと安心ですね。

テストを動かす環境をどうするか

テストの書き方と同じくらい重要なのが、どこでテストを実行するかです。エンジニアなら気になる部分かと思います。

ローカルホストでの実行

先ほどは BASE_URL = http://localhost:8000/admin/ として、手元の開発環境に対してテストを流しました。これは自明ですが、開発中にサッと流す場面に向いています。

Webブラウザでの実行では、Chrome Extension を通じて、開いているブラウザそのものを Testim が操作します。これは、先程紹介したテスト作成の画面から実行ができます。

またCLIも存在しており、これも同様にマシンのChromeをデバッグポート付きで立ち上げ、Chrome Extentionで操作してテストを行うことが可能です。

SaaS 上のブラウザ VM で実行

Testim は、SaaS 側にブラウザVMを立ち上げてテストを実行する機能も提供しています。

CI やスケジューリング実行など、人的介入なしで回したいとき
IP 制限をかけた検証環境 / 本番環境に対してテストしたいとき

などは、クラウド上のブラウザでの実行の方が現実的です。

このクラウド上のVMの利用方法も、ブラウザとCLIがあります。

ブラウザ上では以下のように「Run on a grid」などの機能として、クラウドのVMでの動作が指定可能です。

使い分けのイメージ

環境ごとの役割を整理すると、

ローカル:
- 開発中の動作確認
- BASE_URL を http://localhost:8000 に上書き
クラウド (SaaS 上の VM):
- ブラウザから
  - ステージング / 本番相当の環境に対する E2E テスト
  - IP 制限や Basic 認証がかかった環境
  - 夜間バッチやスケジュールされた定期実行
  - BASE_URL を http://stg.example.com/admin/ 等に上書き
- CLIから
  - CI からの自動実行
  - BASE_URL を http://localhost:8000/admin/ などに上書きして使う

動作毎に BASE_URL が切り替えできるので、同じテストを複数環境で簡単に流用できます。

Tunnel 機能のイメージ (ローカル → クラウドへの転送)

クラウド上の VM からローカル環境にアクセスしたい場合、いわゆるトンネル機能が登場します。Testimのクラウド上のブラウザから直接 localhost にアクセスできないため、トンネリングでポート転送する形です。

この機能はtestimのCLIで --tunnel と指定するだけで使えるようです。

ChatGPTに書かせた雑な図ですが、こういう感じだと思います。

GitHub Actions から CI として実行する

Testim は Web UI から CLI 用のスクリプトを生成できるため、GitHub Actions などの CI に組み込むことも簡単にできます。

Settings->CLIと画面遷移すると、このような画面になります。環境や動作させたいテストのSuiteなどを選択すると、対応したスクリプトが生成されます。

実際にActionsから実行してみようとしたログ(結局うまく行かなかった)

まず提供されたyamlを .github/workflows/testim.yaml で保存してpushしました。

name: Testim E2E
on: [push]

jobs:
    run-testimio-cli:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v2
            - uses: actions/setup-node@v4
              with:
                node-version: 'lts'
                # You can also change 'lts' to any supported LTS Node.js version.
            - run: npm install -g @testim/testim-cli
            - run: testim --token "********" --project "********" --grid "Testim-Grid"

node-version: 'lts' は存在しないという事で、テストが失敗します。

      - uses: actions/setup-node@v4
        with:
          node-version: "24"

のようにバージョン指定を書き換えると、このステップは正常に完了した。

次にlocalhostのサーバをTestim Grid上のVMでテストしたいので --tunnel を指定したところ以下のようなエラーが出力されました。PRO以上であればTunnelは利用可能とドキュメントに記載されているのですが、ひょっとするとトライアル期間中は利用できないかもです。7日トライアルで時間が無いから別の方法を試しましょうか。

- Starting testim ngrok tunnel...
✖ Failed to start tunnel. Please contact support@testim.io
Error: Failed to start tunnel. Please contact support@testim.io

CLIのオプションを確認すると --use-local-chrome-driver といったオプションが有り、ローカル環境で実行できそうだ。

  testim \
    --token "$TESTIM_TOKEN" \
    --project "$TESTIM_PROJECT" \
    --use-local-chrome-driver \
    --headless \
    --mode selenium \
    --chrome-binary-location "${{ steps.setup_chrome.outputs.chrome-path }}" \
    --branch "$BRANCH_NAME" \
    --suite "Django TODO Apps" \
    --base-url "http://127.0.0.1:8000/admin/" \
    --report-file test-results/testim-report.xml

しかしながら、エラーが出る。ChromeもChrome Driverも入れているのに…

Starting Testim.io CLI
- Starting Driver

1. If you don't have Chrome, please install it from https://www.google.com/chrome.
2. If Chrome is installed, please verify it's binary directory:
    - installed where chromedriver expects it (see https://github.com/SeleniumHQ/selenium/wiki/ChromeDriver#requirements).
    - exists in your PATH environment variables.
✖ Failed to initiate Chrome Driver
3. Try adding --chrome-binary-location flag to Testim CLI specifying the exact location of chrome binary in your computer (e.g on Windows "C:/Program Files/Google/Chrome/Application/chrome.exe").
4. You can always use a standalone Selenium grid and providing it's details with the --host and --port flags (see https://www.npmjs.com/package/selenium-standalone)
Error: create session failed

--use-local-chrome-driver の代わりに --use-chrome-launcher を指定すると、npmの chrome-launcher で起動し、Seleniumが不要となるらしい。 --headless --mode extension と共に起動してみる。

（恐らく --use-local-chrome-driver と --use-chrome-launcher の同時指定は前者が勝って、後者は効果がなくなるようだ）

testim \
    --token "$TESTIM_TOKEN" \
    --project "$TESTIM_PROJECT" \
    --chrome-binary-location "${{ steps.setup_chrome.outputs.chrome-path }}" \
    --use-chrome-launcher \
    --headless \
    --mode extension \
    --branch "$BRANCH_NAME" \
    --suite "Django TODO Apps" \
    --base-url "http://127.0.0.1:8000/admin/" \
    --report-file test-results/testim-report.xml

しかしながら延々とブラウザに接続できない…

Starting Testim.io CLI
Run anonymous (Suite: Django TODO Apps) test plan with default configs, Project: ***, Branch: master (s3q2pxSJO5dy10m6)
-----------------------------------------------------------------------------------
Test list:
	 1 : django todo (uxYBsqHSwqQ3grbV) 
-----------------------------------------------------------------------------------
 Test "django todo" started (uxYBsqHSwqQ3grbV) url: https://app.testim.io/#/project/***/branch/master/test/uxYBsqHSwqQ3grbV?result-id=wd8CwvEV2z5Dhw7E
 Get browser to run django todo
 Get browser to run django todo
 Get browser to run django todo
 Get browser to run django todo
 Get browser to run django todo
 Get browser to run django todo
 Get browser to run django todo
 Get browser to run django todo
 Get browser to run django todo

straceをチラ見すると、以下のようにChromeのDebug Port( --remote-debugging-port=46749 )に繋がらないという事のようだ。

3164  11:58:58.800823 connect(40, {sa_family=AF_INET, sin_port=htons(46749), sin_addr=inet_addr("127.0.0.1")}, 16) = -1 EINPROGRESS (Operation now in progress) <0.000071>
3164  11:58:58.801057 getsockopt(40, SOL_SOCKET, SO_ERROR, [ECONNREFUSED], [4]) = 0 <0.000020>

念の為、Chrome単体を --headless 等のオプションを起動してみたが、正常に起動できているようだ。試しに、 --headless オプションを削除して xvfb-run -a 以下で testim を起動したものの、状況は変わらない。

testim --host --port オプションでSelenium Gridへ接続できるようだ。

npm install -g selenium-standalone
selenium-standalone install
Run selenium-standalone start &

testim \
    --token "$TESTIM_TOKEN" \
    --project "$TESTIM_PROJECT" \
    --host 127.0.0.1 \
    --port 4444 \
    --mode selenium \
    --branch "$BRANCH_NAME" \
    --suite "Django TODO Apps" \
    --base-url "http://127.0.0.1:8000/admin/" \
    --report-file test-results/testim-report.xml

しかしながら、以下のようなメッセージが繰り返し、接続できない。このSelenium Gridへの接続がTestim側から行われているのか、ローカルから行われている想定なのかもドキュメントに記載は無いので良くわからない。

Starting Testim.io CLI
Run anonymous (Suite: Django TODO Apps) test plan with default configs, Project: ***, Branch: master (EulDGHNR0uEMrwDn)
-----------------------------------------------------------------------------------
Test list:
	 1 : django todo (uxYBsqHSwqQ3grbV) 
-----------------------------------------------------------------------------------
 Test "django todo" started (uxYBsqHSwqQ3grbV) url: https://app.testim.io/#/project/***/branch/master/test/uxYBsqHSwqQ3grbV?result-id=4XzVLjb1KZcwWJzQ
 Get browser to run django todo
 Get browser to run django todo
 We are having issues reaching your Selenium grid at 127.0.0.1:4444
 Get browser to run django todo

testimはCLI起動後にchromedriverを内部でインストールして利用するようだが、バージョン間の相性も有るだろうから自力でインストールを行ってパスを通してみる。

- name: Install chromedriver
  run: |
    npm install -g chromedriver
    CHROME_NPM_ROOT="$(npm root -g)"
    echo "$CHROME_NPM_ROOT/chromedriver/bin" >> "$GITHUB_PATH"
- name: Check chromedriver
  run: |
    which chromedriver || { echo "chromedriver not in PATH"; exit 1; }
    chromedriver --version || { echo "chromedriver failed"; exit 1; }

/opt/hostedtoolcache/node/24.11.1/x64/lib/node_modules/chromedriver/bin/chromedriver
ChromeDriver 143.0.7499.40 (c23ff452476d1b6322d73b9b629420ef119d0388-refs/branch-heads/7499@{#2388})

しかしながら、以下のようなエラーは出続ける。

Starting Testim.io CLI
- Starting Driver

1. If you don't have Chrome, please install it from https://www.google.com/chrome.
2. If Chrome is installed, please verify it's binary directory:
    - installed where chromedriver expects it (see https://github.com/SeleniumHQ/selenium/wiki/ChromeDriver#requirements).
    - exists in your PATH environment variables.
3. Try adding --chrome-binary-location flag to Testim CLI specifying the exact location of chrome binary in your computer (e.g on Windows "C:/Program Files/Google/Chrome/Application/chrome.exe").
4. You can always use a standalone Selenium grid and providing it's details with the --host and --port flags (see https://www.npmjs.com/package/selenium-standalone)
✖ Failed to initiate Chrome Driver
Error: create session failed

straceで execve を中心に見てみたが、 npm i -g で入れたchromedriverは利用されることが無く、外からPATH指定して差し込めるものではないようだ。

実際に触ってみての所感

今回、フリートライアル環境で CLI 連携を試した範囲では、いくつか気になる点もありました。

トンネル前提の構成のように見えるが、トライアルだからか期待通りに利用できなかった
CLI 自体は Node.js の minify 済みコードで、内部実装は公開されていない
公開ドキュメントはあるものの、例えば
- --use-local-chrome-driver --use-chrome-launcher といった細かいオプションに関する記述は見当たらず、挙動の詳細が把握しづらい
エラー時のログ出力が少なく、トラブルシュートはサポートに頼る前提の設計に感じた

「Web UI でテストを定義して、ローカルで試しに流してみる」レベルまでは非常にスムーズですが、本格的に CI 連携まで含めて運用する場合は、事前に

自分たちのインフラ形態 (VPC / IP 制限 / プロキシなど)
Tunnel 機能の可用性・制限
CLI まわりのサポート範囲

がサービスの仕様とマッチするかを確認しておいた方が良さそうです。

まとめ

Testimを7日間のトライアルで触ってみてのまとめです。

7日間のフリートライアルで確認できる範囲には限りがある
- 特に CI 連携や Tunnel まわりは、プランや設定によって挙動が変わる可能性が高い
- Please contact support と言われている間に7日間が過ぎそう
本格導入を検討する場合は、最初からサポートに相談しながら設計した方が良い
とはいえ、「Web UI 上でテストを定義できる」という体験の完成度はかなり高い
- クリックなどの各インタラクションごとにスクリーンショットが自動で残る
- どのステップで失敗したかが視覚的に分かるため、デバッグがしやすい
テスト自体はコードを書かずに作成できるため、非エンジニアを含めた QA チームやカスタマーサクセスなどもテスト作成に参加しやすい

今回は試していませんが、AIとの連携機能もあるようでテストに掛かる工数を減らす機能等も提供されているようです。UIテストを書きたいが、テストコードを書くコストはできるだけ抑えたいというチームにとっては、Testimは有力な選択肢の1つになり得ると感じました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up