Protractor: ShadowDOMサポートリクエスト

@ first87

これを共有するためのTnx。 見た目も良く、回避策もあります。

これを新しいバージョンの分度器で見たい場合は、 element(by. shadowRoot('#parentElement #innerElement'))ような新しいロケーターでPRを追加できます。

@wswebcreationわかりました、いいですね。 PRを追加します。
しかし、行く前に1つだけ確認したいと思います。このスタイルのセレクター#parentElement::sr #innerElementで、 #parentElementのシャドウツリー内の要素#innerElementを示しても大丈夫ですか？

@ first87

私には良さそうです👍

PRを決めるのは私だけではありません。 あなたのPRもレビューするコアメンバーが最終的に決定します。

それは素晴らしい追加であり、明確なログ記録になると思いますので、それを試してみてください😉

@wswebcreationコミットをプッシュするにはどうすればよいですか？ 貢献するのに十分な許可がないようです。

こんにちは@ first87 、

この文書を見た

@wswebcreationはい、 DEVELOPER.mdを確認しましたが、プッシュするガイドが見つかりませんでした。 これらは私が行ったステップです：

• git clone [email protected]:angular/protractor.git
• cd protractor/
• git remote add upstream https://github.com/angular/protractor.git
• git checkout -b feature/shadow-root-locator master自分のブランチを作成する
• npm install
• いくつかのコミットを行いました
• gulp lintは、コードが正しくフォーマットされているかどうかを確認します
• npm start 、 webdriver-manager start 、 npm testすべてのテストに合格

今、私は次のために何をすべきですか？

こんにちは@ first87 、

• プロジェクトをフォークすることから始めます。
• その後、アカウントに追加されます。
• ローカルマシンにクローンを作成します
• 次に、変更をプッシュして、[PRの作成]ボタンをクリックします。

それはトリックを行う必要があります

@wswebcreationわかりました、ご案内ありがとうございます。

@wswebcreation PR＃4392を作成しました。

@ first87 Tnx !!

これのステータスは何ですか？ by.shadowRoot関数を使用できるようにしたいと思います。

誰かが私がこれを解決するのを手伝ってくれることを願っています： https ：

@ first87e2eテストで新しいロケーターを使用してみました。 Shadowdomの要素を取得できません。

環境：Polymer Webコンポーネントを使用したAngular（v5）アプリケーション。 e2eテストを実行するための分度器。

Angular CLI：1.6.4
ノード：6.10.0
角度：5.2.0
@ angle / cli：1.6.4
タイプスクリプト：2.5.3
以下に、クロムで拡張されたポリマーWebコンポーネントのシャドウルートを示します。 このカスタム要素内にinputtype = "text"が表示されます。

分度器by.css_srを使用してカスタムポリマーコンポーネント内の入力要素にアクセスできません。

var PolymerFirstName = element（by.className（ 'polyFName'））;
var inputElement = PolymerFirstName.element（by.css_sr（ 'input'））; //何も返しません。

「ロケーターを使用している要素が見つかりません：by.css_sr（ "input"）」というエラーで失敗しました。

のようなUIオートメーションタスクを実行できるように、内部の入力要素にアクセスする必要があります。
PolymerFirstName.element（by.css_sr（ 'input'））。clear（）;
PolymerFirstName.element（by.css_sr（ 'input'））。sendKeys（ 'Ritchie'）;

足りないものはありますか？

@msbasanth by.css_srは要素のシャドウルートで要素の検索を開始しないため、 ::sr見逃しました〜各::srの任意の要素のシャドウDOMツリーを掘り下げます
したがって、入力要素ファインダーを次のように置き換える必要があります。

var inputElement = polymerFirstName.element(by.css_sr('::sr input'));

ありがとう@ first87それは魅力のように働いた。
このシャドウDOMサポートが分度器ですぐに利用できるようになることを願っています。

