Protractor: Solicitação de suporte do ShadowDOM

@primeiro87

Tnx por compartilhar isso. Parece bom e é uma boa solução alternativa.

Se você gostaria de ver isso em uma versão mais recente do Transferidor, você pode adicionar um PR com um novo localizador como element(by. shadowRoot('#parentElement #innerElement'))

@wswebcreation Ok, ótimo. Vou adicionar um PR.
Mas eu quero ter certeza de apenas uma coisa antes de ir: você está bem com este estilo de seletor #parentElement::sr #innerElement para indicar o elemento #innerElement dentro da árvore de sombra do #parentElement ?

@primeiro87

Parece-me bem 👍

Só não sou o (único) que decide sobre os PR's. Os membros do núcleo, que também revisarão seu PR, decidem no final.

Eu acho que será uma ótima adição e um registro claro, então vá em frente 😉

@wswebcreation Como posso enviar meus commits? Parece que não tenho permissão suficiente para contribuir.

Olá @first87 ,

Você já viu este documento. Ele contém todos os passos que você precisa tomar.

@wswebcreation Sim, verifiquei DEVELOPER.md e não encontrei nenhum guia para enviar. Estes são os passos que eu 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 criar meu próprio branch
• npm install
• fez vários commits
• gulp lint para verificar se o código foi formatado corretamente
• npm start , webdriver-manager start , npm test para passar em todos os testes

Agora o que devo fazer para o próximo?

Olá @first87 ,

• Você começa bifurcando o projeto.
• Em seguida, ele será adicionado à sua conta.
• Faça um clone para sua máquina local
• Em seguida, empurre suas alterações e clique no botão "Criar PR".

Isso deve fazer o truque

@wswebcreation Ok, obrigado por orientar.

@wswebcreation Acabei de criar um PR #4392 .

@first87 Tnx!!

Qual é o status disso? Gostaríamos de poder usar a função by.shadowRoot.

Espero que alguém me ajude a resolver isso: https://github.com/angular/protractor/pull/4392#issuecomment -359814654

@ first87 Eu tentei usar seu novo localizador nos meus testes e2e. Não consigo obter os elementos no shadow dom.

Ambiente: Aplicação Angular (v5) com Polymer Web Components. Transferidor para executar testes e2e.

CLI angular: 1.6.4
Nó: 6.10.0
Angular: 5.2.0
@angular/cli: 1.6.4
texto datilografado: 2.5.3
Abaixo está a minha raiz de sombra do componente da web de polímero expandida em cromo. Você pode ver input type = "text" dentro desse elemento personalizado.

Não consigo acessar o elemento de entrada dentro do componente de polímero personalizado usando o transferidor by.css_sr.

var polyFName = element(by.className('polyFName'));
var inputElement = polímeroFirstName.element(by.css_sr('input')); // não retorna nada.

Ele falhou com um erro "Nenhum elemento encontrado usando localizador: by.css_sr("input")".

Eu preciso acessar o elemento de entrada interno para que eu possa executar tarefas de automação de interface do usuário como.
polímeroFirstName.element(by.css_sr('input')).clear();
polímeroFirstName.element(by.css_sr('input')).sendKeys('Ritchie');

Alguma coisa que estou perdendo?

@msbasanth Você perdeu ::sr já que by.css_sr não começará a encontrar elementos em uma raiz sombra do elemento ~ ele cavará na árvore DOM sombra de qualquer elemento para cada ::sr .
Então você deve substituir seu localizador de elemento de entrada por este:

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

Obrigado @first87 funcionou como um encanto.
Espero que em breve tenhamos esse suporte do Shadow DOM no transferidor.

