Protractor: Demande de support ShadowDOM

@premier87

Tnx pour le partage. Cela a l'air bien et c'est une bonne solution de contournement.

Si vous souhaitez voir cela dans une version plus récente de Protractor, vous pouvez ajouter un PR avec un nouveau localisateur comme element(by. shadowRoot('#parentElement #innerElement'))

@wswebcreation D'accord, bien. Je vais ajouter un PR.
Mais je veux m'assurer juste une chose avant de partir : êtes-vous d'accord avec ce style de sélecteur #parentElement::sr #innerElement pour indiquer l'élément #innerElement à l'intérieur de l'arbre d'ombre du #parentElement ?

@premier87

Ca m'a l'air bien

Je ne suis seulement pas le (seul) qui décide des PR. Les membres principaux, qui examineront également votre RP, décident à la fin.

Je pense que ce sera un excellent ajout et une journalisation claire, alors allez-y

@wswebcreation Comment puis-je pousser mes commits ? Il semble que je n'ai pas assez d'autorisation pour contribuer.

Salut @first87 ,

Avez-vous vu ce document. Il contient toutes les étapes que vous devez prendre.

@wswebcreation Oui, j'ai vérifié DEVELOPER.md et je n'ai trouvé aucun guide à pousser. Voici les étapes que j'ai suivies :

• 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 pour créer ma propre branche
• npm install
• fait plusieurs commits
• gulp lint pour vérifier si le code est correctement formaté
• npm start , webdriver-manager start , npm test pour réussir tous les tests

Maintenant, que dois-je faire pour la suite ?

Salut @first87 ,

• Vous commencez par bifurquer le projet.
• Ensuite, il sera ajouté à votre compte.
• Faire un clone sur votre machine locale
• Ensuite, appuyez sur vos modifications et cliquez sur le bouton "Créer un PR".

Cela devrait faire l'affaire

@wswebcreation Ok, merci pour le guidage.

@wswebcreation Je viens de créer un PR #4392 .

@ first87 Tnx !!

Quel est le statut à ce sujet ? Nous aimerions pouvoir utiliser la fonction by.shadowRoot.

J'espère que quelqu'un m'aidera à résoudre ce problème : https://github.com/angular/protractor/pull/4392#issuecomment -359814654

@ first87 J'ai essayé d'utiliser votre nouveau localisateur dans mes tests e2e. Je suis incapable d'obtenir les éléments dans le dom de l'ombre.

Environnement : Application angulaire (v5) avec des composants Web en polymère. Rapporteur pour l'exécution des tests e2e.

CLI angulaire : 1.6.4
Nœud : 6.10.0
Angulaire : 5.2.0
@angulaire/cli : 1.6.4
tapuscrit: 2.5.3
Ci-dessous se trouve ma racine d'ombre de composant Web polymère étendue en chrome. Vous pouvez voir input type = "text" à l'intérieur de cet élément personnalisé.

Je ne parviens pas à accéder à l'élément d'entrée dans le composant polymère personnalisé à l'aide du rapporteur by.css_sr.

var polymerFirstName = element(by.className('polyFName'));
var inputElement = polymerFirstName.element(by.css_sr('input')); // ne renvoie rien.

Il a échoué avec une erreur "Aucun élément trouvé à l'aide du localisateur : by.css_sr("input")".

J'ai besoin d'accéder à l'élément d'entrée interne pour pouvoir effectuer des tâches d'automatisation de l'interface utilisateur telles que.
polymerFirstName.element(by.css_sr('input')).clear();
polymerFirstName.element(by.css_sr('input')).sendKeys('Ritchie');

Quelque chose me manque ?

@msbasanth Vous avez manqué ::sr car by.css_sr ne commencera pas à trouver des éléments dans une racine fantôme de l'élément ~ il creusera dans l'arbre DOM fantôme de n'importe quel élément pour chaque ::sr .
Vous devez donc remplacer votre outil de recherche d'éléments d'entrée par ceci :

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

