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

# はじめに
- 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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/65a54b2e-c7f0-440b-97a4-fa88fb47b38f.png)

#### メッセージのチェック

1. ✅ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/4c04e30b-9628-35cc-e057-96c912183002.png)

1. 判定する場所を選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/0b58b254-2f35-c885-3434-2427203bfedc.png)

1. 「対象のテキストが○○であることを確認する」を選択します。自動的に値を設定してくれますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/392ee31c-7a60-ebeb-ac8d-8fc9723a83c8.png)

1. レコーディングできました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/3d1e9664-e7c9-9da3-9720-dfe1fe3f62e4.png)

簡単ですね♬


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

1. Chrome で F12 を押して、Developer Tool を起動します。
1. 対象を選択します。色は #D74C3B のようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/097dd917-4bcf-48db-07f2-d9613d1e8456.png)

1. 対象のタグが選ばれるので、[右クリック] - [Copy] - [Copy JS path] を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/3507acc9-c438-35c8-713e-33c73932f965.png)

```js:コピーした内容
document.querySelector("#ep > div.pbBody > div.pbSubsection > table > tbody > tr:nth-child(1) > td.dataCol.col02 > div > div.errorMsg")
```

1. JSステップを追加します。
以下の Autify スニペットを参考にします。
 - https://github.com/autifyhq/autify-javascript-snippets/blob/master/snippets/assert-style.js

```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」で判定したいので工夫したいですね。

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

```js
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 の値に想定の値を設定してください。


# 実行結果

- 「対象のテキストが○○であることを確認する」の実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/adf0a4f2-4043-b5fc-39b6-5266075f0eab.png)

- 文字色のチェックの実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/ea50d65e-f746-33e0-61df-15961ed2c632.png)

- わざと想定値を変更して、失敗してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/c740e851-eb2d-9579-95a2-c29dc11ffaf7.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/b37e55d2-25b8-fae2-1591-4c3319380185.png)


# 自動化でどこまでチェックしようか…
- う～ん、考えることが多いですよね。本当にこのチェックは必要なのでしょうか（😳いまさら？）
- Autify は、実行結果をキャプチャとして、保存してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/617b081a-7493-d54a-770d-0fd97d8f4ce0.png)

- もしかしたら、キャプチャを目視して確認するほうが早いかもしれません。
- エラーチェックのステップが無くなるので、シナリオももっとスマートになっていくのかもしれません。


# まとめ
- エラーチェックは、Autify の機能を使って確認できる。
- 細かいチェックは、JSステップを利用することで確認できる。

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


# 更新履歴
- なし