Autify で Salesforce を動かしてみよう～ vol.3 文字色のエラーチェック

11784 ワード
Salesforce autify Salesforce テキストリンク

はじめに

  • Autify で Salesforce を動かしてみよう、と思い記事にしてみます。
  • TIPSなども記載できれば、と考えています。

ご了承ください

  • まだまだ勉強中の部分もあります。間違っている箇所もあるかもしれません。
  • Salesforce、Autify は、この時点のバージョン(2021年1月～2月頃) での内容になります。今後、仕様変更が変わることによって、内容の通りにならない可能性もあります。ご了承ください。
    • また、URLなども変更になっている可能性もあります。

前回まで

エラーチェックをしてみよう

エラーをチェックしてみたいと思います。

「テキスト」欄を必須設定にしました。
未入力のまま、保存するとエラーメッセージが表示されます。

メッセージのチェック

  1. ✅ボタンをクリックします。

  2. 判定する場所を選びます。

  3. 「対象のテキストが○○であることを確認する」を選択します。自動的に値を設定してくれますね。

  4. レコーディングできました。

簡単ですね♬

文字色のチェック

文字色のチェックは、JSステップを利用する必要があります。

  1. Chrome で F12 を押して、Developer Tool を起動します。

  2. 対象を選択します。色は #D74C3B のようです。

  3. 対象のタグが選ばれるので、[右クリック] - [Copy] - [Copy JS path] を選択します。

コピーした内容
document.querySelector("#ep > div.pbBody > div.pbSubsection > table > tbody > tr:nth-child(1) > td.dataCol.col02 > div > div.errorMsg")
  1. JSステップを追加します。 以下の Autify スニペットを参考にします。 
var element = document.querySelector("#ep > div.pbBody > div.pbSubsection > table > tbody > tr:nth-child(1) > td.dataCol.col02 > div > div.errorMsg");
var rgb     = window.getComputedStyle(element).color;

ポイント

  • window.getComputedStyle(element).color の color が文字色です。

    • それ以外を指定することで、違う属性を取り出すことができます。

  • 変数 rgb には "rgb(215, 76, 59)" という文字列が返ってきます。これを判定すると良さそうです。

    • でも、やっぱり「#D74C3B」で判定したいので工夫したいですね。

  • エラー処理などを追加したものがこちら。

rgbString2Hex = function(rgbString) {
  var val = rgbString.replaceAll('rgb(', '').replaceAll(')', '');
  var vals = val.split(',');

  return '#' + toHex(vals[0]) + toHex(vals[1]) + toHex(vals[2]);

};

toHex = function(a) {
  return (("0" + parseInt(a).toString(16)).slice(-2)).toUpperCase();
};

var element = document.querySelector("#ep > div.pbBody > div.pbSubsection > table > tbody > tr:nth-child(1) > td.dataCol.col02 > div > div.errorMsg");
if (!element) {
  throw new Error('対象のElementが見つかりませんでした。');
}

var rgb     = window.getComputedStyle(element).color;

var rgbCode = rgbString2Hex(rgb);

var result = '#D74C3B';
if (rgbCode !== result.toUpperCase()) {
  throw new Error('色が正しくないようです。想定の値:' + result + ', 実際の値:' + rgbCode);
}
  • 正規表現を使うともっとスリムにはなるようです。
  • result の値に想定の値を設定してください。

実行結果

  • 「対象のテキストが○○であることを確認する」の実行結果

  • 文字色のチェックの実行結果

  • わざと想定値を変更して、失敗してみます。

  • 当然ですが、このステップで失敗したら自動実行が終了してしまいます。

  • 後続のステップも実行させたい場合は、「このステップが失敗したとき」を「このステップはエラーとしてテストを続行する」にすると良いでしょう。

自動化でどこまでチェックしようか…

  • う～ん、考えることが多いですよね。本当にこのチェックは必要なのでしょうか（😳いまさら？）

  • Autify は、実行結果をキャプチャとして、保存してくれます。

  • もしかしたら、キャプチャを目視して確認するほうが早いかもしれません。

  • エラーチェックのステップが無くなるので、シナリオももっとスマートになっていくのかもしれません。

まとめ

  • エラーチェックは、Autify の機能を使って確認できる。

  • 細かいチェックは、JSステップを利用することで確認できる。

  • エラーチェックはどのように行うようにするのか（UIデザインは、キャプチャで確認する）と言ったルールは最初に決めたほうが良いのかな、と思いました。

更新履歴

  • なし