Merci @ first87 cela a fonctionné comme un charme.
J'espère que nous aurons bientôt cette prise en charge du shadow DOM dans le rapporteur.

Cela marche! Merci! Ça va être tellement difficile de localiser des éléments maintenant, surtout s'il y a des doms d'ombre imbriqués :( puisque nous ne pouvons pas tester les localisateurs dans la console. Merci encore !

@firstor Merci beaucoup pour cela ! Espérons que cela puisse être intégré bientôt...

J'espérais obtenir de l'aide de votre part à ce sujet. Bien que je puisse obtenir la valeur correcte en utilisant ::sr au besoin, lorsque je fais title.getText() il semble obtenir la valeur "incorrecte". Il semble entrer comme un objet. Voir la sortie suivante ci-dessous :

On s'attend à ce que [ 'Titre' ] soit 'Titre'.

Je n'ai pas réussi à obtenir la chaîne de cet objet/tableau et je me demandais si vous aviez une idée ?

Merci encore pour la solution de contournement !!

EDIT : Ne pas tenir compte !! Référencé ceci et cela a fait l'affaire https://stackoverflow.com/questions/29478905/protractor-element-gettext-returns-an-object-and-not-string. Merci encore!!

Salut @firstor / @msbasanth , je ne parviens pas à obtenir un élément présent dans le DOM shadow-root. J'ai copié votre code ci-dessus dans un fichier .ts mais j'obtiens une erreur de compilation à la ligne no. 6 :
Code : let shadowDomInUse = (document.head.createShadowRoot .......
Erreur : La propriété 'createShadowRoot' n'existe pas sur le type 'HTMLHeadElement' .

Application : Angulaire v7
NodeJS : 6.9.0
tapuscrit: 2.3.3
rapporteur : 5.3.2

Pouvez-vous s'il vous plaît expliquer comment utiliser votre méthode pour entrer du texte dans la zone de saisie à l'intérieur de shadow-root ?
Merci!

@firstor
Merci pour cela. J'essaye de l'utiliser comme ça.
var searchBar = element(by.css_sr('::sr input'));
var searchButton = element(by.css_sr('::sr i'));

J'obtiens l'erreur ci-dessous
[11:36:06] E/launcher - TypeError : Localisateur non valide

Qu'est-ce que je fais mal?
Toute aide est grandement appréciée. Merci d'avance.

@firstor hé, merci pour la solution de contournement)
Cependant, nous ne pouvons pas l'utiliser pleinement dans notre équipe à moins qu'il ne soit fusionné dans la branche principale de Protractor (nous utilisons Protractor sur des nœuds distants afin que les bibliothèques soient toujours extraites lorsque les tests sont exécutés).

Des progrès sur la fusion du https://github.com/angular/protractor/pull/4786 ?

Une mise à jour pour ceci?

toute mise à jour? c'est un bloqueur pour de nombreuses spécifications ces derniers temps (

Bonjour @firstor ,

Application : Angulaire 8
NodeJS : 12.13.1
tapuscrit: 3.5.3
Rapporteur : 5.4.0

Merci pour votre solution de contournement.

J'essaie de trouver un élément dans ShadowRoot. Dans notre architecture frontend, nous avons 3 niveaux de profondeur

• Premier niveau : Application micro frontend
• Deuxième niveau : Composant micro frontend
• Troisième niveau : Composant matériel angulaire

Le premier et le deuxième niveau shadowRoot sont accessibles mais pas le dernier.

Extrait du code source :

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

Journaux de résultats :

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

Nous essayons avec une autre solution ( https://stackoverflow.com/questions/57979981/how-to-check-in-protractor-javescript-in-shadow-dom-if-the-button-is-enabled-o ). Nous avons le même problème :

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

Résultat :

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

Y a-t-il une limite concernant l'accès à la limite de profondeur shadowRoot ?

Merci pour votre soutien.

V1nc3kr0

Bonjour @firstor ,

Application : Angulaire 8
NodeJS : 12.13.1
tapuscrit: 3.5.3
Rapporteur : 5.4.0

Merci pour votre solution de contournement.

J'essaie de trouver un élément dans ShadowRoot. Dans notre architecture frontend, nous avons 3 niveaux de profondeur

• Premier niveau : Application micro frontend
• Deuxième niveau : Composant micro frontend
• Troisième niveau : Composant matériel angulaire

Le premier et le deuxième niveau shadowRoot sont accessibles mais pas le dernier.

Extrait du code source :

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

Journaux de résultats :

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

Nous essayons avec une autre solution ( https://stackoverflow.com/questions/57979981/how-to-check-in-protractor-javescript-in-shadow-dom-if-the-button-is-enabled-o ). Nous avons le même problème :

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

Résultat :

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

Y a-t-il une limite concernant l'accès à la limite de profondeur shadowRoot ?

Merci pour votre soutien.

V1nc3kr0

Essayez comme
var el4 = el3 .element(by.css_sr('::sr mat-select'));

@firstor
Mon application Web utilise Polymer.js avec 10 niveaux de racines Shadow.

Est-il possible d'appeler le dernier élément racine Shadow à partir du nœud supérieur au lieu de traverser les racines Shadow individuelles.
Merci pour votre aide.

Bonjour gars ,
Je suis nouveau sur rapporteur et j'aimerais pouvoir obtenir de l'aide sur la façon d'inclure ce script de localisation (shadowDOM) dans rapporteur .
Je fais des tests d'interface utilisateur sur le composant Web polymère, la version du rapporteur : 5.4.2 et le nœud v12.13.

quelqu'un pourrait-il me dire où inclure ce script ? @firstor , @alagappan-qa

Merci d'avance.

@rugaba
Incluez le script dans le fichier Configuration.js sous la méthode onPrepare().

merci @ alagappan-qa, ça a marché !!

Salut,

Est-il possible d'inclure ce script dans un fichier js séparé et de l'importer dans le fichier protractor.conf et de l'inclure dans la méthode onPrepare(). Si oui, comment fait-on ?

Merci,
Lakshmi

Si quelqu'un en a besoin maintenant, voir https://github.com/angular/protractor/pull/4786#issuecomment -607204672 et https://github.com/angular/protractor/pull/4786#issuecomment -607224145

Vous pouvez également utiliser https://github.com/angular/protractor/pull/4786.patch ou https://github.com/angular/protractor/pull/4786.diff

Salut,

Est-il possible d'inclure ce script dans un fichier js séparé et de l'importer dans le fichier protractor.conf et de l'inclure dans la méthode onPrepare(). Si oui, comment fait-on ?

Merci,
Lakshmi

@Lakhs02
Déclarez ce localisateur dans un autre fichier comme

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

Puis dans la méthode onPrepare()

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

>

@firstor
Mon application Web utilise Polymer.js avec 10 niveaux de racines Shadow.

Est-il possible d'appeler le dernier élément racine Shadow à partir du nœud supérieur au lieu de traverser les racines Shadow individuelles.
Merci pour votre aide.

@firstou je peux voir sur votre profil que vous avez de l'expérience avec shadow DOM. Pourriez-vous s'il vous plaît être si gentil et fournir un exemple de la façon dont vous accédez au DOM fantôme imbriqué ? J'ai du mal avec ça depuis deux semaines maintenant et je n'arrive toujours pas à accéder à certains éléments :
Ceci est mon exemple, j'ai besoin d'accéder à l'élément div en surbrillance : div.a-choosen-text :

J'ai essayé le localisateur ci-dessous (et bien d'autres) mais sans succès :
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'));

Ce qui est surprenant, le localisateur de projet d'application fonctionne bien, mais quand je vais plus loin, quoi que j'essaye, cela ne fonctionne pas.
Fonctionne bien : static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)'));

Avez-vous une idée de ce que je fais mal?
Merci d'avance,
Magda

>

@firstor
Mon application Web utilise Polymer.js avec 10 niveaux de racines Shadow.

Est-il possible d'appeler le dernier élément racine Shadow à partir du nœud supérieur au lieu de traverser les racines Shadow individuelles.
Merci pour votre aide.

@firstou je peux voir sur votre profil que vous avez de l'expérience avec shadow DOM. Pourriez-vous s'il vous plaît être si gentil et fournir un exemple de la façon dont vous accédez au DOM fantôme imbriqué ? J'ai du mal avec ça depuis deux semaines maintenant et je n'arrive toujours pas à accéder à certains éléments :
Ceci est mon exemple, j'ai besoin d'accéder à l'élément div en surbrillance : div.a-choosen-text :

J'ai essayé le localisateur ci-dessous (et bien d'autres) mais sans succès :
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'));

