Autify で Salesforce を動かしてみよう～ vol.7 Visualforce / Apex

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

# 今回のチャレンジ
- Salesforce に Visualforce / Apex コードを準備、Autify で自動操作させるようにします。
- その後、Visualforce ページを変更したら、Autify はどうなるでしょうか。

# 準備

## 仕様

- 以下のような 画面を作って、Autify を動作させるようにしてみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/2256d5fc-38c0-0f2a-a476-7770be437080.png)

`Click!` ボタンをクリックすると、横に「Clicked!」と表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/8e245558-d2fd-e51e-0882-1c45a033c650.png)

`Clear` ボタンをクリックすると、横の「Clicked!」が消えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/0699bfe8-092d-801a-155b-01ea69d08998.png)


## Visualforceページ と Apexコード

```html:Visualforceページ(TestPage)
<apex:page id="Root" controller="TestPageController">
  <apex:form id="MainForm">

    <apex:pageBlock mode="edit" id="Block">
      <apex:outputPanel id="EditPanel">
        <apex:commandButton value="Click!" action="{!Command}"/>
        <apex:commandButton value="Clear" action="{!Clear}"/>
        <apex:outputText value="{!DataValue}"></apex:outputText>
      </apex:outputPanel>
    </apex:pageBlock>
  </apex:form>
</apex:page>
```

`apex:page`、`apex:form`、`apex:pageBlock`、`apex:outputPanel` の `id` を指定しています。
`apex:commandButton` には、`id` は指定していません。  



```apex:apexコード(TestPageController)
public class TestPageController {
    public String DataValue {get; set;}
    
    public TestPageController() {
        this.DataValue = '';
    }

    public void Command() {
        this.DataValue = 'Clicked!';
    }

    public void Clear() {
        this.DataValue = '';
    }

}
```

- 上記の Visualforce と Apex を利用できるようにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/2256d5fc-38c0-0f2a-a476-7770be437080.png)


## デベロッパーツールで確認

- デベロッパーツール で TestPage 部分 の HTML を確認します。
- `span` と `input` の `id`、`name` が Salesforce にて 展開されています。

```html
<div class="pbBody">
  <span id="Root:MainForm:Block:EditPanel">
    <input type="submit" name="Root:MainForm:Block:j_id0" value="Click!" class="btn">
    <input type="submit" name="Root:MainForm:Block:j_id1" value="Clear" class="btn">
  </span>
</div>
```

## Autify でレコーディング

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/5e92cd27-a5d8-8899-279b-2aa3a1683a0b.png)

1. salesforce ログイン画面に移動
1. ユーザID を入力
1. クリックする（あまり意味ないような）
1. パスワードを入力
1. ログインボタンをクリック
1. ログイン後、ポップアップが表示されることがあるので、ポップアップの閉じるボタンをクリック
    1. 表示されなくても、失敗としないように、失敗時無視を設定
1. タブの「`TestPage`」をクリック
    1. 事前に `TestPage` をタブに指定。クリックすると Visualforce が起動できるようにしておく
1. 「`Click!`」ボタンをクリックする。
1. 横の文字が「`Clicked!`」であることをチェックする
1. 「`Clear`」ボタンをクリックする。


## Autify で実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/29568656-50a5-a223-ecd9-1d5ea3442a21.png)

- きちんと動いているようで、結果も問題ない模様。

# 修正してみる1・id を変更してみる

各ID を変更してみましょう。
id の 接尾辞に `_Edited` を指定します。 

```html:修正済みVisualForceページ(TestPage)
<apex:page id="Root_Edited" controller="TestPageController">
  <apex:form id="MainForm_Edited">

    <apex:pageBlock mode="edit" id="Block_Edited">
      <apex:outputPanel id="EditPanel_Edited">
        <apex:commandButton value="Click!" action="{!Command}"/>
        <apex:commandButton value="Clear" action="{!Clear}"/>
        <apex:outputText value="{!DataValue}"></apex:outputText>
      </apex:outputPanel>
    </apex:pageBlock>
  </apex:form>
</apex:page>
```

```html:展開済みhtml
<div class="pbBody">
  <span id="Root_Edited:MainForm_Edited:Block_Edited:EditPanel_Edited">
    <input type="submit" name="Root_Edited:MainForm_Edited:Block_Edited:j_id0" value="Click!" class="btn">
    <input type="submit" name="Root_Edited:MainForm_Edited:Block_Edited:j_id1" value="Clear" class="btn">
  </span>
</div>
```

特に問題なく実行してくれました😊

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/3a9f79bd-a847-a7b1-40de-be7fd1d58125.png)



# 修正してみる2・ボタンを追加してみる

`Click!` ボタン前に `EMPTY` ボタンを追加します。（このボタンは何もしないボタン。UI変更をしたイメージです）

```html:修正済みVisualForceページ(TestPage)
<apex:page id="Root" controller="TestPageController">
  <apex:form id="MainForm">

    <apex:pageBlock mode="edit" id="Block">
      <apex:outputPanel id="EditPanel">
        <apex:commandButton value="EMPTY"/>
        <apex:commandButton value="Click!" action="{!Command}"/>
        <apex:commandButton value="Clear" action="{!Clear}"/>
        <apex:outputText value="{!DataValue}"></apex:outputText>
      </apex:outputPanel>
    </apex:pageBlock>
  </apex:form>
</apex:page>
```

