Protractor: ShadowDOM-Supportanfrage

@first87

Tnx für das Teilen. Es sieht gut aus und es ist ein netter Workaround.

Wenn Sie dies in einer neueren Version von Protractor sehen möchten, können Sie einen PR mit einem neuen Locator wie element(by. shadowRoot('#parentElement #innerElement')) hinzufügen

@wswebcreation Ok, gut. Ich werde eine PR hinzufügen.
Aber ich möchte nur eines sicherstellen, bevor Sie loslegen: Sind Sie mit diesem Selektorstil #parentElement::sr #innerElement , um das Element #innerElement innerhalb des Schattenbaums von #parentElement anzuzeigen?

@first87

Sieht gut aus für mich 👍

Ich bin nur nicht der (einzige) der über die PR's entscheidet. Am Ende entscheiden die Kernmitglieder, die auch Ihre PR überprüfen.

Ich denke, es wird eine tolle Ergänzung und eine übersichtliche Protokollierung, also mach es

@wswebcreation Wie kann ich meine Commits pushen? Anscheinend habe ich nicht genug Berechtigung, um Beiträge zu leisten.

Hallo @first87 ,

Haben Sie dieses Dokument gesehen. Es enthält alle Schritte, die Sie ausführen müssen.

@wswebcreation Ja, ich habe DEVELOPER.md überprüft und keine Anleitung zum Pushen gefunden. Dies sind Schritte, die ich gegangen bin:

• 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 um meinen eigenen Zweig zu erstellen
• npm install
• mehrere Commits gemacht
• gulp lint zu überprüfen, ob der Code richtig formatiert ist
• npm start , webdriver-manager start , npm test um alle Tests zu bestehen

Was soll ich nun als nächstes tun?

Hallo @first87 ,

• Sie beginnen mit dem Forken des Projekts.
• Dann wird es Ihrem Konto hinzugefügt.
• Machen Sie einen Klon auf Ihrem lokalen Computer
• Drücken Sie dann Ihre Änderungen und klicken Sie auf den "Create PR"-Button.

Das sollte reichen

@wswebcreation Ok, danke für die

@wswebcreation Ich habe gerade eine PR #4392 erstellt .

@first87 Tnx!!

Wie ist der Stand dazu? Wir möchten die Funktion by.shadowRoot nutzen können.

Ich hoffe, jemand hilft mir, dieses Problem zu lösen: https://github.com/angular/protractor/pull/4392#issuecomment -359814654

@first87 Ich habe versucht, Ihren neuen Locator in meinen e2e-Tests zu verwenden. Ich kann die Elemente im Schattendom nicht abrufen.

Umgebung: Angular (v5) Anwendung mit Polymer Web Components. Winkelmesser zum Ausführen von e2e-Tests.

Winkel-CLI: 1.6.4
Knoten: 6.10.0
Winkel: 5.2.0
@angular/cli: 1.6.4
Typoskript: 2.5.3
Unten ist meine Polymer-Webkomponenten-Schattenwurzel in Chrom erweitert. In diesem benutzerdefinierten Element können Sie Eingabetyp = "Text" sehen.

Ich kann mit dem Winkelmesser by.css_sr nicht auf das Eingabeelement in der benutzerdefinierten Polymerkomponente zugreifen.

var polymerFirstName = element(by.className('polyFName'));
var inputElement = polymerFirstName.element(by.css_sr('input')); // gibt nichts zurück.

Es schlug fehl mit einem Fehler "Kein Element mit Locator gefunden: by.css_sr("input")".

Ich muss auf das innere Eingabeelement zugreifen, damit ich UI-Automatisierungsaufgaben wie z.
polymerFirstName.element(by.css_sr('input')).clear();
polymerFirstName.element(by.css_sr('input')).sendKeys('Ritchie');

Fehlt mir etwas?

@msbasanth Sie haben ::sr verpasst, da by.css_sr nicht beginnt, Elemente in einer Schattenwurzel des Elements zu finden ~ es wird für jedes ::sr in den Schatten-DOM-Baum jedes Elements graben
Sie sollten also Ihren Eingabeelement-Finder durch Folgendes ersetzen:

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

Danke @first87 es hat wie ein Zauber
Ich hoffe, wir werden diese Schatten-DOM-Unterstützung bald im Winkelmesser erhalten.