Ce qui est surprenant, le localisateur de projet d'application fonctionne bien, mais quand je vais plus loin, quoi que j'essaye, cela ne fonctionne pas.
Fonctionne bien : static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)'));

Avez-vous une idée de ce que je fais mal?
Merci d'avance,
Magda

Salut Magda,
Dans votre cas, la racine fantôme sous le panneau d'application WebElement n'est pas développée pour découvrir votre élément.
Mais dans l'élément nameOnTheProjectTab, il est étendu, ce qui provoque ce problème.
Essayez le localisateur d'éléments ci-dessous,
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, je l'ai maintenant et je peux trouver tous les localisateurs dont j'ai besoin !
Merci beaucoup pour l'aide !
Meilleures salutations,
Magda

De : alagappan-qa [email protected]
Envoyé : samedi 4 juillet 2020 04:34
À : angular/protractor [email protected]
Cc : Bartkowiak-Jowsa, Magdalena [email protected] ; Commentaire [email protected]
Objet : Re : [angular/protractor] Demande d'assistance ShadowDOM (#4367)

@firstor https://github.com/firstor
Mon application Web utilise Polymer.js avec 10 niveaux de racines Shadow.
[Image supprimée par l'expéditeur. RJvlf] https://user-images.githubusercontent.com/57852329/72205775-de7d6300-34ac-11ea-93f7-37917052ce90.png
Est-il possible d'appeler le dernier élément racine Shadow à partir du nœud supérieur au lieu de traverser les racines Shadow individuelles.
Merci pour votre aide.

@firstor https://github.com/firstor Je peux voir sur votre profil que vous avez de l'expérience avec shadow DOM. Pourriez-vous s'il vous plaît être si gentil et fournir un exemple de la façon dont vous accédez au DOM fantôme imbriqué ? J'ai du mal avec ça depuis deux semaines maintenant et je n'arrive toujours pas à accéder à certains éléments :
Ceci est mon exemple, j'ai besoin d'accéder à l'élément div en surbrillance : div.a-choosen-text :
[Image supprimée par l'expéditeur. image] https://user-images.githubusercontent.com/50359393/86498151-c532e080-bd84-11ea-867c-337085b96087.png

J'ai essayé le localisateur ci-dessous (et bien d'autres) mais sans succès :
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'));

Ce qui est surprenant, le localisateur de projet d'application fonctionne bien, mais quand je vais plus loin, quoi que j'essaye, cela ne fonctionne pas.
Fonctionne bien : static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)'));

