はじめに

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

ご了承ください

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

前回まで

Autify で Salesforce を動かしてみよう～ vol.0
https://qiita.com/xx_mana/items/107eb97dcc0da26daeb8
Autify で Salesforce を動かしてみよう～ vol.1
https://qiita.com/xx_mana/items/7f532a977184037ea80c
Autify で Salesforce を動かしてみよう～ vol.2
https://qiita.com/xx_mana/items/1642075b7fdb4950d419

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

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

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

メッセージのチェック

✅ボタンをクリックします。
判定する場所を選びます。
「対象のテキストが○○であることを確認する」を選択します。自動的に値を設定してくれますね。
レコーディングできました。

簡単ですね♬

文字色のチェック

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

Chrome で F12 を押して、Developer Tool を起動します。
対象を選択します。色は #D74C3B のようです。
対象のタグが選ばれるので、[右クリック] - [Copy] - [Copy JS path] を選択します。

コピーした内容

document.querySelector("#ep > div.pbBody > div.pbSubsection > table > tbody > tr:nth-child(1) > td.dataCol.col02 > div > div.errorMsg")

JSステップを追加します。
以下の Autify スニペットを参考にします。

https://github.com/autifyhq/autify-javascript-snippets/blob/master/snippets/assert-style.js

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デザインは、キャプチャで確認する）と言ったルールは最初に決めたほうが良いのかな、と思いました。

更新履歴

なし