これはうまくいきます！ ありがとう！ 特にネストされたシャドウドームがある場合は、要素を見つけるのが非常に難しくなります:(コンソールでロケーターをテストできないためです。ありがとうございます。

@firstorありがとうございました！ うまくいけば、これはすぐに統合されることができます...。

しかし、私はこれについてあなたからいくつかの援助を得ることを望んでいました。 必要に応じて:: srを使用して正しい値を取得できますが、 title.getText()すると、「誤った」値を取得しているように見えます。 オブジェクトとして入ってくるようです。 以下の出力を参照してください。

['Title']は 'Title'であると予想されます。

そのオブジェクト/配列から文字列を取得することに成功していません。何かアイデアがあるかどうか疑問に思っていましたか？

回避策を再度ありがとう！

編集：無視!! これを参照し、 https：//stackoverflow.com/questions/29478905/protractor-element-gettext-returns-an-object-and-not-stringというトリックを実行しました

こんにちは@ firstor / @msbasanth 、シャドウルートDOMに存在する要素を取得できません。 上記のコードを.tsファイルにコピーしましたが、行番号でコンパイルエラーが発生しました。 6：
コード：shadowDomInUse =（document.head.createShadowRoot......。
エラー：プロパティ 'createShadowRoot'はタイプ 'HTMLHeadElement'に存在しません。

アプリケーション：Angular v7
NodeJS：6.9.0
タイプスクリプト：2.3.3
分度器：5.3.2

メソッドを使用してshadow-root内の入力ボックスにテキストを入力する方法について詳しく教えてください。
ありがとう！

@firstor
これをありがとう。 このように使おうとしています。
var searchBar = element（by.css_sr（ ':: sr input'））;
var searchButton = element（by.css_sr（ ':: sr i'））;

以下のエラーが発生しています
[11:36:06] E / launcher-TypeError：無効なロケーター

私は何が間違っているのですか？
どんな助けでも大歓迎です。 前もって感謝します。

@firstorねえ、回避策をありがとう）
ただし、Protractorマスターブランチにマージされない限り、チームで完全に使用することはできません（リモートノードでProtractorを使用しているため、テストの実行時にライブラリが常にプルされます）。

https://github.com/angular/protractor/pull/4786のマージに関する進捗状況はあり

これに関する更新はありますか？

すべてのアップデート？ これは、最近の多くの仕様のブロッカーです（

こんにちは@firstor 、

アプリケーション：Angular 8
NodeJS：12.13.1
タイプスクリプト：3.5.3
分度器：5.4.0

回避策をありがとうございます。

ShadowRootに要素を見つけようとします。 フロントエンドアーキテクチャには、3つの深度レベルがあります

• 第1レベル：マイクロフロントエンドアプリケーション
• 第2レベル：マイクロフロントエンドコンポーネント
• 第3レベル：角度のあるマテリアルコンポーネント

最初と2番目のshadowRootレベルにはアクセスできますが、最後のレベルにはアクセスできません。

コードソースの抜粋：

    await expect(element(by.tagName('page-affaire')).isDisplayed());
    await browser.driver.sleep(3000);
    console.log('Page affaire chargée');
    var el1 = element(by.tagName('page-affaire'));

    var el2 = el1.element(by.css_sr('::sr rac-card'));
    console.log('rac-card found');

    var el3 = el1.element(by.css_sr('::sr rac-option'));
    console.log('rac-option found');

    var el4 = el1.element(by.css_sr('::sr mat-select')); 
    console.log('rac-card select');

結果ログ：

Jasmine` started
Page affaire chargée
rac-card found
rac-option found
rac-card select
Sélection du type de demande

  créer Affaire
    × Select type demande
      - NoSuchElementError: No element found using locator: by.css_sr("::sr mat-select")

他のソリューションを試してみます（ https://stackoverflow.com/questions/57979981/how-to-check-in-protractor-javescript-in-shadow-dom-if-the-button-is-enabled-o ）。 同じ問題があります：

await browser.executeScript("return document.querySelector(\"page-affaire\");").then(function () {
      console.log('page affaire found');
      // browser.sleep(5000);
    });
    await browser.executeScript("return document.querySelector(\"page-affaire\").shadowRoot.querySelector(\"rac-card\");").then(function () {
      console.log('rac card found');
      // browser.sleep(5000);
    });
    await browser.executeScript("return document.querySelector(\"page-affaire\").shadowRoot.querySelector(\"rac-card\").shadowRoot.querySelector(\"rac-option\");").then(function () {
      console.log('rac option found');
      // browser.sleep(5000);
    });
    await browser.executeScript("return document.querySelector(\"page-affaire\").shadowRoot.querySelector(\"rac-card\").shadowRoot.querySelector(\"rac-option\").shadowRoot.querySelector(\"mat-select\").click();").then(function () {
      console.log('Type de Demande cliqué');
      browser.sleep(5000);
    });

結果 ：

Jasmine started
Page affaire chargée
rac-card found
rac-option found
rac-card select
Sélection du type de demande

  créer Affaire
    × Select type demande
      - NoSuchElementError: No element found using locator: by.css_sr("::sr mat-select")

shadowRoot深度制限アクセスに関する制限はありますか？

よろしくお願いします。

V1nc3kr0

こんにちは@firstor 、

アプリケーション：Angular 8
NodeJS：12.13.1
タイプスクリプト：3.5.3
分度器：5.4.0

回避策をありがとうございます。

ShadowRootに要素を見つけようとします。 フロントエンドアーキテクチャには、3つの深度レベルがあります

• 第1レベル：マイクロフロントエンドアプリケーション
• 第2レベル：マイクロフロントエンドコンポーネント
• 第3レベル：角度のあるマテリアルコンポーネント

最初と2番目のshadowRootレベルにはアクセスできますが、最後のレベルにはアクセスできません。

コードソースの抜粋：

    await expect(element(by.tagName('page-affaire')).isDisplayed());
    await browser.driver.sleep(3000);
    console.log('Page affaire chargée');
    var el1 = element(by.tagName('page-affaire'));

    var el2 = el1.element(by.css_sr('::sr rac-card'));
    console.log('rac-card found');

    var el3 = el1.element(by.css_sr('::sr rac-option'));
    console.log('rac-option found');

    var el4 = el1.element(by.css_sr('::sr mat-select')); 
    console.log('rac-card select');

結果ログ：

Jasmine` started
Page affaire chargée
rac-card found
rac-option found
rac-card select
Sélection du type de demande

  créer Affaire
    × Select type demande
      - NoSuchElementError: No element found using locator: by.css_sr("::sr mat-select")

他のソリューションを試してみます（ https://stackoverflow.com/questions/57979981/how-to-check-in-protractor-javescript-in-shadow-dom-if-the-button-is-enabled-o ）。 同じ問題があります：

await browser.executeScript("return document.querySelector(\"page-affaire\");").then(function () {
      console.log('page affaire found');
      // browser.sleep(5000);
    });
    await browser.executeScript("return document.querySelector(\"page-affaire\").shadowRoot.querySelector(\"rac-card\");").then(function () {
      console.log('rac card found');
      // browser.sleep(5000);
    });
    await browser.executeScript("return document.querySelector(\"page-affaire\").shadowRoot.querySelector(\"rac-card\").shadowRoot.querySelector(\"rac-option\");").then(function () {
      console.log('rac option found');
      // browser.sleep(5000);
    });
    await browser.executeScript("return document.querySelector(\"page-affaire\").shadowRoot.querySelector(\"rac-card\").shadowRoot.querySelector(\"rac-option\").shadowRoot.querySelector(\"mat-select\").click();").then(function () {
      console.log('Type de Demande cliqué');
      browser.sleep(5000);
    });

結果 ：

Jasmine started
Page affaire chargée
rac-card found
rac-option found
rac-card select
Sélection du type de demande

  créer Affaire
    × Select type demande
      - NoSuchElementError: No element found using locator: by.css_sr("::sr mat-select")

shadowRoot深度制限アクセスに関する制限はありますか？

よろしくお願いします。

V1nc3kr0

次のように試してみてください
var el4 = el3 .element（by.css_sr（ ':: sr mat-select'））;

@firstor
私のWebアプリケーションは、10レベルのシャドウルートを持つPolymer.jsを使用しています。

個々のシャドウルートをトラバースする代わりに、トップノードから最後のシャドウルート要素を呼び出すことは可能ですか？
ご協力ありがとうございました。

こんにちはみんな、
私は分度器を初めて使用します。このロケータースクリプト（shadowDOM）を分度器に含める方法についてサポートが必要です。
ポリマーWebコンポーネント、分度器バージョン：5.4.2、ノードv12.13でUIテストを行っています。

誰かがそのスクリプトをどこに含めるか教えてもらえますか？ @ firstor 、@ alagappan-qa

前もって感謝します。

@rugaba
onPrepare（）メソッドの下のConfiguration.jsファイルにスクリプトを含めます。

thx @ alagappan-qa、うまくいきました!!

こんにちは、

このスクリプトを別のjsファイルに含めて、protractor.confファイルにインポートし、onPrepare（）メソッドに含めることは可能ですか。 もしそうなら、どのようにそれを行いますか？

ありがとう、
ラクシュミ

誰かが今これを必要としている場合は、 https： //github.com/angular/protractor/pull/4786#issuecomment-607204672およびhttps://github.com/angular/protractor/pull/4786#issuecomment-607224145を参照してください。

https://github.com/angular/protractor/pull/4786.patchまたはhttps://github.com/angular/protractor/pull/4786.diffを使用することもでき

こんにちは、

このスクリプトを別のjsファイルに含めて、protractor.confファイルにインポートし、onPrepare（）メソッドに含めることは可能ですか。 もしそうなら、どのようにそれを行いますか？

ありがとう、
ラクシュミ

@ Lakhs02
このロケーターを他のファイルで次のように宣言します

exports.addShadowRootLocator = function () {
    by.addLocator('css_sr', function (
.
.
.
    return matches;
    });
};

次に、onPrepare（）メソッドで

onPrepare: function () {
        // register the shadow root locator, to use it globally
        require('./path/to/file').addShadowRootLocator();
}

>>

@firstor
私のWebアプリケーションは、10レベルのシャドウルートを持つPolymer.jsを使用しています。

個々のシャドウルートをトラバースする代わりに、トップノードから最後のシャドウルート要素を呼び出すことは可能ですか？
ご協力ありがとうございました。

@firstorプロフィールで、
これは私の例です。強調表示されたdiv要素にアクセスする必要があります：div.a-choosen-text：

以下のロケーター（および他の多くのロケーター）を試しましたが、成功しませんでした：
nameOnTheProjectTab = element（by.css_sr（ 'app-dumbledore :: sr lit-route :: sr app-dashboard :: sr app- project：nth-​​child （1）:: sr appkit-panel :: sr app-assignee- dropdown :: sr appkit-dropdown :: sr div.a-choosen-text '））;

驚いたことに、app-projectのロケーターは正常に機能しますが、深く掘り下げてみると、何をしようとしても機能しません。
正常に動作します：static projectTab = element（by.css_sr（ 'app-dumbledore :: sr lit-route :: sr app-dashboard :: sr app- project：nth-​​child （1）'））;

私が何を間違っているのか分かりますか？
前もって感謝します、
マグダ

>>

@firstor
私のWebアプリケーションは、10レベルのシャドウルートを持つPolymer.jsを使用しています。

個々のシャドウルートをトラバースする代わりに、トップノードから最後のシャドウルート要素を呼び出すことは可能ですか？
ご協力ありがとうございました。

@firstorプロフィールで、
これは私の例です。強調表示されたdiv要素にアクセスする必要があります：div.a-choosen-text：

以下のロケーター（および他の多くのロケーター）を試しましたが、成功しませんでした：
nameOnTheProjectTab = element（by.css_sr（ 'app-dumbledore :: sr lit-route :: sr app-dashboard :: sr app- project：nth-​​child （1）:: sr appkit-panel :: sr app-assignee- dropdown :: sr appkit-dropdown :: sr div.a-choosen-text '））;

驚いたことに、app-projectのロケーターは正常に機能しますが、深く掘り下げてみると、何をしようとしても機能しません。
正常に動作します：static projectTab = element（by.css_sr（ 'app-dumbledore :: sr lit-route :: sr app-dashboard :: sr app- project：nth-​​child （1）'））;

私が何を間違っているのか分かりますか？
前もって感謝します、
マグダ

こんにちはマグダ、
あなたの場合、WebElement appkit-panelの下のシャドウルートは、要素を見つけるために展開されていません。
ただし、nameOnTheProjectTab要素では展開されているため、この問題が発生します。
以下の要素ロケーターを試してみてください。
nameOnTheProjectTab = element（by.css_sr（ 'app-dumbledore :: sr lit-route :: sr app-dashboard :: sr app- project：nth-​​child （1）:: sr app-assignee-dropdown :: sr appkit- dropdown :: sr div.a-choosen-text '））;

OMG、私は今それを手に入れました、そして私は必要なすべてのロケーターを見つけることができます！
助けてくれてありがとう！
よろしくお願いします、
マグダ

投稿者：alagappan-QA [email protected]
送信：2020年7月4日土曜日4:34 AM
宛先：angular / protractor [email protected]
Cc：Bartkowiak-Jowsa、Magdalena [email protected] ; コメント[email protected]
件名：Re：[angular / protractor] ShadowDOMサポートリクエスト（＃4367）

@firstor https://github.com/firstor
私のWebアプリケーションは、10レベルのシャドウルートを持つPolymer.jsを使用しています。
[送信者によって画像が削除されました。 RJvlf] https://user-images.githubusercontent.com/57852329/72205775-de7d6300-34ac-11ea-93f7-37917052ce90.png
個々のシャドウルートをトラバースする代わりに、トップノードから最後のシャドウルート要素を呼び出すことは可能ですか？
ご協力ありがとうございました。

@firstor https://github.com/firstorプロフィールで、ShadowDOMの使用経験があることがわかります。 親切にして、ネストされたシャドウDOMにアクセスする方法の例を教えてください。 私は今2週間苦労していますが、まだいくつかの要素にアクセスできません。
これは私の例です。強調表示されたdiv要素にアクセスする必要があります：div.a-choosen-text：
[送信者によって画像が削除されました。 画像] https://user-images.githubusercontent.com/50359393/86498151-c532e080-bd84-11ea-867c-337085b96087.png

以下のロケーター（および他の多くのロケーター）を試しましたが、成功しませんでした：
nameOnTheProjectTab = element（by.css_sr（ 'app-dumbledore :: sr lit-route :: sr app-dashboard :: sr app- project：nth-​​child （1）:: sr appkit-panel :: sr app-assignee- dropdown :: sr appkit-dropdown :: sr div.a-choosen-text '））;

驚いたことに、app-projectのロケーターは正常に機能しますが、深く掘り下げてみると、何をしようとしても機能しません。
正常に動作します：static projectTab = element（by.css_sr（ 'app-dumbledore :: sr lit-route :: sr app-dashboard :: sr app- project：nth-​​child （1）'））;

私が何を間違っているのか分かりますか？
前もって感謝します、
マグダ

こんにちはマグダ、
あなたの場合、WebElement appkit-panelの下のシャドウルートは、要素を見つけるために展開されていません。
ただし、nameOnTheProjectTab要素では展開されているため、この問題が発生します。
以下の要素ロケーターを試してみてください。
nameOnTheProjectTab = element（by.css_sr（ 'app-dumbledore :: sr lit-route :: sr app-dashboard :: sr app- project：nth-​​child （1）:: sr app-assignee-dropdown :: sr appkit- dropdown :: sr div.a-choosen-text '））;

—
コメントしたのでこれを受け取っています。
このメールに直接返信するか、GitHub https://github.com/angular/protractor/issues/4367#issuecomment-653710546で表示するか、 https：//github.com/notifications/unsubscribe-auth/AMAGYYOPZMDJCRSHT5XI45TRZ2ILDANCNFSM4DR44ABQの登録を解除して

キャップジェミニポルスカSp。 z oo、
ul。 ŻwirkiiWigury16a02-092ワルシャワ、
S？d Rejonowy dla M.ST. ワルシャワ、XII Wydzia？ Gospodarczy Rejestrowy、nr KRS：0000040605、
NIP：526-11-84-467、
ウィソコ？ kapita？u zak？adowego：16.403.320,00 z？。
このメッセージには、特権または機密情報が含まれている可能性があり、CapgeminiGroupの所有物です。 それはそれが宛てられた人だけを対象としています。 あなたが意図された受信者でない場合、あなたはこのメッセージまたはその一部を読んだり、印刷したり、保持したり、コピーしたり、広めたり、配布したり、使用したりすることを許可されていません。 このメッセージを誤って受信した場合は、すぐに送信者に通知し、このメッセージのすべてのコピーを削除してください。

みなさん、シャドウルート内のシャドウ要素を任意の深いレベルで見つけるための解決策を見つけました。
ノードモジュール「query-selector-shadow-dom」の助けを借りて、ShadowDOM内のWeb要素を簡単に識別できます。 すべてのシャドウルートをトラバースする必要はありません。
element（by.shadowDomCss（ ''））、シャドウルート内のWeb要素を任意のレベルで指すことができます。

こんにちはアラガパン、
例を挙げてもう少し説明していただけますか。ありがとうございます。

2020年8月19日水曜日午前7時52分アラガパン-アナマライ<
[email protected]>は次のように書いています：

みなさん、こんにちは。シャドウ要素を内部に配置するための解決策を見つけました。
任意の深いレベルでのシャドウルート。
ノードモジュール「query-selector-shadow-dom」の助けを借りて、次のことができます
ShadowDOM内のWeb要素を簡単に識別します。 トラバースする必要はありません
すべてのシャドウルートを介して。
element（by.shadowDomCss（ ''））を使用して、内部のWeb要素を指すことができます
任意のレベルのシャドウルート。

—
コメントしたのでこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/angular/protractor/issues/4367#issuecomment-676304234 、
または購読を解除する
https://github.com/notifications/unsubscribe-auth/AK2OQDTZK2ZVJTICP3VGS3DSBPDJVANCNFSM4DR44ABQ
。

こんにちはアラガパン、例を挙げてもう少し説明していただけますか。ありがとうございます。
…
2020年8月19日水曜日7:52 AM alagappan-annamalai < @ 。 * >書き込み：Hey Everyone、シャドウルート内のシャドウ要素を任意の深いレベルで見つけるための解決策を見つけました。 ノードモジュール「query-selector-shadow-dom」の助けを借りて、ShadowDOM内のWeb要素を簡単に識別できます。 すべてのシャドウルートをトラバースする必要はありません。 element（by.shadowDomCss（ ''））を使用すると、シャドウルート内の任意のレベルのWeb要素を指すことができます。 —コメントしたので、これを受け取っています。 このメールに直接返信するか、GitHub < ＃4367（コメント） >で表示するか、 https：//github.com/notifications/unsubscribe-auth/AK2OQDTZK2ZVJTICP3VGS3DSBPDJVANCNFSM4DR44ABQの登録を解除して

上のスクリーンショットでは、id = containerのタグpaper-input-containerが6+シャドウルートレイヤーにあります。 このwebElementを取得するには、element（by.shadowDomCss（ 'paper-input＃textbox paper-input-container＃container'））;を使用できます。 この短い要素識別子はWebElementに作用します。

こんにちは@ firstor / @msbasanth 、シャドウルートDOMに存在する要素を取得できません。 上記のコードを.tsファイルにコピーしましたが、行番号でコンパイルエラーが発生しました。 6：
コード：shadowDomInUse =（document.head.createShadowRoot......。
エラー：プロパティ 'createShadowRoot'はタイプ 'HTMLHeadElement'に存在しません。

また、このエラーが発生しました。createShadowRoot（）メソッドが廃止され、attachShadow（）が廃止されたため、解決策はcreateShadowRootをattachShadowに置き換えることです。 参考資料を参照してください：
https://developer.mozilla.org/en-US/docs/Web/API/Element/createShadowRoot

ちなみに@firstor 、この貢献に感謝します！ これまでのところうまく機能しています。 by.deepCssをProtractorとAngular 10で動作させるために多くの時間を無駄にしました。最近、Angular 10コンポーネントでネイティブshadowDomカプセル化を使い始めました。 encapsulation: ViewEncapsulation.ShadowDomは大好きですが、満足していませんでした。 e2eテスト中にネストされたshadowDom要素にアクセスできませんでした。 ありがたいことに、私はこのコードを見つけました！

@ Rob4226
パッケージhttps://www.npmjs.com/package/query-selector-shadow-domを調べて

有望に見えます。

@msbasanth @ Rob4226分度器はChromeダウンロードページの「ダウンロード」というテキストにアクセスしようとしています。
私のコード：

var x = await element.element（by.css_sr（ 'h1'））。getText（）;も試しました。 動作しません。
以下のエラーメッセージが表示されます。

このおかげであなたの応答に感謝します！

私はそれを修正しました。ネストされたシャドウルート要素ごとに個別の要素変数を作成する必要があります。

@firstorこのコードに感謝します。 どうもありがとう👍

こんにちは私は現在、shadowdomを選択するためのtrです。 回避策を使用すると、次のエラーが発生します。

Logg: { StaleElementReferenceError: stale element reference: stale element not found (Session info: chrome=87.0.4280.66)

使用法：
const parent = element(by.css_sr('my-wrapper > div > div::sr my-data')); const domElement = parent.element(by.css('my-checkbox input')); console.log('Displayed', await domElement.isDisplayed());

<my-data> <my-checkbox> <input> <my-checkbox> </my-data> .....
私は何が間違っているのですか？

こんにちは私は現在、shadowdomを選択するためのtrです。 回避策を使用すると、次のエラーが発生します。

Logg: { StaleElementReferenceError: stale element reference: stale element not found (Session info: chrome=87.0.4280.66)

使用法：
const parent = element(by.css_sr('my-wrapper > div > div::sr my-data')); const domElement = parent.element(by.css('my-checkbox input')); console.log('Displayed', await domElement.isDisplayed());

<my-data> <my-checkbox> <input> <my-checkbox> </my-data> .....
私は何が間違っているのですか？

こんにちは@ wasoek 、Chromeデベロッパーツールを提供できますか>シャドウルートからこの要素の要素を検査します。 これで、この問題の詳細がわかります。

こんにちは、

これは、以下の2つの方法のいずれかを使用して処理できます。

element1 = element.all（by.css_shadowroot（ 'downloads-manager :: sr div'））。get（1）とします。

element2 = element1.element（by.css_shadowroot（ ':: sr downloads-item :: sr div :: sr downloads-item'））。getText（）;とします。
また

browser.element（by.css_shadowroot（ 'downloads-manager :: sr div [id =” mainContainer”] :: sr downloads-item :: sr div :: sr downloads-item'））。getText（）;
[ここでは、n番目の子の代わりにIDを使用しているため、要素に焦点が当てられます]

ありがとう、
アラガパンA

投稿者：shopmujahid [email protected]
送信日：2020年12月3日木曜日9:20 AM
宛先：angular / protractor [email protected]
Cc：Alagappan Annamalai [email protected] ; コメント[email protected]
件名：Re：[angular / protractor] ShadowDOMサポートリクエスト（＃4367）

shadow dom（強調表示）の2番目のdiv要素の下にある要素にアクセスしようとしていますが、常に次のメッセージで最初のdiv要素を取得しています：

要素付き-ロケーターに複数の要素が見つかりましたby.css_shadowroot（ "downloads-manager :: sr div"）-最初の結果が使用されます

以下は私のxpathです：
browser.element（by.css_shadowroot（ 'downloads-manager :: sr div：nth-​​child （1）:: sr downloads-item :: sr div :: sr downloads-item'））。getText（）;

誰かが私をこれについて案内してもらえますか？ 前もって感謝します

[画像] https://user-images.githubusercontent.com/58770415/100961235-336c0280-34df-11eb-9618-1f24ffcd62a0.png

—
コメントしたのでこれを受け取っています。
このメールに直接返信するか、GitHub https://github.com/angular/protractor/issues/4367#issuecomment-737647758で表示するか、 https：//github.com/notifications/unsubscribe-auth/AORWPO6XNK7RUWPVHCWKBCTSS4DH5ANCNFSM4DR44ABQの登録を解除して

私の場合、shadow dom内のdiv要素の1つにアクセスしようとしていますが、nth-child（）とtype-of（）の両方が機能していません。
誰かが以前にこの問題に直面しましたか？

以下はDOM構造と私のxpathです

await browser.element（by.css_shadowroot（ 'd2l-navigation :: sr d2l-navigation-main- header：nth-​​type-of （3）'））

要素が見つからないというエラーが表示されません。

助けていただければ幸いです。よろしくお願いします。

こんにちは、

シャドウルートの外側にあるため、要素ロケーターの:: srを削除してみてください。
これらの2つの要素ロケーターのいずれかを使用して、機能しているかどうかを確認します。

await browser.element（by.css_shadowroot（ 'd2l-navigation d2l-navigation-main- header：nth-​​type-of （3）'））
また

await browser.element（by.css_shadowroot（ 'd2l-navigation d2l-navigation-main-headerdiv。d2l-navigation-header-right'））

ありがとう、

アラガパンA
投稿者：shopmujahid [email protected]
送信日：2020年12月9日水曜日12:09 PM
宛先：angular / protractor [email protected]
Cc：Alagappan Annamalai [email protected] ; コメント[email protected]
件名：Re：[angular / protractor] ShadowDOMサポートリクエスト（＃4367）

私の場合、shadow dom内のdiv要素の1つにアクセスしようとしていますが、nth-child（）とtype-of（）の両方が機能していません。
誰かが以前にこの問題に直面しましたか？

以下はDOM構造と私のxpathです
[2134234] https://user-images.githubusercontent.com/58770415/101593797-cc9e8b80-39ad-11eb-8fd0-a7cd7541773f.jpg

await browser.element（by.css_shadowroot（ 'd2l-navigation :: sr d2l-navigation-main- header：nth-​​type-of （3）'））

要素が見つからないというエラーが表示されません。

助けていただければ幸いです。よろしくお願いします。

—
コメントしたのでこれを受け取っています。
このメールに直接返信するか、GitHub https://github.com/angular/protractor/issues/4367#issuecomment-741567009で表示するか、 https：//github.com/notifications/unsubscribe-auth/AORWPO7CSSI7P5GH37O74R3ST4LO5ANCNFSM4DR44ABQの登録を解除して

ありがとう@ alagappan-annamalai！ 👍2番目の解決策は:: srを削除し、tagname.classnameを追加することで機能しましたが、以下の子要素にアクセスできないという別の奇妙な問題が発生しました：

上記の強調表示された要素にアクセスする必要があります

以下の両方のxpathで試してみました：
browser.element（by.css_sr（ 'd2l-navigation d2l-navigation-main-header div.d2l-navigation-header-right div d2l-dropdown d2l-dropdown-content div div div div ul：nth-​​child（2）' ））

と

browser.element（by.css_sr（ 'd2l-navigation d2l-navigation-main-header div.d2l-navigation-header-right div d2l-dropdown d2l-dropdown-content div div div div ul li._（liクラス名にカーソルを合わせると、テキストが追加されます）

要素が見つからないというエラーが表示されません。
前もって感謝します。

ありがとう@ alagappan-annamalai！ 👍2番目の解決策は:: srを削除し、tagname.classnameを追加することで機能しましたが、以下の子要素にアクセスできないという別の奇妙な問題が発生しました：

上記の強調表示された要素にアクセスする必要があります

以下の両方のxpathで試してみました：
browser.element（by.css_sr（ 'd2l-navigation d2l-navigation-main-header div.d2l-navigation-header-right div d2l-dropdown d2l-dropdown-content div div div div ul：nth-​​child（2）' ））

と

browser.element（by.css_sr（ 'd2l-navigation d2l-navigation-main-header div.d2l-navigation-header-right div d2l-dropdown d2l-dropdown-content div div div div ul li.__ '）） （liクラス名にカーソルを合わせると、テキストが追加されます）

要素が見つからないというエラーが表示されません。
前もって感謝します。

これは、css_srを使用せずに、HTMLWeb要素をほとんど提供せずに簡単に処理できます。
browser.element.all（by.css（ 'd2l-navigation d2l-navigation-main-header ul [class = "d2l-datalist vui-list"] li'））。get（1）;

ブラボー、チャームのように働いてくれてありがとう@ alagappan-annamalai！ ⁇