Autify で Salesforce を動かしてみよう～ vol.9 ShadowDOM・その２

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


# 今回のすること
前回のつづきで、ShadowDOM の検証を行っていこうと思います。

今回は、
__１. ShadowDom要素を「CSSセレクターを指定したロケーター」で指定してみる。__
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/05b20783-d683-5418-3084-beecf355f576.png)

__２. ShadowDom要素を「JSステップ」で操作してみる。__



それぞれで __商談タブ__ をクリックしてさせてみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/dd23566b-9d25-66bc-be64-9a2a79bcab8a.png)

---
####１. ShadowDom要素を「CSSセレクターを指定したロケーター」で指定してみる。

商談 は ```span.slds-truncate``` みたいです。
（```span``` タグは、```a``` タグで囲われているので、```a``` タグクリックでも良さそうです）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/ff63ba3f-4672-60a2-c743-51d9bbd178fa.png)


「Selector をコピー」で取得した結果の値

body > div.desktop.container.forceStyle.oneOne.navexDesktopLayoutContainer.lafAppLayoutHost.forceAccess.tablet > div.viewport > section > div.none.navexStandardManager > div.slds-no-print.oneAppNavContainer > __one-appnav__ > div > __one-app-nav-bar__ > nav > div > __one-app-nav-bar-item-root:nth-child(2)__ > a > span

「__one-appnav__」「__one-app-nav-bar__」当たりがShadowDomになるようです。

では、「ロケータ」の「CSSセレクター」に指定して実行してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/95c23721-7399-2da4-491e-8fd4ff0dccbb.png)

あら、失敗してしまいました…　まだうまいこと行かないのかもしれません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/94470878-eb2b-5b85-3ea1-a73c33d18f68.png)


####__２. ShadowDom要素を「JSステップ」で操作してみる。__

JSステップに以下のコードを指定し、実行してみます。
```document.querySelector``` の引数に「Selector をコピー」で取得した結果の値を指定します。

```JavaScript
var selector = "body > div.desktop.container.forceStyle.oneOne.navexDesktopLayoutContainer.lafAppLayoutHost.forceAccess.tablet > div.viewport > section > div.none.navexStandardManager > div.slds-no-print.oneAppNavContainer > one-appnav > div > one-app-nav-bar > nav > div > one-app-nav-bar-item-root:nth-child(2) > a > span";
var element  = document.querySelector(selector);

if (!element) {
  throw new Error('Error: cannot find the element with selector(' + selector + ').');
}

element.click();
```

見つけることができなかったようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/991c336e-50e9-fb94-30a3-10791b4cae0b.png)

１回の ```document.querySelector``` を使用して、Selector のどこまで取得できるのでしょうか。
調べてみると、最初の ShadowDOM の要素まで取得できるようです。

今回の例ですと、以下の<font color="blue">青文字部分</font>を取得すると、```document.querySelector``` で取得できました。
<font color="blue">body > div.desktop.container.forceStyle.oneOne.navexDesktopLayoutContainer.lafAppLayoutHost.forceAccess.tablet > div.viewport > section > div.none.navexStandardManager > div.slds-no-print.oneAppNavContainer > one-appnav</font> <font color="red">> div > one-app-nav-bar</font> <font color="green">> nav > div > one-app-nav-bar-item-root:nth-child(2)</font> <font color="purple">> a > span</font>

その先は、ShadowDOM 要素です。
ShadowDOM 要素にアクセスするには、<font color="blue">青文字部分</font>に対する element に対して ```shadowRoot``` を利用することで、<font color="red">赤文字部分</font>が取得できるようです。

クリック対象の要素まで繰り返して取得します。


コードを修正します。

```JavaScript
var lookupElement = function(base, selector) {
  var element  = base.querySelector(selector);

  if (!element) {
    throw new Error('Error: cannot find the element with selector(' + selector + ').');
  }
  
  return element;
};

var element = null;

var selector1 = "body > div.desktop.container.forceStyle.oneOne.navexDesktopLayoutContainer.lafAppLayoutHost.forceAccess.tablet > div.viewport > section > div.none.navexStandardManager > div.slds-no-print.oneAppNavContainer > one-appnav";
element = lookupElement(document, selector1);

var selector2 = "div > one-app-nav-bar";
element = lookupElement(element.shadowRoot, selector2);

var selector3 = "nav > div > one-app-nav-bar-item-root:nth-child(2)";
element = lookupElement(element.shadowRoot, selector3);

var selector4 = "a > span";
element = lookupElement(element.shadowRoot, selector4);

element.click();
```

成功したようです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/00b07f3d-462a-bc62-54b9-a3c31ecb3ec3.png)

ちゃんと「商談」タブがクリックされていました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309141/a82a0915-a330-68c5-fee3-8b61ea5170b3.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
- Autify で Salesforce を動かしてみよう～ vol.7 Visualforce / Apex
 - https://qiita.com/xx_mana/items/89d9dac362311190e8af
- Autify で Salesforce を動かしてみよう～ vol.8 ShadowDOM・その１
 - https://qiita.com/xx_mana/items/022bc98c3c052d0acc04