Das funktioniert! Danke schön! Es wird jetzt so schwer, Elemente zu finden, besonders wenn es verschachtelte Schattendome gibt :( da wir die Locators in der Konsole nicht testen können. Nochmals vielen Dank!

@firstor Vielen Dank dafür! Hoffentlich kann das bald integriert werden....

Ich hatte jedoch gehofft, diesbezüglich Hilfe von Ihnen zu bekommen. Während ich in der Lage bin, den richtigen Wert mit ::sr nach Bedarf zu erhalten, scheint es, wenn ich title.getText() mache, den "falschen" Wert zu erhalten. Es scheint als Objekt hereinzukommen. Siehe die folgende Ausgabe unten:

Erwartet, dass [ 'Titel' ] 'Titel' ist.

Ich hatte keinen Erfolg darin, die Zeichenfolge von diesem Objekt / Array zu erhalten, und frage mich, ob Sie eine Idee haben?

Danke nochmal für die Abhilfe!!

EDIT: Missachtung!! Darauf verwiesen und es hat den Trick gemacht https://stackoverflow.com/questions/29478905/protractor-element-gettext-returns-an-object-and-not-string. Danke noch einmal!!

Hallo @firstor / @msbasanth , ich kann kein Element im Shadow-Root-DOM
Code: let shadowDomInUse = (document.head.createShadowRoot .......
Fehler: Die Eigenschaft 'createShadowRoot' existiert nicht für den Typ 'HTMLHeadElement' .

Anwendung: Angular v7
NodeJS: 6.9.0
Typoskript: 2.3.3
Winkelmesser: 5.3.2

Können Sie bitte erläutern, wie Sie Ihre Methode verwenden, um Text in das Eingabefeld innerhalb von Shadow-Root einzugeben?
Danke!

@firstor
Danke dafür. Ich versuche es so zu verwenden.
var searchBar = element(by.css_sr('::sr input'));
var searchButton = element(by.css_sr('::sr i'));

Bekomme die folgende Fehlermeldung
[11:36:06] E/launcher - TypeError: Ungültiger Locator

Was mache ich falsch?
Jede Hilfe wird sehr geschätzt. Vielen Dank im Voraus.

@firstor hey, danke für die Problemumgehung)
Wir können es jedoch in unserem Team nicht vollständig verwenden, es sei denn, es wird in den Protractor-Master-Zweig zusammengeführt (wir verwenden Protractor auf Remote-Knoten, damit die Bibliotheken immer abgerufen werden, wenn die Tests ausgeführt werden).

Irgendwelche Fortschritte beim Zusammenführen von https://github.com/angular/protractor/pull/4786 ?

Gibt es hierzu Neuigkeiten?

irgendein Update? Dies ist in letzter Zeit ein Blocker für viele Spezifikationen (

Hallo @firstor ,

Anwendung: Eckig 8
NodeJS: 12.13.1
Typoskript: 3.5.3
Winkelmesser: 5.4.0

Vielen Dank für Ihre Problemumgehung.

Ich versuche, Elemente in ShadowRoot zu finden. In unserer Frontend-Architektur haben wir 3 Tiefenebenen

• Erste Ebene: Mikro-Frontend-Anwendung
• Zweite Ebene: Mikro-Frontend-Komponente
• Dritte Ebene: Winkelmaterialkomponente

Die erste und zweite ShadowRoot-Ebene sind zugänglich, aber nicht die letzte.

Auszug der Codequelle:

    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');

Ergebnisprotokolle:

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")

Wir versuchen es mit einer anderen Lösung ( https://stackoverflow.com/questions/57979981/how-to-check-in-protractor-javescript-in-shadow-dom-if-the-button-is-enabled-o ). Wir haben das gleiche Problem:

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);
    });

Ergebnis :

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")

Gibt es ein Limit für den Zugriff auf die Tiefenbegrenzung von ShadowRoot?

Danke für deine Unterstützung.

V1nc3kr0

Hallo @firstor ,

Anwendung: Eckig 8
NodeJS: 12.13.1
Typoskript: 3.5.3
Winkelmesser: 5.4.0

Vielen Dank für Ihre Problemumgehung.

Ich versuche, Elemente in ShadowRoot zu finden. In unserer Frontend-Architektur haben wir 3 Tiefenebenen