Avez-vous une idée de ce que je fais mal?
Merci d'avance,
Magda

Salut Magda,
Dans votre cas, la racine fantôme sous le panneau d'application WebElement n'est pas développée pour découvrir votre élément.
Mais dans l'élément nameOnTheProjectTab, il est étendu, ce qui provoque ce problème.
Essayez le localisateur d'éléments ci-dessous,
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'));

-
Vous recevez ceci parce que vous avez commenté.
Répondez directement à cet e-mail, consultez-le sur GitHub https://github.com/angular/protractor/issues/4367#issuecomment-653710546 , ou désabonnez-vous https://github.com/notifications/unsubscribe-auth/AMAGYYOPZMDJCRSHT5XI45TRZ2ILDANCNFSM4DR44ABQ .

Capgemini Polska Sp. zoo,
ul. wirki i Wigury 16a 02-092 Varsovie,
S?d Rejonowy dla M.ST. Warszawy, XII Wydzia ? Gospodarczy Rejestrowy, n° KRS : 0000040605,
PIN : 526-11-84-467,
Wysoko ?? kapita?u zak?adowego: 16.403.320,00 z?.
Ce message contient des informations pouvant être privilégiées ou confidentielles et est la propriété du Groupe Capgemini. Il est destiné uniquement à la personne à qui il est adressé. Si vous n'êtes pas le destinataire prévu, vous n'êtes pas autorisé à lire, imprimer, conserver, copier, diffuser, distribuer ou utiliser ce message ou toute partie de celui-ci. Si vous recevez ce message par erreur, veuillez en informer immédiatement l'expéditeur et supprimer toutes les copies de ce message.

