salesforce の Lightning web component のノードを javascript で参照したい

実現したいこと

Salesforce の Flexipage から要素を取得したいです。

Salesforce に UI テストツールを導入しようと思っています。
テストツール内で javascript も使用できるので、細かい検証は javascript を用いて検証することを検討したいと考えています。

例えば、下記のような取引先のFlexipage があったとして、取引先の「取引先_テスト」という値を取得したいです。

前提

HTMLについて

上記の部分は下記のようなHTMLになっています。
（表現が正しくないかもしれませんが）Lightning web component はバーチャルDOM を使用しているため、静的な要素ではありません。
lightning-formatted-text タグのinnerText を取得したいです。

対象部分のみ抜粋していますが、body タグから、lightning-formatted-textタグまでのノードの深さは約 40 階層程です。

HTML
1  <flexipage-field data-field-id="RecordNameField2" lwc-6tp3buk1ht8-host="">
2    <slot lwc-6tp3buk1ht8="">
3        <record_flexipage-record-field class="slds-grid slds-col slds-has-flexi-truncate" role="listitem" lwc-618vdk5svck-host="">
4            <div lwc-618vdk5svck="" class="slds-grid slds-size_1-of-1 label-inline" data-target-selection-name="sfdc:RecordField.Account.Name">
5                <!---->
6                <div lwc-618vdk5svck="" class="slds-form-element slds-hint-parent test-id__output-root slds-form-element_edit slds-form-element_readonly slds-form-element_horizontal">
7                    <dd lwc-618vdk5svck="">
8                        <div lwc-618vdk5svck="" class="slds-form-element__control">
9                            <span lwc-618vdk5svck="" class="test-id__field-value slds-form-element__static slds-grow word-break-ie11">
10                                <slot lwc-618vdk5svck="" name="output">
11                                <lightning-formatted-text data-output-element-id="output-field" slot="output" lwc-f6gbo863ml-host="">
12                                    取引先_テスト  <!-- この要素を取りたい  -->
13                                </lightning-formatted-text>
14                                </slot>
15                            </span>
16                        </div>
17                    </dd>
18                </div>
19                <!---->
20            </div>
21        </record_flexipage-record-field>
22    </slot>
23  </flexipage-field>

問題

上記、HTMLから、該当の要素を取得する際に下記のようなスクリプトを作りました。
開発者メニューのコンソールから実施しましたが、取得できませんでした。

js
1console.log(document.querySelector("flexipage-column2:nth-child(1) > div > slot > flexipage-field:nth-child(1) > slot > record_flexipage-record-field > div > div > dd > div > span > slot:nth-child(1) > lightning-formatted-text"))
2
3// Null

試したこと

下記のように、それぞれ単体のタグを取れるか検証しましたが取れませんでした。

js
1// 一番下のノードを直接指定
2console.log(document.querySelector("lightning-formatted-text"))

js
1// 一番上のノードを直接指定
2console.log(document.querySelector("flexipage-field"))

参考までに、対象のノードより浅いノード（12 階層）を querySelector で取得してみたところ要素を取得できました。

もしかして querySelector の場合深いノードを取れないのかもしれないと思い、調べてみたのですが情報が見つけられず…
Xpath の取得も試してみたのですが、取れませんでした。

補足情報（FW/ツールのバージョンなど）

UI テストツールは、「mabl」を使用しています。
「Selenium」からテスト移行できる機能もあるようですので、もしかしたら、selenium の解決方法も使えるかもしれません。

Lhankor_Mhy

2025/04/03 00:56 編集

そのページを見れないので何とも言えませんが、一般にはシャドウDOMの中身をquerySelectorで取得することはできないのではないでしょうか。シャドウルートを経由する必要があるかと。 https://qiita.com/emurin/items/eae49bfcec355a115e26 https://www.npmjs.com/package/query-selector-shadow-dom