＼スニダンを開発しているSODA inc.の Advent Calendar 2024 15日目の記事です!!!／
こんにちは。SODAでクオリティエンジニアをやっているokauchiです。今回はMagicPodでステップのコピペをより効率的に出来ないかを考えてみた記事になります！
あの処理をコピペしたいけど、あの処理はどこにあったっけ？
ノーコード自動化ツールを使った日々のテストシナリオ作成の中で、過去に作った一部のステップをコピーして利用したり、コピーしたステップをベースにテストシナリオを作成することはありませんか？どんなに簡単な処理でも1からまた作るとtypoなどで不具合を埋め込みがち。再利用できるならできるだけしたいところですね。特に僕の場合は「何月ごろに似たような処理を実装したような・・・」という思い出しコストに時間がかかりがちです。またWebツールの特性上、テストシナリオの横断的な検索が出来ず1シナリオずつ開いて確認をしないといけないのもちょっとツラいところ。
タスクの整理
ツールによっては共通処理としていくつかのステップをひとまとめにして呼び出す機能も存在しますが、今回はそれよりミニマムなステップ（1処理）のコピーをテーマにしています。実際の業務の流れで考えると、以下のようにタスク分解ができます！
[タスク:過去のテストシナリオステップをコピーする]
（前提：テストシナリオ作成中）
1.コピー元のテストシナリオを探す
2.シナリオ編集画面に遷移し、対象のステップを特定する
3.コピーする
4.作成中のテストシナリオにペーストを行う
このタスクで効率化ができそうなのが1-3の部分になります。記憶に頼って探すことになるので「Xのシナリオで実装したかな？Yのシナリオで実装したかな？作成のシナリオだったかな？編集のシナリオだったかな？」というようにある程度あたりはつけているものの探す時間がかかること、また多くの自動化ツールではシナリオ一覧→シナリオ詳細と2画面程の画面遷移が必要になります。今回は1-3の効率化し、過去のテストシナリオを参照せずに、自分がよく使うステップを即利用出来る状態にするを実現します！
コピーされたステップの中身を確認する
UIでコピー、ペーストをする時にそこまで内容を気にすることはないと思いますが、どんな情報がクリップボードに入っているのか、中身を見てみましょう。今回はMagicPodを例に文字の入力、対象の要素の選択、ウェイトを取りあげてみます。
以下はユーザー名入力エリアに"e2e-{USER_RANDOM_VALUE}"というテキストの入力です。
{
"command_calls": [
{
"command": "input",
"ui_id": xxxxxxx,
"val": [
{
"ui_id": xxxxxxx,
"ui_width": 1170,
"ui_height": 2532,
"ui_history_id": xxxxxxx,
"target_id": xx
},
"e2e-${USER_RANDOM_VALUE}"
],
"opts": {
"retry_count": 0,
"input_method": "overwrite"
}
}
],
"project_id": xxxx,
"version": "1.28.0"
}
（ユニークと思われる情報はxxxxで表現しています）
同様に特定のボタンを選択するは以下です。
{
"command_calls": [
{
"command": "tap",
"ui_id": xxxxxxx,
"val": [
{
"ui_id": xxxxxxx,
"ui_width": 723,
"ui_height": 1564,
"ui_history_id": xxxxxxx,
"target_id": xxx
}
]
}
],
"project_id": xxxx,
"version": "1.28.0"
}
5秒間待機するは以下になります。
{
"command_calls": [
{
"command": "wait_fixed_time",
"ui_id": xxxxxxx,
"val": [
5
]
}
],
"project_id": xxxx,
"version": "1.28.0"
}
なるほど、MagicPodだとjsonのようなデータ構造がクリップボードにコピーされていることがわかりました。
クリップボードにデータを取り入れる
コピーされる情報がわかったので今度はそれをクリップボードへ入力させる仕組みを作ります。今回はhtmlでボタンを押すことでクリップボードにコピーさせる処理をchatGPTで作成しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>クリップボードコピー</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
textarea {
width: 100%;
height: 200px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>クリップボードコピー</h1>
<textarea id="json-text" readonly>{
"command_calls": [
{
"command": "wait_fixed_time",
"ui_id": xxxxxxx,
"val": [
5
]
}
],
"project_id": xxxx,
"version": "1.28.0"
}</textarea>
<button id="copy-button">コピー</button>
<script>
document.getElementById('copy-button').addEventListener('click', function() {
const textArea = document.getElementById('json-text');
textArea.select();
textArea.setSelectionRange(0, 99999); // for mobile devices
try {
navigator.clipboard.writeText(textArea.value);
alert('クリップボードにコピーしました！');
} catch (err) {
alert('コピーに失敗しました: ' + err);
}
});
</script>
</body>
</html>
これでボタン１つでクリップボードに任意のステップがコピーできるようになります！この仕組みを使うことで自分がよく使うステップを効率的に管理が出来るようになったり、自動化ツールに慣れていない人がテストシナリオを作る時にこのボタンからステップを作成するようにお願いすることで、テストシナリオの不具合を減らすことも出来るかもしれませんね！
利用する場合は使い方に気をつけましょう！
同様に他の自動化ツールでも同じようなにコピーをツール介さず行うことで効率化も出来そうですね。注意点はされた内容を変更することがないように利用をしないと、データの破損やサポートを得られないことも考えられます。
株式会社SODAの開発組織がお届けするZenn Publicationです。 是非Entrance Bookもご覧ください！ → recruit.soda-inc.jp/engineer
Discussion