• Erste Ebene: Mikro-Frontend-Anwendung
• Zweite Ebene: Mikro-Frontend-Komponente
• Dritte Ebene: Winkelmaterialkomponente

Die erste und zweite ShadowRoot-Ebene sind zugänglich, aber nicht die letzte.

Auszug der Codequelle:

    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');

Ergebnisprotokolle:

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")

Wir versuchen es mit einer anderen Lösung ( https://stackoverflow.com/questions/57979981/how-to-check-in-protractor-javescript-in-shadow-dom-if-the-button-is-enabled-o ). Wir haben das gleiche Problem:

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);
    });

Ergebnis :

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")

Gibt es ein Limit für den Zugriff auf die Tiefenbegrenzung von ShadowRoot?

Danke für deine Unterstützung.

V1nc3kr0

Probiere es aus wie
var el4 = el3 .element(by.css_sr('::sr mat-select'));

@firstor
Meine Webanwendung verwendet Polymer.js mit 10 Ebenen von Schattenwurzeln.

Ist es möglich, das letzte Shadow-Wurzelelement vom obersten Knoten aufzurufen, anstatt die einzelnen Shadow-Wurzeln zu durchlaufen.
Danke für deine Unterstützung.

Hallo Leute ,
Ich bin neu bei Winkelmesser und ich wünschte, ich könnte Hilfe bekommen, wie man dieses Locator-Skript (shadowDOM) in Winkelmesser einfügt.
Ich mache einige UI-Tests auf Polymer Webcomponent, der Winkelmesser-Version: 5.4.2 und Knoten v12.13.

Kann mir jemand sagen, wo ich dieses Skript einfügen kann? @firstor , @alagappan-qa

Danke im Voraus.

@rugaba
Fügen Sie das Skript in die Datei Configuration.js unter der Methode onPrepare() ein.

thx @ alagappan-qa, es hat funktioniert !!

Hallo,

Ist es möglich, dieses Skript in eine separate js-Datei einzubinden und in die Datei protractor.conf zu importieren und in die Methode onPrepare() einzuschließen. Wenn ja, wie machen wir das?

Danke,
Lakshmi

Wenn das jetzt jemand braucht, siehe https://github.com/angular/protractor/pull/4786#issuecomment -607204672 und https://github.com/angular/protractor/pull/4786#issuecomment -607224145

Sie können auch https://github.com/angular/protractor/pull/4786.patch oder https://github.com/angular/protractor/pull/4786.diff verwenden

Hallo,

Ist es möglich, dieses Skript in eine separate js-Datei einzubinden und in die Datei protractor.conf zu importieren und in die Methode onPrepare() einzuschließen. Wenn ja, wie machen wir das?

Danke,
Lakshmi

@Lakhs02
Deklarieren Sie diesen Locator in einer anderen Datei als

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

Dann in der onPrepare()-Methode

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

>

@firstor
Meine Webanwendung verwendet Polymer.js mit 10 Ebenen von Schattenwurzeln.

Ist es möglich, das letzte Shadow-Wurzelelement vom obersten Knoten aufzurufen, anstatt die einzelnen Shadow-Wurzeln zu durchlaufen.
Danke für deine Unterstützung.

@firstor Ich kann in Ihrem Profil sehen, dass Sie Erfahrung mit Shadow DOM haben. Könnten Sie bitte so freundlich sein und ein Beispiel geben, wie Sie auf verschachteltes Shadow-DOM zugreifen? Ich kämpfe jetzt seit zwei Wochen damit und kann immer noch nicht auf einige Elemente zugreifen:
Dies ist mein Beispiel, ich muss auf das hervorgehobene div-Element zugreifen: div.a-choosen-text:

Ich habe den folgenden Locator (und viele andere) ausprobiert, aber ohne Erfolg:
nameOnTheProjectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project: nth

Überraschend ist, dass der Locator für App-Projekte gut funktioniert, aber wenn ich tiefer gehe, was auch immer ich versuche, es funktioniert nicht.
Funktioniert gut: static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project: nth

Hast du eine Ahnung was ich falsch mache?
Vielen Dank im Voraus,
Magda

>

@firstor
Meine Webanwendung verwendet Polymer.js mit 10 Ebenen von Schattenwurzeln.

