Protractor: Solicitud de soporte de ShadowDOM

@primero87

Gracias por compartir esto. Se ve bien y es una buena solución.

Si desea ver esto en una versión más reciente de Transportador, puede agregar un PR con un nuevo localizador como element(by. shadowRoot('#parentElement #innerElement'))

@wswebcreation Vale, bien. Agregaré un PR.
Pero quiero asegurarme de una cosa antes de ir: ¿estás de acuerdo con este estilo de selector #parentElement::sr #innerElement para indicar el elemento #innerElement dentro del árbol de sombras de #parentElement ?

@primero87

me parece bien 👍

Solo que no soy el (único) que decide sobre las relaciones públicas. Los miembros principales, que también revisarán su PR, deciden al final.

Creo que será una gran adición y un registro claro, así que adelante 😉

@wswebcreation ¿Cómo puedo enviar mis confirmaciones? Parece que no tengo suficientes permisos para contribuir.

Hola @first87 ,

¿Has visto este documento? Contiene todos los pasos que debe seguir.

@wswebcreation Sí, revisé DEVELOPER.md y no encontré ninguna guía para enviar. Estos son los pasos que fui:

• 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 para crear mi propia sucursal
• npm install
• hizo varios compromisos
• gulp lint para verificar si el código tiene el formato correcto
• npm start , webdriver-manager start , npm test para pasar todas las pruebas

Ahora, ¿qué debo hacer a continuación?

Hola @first87 ,

• Empiezas bifurcando el proyecto.
• Luego se agregará a su cuenta.
• Haz un clon a tu máquina local
• Luego presione sus cambios y haga clic en el botón "Crear PR".

Eso debería hacer el truco

@wswebcreation Ok, gracias por guiar.

@wswebcreation Acabo de crear un PR #4392 .

@first87 Gracias!!

¿Cuál es el estado de esto? Nos gustaría poder utilizar la función by.shadowRoot.

Espero que alguien me ayude a resolver esto: https://github.com/angular/protractor/pull/4392#issuecomment -359814654

@first87 Intenté usar su nuevo localizador en mis pruebas de e2e. No puedo conseguir los elementos en el dom de las sombras.

Entorno: Aplicación Angular (v5) con Polymer Web Components. Transportador para ejecutar pruebas e2e.

CLI angular: 1.6.4
Nodo: 6.10.0
Angular: 5.2.0
@angular/cli: 1.6.4
mecanografiado: 2.5.3
A continuación se muestra mi raíz de sombra del componente web de polímero expandida en cromo. Podría ver el tipo de entrada = "texto" dentro de este elemento personalizado.

No puedo acceder al elemento de entrada dentro del componente de polímero personalizado usando el transportador by.css_sr.

var nombrePolímero = elemento(by.className('polyFName'));
var inputElement = polímeroPrimerNombre.element(by.css_sr('entrada')); // no devuelve nada.

Falló con un error "No se encontró ningún elemento usando el localizador: by.css_sr("input")".

Necesito acceder al elemento de entrada interno para poder realizar tareas de automatización de la interfaz de usuario como.
polímeroPrimerNombre.elemento(por.css_sr('entrada')).clear();
polímeroFirstName.element(by.css_sr('input')).sendKeys('Ritchie');

¿Algo que me esté perdiendo?

@msbasanth Te perdiste ::sr ya que by.css_sr no comenzará a encontrar elementos en una raíz oculta del elemento ~ excavará en el árbol DOM oculto de cualquier elemento para cada ::sr .
Por lo tanto, debe reemplazar su buscador de elementos de entrada con esto:

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

Gracias @first87 , funcionó de
Espero que pronto obtengamos este soporte DOM en la sombra en el transportador.