```html:展開済みhtml
<div class="pbBody">
  <span id="Root:MainForm:Block:EditPanel">
    <input type="submit" name="Root:MainForm:Block:j_id0" value="EMPTY" class="btn">
    <input type="submit" name="Root:MainForm:Block:j_id1" value="Click!" class="btn">
    <input type="submit" name="Root:MainForm:Block:j_id2" value="Clear" class="btn">
  </span>
</div>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/374b7968-2d37-88f6-1e0b-dfe7361e01fe.png)

「`8. クリックする`」で、きちんと「`Click!`」ボタンがクリックされていることが確認できました。
改めて、実行にかかった時間をみると「`33.2秒`」でした。
ここでは「`成功とする`」ボタンをクリックしておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/217354b9-d596-29b1-9b0b-57203a39a713.png)

再度実行してみると「`要確認`」アイコンがなくなり、かかった時間が「`0.8`」秒でした。
「`要確認`」をちゃんとチェックして「`失敗とする`」「`成功とする`」をクリックしておきましょう。
動作が早くなりますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/df6da060-0f91-a920-f8d6-920d84da0460.png)


# 修正してみる3・デザインを変更した場合

`apex:pageBlock`、`apex:outputPanel` を削除して、デザインを変更したイメージで実行してみます。


```html:修正済みVisualForceページ(TestPage)
<apex:page id="Root" controller="TestPageController">
  <apex:form id="MainForm">

        <apex:commandButton value="Click!" action="{!Command}"/>
        <apex:commandButton value="Clear" action="{!Clear}"/>
        <apex:outputText value="{!DataValue}"></apex:outputText>

  </apex:form>
</apex:page>
```


```html:展開済みhtml
<form id="Root:MainForm" name="Root:MainForm" method="post" action="https://********-dev-ed--c.visualforce.com/apex/TestPage" enctype="application/x-www-form-urlencoded">

  <input type="hidden" name="Root:MainForm" value="Root:MainForm">
  <input type="submit" name="Root:MainForm:j_id0" value="Click!" class="btn">
  <input type="submit" name="Root:MainForm:j_id1" value="Clear" class="btn">
  <div id="Root:MainForm:j_id3"></div>
</form>
```

なんと失敗しました。
もしかしたら、一つ前の検証の影響が考えられます（？）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/d6d815a0-f574-c4fa-cc0b-42ff0c45a7b4.png)

「`Click!`」ボタンではなく「`Clear`」ボタンをクリックしています。
（時間がかかったようなので、前回実行分との比較で、色々迷ったのだと思います）

では「`8. クリックする`」を「`失敗とする`」をクリックしておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/4e4c9221-3322-00c8-a16c-20fb103895fa.png)

再度、実行してみましたが、失敗、何度か繰り返すも成功しませんでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/2c07226f-2669-d3cc-0c90-646b01bcb9f7.png)

むむむっ！負けません！！

css ロケーターを指定してみて改善できないか、試してみます！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/522a993f-8b0a-ea23-b314-2cb4a4b9bf8a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/40fb4074-d9f3-1597-4f94-e97582f0be43.png)

いざ実行！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/9f93f5b6-0a59-18c4-87c1-d35d084086bc.png)

ちゃんと反応して「`Click`」ボタンをクリックしてくれました。

さて、この状態からロケールを削除して、実行します。どうなるでしょうか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/1daacd82-59e7-0fed-e655-7c8aa41dcca9.png)

おおっ、通りました！
再度レコーディングしなくても、cssロケールを一時的に指定することで、
適切なオブジェクトを選択できるのかもしれません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/fdc381a1-af69-2b88-11aa-70fd37e1ab4e.png)



#### ご了承ください
- まだまだ勉強中の部分もあります。間違っている箇所もあるかもしれません。
- Salesforce、Autify は、この時点のバージョン(2021年6月～7月頃) での内容になります。今後、仕様変更が変わることによって、内容の通りにならない可能性もあります。ご了承ください。
 - また、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 JSステップ・現在の日時
 - https://qiita.com/xx_mana/items/1642075b7fdb4950d419
- Autify で Salesforce を動かしてみよう～ vol.3 文字色のエラーチェック
 - https://qiita.com/xx_mana/items/59e1cf5275ef0656d7c9
- Autify で Salesforce を動かしてみよう～ vol.4 もっと詳細なブラウザ情報ってとれるの？
 - https://qiita.com/xx_mana/items/02bcbc7003566d2eef85
- Autify で Salesforce を動かしてみよう～ vol.5 Autify API を使ってみよう！
 - https://qiita.com/xx_mana/items/9b87ad071f62a200f0c4
- Autify で Salesforce を動かしてみよう～ vol.6 Salesforce のメジャーリリース
 - https://qiita.com/xx_mana/items/55b2d65c995ac62e2129