Isso funciona! Obrigada! Vai ser muito difícil localizar elementos agora, especialmente se houver shadow doms aninhados :( já que não podemos testar os localizadores no console. Obrigado novamente!

@firstor Muito obrigado por isso! Espero que isso possa ser integrado em breve....

Eu estava esperando obter alguma ajuda de você sobre isso embora. Embora eu consiga obter o valor correto usando ::sr conforme necessário, quando faço title.getText() , parece obter o valor "incorreto". Parece estar chegando como um objeto. Veja a seguinte saída abaixo:

Espera-se que [ 'Título' ] seja 'Título'.

Não tive sucesso em conseguir pegar a string desse objeto/array e queria saber se você tem alguma ideia?

Obrigado novamente pela solução!!

EDIT: Desconsidere!! Referenciei isso e funcionou https://stackoverflow.com/questions/29478905/protractor-element-gettext-returns-an-object-and-not-string. Obrigado novamente!!

Oi @firstor / @msbasanth , não consigo obter um elemento presente no DOM de raiz de sombra. Copiei seu código acima em um arquivo .ts, mas estou recebendo um erro de compilação na linha nº. 6:
Código: let shadowDomInUse = (document.head.createShadowRoot .......
Erro: a propriedade 'createShadowRoot' não existe no tipo 'HTMLHeadElement' .

Aplicação: Angular v7
NodeJS: 6.9.0
texto datilografado: 2.3.3
transferidor: 5.3.2

Você pode explicar como usar seu método para inserir algum texto na caixa de entrada dentro do shadow-root?
Obrigado!

@primeiro
Obrigado por isso. Estou tentando usar assim.
var searchBar = element(by.css_sr('::sr input'));
var searchButton = element(by.css_sr('::sr i'));

Estou recebendo o erro abaixo
[11:36:06] E/iniciador - TypeError: localizador inválido

O que estou fazendo errado?
Qualquer ajuda é muito apreciada. Desde já, obrigado.

@firstor ei, obrigado pela solução)
no entanto, não podemos usá-lo totalmente em nossa equipe, a menos que seja mesclado no branch master do Protractor (estamos usando o Protractor em nós remotos para que as bibliotecas sejam sempre extraídas quando os testes estiverem sendo executados).

Algum progresso na fusão do https://github.com/angular/protractor/pull/4786 ?

alguma atualização disso?

Qualquer atualização? este é um bloqueador para muitas especificações ultimamente (

Olá @primeiro ,

Aplicação: Angular 8
NodeJS: 12.13.1
texto datilografado: 3.5.3
Transferidor: 5.4.0

Obrigado por sua solução.

Eu tento encontrar o elemento no ShadowRoot. Em nossa arquitetura frontend, temos 3 níveis de profundidade

• Primeiro nível: aplicação micro frontend
• Segundo nível: componente micro frontend
• Terceiro nível: Componente material angular

O primeiro e o segundo nível shadowRoot são acessíveis, mas não o último.

Extrato da fonte do 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")

Tentamos com outra solução ( https://stackoverflow.com/questions/57979981/how-to-check-in-protractor-javescript-in-shadow-dom-if-the-button-is-enabled-o ). Temos o mesmo 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 um limite em relação ao acesso ao limite de profundidade do shadowRoot?

Obrigado por seu apoio.

V1nc3kr0

Olá @primeiro ,

Aplicação: Angular 8
NodeJS: 12.13.1
texto datilografado: 3.5.3
Transferidor: 5.4.0

Obrigado por sua solução.

Eu tento encontrar o elemento no ShadowRoot. Em nossa arquitetura frontend, temos 3 níveis de profundidade

• Primeiro nível: aplicação micro frontend
• Segundo nível: componente micro frontend
• Terceiro nível: Componente material angular

O primeiro e o segundo nível shadowRoot são acessíveis, mas não o último.

Extrato da fonte do 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")

Tentamos com outra solução ( https://stackoverflow.com/questions/57979981/how-to-check-in-protractor-javescript-in-shadow-dom-if-the-button-is-enabled-o ). Temos o mesmo 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 um limite em relação ao acesso ao limite de profundidade do shadowRoot?

Obrigado por seu apoio.

V1nc3kr0

Dê uma chance como
var el4 = el3 .element (by.css_sr('::sr mat-select'));

@primeiro
Meu aplicativo da Web está usando Polymer.js com 10 níveis de raízes de sombra.

É possível chamar o último elemento raiz Shadow do nó superior em vez de percorrer as raízes Shadow individuais.
Obrigado por seu apoio.

Ola pessoal ,
Sou novo no transferidor e gostaria de obter uma ajuda sobre como incluir esse script localizador (shadowDOM) no transferidor .
estou fazendo alguns testes de interface do usuário no componente web de polímero, a versão do transferidor: 5.4.2 e nó v12.13.

Alguém poderia me dizer onde incluir esse script? @firstor , @alagapan-qa

desde já, obrigado.

@rugaba
Inclua o script no arquivo Configuration.js no método onPrepare().

thx @ alagapan-qa, funcionou !!

Oi,

É possível incluir este script em um arquivo js separado e importá-lo no arquivo protractor.conf e incluir no método onPrepare(). Se sim, como fazemos?

Obrigado,
Lakshmi

Se alguém precisar disso agora, consulte https://github.com/angular/protractor/pull/4786#issuecomment -607204672 e https://github.com/angular/protractor/pull/4786#issuecomment -607224145

Você também pode usar https://github.com/angular/protractor/pull/4786.patch ou https://github.com/angular/protractor/pull/4786.diff

Oi,

É possível incluir este script em um arquivo js separado e importá-lo no arquivo protractor.conf e incluir no método onPrepare(). Se sim, como fazemos?

Obrigado,
Lakshmi

@Lakhs02
Declare este localizador em algum outro arquivo como

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

Em seguida, no método onPrepare()

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

>

@primeiro
Meu aplicativo da Web está usando Polymer.js com 10 níveis de raízes de sombra.

É possível chamar o último elemento raiz Shadow do nó superior em vez de percorrer as raízes Shadow individuais.
Obrigado por seu apoio.

@firstor posso ver em seu perfil que você tem experiência com shadow DOM. Você poderia ser gentil e fornecer um exemplo de como você acessa o shadow DOM aninhado? Estou lutando com isso há duas semanas e ainda não consigo acessar alguns elementos:
Este é o meu exemplo, preciso acessar o elemento div destacado: div.a-choosen-text:

Eu tentei o localizador abaixo (e muitos outros), mas sem sucesso:
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'));

O que é surpreendente, o localizador para app-project funciona bem, mas quando eu vou mais fundo, o que quer que eu tente, não funciona.
Funciona bem: static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)'));

Você tem alguma ideia do que estou fazendo de errado?
Agradeço antecipadamente,
Magda

>

@primeiro
Meu aplicativo da Web está usando Polymer.js com 10 níveis de raízes de sombra.

É possível chamar o último elemento raiz Shadow do nó superior em vez de percorrer as raízes Shadow individuais.
Obrigado por seu apoio.

@firstor posso ver em seu perfil que você tem experiência com shadow DOM. Você poderia ser gentil e fornecer um exemplo de como você acessa o shadow DOM aninhado? Estou lutando com isso há duas semanas e ainda não consigo acessar alguns elementos:
Este é o meu exemplo, preciso acessar o elemento div destacado: div.a-choosen-text:

Eu tentei o localizador abaixo (e muitos outros), mas sem sucesso:
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'));

O que é surpreendente, o localizador para app-project funciona bem, mas quando eu vou mais fundo, o que quer que eu tente, não funciona.
Funciona bem: static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)'));

Você tem alguma ideia do que estou fazendo de errado?
Agradeço antecipadamente,
Magda

Olá Magda,
No seu caso, a raiz de sombra no painel do appkit WebElement não é expandida para descobrir seu elemento.
Mas no elemento nameOnTheProjectTab ele é expandido, o que causa esse problema.
Experimente o localizador de elementos abaixo,
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, consegui agora e consigo encontrar todos os localizadores que preciso!
Muito obrigado pela ajuda!
Atenciosamente,
Magda

De: alagapan-qa [email protected]
Enviado: sábado, 4 de julho de 2020 04:34
Para: angular/transferidor [email protected]
Cc: Bartkowiak-Jowsa, Magdalena [email protected] ; Comente [email protected]
Assunto: Re: [angular/transferidor] Solicitação de suporte do ShadowDOM (#4367)

@firstor https://github.com/firstor
Meu aplicativo da Web está usando Polymer.js com 10 níveis de raízes de sombra.
[Imagem removida pelo remetente. RJvlf] https://user-images.githubusercontent.com/57852329/72205775-de7d6300-34ac-11ea-93f7-37917052ce90.png
É possível chamar o último elemento raiz Shadow do nó superior em vez de percorrer as raízes Shadow individuais.
Obrigado por seu apoio.

@firstor https://github.com/firstor Posso ver em seu perfil que você tem experiência com shadow DOM. Você poderia ser gentil e fornecer um exemplo de como você acessa o shadow DOM aninhado? Estou lutando com isso há duas semanas e ainda não consigo acessar alguns elementos:
Este é o meu exemplo, preciso acessar o elemento div destacado: div.a-choosen-text:
[Imagem removida pelo remetente. imagem] https://user-images.githubusercontent.com/50359393/86498151-c532e080-bd84-11ea-867c-337085b96087.png

Eu tentei o localizador abaixo (e muitos outros), mas sem sucesso:
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'));

O que é surpreendente, o localizador para app-project funciona bem, mas quando eu vou mais fundo, o que quer que eu tente, não funciona.
Funciona bem: static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)'));

Você tem alguma ideia do que estou fazendo de errado?
Agradeço antecipadamente,
Magda

Olá Magda,
No seu caso, a raiz de sombra no painel do appkit WebElement não é expandida para descobrir seu elemento.
Mas no elemento nameOnTheProjectTab ele é expandido, o que causa esse problema.
Experimente o localizador de elementos abaixo,
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'));

—
Você está recebendo isso porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub https://github.com/angular/protractor/issues/4367#issuecomment-653710546 ou cancele a inscrição 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, nº KRS: 0000040605,
NIP: 526-11-84-467,
Wysoko?? kapita?u zak?adowego: 16.403.320,00 z?.
Esta mensagem contém informações que podem ser privilegiadas ou confidenciais e são de propriedade do Grupo Capgemini. Destina-se apenas à pessoa a quem se dirige. Se você não for o destinatário pretendido, não está autorizado a ler, imprimir, reter, copiar, disseminar, distribuir ou usar esta mensagem ou qualquer parte dela. Se você receber esta mensagem por engano, notifique o remetente imediatamente e exclua todas as cópias desta mensagem.

Olá a todos, Encontrei uma solução para localizar os Shadow Elements dentro da Shadow Root em qualquer nível profundo.
Com a ajuda do módulo de nó "query-selector-shadow-dom", podemos identificar os elementos da Web no Shadow DOM com facilidade. Não há necessidade de atravessar todas as raízes das Sombras.
Usando element(by.shadowDomCss('')), podemos apontar para o elemento Web dentro da Shadow Root em qualquer nível.

Olá Alagappan,
você pode descrever um pouco mais com um exemplo, por favor. Obrigado

Quarta-feira, 19 de agosto de 2020 às 07:52 alagappan-annamalai <
[email protected]> escreveu:

Olá a todos, Encontrei uma solução para localizar os Shadow Elements dentro do
Shadow Root em qualquer nível profundo.
Com a ajuda do módulo de nó "query-selector-shadow-dom", podemos
identificar os elementos da Web no Shadow DOM com facilidade. Não há necessidade de atravessar
através de todas as raízes das Sombras.
Usando element(by.shadowDomCss('')), podemos apontar para o elemento Web dentro
a Raiz das Sombras em qualquer nível.

—
Você está recebendo isso porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/angular/protractor/issues/4367#issuecomment-676304234 ,
ou cancelar
https://github.com/notifications/unsubscribe-auth/AK2OQDTZK2ZVJTICP3VGS3DSBPDJVANCNFSM4DR44ABQ
.

Oi Alagapan, você pode descrever um pouco mais com um exemplo, por favor. Obrigado
…
Quarta-feira, 19 de agosto de 2020 às 7h52 alagappan-annamalai < @ . * > escreveu: Olá a todos, Encontrei uma solução para localizar os Shadow Elements dentro da Shadow Root em qualquer nível profundo. Com a ajuda do módulo de nó "query-selector-shadow-dom", podemos identificar os elementos da Web no Shadow DOM com facilidade. Não há necessidade de atravessar todas as raízes das Sombras. Usando element(by.shadowDomCss('')), podemos apontar para o elemento Web dentro da Shadow Root em qualquer nível. — Você está recebendo isso porque comentou. Responda a este e-mail diretamente, visualize-o no GitHub < #4367 (comentário) > ou cancele a inscrição https://github.com/notifications/unsubscribe-auth/AK2OQDTZK2ZVJTICP3VGS3DSBPDJVANCNFSM4DR44ABQ .

Na captura de tela acima, a tag paper-input-container com id=container está em 6+ camada raiz de sombra. Para pegar este webElement podemos usar element(by.shadowDomCss('paper-input#textbox paper-input-container#container')); Esse identificador de elemento curto atuará no WebElement.

Oi @firstor / @msbasanth , não consigo obter um elemento presente no DOM de raiz de sombra. Copiei seu código acima em um arquivo .ts, mas estou recebendo um erro de compilação na linha nº. 6:
Código: let shadowDomInUse = (document.head.createShadowRoot .......
Erro: a propriedade 'createShadowRoot' não existe no tipo 'HTMLHeadElement' .

Eu também recebi esse erro e a solução é substituir createShadowRoot por attachShadow porque o método createShadowRoot() foi preterido em favor de attachShadow(). Veja referência:
https://developer.mozilla.org/en-US/docs/Web/API/Element/createShadowRoot

A propósito @firstor , obrigado por esta contribuição! Tem funcionado muito bem até agora. Perdi muito tempo tentando fazer by.deepCss trabalhar com Protractor e Angular 10. Recentemente comecei a usar o encapsulamento nativo shadowDom com meus componentes Angular 10, encapsulation: ViewEncapsulation.ShadowDom que eu amo, mas não fiquei feliz não pôde acessar nenhum elemento shadowDom aninhado durante o teste e2e. Felizmente encontrei este código!

@Rob4226
Por favor, olhe para o pacote https://www.npmjs.com/package/query-selector-shadow-dom

Parece promissor.

@msbasanth @Rob4226 Sou novo no transferidor, estou tentando acessar o texto 'Downloads' da página de download do Chrome
meu código:

Eu também tentei var x = await element.element(by.css_sr('h1')).getText(); Não funciona.
Recebo a mensagem de erro abaixo:

Agradecemos sua resposta sobre isso Obrigado!

Eu consertei, preciso criar uma variável de elemento separada para cada elemento raiz de sombra aninhado.

@firstor Agradeço muito por este código. muito obrigado 👍

Olá, estou atualmente tr para selecionar shadow dom. Eu recebo o seguinte erro ao usar a solução 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> .....
O que estou fazendo errado?

Olá, estou atualmente tr para selecionar shadow dom. Eu recebo o seguinte erro ao usar a solução 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> .....
O que estou fazendo errado?

Oi @wasoek , você pode fornecer a Chrome Developer Tool > Inspect Element para este elemento da Shadow Root. Isso dará mais detalhes sobre esta questão.

Oi,

Isso pode ser tratado usando qualquer um dos 2 métodos abaixo,

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

Deixe 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();
[aqui, em vez do nth filho, estamos usando o ID, para que ele se concentre no elemento]

Obrigado,
Alagapan A

De: shopmujahid [email protected]
Enviado: quinta-feira, 3 de dezembro de 2020 09:20
Para: angular/transferidor [email protected]
Cc: Alagappan Annamalai [email protected] ; Comente [email protected]
Assunto: Re: [angular/transferidor] Solicitação de suporte do ShadowDOM (#4367)

Estou tentando acessar elementos no segundo elemento div do shadow dom (destacado), mas está sempre recuperando o primeiro elemento div com a mensagem abaixo:

W/element - mais de um elemento encontrado para locator by.css_shadowroot("downloads-manager::sr div") - o primeiro resultado será usado

abaixo está meu xpath:
browser.element(by.css_shadowroot('downloads-manager::sr div:nth-child (1)::sr downloads-item::sr div::sr downloads-item')).getText();

alguém poderia me orientar sobre isso? desde já, obrigado

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

—
Você está recebendo isso porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub https://github.com/angular/protractor/issues/4367#issuecomment-737647758 ou cancele a inscrição https://github.com/notifications/unsubscribe-auth/AORWPO6XNK7RUWPVHCWKBCTSS4DH5ANCNFSM4DR44ABQ .

Estou tentando acessar um dos elementos div dentro do shadow dom, tanto nth-child() quanto type-of() não estão funcionando no meu caso.
alguém enfrentou esse problema antes?

Abaixo está a estrutura do DOM e meu xpath

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

Não estou recebendo erro de elemento encontrado.

Qualquer ajuda seria muito apreciada Obrigado antecipadamente.

Oi,

Tente remover o ::sr no localizador de elementos, pois está fora da Shadow Root.
Use qualquer um desses 2 localizadores de elementos e veja se está funcionando ou não.

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

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

Obrigado,

Alagapan A
De: shopmujahid [email protected]
Enviado: quarta-feira, 9 de dezembro de 2020 12:09
Para: angular/transferidor [email protected]
Cc: Alagappan Annamalai [email protected] ; Comente [email protected]
Assunto: Re: [angular/transferidor] Solicitação de suporte do ShadowDOM (#4367)

Estou tentando acessar um dos elementos div dentro do shadow dom, tanto nth-child() quanto type-of() não estão funcionando no meu caso.
alguém enfrentou esse problema antes?

Abaixo está a estrutura do DOM e meu xpath
[2134234] https://user-images.githubusercontent.com/58770415/101593797-cc9e8b80-39ad-11eb-8fd0-a7cd7541773f.jpg

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

Não estou recebendo erro de elemento encontrado.

Qualquer ajuda seria muito apreciada Obrigado antecipadamente.

—
Você está recebendo isso porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub https://github.com/angular/protractor/issues/4367#issuecomment-741567009 ou cancele a inscrição https://github.com/notifications/unsubscribe-auth/AORWPO7CSSI7P5GH37O74R3ST4LO5ANCNFSM4DR44ABQ .

Obrigado @alagappan-annamalai! 👍 a segunda solução funcionou para mim removendo ::sr e adicionando tagname.classname, no entanto, encontrei outro problema estranho, não acessando os elementos filho abaixo:

Eu preciso acessar o elemento destacado acima

tentei com os dois xpaths abaixo:
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 ul:nth-child(2)' ))

e

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 ul li._(o nome da classe li anexará algum texto a ela quando passarmos o mouse sobre ela)

Não estou recebendo erro de elemento encontrado.
Desde já, obrigado.

Obrigado @alagappan-annamalai! 👍 a segunda solução funcionou para mim removendo ::sr e adicionando tagname.classname, no entanto, encontrei outro problema estranho, não acessando os elementos filho abaixo:

Eu preciso acessar o elemento destacado acima

tentei com os dois xpaths abaixo:
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 ul:nth-child(2)' ))

e

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 ul li.__')) (o nome da classe li anexará algum texto a ela quando passarmos o mouse sobre ela)

Não estou recebendo erro de elemento encontrado.
Desde já, obrigado.

Isso pode ser tratado de maneira simples sem css_sr e fornecendo poucos elementos da web HTML
browser.element.all(by.css('d2l-navigation d2l-navigation-main-header ul[class="d2l-datalist vui-list"] li')).get(1);

Bravo, funcionou como um encanto Obrigado @alagappan-annamalai! ⁇