¡Esto funciona! ¡Gracias! Va a ser muy difícil localizar elementos ahora, especialmente si hay shadow doms anidados :( ya que no podemos probar los localizadores en la consola. ¡Gracias de nuevo!

@firstor ¡ Muchas gracias por esto! Esperemos que esto pueda integrarse pronto....

Sin embargo, esperaba obtener alguna ayuda de usted en esto. Si bien puedo obtener el valor correcto usando ::sr según sea necesario, cuando hago title.getText() parece obtener el valor "incorrecto". Parece estar entrando como un objeto. Vea el siguiente resultado a continuación:

Se esperaba que [ 'Título' ] fuera 'Título'.

No he tenido éxito en poder obtener la cadena de ese objeto/matriz y me preguntaba si tenía alguna idea.

¡¡Gracias de nuevo por la solución!!

EDITAR: Ignorar!! Hizo referencia a esto y funcionó https://stackoverflow.com/questions/29478905/protractor-element-gettext-returns-an-object-and-not-string. ¡¡Gracias de nuevo!!

Hola, @firstor / @msbasanth , no puedo obtener un elemento presente en el DOM shadow-root. Copié su código anterior en un archivo .ts pero obtuve un error de compilación en la línea no. 6:
Código: let shadowDomInUse = (document.head.createShadowRoot .......
Error: la propiedad 'createShadowRoot' no existe en el tipo 'HTMLHeadElement' .

Aplicación: Angular v7
NodoJS: 6.9.0
mecanografiado: 2.3.3
transportador: 5.3.2

¿Puede explicar cómo usar su método para ingresar texto en el cuadro de entrada dentro de shadow-root?
¡Gracias!

@primero
Gracias por esto. Estoy tratando de usarlo así.
var searchBar = elemento(by.css_sr('::sr input'));
var searchButton = elemento (by.css_sr (':: sr i'));

Recibo el siguiente error
[11:36:06] E/launcher - TypeError: localizador no válido

¿Qué estoy haciendo mal?
Cualquier ayuda es muy apreciada. Gracias por adelantado.

@firstor oye, gracias por la solución)
sin embargo, no podemos usarlo completamente en nuestro equipo a menos que se fusione con la rama principal de Protractor (estamos usando Protractor en nodos remotos para que las librerías siempre se extraigan cuando se ejecutan las pruebas).

¿Algún progreso en la fusión de https://github.com/angular/protractor/pull/4786 ?

¿Algún avance en esto?

¿cualquier actualización? este es un bloqueador para muchas especificaciones en los últimos tiempos (

Hola @firstor ,

Aplicación: Angular 8
NodoJS: 12.13.1
mecanografiado: 3.5.3
Transportador: 5.4.0

Gracias por tu solución.

Intento encontrar elementos en ShadowRoot. En nuestra arquitectura frontend, tenemos 3 niveles de profundidad

• Primer nivel: aplicación Micro frontend
• Segundo nivel: componente Micro frontend
• Tercer nivel : Componente de material angular

Se puede acceder al primer y segundo nivel de shadowRoot, pero no al último.

Extracto de la fuente del código:

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

Registros de resultados:

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

Probamos con otra solución ( https://stackoverflow.com/questions/57979981/how-to-check-in-protractor-javescript-in-shadow-dom-if-the-button-is-enabled-o ). Tenemos el mismo problema :

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

resultado :

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

¿Existe un límite con respecto al acceso al límite de profundidad de shadowRoot?

Gracias por su apoyo.

V1nc3kr0

Hola @firstor ,

Aplicación: Angular 8
NodoJS: 12.13.1
mecanografiado: 3.5.3
Transportador: 5.4.0

Gracias por tu solución.

Intento encontrar elementos en ShadowRoot. En nuestra arquitectura frontend, tenemos 3 niveles de profundidad

• Primer nivel: aplicación Micro frontend
• Segundo nivel: componente Micro frontend
• Tercer nivel : Componente de material angular

Se puede acceder al primer y segundo nivel de shadowRoot, pero no al último.

Extracto de la fuente del código:

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

Registros de resultados:

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

Probamos con otra solución ( https://stackoverflow.com/questions/57979981/how-to-check-in-protractor-javescript-in-shadow-dom-if-the-button-is-enabled-o ). Tenemos el mismo problema :

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

resultado :

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

¿Existe un límite con respecto al acceso al límite de profundidad de shadowRoot?

Gracias por su apoyo.

V1nc3kr0

Dar una oportunidad como
var el4 = el3 .element(by.css_sr('::sr mat-select'));

@primero
Mi aplicación web usa Polymer.js con 10 niveles de raíces ocultas.

¿Es posible llamar al último elemento raíz de Shadow desde el nodo superior en lugar de atravesar las raíces de Shadow individuales?
Gracias por su apoyo.

Hola chicos ,
Soy nuevo en el transportador y desearía poder obtener ayuda sobre cómo incluir este script de localización (shadowDOM) en el transportador.
estoy haciendo algunas pruebas de interfaz de usuario en el componente web de polímero, la versión del transportador: 5.4.2 y el nodo v12.13.

¿alguien podría decirme dónde incluir ese script? @firstor , @alagappan-qa

gracias de antemano.

@rugaba
Incluya el script en el archivo Configuration.js bajo el método onPrepare().

Gracias @ alagappan-qa, ¡funcionó!

Hola,

¿Es posible incluir este script en un archivo js separado e importarlo en el archivo protractor.conf e incluirlo en el método onPrepare()? Si es así, ¿cómo lo hacemos?

Gracias,
Lakshmi

Si alguien necesita esto ahora, consulte https://github.com/angular/protractor/pull/4786#issuecomment -607204672 y https://github.com/angular/protractor/pull/4786#issuecomment -607224145

También puede usar https://github.com/angular/protractor/pull/4786.patch o https://github.com/angular/protractor/pull/4786.diff

Hola,

¿Es posible incluir este script en un archivo js separado e importarlo en el archivo protractor.conf e incluirlo en el método onPrepare()? Si es así, ¿cómo lo hacemos?

Gracias,
Lakshmi

@Lakhs02
Declare este localizador en algún otro archivo como

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

Luego en el método onPrepare()

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

>

@primero
Mi aplicación web usa Polymer.js con 10 niveles de raíces ocultas.

¿Es posible llamar al último elemento raíz de Shadow desde el nodo superior en lugar de atravesar las raíces de Shadow individuales?
Gracias por su apoyo.

@firstor Puedo ver en tu perfil que tienes experiencia con shadow DOM. ¿Podría ser tan amable y proporcionar un ejemplo de cómo accede al DOM de sombra anidado? Estoy luchando con él durante dos semanas y todavía no puedo acceder a algunos elementos:
Este es mi ejemplo, necesito acceder al elemento div resaltado: div.a-choosen-text:

Probé el localizador a continuación (y muchos otros) pero sin éxito:
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- desplegable::sr appkit-dropdown::sr div.a-choosen-text'));

Lo que es sorprendente, el localizador de proyectos de aplicaciones funciona bien, pero cuando profundizo, intente lo que intente, no funciona.
Funciona bien: static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)'));

¿Tienes idea de qué estoy haciendo mal?
Gracias de antemano,
Magda

>

@primero
Mi aplicación web usa Polymer.js con 10 niveles de raíces ocultas.

¿Es posible llamar al último elemento raíz de Shadow desde el nodo superior en lugar de atravesar las raíces de Shadow individuales?
Gracias por su apoyo.

@firstor Puedo ver en tu perfil que tienes experiencia con shadow DOM. ¿Podría ser tan amable y proporcionar un ejemplo de cómo accede al DOM de sombra anidado? Estoy luchando con él durante dos semanas y todavía no puedo acceder a algunos elementos:
Este es mi ejemplo, necesito acceder al elemento div resaltado: div.a-choosen-text:

Probé el localizador a continuación (y muchos otros) pero sin éxito:
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- desplegable::sr appkit-dropdown::sr div.a-choosen-text'));

Lo que es sorprendente, el localizador de proyectos de aplicaciones funciona bien, pero cuando profundizo, intente lo que intente, no funciona.
Funciona bien: static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)'));

¿Tienes idea de qué estoy haciendo mal?
Gracias de antemano,
Magda

Hola Magda,
En su caso, la raíz oculta debajo del panel del kit de aplicaciones WebElement no se expande para encontrar su Elemento.
Pero en el elemento nameOnTheProjectTab está expandido, lo que provoca este problema.
Pruebe el localizador de elementos a continuación,
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- desplegable::sr div.a-choosen-text'));

Dios mío, lo tengo ahora y puedo encontrar todos los localizadores que necesito.
¡Muchas gracias por la ayuda!
Atentamente,
Magda

De: alagappan-qa [email protected]
Enviado: sábado, 4 de julio de 2020 4:34 a. m.
Para: angular/transportador [email protected]
Cc: Bartkowiak-Jowsa, Magdalena [email protected] ; Comentar [email protected]
Asunto: Re: [angular/transportador] Solicitud de soporte de ShadowDOM (#4367)

@firstor https://github.com/firstor
Mi aplicación web usa Polymer.js con 10 niveles de raíces ocultas.
[Imagen eliminada por el remitente. RJvlf] https://user-images.githubusercontent.com/57852329/72205775-de7d6300-34ac-11ea-93f7-37917052ce90.png
¿Es posible llamar al último elemento raíz de Shadow desde el nodo superior en lugar de atravesar las raíces de Shadow individuales?
Gracias por su apoyo.

@firstor https://github.com/firstor Puedo ver en tu perfil que tienes experiencia con shadow DOM. ¿Podría ser tan amable y proporcionar un ejemplo de cómo accede al DOM de sombra anidado? Estoy luchando con él durante dos semanas y todavía no puedo acceder a algunos elementos:
Este es mi ejemplo, necesito acceder al elemento div resaltado: div.a-choosen-text:
[Imagen eliminada por el remitente. imagen] https://user-images.githubusercontent.com/50359393/86498151-c532e080-bd84-11ea-867c-337085b96087.png

Probé el localizador a continuación (y muchos otros) pero sin éxito:
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- desplegable::sr appkit-dropdown::sr div.a-choosen-text'));

Lo que es sorprendente, el localizador de proyectos de aplicaciones funciona bien, pero cuando profundizo, intente lo que intente, no funciona.
Funciona bien: static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)'));

¿Tienes idea de qué estoy haciendo mal?
Gracias de antemano,
Magda

Hola Magda,
En su caso, la raíz oculta debajo del panel del kit de aplicaciones WebElement no se expande para encontrar su Elemento.
Pero en el elemento nameOnTheProjectTab está expandido, lo que provoca este problema.
Pruebe el localizador de elementos a continuación,
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- desplegable::sr div.a-choosen-text'));

—
Estás recibiendo esto porque comentaste.
Responda a este correo electrónico directamente, véalo en GitHub https://github.com/angular/protractor/issues/4367#issuecomment-653710546 , o cancele la suscripción https://github.com/notifications/unsubscribe-auth/AMAGYYOPZMDJCRSHT5XI45TRZ2ILDANCNFSM4DR44ABQ .

Capgemini Polska sp. zoo,
ul. Żwirki i Wigury 16a 02-092 Varsovia,
S?d Rejonowy dla M.ST. Warszawy, XII Wydzia? Gospodarczy Rejestrowy, nr KRS: 0000040605,
PIN: 526-11-84-467,
Wysoko?? kapita?u zak?adowego: 16.403.320,00 z?.
Este mensaje contiene información que puede ser privilegiada o confidencial y es propiedad del Grupo Capgemini. Está destinado únicamente a la persona a quien va dirigido. Si no es el destinatario previsto, no está autorizado a leer, imprimir, conservar, copiar, difundir, distribuir o utilizar este mensaje o cualquier parte del mismo. Si recibe este mensaje por error, notifique al remitente de inmediato y elimine todas las copias de este mensaje.

Hola a todos: Encontré una solución para ubicar los Elementos de las Sombras dentro de la Raíz de las Sombras en cualquier nivel profundo.
Con la ayuda del módulo de nodo "query-selector-shadow-dom", podemos identificar los elementos web en Shadow DOM con facilidad. No es necesario atravesar todas las raíces de las Sombras.
Usando el elemento (por. shadowDomCss ('')), podemos apuntar al elemento Web dentro de Shadow Root en cualquier nivel.

Hola Alagappan,
¿Puede describir un poco más con un ejemplo, por favor? Gracias.

El miércoles, 19 de agosto de 2020 a las 7:52 alagappan-annamalai <
[email protected]> escribió:

Hola a todos, Encontré una solución para ubicar los Elementos de las Sombras dentro del
Shadow Root en cualquier nivel profundo.
Con la ayuda del módulo de nodo "query-selector-shadow-dom", podemos
identifique los elementos web en Shadow DOM con facilidad. No hay necesidad de atravesar
a través de todas las raíces de la Sombra.
Usando element(by.shadowDomCss('')), podemos apuntar al elemento Web dentro
Shadow Root en cualquier nivel.

—
Estás recibiendo esto porque comentaste.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/angular/transportador/issues/4367#issuecomment-676304234 ,
o darse de baja
https://github.com/notifications/unsubscribe-auth/AK2OQDTZK2ZVJTICP3VGS3DSBPDJVANCNFSM4DR44ABQ
.

Hola, Alagappan, ¿puedes describir un poco más con un ejemplo, por favor? Gracias.
…
El miércoles, 19 de agosto de 2020 a las 7:52 a. m. alagappan-annamalai < @ . * > escribió: Hola a todos, Encontré una solución para ubicar los Elementos de las Sombras dentro de la Raíz de las Sombras en cualquier nivel profundo. Con la ayuda del módulo de nodo "query-selector-shadow-dom", podemos identificar los elementos web en Shadow DOM con facilidad. No es necesario atravesar todas las raíces de las Sombras. Usando element(by.shadowDomCss('')), podemos apuntar al elemento Web dentro de Shadow Root en cualquier nivel. — Estás recibiendo esto porque comentaste. Responda a este correo electrónico directamente, véalo en GitHub < #4367 (comentario) > o cancele la suscripción https://github.com/notifications/unsubscribe-auth/AK2OQDTZK2ZVJTICP3VGS3DSBPDJVANCNFSM4DR44ABQ .

En la captura de pantalla anterior, la etiqueta paper-input-container con id=container está en la capa raíz de sombra 6+. Para tomar este elemento web podemos usar element(by.shadowDomCss('paper-input#textbox paper-input-container#container')); Este identificador de elemento corto actuará en WebElement.

Hola, @firstor / @msbasanth , no puedo obtener un elemento presente en el DOM shadow-root. Copié su código anterior en un archivo .ts pero obtuve un error de compilación en la línea no. 6:
Código: let shadowDomInUse = (document.head.createShadowRoot .......
Error: la propiedad 'createShadowRoot' no existe en el tipo 'HTMLHeadElement' .

También recibí este error y la solución es reemplazar createShadowRoot con attachShadow porque el método createShadowRoot() ha quedado obsoleto a favor de addedShadow(). Ver referencia:
https://developer.mozilla.org/en-US/docs/Web/API/Element/createShadowRoot

Por cierto @firstor , ¡gracias por este aporte! Ha estado funcionando muy bien hasta ahora. Perdí mucho tiempo tratando de hacer que by.deepCss funcionaran con Protractor y Angular 10. Recientemente comencé a usar la encapsulación nativa de shadowDom con mis componentes de Angular 10, encapsulation: ViewEncapsulation.ShadowDom que me encanta pero no me hizo feliz. no se pudo acceder a ningún elemento shadowDom anidado durante las pruebas de e2e. ¡Afortunadamente encontré este código!

@Rob4226
Consulte el paquete https://www.npmjs.com/package/query-selector-shadow-dom

Parece prometedor.

@msbasanth @Rob4226 Soy nuevo en el transportador, estoy tratando de acceder al texto 'Descargas' de la página de descarga de Chrome
mi código :

También probé var x = await element.element(by.css_sr('h1')).getText(); no funciona
Recibo el siguiente mensaje de error:

Apreciamos su respuesta en este Gracias!

Lo arreglé, necesito crear una variable de elemento separada para cada elemento raíz de sombra anidado.

@firstor Agradezco mucho este código. muchas gracias 👍

Hola, actualmente estoy tratando de seleccionar shadow dom. Recibo el siguiente error cuando uso la solución alternativa:

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

Uso:
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é estoy haciendo mal?

Hola, actualmente estoy tratando de seleccionar shadow dom. Recibo el siguiente error cuando uso la solución alternativa:

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

Uso:
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é estoy haciendo mal?

Hola, @wasoek : ¿Puede proporcionar la Herramienta para desarrolladores de Chrome > Inspeccionar elemento para este elemento de Shadow Root? Eso dará más detalles sobre este tema.

Hola,

Esto se puede manejar usando cualquiera de los siguientes 2 métodos,

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

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

browser.element(by.css_shadowroot('downloads-manager::sr div[id=”mainContainer”]::sr downloads-item::sr div::sr downloads-item')).getText();
[aquí, en lugar del enésimo hijo, estamos usando la ID, para que se centre en el elemento]

Gracias,
Alagappan A

De: shopmujahid [email protected]
Enviado: jueves, 3 de diciembre de 2020 9:20 a. m.
Para: angular/transportador [email protected]
CC: Alagappan Annamalai [email protected] ; Comentar [email protected]
Asunto: Re: [angular/transportador] Solicitud de soporte de ShadowDOM (#4367)

Estoy tratando de acceder a elementos bajo el segundo elemento div de shadow dom (resaltado) pero siempre está recuperando el primer elemento div con el siguiente mensaje:

W/element: se encontró más de un elemento para el localizador by.css_shadowroot("downloads-manager::sr div"): se usará el primer resultado

a continuación es mi xpath:
browser.element(by.css_shadowroot('gestor de descargas::sr div:nth-child (1)::sr descargas-elemento::sr div::sr descargas-elemento')).getText();

alguien me podria orientar sobre esto? Gracias por adelantado

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

—
Estás recibiendo esto porque comentaste.
Responda a este correo electrónico directamente, véalo en GitHub https://github.com/angular/protractor/issues/4367#issuecomment-737647758 o cancele la suscripción https://github.com/notifications/unsubscribe-auth/AORWPO6XNK7RUWPVHCWKBCTSS4DH5ANCNFSM4DR44ABQ .

Estoy tratando de acceder a uno de los elementos div dentro de shadow dom, tanto nth-child() como type-of() no funcionan en mi caso.
alguien se enfrentó a este problema antes?

A continuación se muestra la estructura DOM y mi xpath

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

Estoy recibiendo ningún elemento encontrado error.

Cualquier ayuda sería muy apreciada Gracias de antemano.

Hola,

Intente eliminar ::sr en el localizador de elementos ya que está fuera de Shadow Root.
Use cualquiera de estos 2 localizadores de elementos y vea si funciona o no.

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

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

Gracias,

Alagappan A
De: shopmujahid [email protected]
Enviado: miércoles, 9 de diciembre de 2020 12:09 p. m.
Para: angular/transportador [email protected]
CC: Alagappan Annamalai [email protected] ; Comentar [email protected]
Asunto: Re: [angular/transportador] Solicitud de soporte de ShadowDOM (#4367)

Estoy tratando de acceder a uno de los elementos div dentro de shadow dom, tanto nth-child() como type-of() no funcionan en mi caso.
alguien se enfrentó a este problema antes?

A continuación se muestra la estructura DOM y mi xpath
[2134234] https://imagenes-de-usuario.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)'))

Estoy recibiendo ningún elemento encontrado error.

Cualquier ayuda sería muy apreciada Gracias de antemano.

—
Estás recibiendo esto porque comentaste.
Responda a este correo electrónico directamente, véalo en GitHub https://github.com/angular/protractor/issues/4367#issuecomment-741567009 , o cancele la suscripción https://github.com/notifications/unsubscribe-auth/AORWPO7CSSI7P5GH37O74R3ST4LO5ANNCFSM4DR44ABQ .

¡Gracias @alagappan-annamalai! 👍 la segunda solución funcionó para mí al eliminar ::sr y agregar tagname.classname, sin embargo, me encontré con otro problema extraño: no acceder a los elementos secundarios a continuación:

Necesito acceder al elemento resaltado arriba

probado con ambos xpaths a continuación:
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)' ))

y

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._(el nombre de la clase li agregará algo de texto cuando pasemos el mouse sobre él)

Estoy recibiendo ningún elemento encontrado error.
Gracias por adelantado.

¡Gracias @alagappan-annamalai! 👍 la segunda solución funcionó para mí al eliminar ::sr y agregar tagname.classname, sin embargo, me encontré con otro problema extraño: no acceder a los elementos secundarios a continuación:

Necesito acceder al elemento resaltado arriba

probado con ambos xpaths a continuación:
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)' ))

y

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.__')) (el nombre de la clase li agregará algo de texto cuando pasemos el mouse sobre él)

Estoy recibiendo ningún elemento encontrado error.
Gracias por adelantado.

Esto se puede manejar de una manera simple sin css_sr y proporcionando pocos elementos web HTML
browser.element.all(by.css('d2l-navigation d2l-navigation-main-header ul[class="d2l-datalist vui-list"] li')).get(1);

Bravo, funcionó de maravilla ¡Gracias @ alagappan-annamalai! ⁇