LoginSignup
1
1

More than 1 year has passed since last update.

@xx_mana(Manabu)

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

Last updated at Posted at 2021-10-03

はじめに

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

今回のすること

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

今回は、
１. ShadowDom要素を「CSSセレクターを指定したロケーター」で指定してみる。
image.png

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

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

image.png

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

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

image.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

あら、失敗してしまいました…　まだうまいこと行かないのかもしれません。
image.png

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

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

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

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

今回の例ですと、以下の青文字部分を取得すると、document.querySelector で取得できました。
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

その先は、ShadowDOM 要素です。
ShadowDOM 要素にアクセスするには、青文字部分に対する element に対して shadowRoot を利用することで、赤文字部分が取得できるようです。

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

コードを修正します。

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

ちゃんと「商談」タブがクリックされていました！
image.png

ご了承ください

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

過去の記事

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1