JavaScriptスニペットの例
JavaScriptスニペットの使用例
このガイドでは、JavaScriptスニペットの例をいくつか示します。
- ブラウザーの [戻る] ボタン
- 文字列からの値の削除
- エレメントのCSSプロパティの取得
日付の操作が必要な場合は、GetDateComponentsスニペットに関するガイド、mablでの日付の操作を参照してください。その他の例については、公開されているJavaScriptリポジトリを参照してください。
ブラウザーの [戻る] ボタン
このスニペットは、browserBackButton関数を呼び出します。この関数は、ブラウザーウィンドウの [戻る] ボタンのクリックをシミュレートします。
function mablJavaScriptStep(mablInputs, callback) {
browserBackButton();
}
function browserBackButton() {
setTimeout(function(){ window.history.back() }, 1000);
callback(true);
}
実際の手順
- mabl TrainerでJavaScriptステップを作成します。
- 上記のコードをコピーし、コードエディターに貼り付けます。
- スニペットを保存します。
- [OK] をクリックします。このスニペットを実行すると、ブラウザーが前のページに戻ります。
文字列からの値の削除
ページエレメントから抽出された変数値を使用するものの、値に余分な文字が含まれている場合、JavaScriptを使用して不要な文字を削除できます。
例を示します。
- User ID 5489を5489にする
- $45.87を45.87にする
このスニペットでは、2つのパラメーター、"string" と "remove_value" を使用し、どちらも手動で追加する必要があります。
- string: 値全体を表します。
- remove_value: stringから削除する文字を表します。
function mablJavaScriptStep(mablInputs, callback, remove_value = '$', string = '$1.97') {
// Remove value from string
string = string.replace(remove_value, "");
// Return string
callback(string);
}
実際の手順
このスニペットの出力を変数に保存し、新しい形式のこの変数値を必要に応じてテストで使用します。

[Description] でパラメーターについて説明する
[Description] フィールドにパラメーターの仕組みを入力しておくと、ワークスペースの他のメンバーがスニペットの使用方法を把握できます。
エレメントのCSSプロパティの取得
このスニペットは、ページ上にあるエレメントのCSSプロパティの値を返します。このスニペットを使用するには、CSSまたはXPathでエレメントを識別する方法を知る必要があります。
このスニペットは次の2つのパラメーターを使用します。
- cssProperty: 返す必要のある具体的なプロパティ ("color" など)
- selector: エレメントを正しく識別するクエリ。CSSまたはXPathを使用できます。XPathを使用する場合、selectorはこのスニペットで機能するために "//" で始まる必要があります。
function mablJavaScriptStep(mablInputs, callback, cssProperty = 'background-color', selector = 'div.buttons a.w-button') {
// if the selector is XPath
if (selector.startsWith("//")) {
// call a function to get the element by XPath
var element = getElementByXpath(selector);
} else {
// if the selector is CSS, get the element from the DOM
var element = document.querySelector(selector);
}
// Store the value of the element's CSS property in a variable called "value"
let value = getComputedStyle(element).getPropertyValue(cssProperty);
// return the value of the CSS property
callback(value);
}
function getElementByXpath(path) {
return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
エレメントのCSSプロパティに対するアサート
このスニペットを使用すると、特定のエレメントのCSSプロパティが特定の値に一致することをアサートすることができます。たとえば、次の [Start Free Trial] ボタンの色が特定の値に一致することをアサートできます。

開始する前に、パラメーターを用意する必要があります。
- ページのこのエレメントを正しく識別するCSSまたはXPathクエリを作成します。これは、"selector" パラメーターの値になります。
- アサートする値を格納するCSSプロパティを指定します。たとえば、ボタンの色は "background-color" 属性に格納されます。これは、"cssProperty" パラメーターの値になります。
パラメーターの準備ができた段階で、次の手順を実行できます。
- Get CSS property of elementスニペットの結果を格納する変数を作成します。

- trial_button_colorの変数アサーションを作成します。
- mabl Trainerウィンドウの下にあるチェックマークアイコンをクリックします。
- [Variable] を選択します。
- ドロップダウンから新しい変数、trial_button_colorを選択します。

- [OK] をクリックします。
次の2つのステップの組み合わせは、[Start Free Trial] ボタンの背景色が "rgb(198, 55, 183)" に等しいことをアサートします。

詳細はこちら
その他の例については、公開されているJavaScriptリポジトリを参照してください。
Updated 10 days ago