Ist es möglich, das letzte Shadow-Wurzelelement vom obersten Knoten aufzurufen, anstatt die einzelnen Shadow-Wurzeln zu durchlaufen.
Danke für deine Unterstützung.

@firstor Ich kann in Ihrem Profil sehen, dass Sie Erfahrung mit Shadow DOM haben. Könnten Sie bitte so freundlich sein und ein Beispiel geben, wie Sie auf verschachteltes Shadow-DOM zugreifen? Ich kämpfe jetzt seit zwei Wochen damit und kann immer noch nicht auf einige Elemente zugreifen:
Dies ist mein Beispiel, ich muss auf das hervorgehobene div-Element zugreifen: div.a-choosen-text:

Ich habe den folgenden Locator (und viele andere) ausprobiert, aber ohne Erfolg:
nameOnTheProjectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project: nth

Überraschend ist, dass der Locator für App-Projekte gut funktioniert, aber wenn ich tiefer gehe, was auch immer ich versuche, es funktioniert nicht.
Funktioniert gut: static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project: nth

Hast du eine Ahnung was ich falsch mache?
Vielen Dank im Voraus,
Magda

Hallo Magda,
In Ihrem Fall wird das Shadow-Root unter dem WebElement-Appkit-Panel nicht erweitert, um Ihr Element herauszufinden.
Aber im nameOnTheProjectTab-Element ist es erweitert, was dieses Problem verursacht.
Probieren Sie den folgenden Element-Locator aus,
nameOnTheProjectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project: nth

OMG, ich habe es jetzt und ich kann alle Locators finden, die ich brauche!
Vielen Dank für die Hilfe!
Mit freundlichen Grüßen,
Magda

