18
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Chromeのレコーダー機能でプリザンターの操作を簡易自動化

Last updated at Posted at 2025-10-02

概要

  • Chromeのレコーダー機能を使用してプリザンターの操作を簡易自動化します

動画

  • 作成したプリザンターの自動操作になります
    記録(無効化_更新)_03.gif

  • 動画で行っている操作内容は下記になります

    1. プリザンターでエディタ設定を開く
    2. ID項目を無効化
    3. 更新を実行

自動化手順

  • 1. レコードの記録

    1. プリザンターで自動化したい操作を行う画面を開く
    2. DevToolsを開く
    3. レコーダータブをクリックする
    4. 「新しい記録を作成」をクリックする
      手順_2_3.png
    5. 「新しい記録を開始」をクリックする
      手順_4.png
    6. 自動化したい操作を行う
    7. 「記録を終了」をクリックする
      image.png
    8. 「記録を終了」をクリックする
    9. 保存済みの記録に保存される
      image.png
  • 2. レコードのリプレイ

    1. プリザンターでレコードのリプレイを行う画面を開く
    2. DevToolsを開く
    3. レコーダータブをクリックする
    4. 保存済みの記録からリプレイを行う記録を選択する
    5. 「リプレイ」をクリックする
      image.png
    6. 「リプレイ」結果をブラウザで確認する

レコーダー機能の詳細につきましては公式サイトのドキュメントを参照してください
ユーザーフローを記録、再生、測定する

Chromeレコーダー機能のメリット

  • 手作業の削減:繰り返し行う作業を自動化することでヒューマンエラーの防止や作業時間の短縮が可能です
  • テスト自動化:UI変更時のテストや操作手順の確認を自動で行えます
  • ドキュメント作成補助:実際の操作を記録しその内容をそのまま手順書に転用できるため、ナレッジの共有に役立ちます

レコードした記録からのドキュメント作成手順

  • レコードした記録は「コードを表示」からJSON形式で確認・保存することができます
    image.png
    image.png
  • このJSONファイルをAIに読み込ませることで簡単に手順書の作成ができます
    • AIにJSONファイルから作成してもらった手順書
      image.png

まとめ

  • Chromeのレコーダー機能を使用することで手軽に自動実行を実現することができます

  • レコードした記録をインポート・エクポートすることで同じ操作の共有ができます

注意点

  • ページ遷移や非同期処理の多い画面では、操作再現がうまくいかない場合があります
  • ログインなど認証処理がある操作は、認証が切れると再生時に失敗することがあります
  • 記録されたJSONファイルには実際の操作内容がそのまま含まれるため、個人情報や機密情報の取り扱いには注意が必要です
18
15
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
18
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?