📘

mablを使ってlocalStorageを弄るテストをする

2024/05/13に公開

mablにて、localStorageをいじるタイプのtestを書きたいケースがあったので調べました。
JavaScriptスニペットを利用することで実現できます。

JavaScriptスニペットエディターは、ECMAScript 8をサポートしています。JavaScriptサポートのレベルはブラウザーによって異なることに注意してください。mablは、最新のChrome、Firefox、Safari (WebKit)、Edgeを使用してテストを実行しますが、これらはほぼES8の標準機能をサポートしています。

localStorage以外にも、ブラウザAPIを利用する様々なテストシーンでJavaScriptスニペットが活用できそうです。

Howto

1. mablトレーナーでステップの挿入を選択

2. JavaScriptスニペットを検索

3. 新規ボタンを押下

3. コードを編集

例えば以下のようにしてパラメータを受け取ってローカルストレージに値を保存するスニペットを作成します。

function mablJavaScriptStep(mablInputs, callback, key = undefined, value = undefined) {
  window.localStorage.setItem(key, value);
  callback({[key]: value});
}

パラメーターはパラメーターを編集から追加して下さい。

Save as one-time snippet を選択して保存すると、このテストでのみ参照可能です。
Save as new reusable snippet を選択すると、他のテストでも保存済みのスニペットとして呼び出し可能になります。

4. ステップ編集画面で値をセットする

Ubie テックブログ

Discussion