Von: alagappan-qa [email protected]
Gesendet: Samstag, 4. Juli 2020 04:34
An: angle/Winkelmesser [email protected]
Cc: Bartkowiak-Jowsa, Magdalena [email protected] ; Kommentar [email protected]
Betreff: Re: [Angular/Winkelmesser] ShadowDOM-Supportanfrage (#4367)

@firstor https://github.com/firstor
Meine Webanwendung verwendet Polymer.js mit 10 Ebenen von Schattenwurzeln.
[Bild vom Absender entfernt. RJvlf] https://user-images.githubusercontent.com/57852329/72205775-de7d6300-34ac-11ea-93f7-37917052ce90.png
Ist es möglich, das letzte Shadow-Wurzelelement vom obersten Knoten aufzurufen, anstatt die einzelnen Shadow-Wurzeln zu durchlaufen.
Danke für deine Unterstützung.

@firstor https://github.com/firstor Ich kann in Ihrem Profil sehen, dass Sie Erfahrung mit Shadow DOM haben. Könnten Sie bitte so freundlich sein und ein Beispiel geben, wie Sie auf verschachteltes Shadow-DOM zugreifen? Ich kämpfe jetzt seit zwei Wochen damit und kann immer noch nicht auf einige Elemente zugreifen:
Dies ist mein Beispiel, ich muss auf das hervorgehobene div-Element zugreifen: div.a-choosen-text:
[Bild vom Absender entfernt. Bild] https://user-images.githubusercontent.com/50359393/86498151-c532e080-bd84-11ea-867c-337085b96087.png

Ich habe den folgenden Locator (und viele andere) ausprobiert, aber ohne Erfolg:
nameOnTheProjectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project: nth

Überraschend ist, dass der Locator für App-Projekte gut funktioniert, aber wenn ich tiefer gehe, was auch immer ich versuche, es funktioniert nicht.
Funktioniert gut: static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project: nth

Hast du eine Ahnung was ich falsch mache?
Vielen Dank im Voraus,
Magda

Hallo Magda,
In Ihrem Fall wird das Shadow-Root unter dem WebElement-Appkit-Panel nicht erweitert, um Ihr Element herauszufinden.
Aber im nameOnTheProjectTab-Element ist es erweitert, was dieses Problem verursacht.
Probieren Sie den folgenden Element-Locator aus,
nameOnTheProjectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project: nth

—
Sie erhalten dies, weil Sie einen Kommentar abgegeben haben.
Antworten Sie direkt auf diese E-Mail, zeigen Sie sie auf GitHub https://github.com/angular/protractor/issues/4367#issuecomment-653710546 an oder melden Sie sich ab https://github.com/notifications/unsubscribe-auth/AMAGYYOPZMDJCRSHT5XI45TRZ2ILDANCNFSM4DR44ABQ .

Capgemini Polska sp. z oo,
ul. Żwirki i Wigury 16a 02-092 Warszawa,
S?d Rejonowy dla M.ST. Warszawy, XII Wydzia? Gospodarczy Rejestrowy, Nr. KRS: 0000040605,
NIP: 526-11-84-467,
Wysoko?? kapita?u zak?adowego: 16.403.320,00 z?.
Diese Nachricht enthält möglicherweise vertrauliche oder vertrauliche Informationen und ist Eigentum der Capgemini-Gruppe. Es ist nur für die Person bestimmt, an die es adressiert ist. Wenn Sie nicht der beabsichtigte Empfänger sind, sind Sie nicht berechtigt, diese Nachricht oder Teile davon zu lesen, zu drucken, aufzubewahren, zu kopieren, zu verbreiten, zu verteilen oder zu verwenden. Wenn Sie diese Nachricht irrtümlicherweise erhalten, benachrichtigen Sie bitte sofort den Absender und löschen Sie alle Kopien dieser Nachricht.

Hallo zusammen, Ich habe eine Lösung gefunden, um die Schattenelemente in der Schattenwurzel auf jeder tiefen Ebene zu lokalisieren.
Mit Hilfe des Node-Moduls "query-selector-shadow-dom" können wir die Web-Elemente im Shadow-DOM einfach identifizieren. Sie müssen nicht alle Shadow-Wurzeln durchlaufen.
Mit element(by.shadowDomCss('')), können wir auf jeder Ebene auf das Web-Element innerhalb der Shadow Root verweisen.

Hallo Alagpan,
Können Sie bitte ein wenig mehr mit einem Beispiel beschreiben. Danke

Am Mi, 19. August 2020 um 7:52 alagappan-annamalai <
[email protected]> schrieb:

Hallo zusammen, Ich habe eine Lösung gefunden, um die Schattenelemente im Inneren zu lokalisieren
Schattenwurzel auf jeder tiefen Ebene.
Mit Hilfe des Knotenmoduls "query-selector-shadow-dom" können wir
Identifizieren Sie die Webelemente im Shadow DOM mit Leichtigkeit. Keine Notwendigkeit zu überqueren
durch alle Schattenwurzeln.
Mit element(by.shadowDomCss('')) können wir auf das Web-Element im Inneren zeigen
die Schattenwurzel auf jeder Ebene.

—
Sie erhalten dies, weil Sie einen Kommentar abgegeben haben.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/angular/protractor/issues/4367#issuecomment-676304234 ,
oder abmelden
https://github.com/notifications/unsubscribe-auth/AK2OQDTZK2ZVJTICP3VGS3DSBPDJVANCNFSM4DR44ABQ
.

Hallo Alagappan, kannst du bitte ein bisschen mehr mit einem Beispiel beschreiben. Danke
…
Am Mi, 19. August 2020 um 7:52 AM alagappan-annamalai < @ . * > schrieb: Hey allerseits, ich habe eine Lösung gefunden, um die Schattenelemente in der Schattenwurzel auf jeder tiefen Ebene zu lokalisieren. Mit Hilfe des Node-Moduls "query-selector-shadow-dom" können wir die Web-Elemente im Shadow-DOM einfach identifizieren. Sie müssen nicht alle Shadow-Wurzeln durchlaufen. Mit element(by.shadowDomCss('')) können wir auf jeder Ebene auf das Web-Element innerhalb des Shadow-Roots zeigen. — Sie erhalten dies, weil Sie einen Kommentar abgegeben haben. Antworten Sie direkt auf diese E-Mail, zeigen Sie sie auf GitHub < #4367 (Kommentar) > an oder https://github.com/notifications/unsubscribe-auth/AK2OQDTZK2ZVJTICP3VGS3DSBPDJVANCNFSM4DR44ABQ .

Im obigen Screenshot befindet sich das Tag paper-input-container mit id=container auf 6+ Shadow Root Layer. Um dieses webElement zu verwenden, können wir element(by.shadowDomCss('paper-input#textbox paper-input-container#container')); Dieser kurze Elementbezeichner wirkt auf das WebElement.

Hallo @firstor / @msbasanth , ich kann kein Element im Shadow-Root-DOM
Code: let shadowDomInUse = (document.head.createShadowRoot .......
Fehler: Die Eigenschaft 'createShadowRoot' existiert nicht für den Typ 'HTMLHeadElement' .

Ich habe auch diesen Fehler und die Lösung besteht darin, createShadowRoot durch attachShadow zu ersetzen, da die Methode createShadowRoot() zugunsten von attachShadow() veraltet ist. Siehe Referenz:
https://developer.mozilla.org/en-US/docs/Web/API/Element/createShadowRoot

Übrigens @firstor , danke für diesen Beitrag! Es hat bisher super funktioniert. Ich verschwendete so viel Zeit mit dem Versuch bekommen by.deepCss mit Winkelmesser und Angular 10. Ich habe vor kurzem mit meinem Angular 10 Komponenten, mit nativen shadowDom Verkapselung begann zu arbeiten encapsulation: ViewEncapsulation.ShadowDom , die ich liebe , aber nicht glücklich war ich konnte während des e2e-Tests nicht auf verschachtelte shadowDom-Elemente zugreifen. Zum Glück habe ich diesen Code gefunden!

@Rob4226
Bitte schauen Sie in das Paket https://www.npmjs.com/package/query-selector-shadow-dom

Sieht vielversprechend aus.

@msbasanth @Rob4226 Ich bin neu bei Winkelmesser, ich versuche auf den Text "Downloads" der Chrome-Downloadseite zuzugreifen
mein Code:

Ich habe auch versucht var x = wait element.element(by.css_sr('h1')).getText(); Es funktioniert nicht.
Ich erhalte folgende Fehlermeldung:

Schätzen Sie Ihre Antwort auf diesen Dank!

Ich habe es behoben, ich muss für jedes verschachtelte Schattenwurzelelement eine separate Elementvariable erstellen.

@firstor Ich schätze diesen Code sehr. vielen dank

Hallo, ich bin gerade dabei, Schattendom auszuwählen. Ich erhalte folgende Fehlermeldung, wenn ich den Workaround verwende:

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

Verwendung:
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> .....
Was mache ich falsch?

Hallo, ich bin gerade dabei, Schattendom auszuwählen. Ich erhalte folgende Fehlermeldung, wenn ich den Workaround verwende:

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

Verwendung:
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> .....
Was mache ich falsch?

Hallo @wasoek , können Sie das Chrome Developer Tool > Inspect Element für dieses Element aus dem Shadow Root bereitstellen. Das wird mehr Details zu diesem Thema geben.

Hallo,

Dies kann mit einer der folgenden 2 Methoden gehandhabt werden:

Sei element1 = element.all(by.css_shadowroot('downloads-manager::sr div')).get(1)

Sei element2 = element1.element(by.css_shadowroot('::sr downloads-item::sr div::sr downloads-item')).getText();
ODER

browser.element(by.css_shadowroot('downloads-manager::sr div[id=”mainContainer”]::sr downloads-item::sr div::sr downloads-item')).getText();
[hier verwenden wir anstelle des n-ten Kindes die ID, damit es sich auf das Element konzentriert]

Danke,
Alagappan A

Von: shopmujahid [email protected]
Gesendet: Donnerstag, 3. Dezember 2020 09:20
An: angle/Winkelmesser [email protected]
Cc: Alagappan Annamalai [email protected] ; Kommentar [email protected]
Betreff: Re: [Angular/Winkelmesser] ShadowDOM-Supportanfrage (#4367)

Ich versuche, auf Elemente unter dem zweiten div-Element von shadow dom (hervorgehoben) zuzugreifen, aber es ruft immer das erste div-Element mit der folgenden Meldung ab:

W/element - mehr als ein Element für locator gefunden by.css_shadowroot("downloads-manager::sr div") - das erste Ergebnis wird verwendet

unten ist mein xpath:
browser.element(by.css_shadowroot('downloads-manager::sr div:nth-child (1)::sr downloads-item::sr div::sr downloads-item')).getText();

könnte mich da jemand anleiten? Vielen Dank im Voraus

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

—
Sie erhalten dies, weil Sie einen Kommentar abgegeben haben.
Antworten Sie direkt auf diese E-Mail, zeigen Sie sie auf GitHub https://github.com/angular/protractor/issues/4367#issuecomment-737647758 an oder melden Sie sich ab https://github.com/notifications/unsubscribe-auth/AORWPO6XNK7RUWPVHCWKBCTSS4DH5ANCNFSM4DR44ABQ .

Ich versuche, auf eines der div-Elemente innerhalb von shadow dom zuzugreifen, sowohl nth-child () als auch type-of () funktionieren in meinem Fall nicht.
hatte jemand dieses Problem schon einmal?

Unten ist die DOM-Struktur und mein xpath

wait browser.element(by.css_shadowroot('d2l-navigation::sr d2l-navigation-main- header: nth

Ich erhalte kein Element gefunden Fehler.

Jede Hilfe wäre sehr dankbar Danke im Voraus.

Hallo,

Versuchen Sie, das ::sr im Element-Locator zu entfernen, da es sich außerhalb des Shadow Root befindet.
Verwenden Sie einen dieser beiden Element-Locators und sehen Sie, ob er funktioniert oder nicht.

wait browser.element(by.css_shadowroot('d2l-navigation d2l-navigation-main- header: nth
ODER

wait browser.element(by.css_shadowroot('d2l-navigation d2l-navigation-main-header div. d2l-navigation-header-right'))

Danke,

Alagappan A
Von: shopmujahid [email protected]
Gesendet: Mittwoch, 9. Dezember 2020 12:09
An: angle/Winkelmesser [email protected]
Cc: Alagappan Annamalai [email protected] ; Kommentar [email protected]
Betreff: Re: [Angular/Winkelmesser] ShadowDOM-Supportanfrage (#4367)

Ich versuche, auf eines der div-Elemente innerhalb von shadow dom zuzugreifen, sowohl nth-child () als auch type-of () funktionieren in meinem Fall nicht.
hatte jemand dieses Problem schon einmal?

Unten ist die DOM-Struktur und mein xpath
[2134234] https://user-images.githubusercontent.com/58770415/101593797-cc9e8b80-39ad-11eb-8fd0-a7cd7541773f.jpg

wait browser.element(by.css_shadowroot('d2l-navigation::sr d2l-navigation-main- header: nth

Ich erhalte kein Element gefunden Fehler.

Jede Hilfe wäre sehr dankbar Danke im Voraus.

—
Sie erhalten dies, weil Sie einen Kommentar abgegeben haben.
Antworten Sie direkt auf diese E-Mail, zeigen Sie sie auf GitHub https://github.com/angular/protractor/issues/4367#issuecomment-741567009 an oder melden Sie sich ab https://github.com/notifications/unsubscribe-auth/AORWPO7CSSI7P5GH37O74R3ST4LO5ANCNFSM4DR44ABQ .

Danke @alagappan-annamalai! 👍 Die zweite Lösung hat für mich funktioniert, indem ich ::sr entfernt und tagname.classname hinzugefügt habe, aber ich bin auf ein anderes seltsames Problem gestoßen, das nicht auf die folgenden untergeordneten Elemente zugreift:

Ich muss auf das oben hervorgehobene Element zugreifen

mit beiden xpaths unten versucht:
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)' ))

und

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._(Der li-Klassenname fügt etwas Text hinzu, wenn wir mit der Maus darüber fahren)

Ich erhalte kein Element gefunden Fehler.
Vielen Dank im Voraus.

Danke @alagappan-annamalai! 👍 Die zweite Lösung hat für mich funktioniert, indem ich ::sr entfernt und tagname.classname hinzugefügt habe, aber ich bin auf ein anderes seltsames Problem gestoßen, das nicht auf die folgenden untergeordneten Elemente zugreift:

Ich muss auf das oben hervorgehobene Element zugreifen

mit beiden xpaths unten versucht:
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)' ))

und

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.__')) (Der li-Klassenname fügt etwas Text hinzu, wenn wir mit der Maus darüber fahren)

Ich erhalte kein Element gefunden Fehler.
Vielen Dank im Voraus.

Dies kann auf einfache Weise selbst ohne css_sr und mit wenigen HTML-Webelementen gehandhabt werden
browser.element.all(by.css('d2l-navigation d2l-navigation-main-header ul[class="d2l-datalist vui-list"] li')).get(1);

Bravo, funktionierte wie ein Zauber Danke @ alagappan-annamalai! Ich