Salut tout le monde, j'ai trouvé une solution pour localiser les éléments de l'ombre à l'intérieur de la racine de l'ombre à n'importe quel niveau profond.
À l'aide du module de nœud "query-selector-shadow-dom", nous pouvons facilement identifier les éléments Web dans le Shadow DOM. Pas besoin de traverser toutes les racines de l'Ombre.
Utilisation de element(by.shadowDomCss('')), nous pouvons pointer vers l'élément Web à l'intérieur de la racine fantôme à n'importe quel niveau.

Salut Alagappan,
pouvez-vous s'il vous plaît décrire un peu plus avec un exemple s'il vous plaît.Merci

Le mer. 19 août 2020 à 07:52 alagappan-annamalai <
[email protected]> a écrit :

Salut tout le monde, j'ai trouvé une solution pour localiser les éléments d'ombre à l'intérieur du
Shadow Root à n'importe quel niveau profond.
A l'aide du module node "query-selector-shadow-dom", nous pouvons
identifier facilement les éléments Web dans le Shadow DOM. Pas besoin de traverser
à travers toutes les racines de l'Ombre.
En utilisant element(by.shadowDomCss('')), nous pouvons pointer vers l'élément Web à l'intérieur
la racine de l'ombre à n'importe quel niveau.

-
Vous recevez ceci parce que vous avez commenté.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/angular/protractor/issues/4367#issuecomment-676304234 ,
ou se désinscrire
https://github.com/notifications/unsubscribe-auth/AK2OQDTZK2ZVJTICP3VGS3DSBPDJVANCNFSM4DR44ABQ
.

Salut Alagappan, pouvez-vous s'il vous plaît décrire un peu plus avec un exemple s'il vous plaît.Merci
…
Le mer. 19 août 2020 à 07:52 alagappan-annamalai < @ . * > a écrit : Salut tout le monde, j'ai trouvé une solution pour localiser les éléments d'ombre à l'intérieur de la racine d'ombre à n'importe quel niveau profond. À l'aide du module de nœud "query-selector-shadow-dom", nous pouvons facilement identifier les éléments Web dans le Shadow DOM. Pas besoin de traverser toutes les racines de l'Ombre. En utilisant element(by.shadowDomCss('')), nous pouvons pointer vers l'élément Web à l'intérieur de la racine fantôme à n'importe quel niveau. — Vous recevez ceci parce que vous avez commenté. Répondez directement à cet e-mail, consultez-le sur GitHub < #4367 (commentaire) >, ou désabonnez-vous https://github.com/notifications/unsubscribe-auth/AK2OQDTZK2ZVJTICP3VGS3DSBPDJVANCNFSM4DR44ABQ .

Dans la capture d'écran ci-dessus, la balise paper-input-container avec id=container est à 6+ couche racine d'ombre. Pour prendre ce webElement, nous pouvons utiliser element(by.shadowDomCss('paper-input#textbox paper-input-container#container')); Cet identifiant d'élément court agira sur le WebElement.

Salut @firstor / @msbasanth , je ne parviens pas à obtenir un élément présent dans le DOM shadow-root. J'ai copié votre code ci-dessus dans un fichier .ts mais j'obtiens une erreur de compilation à la ligne no. 6 :
Code : let shadowDomInUse = (document.head.createShadowRoot .......
Erreur : La propriété 'createShadowRoot' n'existe pas sur le type 'HTMLHeadElement' .

J'ai également eu cette erreur et la solution consiste à remplacer createShadowRoot par attachShadow car la méthode createShadowRoot() a été dépréciée au profit de attachShadow(). Voir référence :
https://developer.mozilla.org/en-US/docs/Web/API/Element/createShadowRoot

Au fait @firstor , merci pour cette contribution ! Cela a très bien fonctionné jusqu'à présent. J'ai perdu tellement de temps à essayer de faire fonctionner by.deepCss avec Protractor et Angular 10. J'ai récemment commencé à utiliser l'encapsulation native shadowDom avec mes composants Angular 10, encapsulation: ViewEncapsulation.ShadowDom que j'aime mais je n'étais pas content. n'a pu accéder à aucun élément shadowDom imbriqué pendant les tests e2e. Heureusement j'ai trouvé ce code !

@Rob4226
Veuillez consulter le package https://www.npmjs.com/package/query-selector-shadow-dom

Cela semble prometteur.

@msbasanth @Rob4226 Je suis nouveau sur le rapporteur, j'essaie d'accéder au texte "Téléchargements" de la page de téléchargement de chrome
mon code :

J'ai aussi essayé var x = wait element.element(by.css_sr('h1')).getText(); Cela ne fonctionne pas.
Je reçois le message d'erreur ci-dessous :

J'apprécie votre réponse à ce sujet Merci !

Je l'ai corrigé, je dois créer une variable d'élément distincte pour chaque élément racine d'ombre imbriqué.

@firstor j'apprécie beaucoup pour ce code. merci beaucoup

Bonjour, je suis actuellement tr pour sélectionner shadow dom. J'obtiens l'erreur suivante lors de l'utilisation de la solution de contournement :

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

Usage:
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> .....
Qu'est-ce que je fais mal?

Bonjour, je suis actuellement tr pour sélectionner shadow dom. J'obtiens l'erreur suivante lors de l'utilisation de la solution de contournement :

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

Usage:
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> .....
Qu'est-ce que je fais mal?

Salut @wasoek , Pouvez-vous fournir l'outil de développement Chrome> Inspecter l'élément pour cet élément à partir de la racine de l'ombre. Cela donnera plus de détails sur cette question.

Salut,

Cela peut être géré en utilisant l'une des 2 méthodes ci-dessous,

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

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

browser.element(by.css_shadowroot('downloads-manager::sr div[id="mainContainer"]::sr downloads-item::sr div::sr downloads-item')).getText();
[ici au lieu du nième enfant, nous utilisons l'ID, afin qu'il se concentre sur l'élément]

Merci,
Alagapan A

De : shopmujahid [email protected]
Envoyé : jeudi 3 décembre 2020 09:20
À : angular/protractor [email protected]
Cc : Alagappan Annamalai [email protected] ; Commentaire [email protected]
Objet : Re : [angular/protractor] Demande d'assistance ShadowDOM (#4367)

J'essaie d'accéder aux éléments sous le deuxième élément div de shadow dom (mis en surbrillance) mais il récupère toujours le premier élément div avec le message ci-dessous :

W/element - plus d'un élément trouvé pour le localisateur by.css_shadowroot("downloads-manager::sr div") - le premier résultat sera utilisé

ci-dessous est mon xpath:
browser.element(by.css_shadowroot('downloads-manager::sr div:nth-child (1)::sr downloads-item::sr div::sr downloads-item')).getText();

quelqu'un pourrait-il me guider là-dessus? Merci d'avance

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

-
Vous recevez ceci parce que vous avez commenté.
Répondez directement à cet e-mail, consultez-le sur GitHub https://github.com/angular/protractor/issues/4367#issuecomment-737647758 , ou désabonnez-vous https://github.com/notifications/unsubscribe-auth/AORWPO6XNK7RUWPVHCWKBCTSS4DH5ANCNFSM4DR44ABQ .

J'essaie d'accéder à l'un des éléments div à l'intérieur de shadow dom à la fois nth-child () et type-of () ne fonctionnent pas dans mon cas.
quelqu'un a déjà rencontré ce problème ?

Ci-dessous se trouve la structure du DOM et mon xpath

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

Je ne reçois aucune erreur d'élément trouvé.

Toute aide serait grandement appréciée Merci d'avance.

Salut,

Essayez de supprimer le ::sr dans le localisateur d'éléments car il se trouve en dehors de la racine de l'ombre.
Utilisez l'un de ces 2 localisateurs d'éléments et voyez s'il fonctionne ou non.

wait browser.element(by.css_shadowroot('d2l-navigation d2l-navigation-main- header:nth-type-of (3)'))
OU

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

Merci,

Alagapan A
De : shopmujahid [email protected]
Envoyé : mercredi 9 décembre 2020 12:09
À : angular/protractor [email protected]
Cc : Alagappan Annamalai [email protected] ; Commentaire [email protected]
Objet : Re : [angular/protractor] Demande d'assistance ShadowDOM (#4367)

J'essaie d'accéder à l'un des éléments div à l'intérieur de shadow dom à la fois nth-child () et type-of () ne fonctionnent pas dans mon cas.
quelqu'un a déjà rencontré ce problème ?

Ci-dessous se trouve la structure du DOM et mon 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-type-of (3)'))

Je ne reçois aucune erreur d'élément trouvé.

Toute aide serait grandement appréciée Merci d'avance.

-
Vous recevez ceci parce que vous avez commenté.
Répondez directement à cet e-mail, consultez-le sur GitHub https://github.com/angular/protractor/issues/4367#issuecomment-741567009 , ou désabonnez-vous https://github.com/notifications/unsubscribe-auth/AORWPO7CSSI7P5GH37O74R3ST4LO5ANCNFSM4DR44ABQ .

Merci @alagappan-annamalai ! 👍 la deuxième solution a fonctionné pour moi en supprimant ::sr et en ajoutant tagname.classname, mais j'ai rencontré un autre problème étrange, c'est de ne pas accéder aux éléments enfants ci-dessous :

J'ai besoin d'accéder à l'élément en surbrillance ci-dessus

essayé avec les deux xpaths ci-dessous :
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)' ))

et

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._(le nom de la classe li y ajoutera du texte lorsque nous le survolerons)

Je ne reçois aucune erreur d'élément trouvé.
Merci d'avance.

Merci @alagappan-annamalai ! 👍 la deuxième solution a fonctionné pour moi en supprimant ::sr et en ajoutant tagname.classname, mais j'ai rencontré un autre problème étrange, c'est de ne pas accéder aux éléments enfants ci-dessous :

J'ai besoin d'accéder à l'élément en surbrillance ci-dessus

essayé avec les deux xpaths ci-dessous :
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)' ))

et

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.__')) (le nom de la classe li y ajoutera du texte lorsque nous le survolerons)

Je ne reçois aucune erreur d'élément trouvé.
Merci d'avance.

Cela peut être géré de manière simple sans css_sr et en fournissant quelques éléments Web HTML
browser.element.all(by.css('d2l-navigation d2l-navigation-main-header ul[class="d2l-datalist vui-list"] li')).get(1);

Bravo, a fonctionné comme un charme Merci @ alagappan-annamalai ! ??