Protractor: Запрос поддержки ShadowDOM

@first87

Спасибо за то, что поделились этим. Это выглядит красиво, и это хороший обходной путь.

Если вы хотите увидеть это в более новой версии Protractor, вы можете добавить PR с новым локатором, например element(by. shadowRoot('#parentElement #innerElement'))

@wswebcreation Хорошо, хорошо. Добавлю пиар.
Но я хочу убедиться только в одном, прежде чем идти: вы согласны с этим стилем селектора #parentElement::sr #innerElement для указания элемента #innerElement внутри теневого дерева #parentElement ?

@first87

Мне кажется хорошо 👍

Я только не (единственный) кто решает о PR. Основные участники, которые также рассмотрят ваш PR, в конце концов примут решение.

Думаю будет отличное дополнение и четкий лог, так что дерзайте 😉

@wswebcreation Как я могу

Привет @first87 ,

Вы видели этот документ. Он содержит все шаги, которые вам нужно предпринять.

@wswebcreation Да, я проверил DEVELOPER.md и не нашел руководства по отправке. Вот шаги, которые я сделал:

• git clone [email protected]:angular/protractor.git
• cd protractor/
• git remote add upstream https://github.com/angular/protractor.git
• git checkout -b feature/shadow-root-locator master для создания собственной ветки
• npm install
• сделал несколько коммитов
• gulp lint для проверки правильности форматирования кода
• npm start , webdriver-manager start , npm test чтобы пройти все тесты

Теперь, что мне делать дальше?

Привет @first87 ,

• Вы начинаете с разветвления проекта.
• Затем он будет добавлен в ваш аккаунт.
• Сделайте клон на свой локальный компьютер
• Затем отправьте изменения и нажмите кнопку «Создать PR».

Это должно делать свое дело

@wswebcreation Хорошо, спасибо за руководство.

@wswebcreation Я только что создал PR # 4392 .

@first87 Спасибо!!

Каков статус по этому поводу? Мы хотели бы иметь возможность использовать функцию by.shadowRoot.

Надеюсь, кто-нибудь поможет мне решить эту проблему: https://github.com/angular/protractor/pull/4392#issuecomment -359814654

@ first87 Я пытался использовать ваш новый локатор в своих тестах e2e. Я не могу получить элементы в теневом доме.

Среда: приложение Angular (v5) с полимерными веб-компонентами. Транспортир для запуска тестов e2e.

Угловой интерфейс командной строки: 1.6.4
Узел: 6.10.0
Угловой: 5.2.0
@угловой/кли: 1.6.4
машинопись: 2.5.3
Ниже приведен корень тени моего полимерного веб-компонента, расширенный в хроме. Вы могли видеть тип ввода = "текст" внутри этого пользовательского элемента.

Я не могу получить доступ к элементу ввода внутри пользовательского полимерного компонента с помощью транспортира by.css_sr.

var полимерное имя = элемент (by.className ('polyFName'));
var inputElement = полимерное имя.элемент (by.css_sr («вход»)); // ничего не возвращает.

Сбой с ошибкой «Ни один элемент не найден с использованием локатора: by.css_sr («ввод»)».

Мне нужно получить доступ к внутреннему элементу ввода, чтобы я мог выполнять такие задачи автоматизации пользовательского интерфейса.
имя_полимера.элемент(by.css_sr('input')).clear();
полимерное имя.элемент(by.css_sr('ввод')).sendKeys('Ричи');

Что-то я пропустил?

@msbasanth Вы пропустили ::sr так как by.css_sr не начнет находить элементы в теневом корне элемента ~ он будет копаться в теневом дереве DOM любого элемента для каждого ::sr .
Поэтому вы должны заменить свой искатель элемента ввода на это:

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

Спасибо @first87, это сработало как шарм.
Надеюсь, мы скоро получим поддержку этой теневой модели DOM в транспортире.

Это работает! Спасибо! Теперь будет очень сложно найти элементы, особенно если есть вложенные теневые дома :( так как мы не можем проверить локаторы в консоли. Еще раз спасибо!

@firstor Большое спасибо за это! Надеюсь, это может быть интегрировано в ближайшее время ....

Я надеялся получить некоторую помощь от вас в этом, хотя. Хотя я могу получить правильное значение, используя ::sr по мере необходимости, когда я делаю title.getText() кажется, что я получаю «неправильное» значение. Кажется, что он входит как объект. См. следующий вывод ниже:

Ожидается, что [ 'Title' ] будет 'Title'.

Мне не удалось получить строку из этого объекта/массива, и мне было интересно, есть ли у вас какие-либо идеи?

Еще раз спасибо за обходной путь!!

РЕДАКТИРОВАТЬ: Не обращайте внимания! Сослался на это, и это помогло https://stackoverflow.com/questions/29478905/protractor-element-gettext-returns-an-object-and-not-string. Еще раз спасибо!!

Привет @firstor / @msbasanth , я не могу получить элемент, присутствующий в DOM с теневым корнем. Я скопировал ваш приведенный выше код в файл .ts, но получил ошибку компиляции в строке №. 6:
Код: пусть shadowDomInUse = (document.head.createShadowRoot .......
Ошибка: свойство createShadowRoot не существует для типа HTMLHeadElement .

Приложение: Угловой v7
NodeJS: 6.9.0
машинопись: 2.3.3
транспортир: 5.3.2

Не могли бы вы рассказать, как использовать ваш метод для ввода текста в поле ввода внутри shadow-root?
Спасибо!

@firstor
Спасибо за это. Пытаюсь использовать так.
var searchBar = element(by.css_sr('::sr input'));
var searchButton = элемент (by.css_sr (':: sr i'));

Я получаю следующую ошибку
[11:36:06] E/launcher - TypeError: Неверный локатор

Что я делаю неправильно?
Любая помощь высоко ценится. Заранее спасибо.

@firstor привет , спасибо за обходной путь)
однако мы не можем полностью использовать его в нашей команде, если он не объединен с основной веткой Protractor (мы используем Protractor на удаленных узлах, поэтому библиотеки всегда извлекаются при выполнении тестов).

Есть ли прогресс в слиянии https://github.com/angular/protractor/pull/4786 ?

Есть новости по этому поводу?

любое обновление? это блокировщик для многих спецификаций в последнее время (

Привет @firstor ,

Применение: Угловой 8
NodeJS: 12.13.1
машинопись: 3.5.3
Транспортир: 5.4.0

Спасибо за обходной путь.

Я пытаюсь найти элемент в ShadowRoot. В нашей архитектуре внешнего интерфейса у нас есть 3 уровня глубины

• Первый уровень: микроинтерфейсное приложение.
• Второй уровень: компонент микроинтерфейса
• Третий уровень: компонент углового материала

Доступны первый и второй уровень shadowRoot, но не последний.

Выдержка из исходного кода:

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

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

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

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

Журналы результатов:

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

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

Мы пробуем другое решение ( https://stackoverflow.com/questions/57979981/how-to-check-in-protractor-javescript-in-shadow-dom-if-the-button-is-enabled-o ). У нас такая же проблема:

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

Результат :

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

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

Есть ли ограничение в отношении доступа к глубине shadowRoot?

Спасибо за вашу поддержку.

V1nc3kr0

Привет @firstor ,

Применение: Угловой 8
NodeJS: 12.13.1
машинопись: 3.5.3
Транспортир: 5.4.0

Спасибо за обходной путь.

Я пытаюсь найти элемент в ShadowRoot. В нашей архитектуре внешнего интерфейса у нас есть 3 уровня глубины

• Первый уровень: микроинтерфейсное приложение.
• Второй уровень: компонент микроинтерфейса
• Третий уровень: компонент углового материала

Доступны первый и второй уровень shadowRoot, но не последний.

Выдержка из исходного кода:

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

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

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

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

Журналы результатов:

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

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

Мы пробуем другое решение ( https://stackoverflow.com/questions/57979981/how-to-check-in-protractor-javescript-in-shadow-dom-if-the-button-is-enabled-o ). У нас такая же проблема:

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

Результат :

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

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

Есть ли ограничение в отношении доступа к глубине shadowRoot?

Спасибо за вашу поддержку.

V1nc3kr0

Попробуйте, как
var el4 = el3 .element(by.css_sr('::sr mat-select'));

@firstor
Мое веб-приложение использует Polymer.js с 10 уровнями теневых корней.

Можно ли вызвать последний корневой элемент Shadow из верхнего узла вместо обхода отдельных корней Shadow.
Спасибо за поддержку.

Привет ребята ,
Я новичок в транспортире, и я хотел бы получить помощь о том, как включить этот скрипт локатора (shadowDOM) в транспортир.
Я провожу тестирование пользовательского интерфейса на полимерном веб-компоненте, версия транспортира: 5.4.2 и узел v12.13.

может ли кто-нибудь сказать мне, где включить этот скрипт? @firstor , @alagappan-qa

заранее спасибо.

@ругаба
Включите скрипт в файл Configuration.js в методе onPrepare().

спасибо @ alagappan-qa, сработало !!

Привет,

Можно ли включить этот скрипт в отдельный файл js, импортировать его в файл protractor.conf и включить в метод onPrepare(). Если да, то как мы это делаем?

Спасибо,
Лакшми

Если кому-то это нужно сейчас, см. https://github.com/angular/protractor/pull/4786#issuecomment -607204672 и https://github.com/angular/protractor/pull/4786#issuecomment -607224145.

Вы также можете использовать https://github.com/angular/protractor/pull/4786.patch или https://github.com/angular/protractor/pull/4786.diff.

Привет,

Можно ли включить этот скрипт в отдельный файл js, импортировать его в файл protractor.conf и включить в метод onPrepare(). Если да, то как мы это делаем?

Спасибо,
Лакшми

@Lakhs02
Объявите этот локатор в другом файле как

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

Затем в методе onPrepare()

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

>

@firstor
Мое веб-приложение использует Polymer.js с 10 уровнями теневых корней.

Можно ли вызвать последний корневой элемент Shadow из верхнего узла вместо обхода отдельных корней Shadow.
Спасибо за поддержку.

@firstor Я вижу в вашем профиле, что вы имеете опыт работы с теневым DOM. Не могли бы вы быть так любезны и привести пример доступа к вложенному теневому DOM? Я борюсь с этим уже две недели и до сих пор не могу получить доступ к некоторым элементам:
Это мой пример, мне нужно получить доступ к выделенному элементу div: div.a-choosen-text:

Я попробовал следующий локатор (и многие другие), но безуспешно:
nameOnTheProjectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)::sr appkit-panel::sr app-assignee- dropdown::sr appkit-dropdown::sr div.a-choosen-text'));

Что удивительно, локатор для app-project работает нормально, но когда углубляюсь, что бы я ни пытался, он не работает.
Отлично работает: static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)'));

Вы хоть представляете, что я делаю не так?
Заранее спасибо,
Магда

>

@firstor
Мое веб-приложение использует Polymer.js с 10 уровнями теневых корней.

Можно ли вызвать последний корневой элемент Shadow из верхнего узла вместо обхода отдельных корней Shadow.
Спасибо за поддержку.

@firstor Я вижу в вашем профиле, что вы имеете опыт работы с теневым DOM. Не могли бы вы быть так любезны и привести пример доступа к вложенному теневому DOM? Я борюсь с этим уже две недели и до сих пор не могу получить доступ к некоторым элементам:
Это мой пример, мне нужно получить доступ к выделенному элементу div: div.a-choosen-text:

Я попробовал следующий локатор (и многие другие), но безуспешно:
nameOnTheProjectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)::sr appkit-panel::sr app-assignee- dropdown::sr appkit-dropdown::sr div.a-choosen-text'));

Что удивительно, локатор для app-project работает нормально, но когда углубляюсь, что бы я ни пытался, он не работает.
Отлично работает: static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)'));

Вы хоть представляете, что я делаю не так?
Заранее спасибо,
Магда

Привет Магда,
В вашем случае теневой корень под панелью приложений WebElement не расширяется, чтобы узнать ваш элемент.
Но в элементе nameOnTheProjectTab он расширен, что вызывает эту проблему.
Попробуйте локатор элементов ниже,
nameOnTheProjectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)::sr app-assignee-dropdown::sr appkit- dropdown::sr div.a-choosen-text'));

OMG, я получил это сейчас, и я могу найти все локаторы, которые мне нужны!
Большое спасибо за помощь!
С наилучшими пожеланиями,
Магда

От: alagappan-QA [email protected]
Отправлено: суббота, 4 июля 2020 г., 4:34
Кому: angular/транспортир [email protected]
Копия: Бартковяк-Йовса, Магдалена [email protected] ; Комментарий [email protected]
Тема: Re: [угловой/транспортир] Запрос в поддержку ShadowDOM (#4367)

@firstor https://github.com/firstor
Мое веб-приложение использует Polymer.js с 10 уровнями теневых корней.
[Изображение удалено отправителем. RJvlf] https://user-images.githubusercontent.com/57852329/72205775-de7d6300-34ac-11ea-93f7-37917052ce90.png
Можно ли вызвать последний корневой элемент Shadow из верхнего узла вместо обхода отдельных корней Shadow.
Спасибо за поддержку.

@firstor https://github.com/firstor Я вижу в вашем профиле, что вы имеете опыт работы с теневым DOM. Не могли бы вы быть так любезны и привести пример доступа к вложенному теневому DOM? Я борюсь с этим уже две недели и до сих пор не могу получить доступ к некоторым элементам:
Это мой пример, мне нужно получить доступ к выделенному элементу div: div.a-choosen-text:
[Изображение удалено отправителем. изображение] https://user-images.githubusercontent.com/50359393/86498151-c532e080-bd84-11ea-867c-337085b96087.png

Я попробовал следующий локатор (и многие другие), но безуспешно:
nameOnTheProjectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)::sr appkit-panel::sr app-assignee- dropdown::sr appkit-dropdown::sr div.a-choosen-text'));

Что удивительно, локатор для app-project работает нормально, но когда углубляюсь, что бы я ни пытался, он не работает.
Отлично работает: static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)'));

Вы хоть представляете, что я делаю не так?
Заранее спасибо,
Магда

Привет Магда,
В вашем случае теневой корень под панелью приложений WebElement не расширяется, чтобы узнать ваш элемент.
Но в элементе nameOnTheProjectTab он расширен, что вызывает эту проблему.
Попробуйте локатор элементов ниже,
nameOnTheProjectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)::sr app-assignee-dropdown::sr appkit- dropdown::sr div.a-choosen-text'));

—
Вы получаете это, потому что вы прокомментировали.
Ответьте на это письмо напрямую, просмотрите его на GitHub https://github.com/angular/protractor/issues/4367#issuecomment-653710546 или отмените подписку https://github.com/notifications/unsubscribe-auth/AMAGYYOPZMDJCRSHT5XI45TRZ2ILDANCNFSM4DR44ABQ .

Capgemini Polska Sp. ооо,
ул. Żwirki i Wigury 16a 02-092 Варшава,
S?d Rejonowy dla M.ST. Варшавы, XII Выдзя? Gospodarczy Rejestrowy, номер KRS: 0000040605,
ИП: 526-11-84-467,
Высоко?? kapita?u zak?adowego: 16.403.320,00 z?.
Это сообщение содержит информацию, которая может быть привилегированной или конфиденциальной и является собственностью группы Capgemini. Оно предназначено только для того, кому оно адресовано. Если вы не являетесь предполагаемым получателем, вы не имеете права читать, распечатывать, сохранять, копировать, распространять, распространять или использовать это сообщение или любую его часть. Если вы получили это сообщение по ошибке, немедленно сообщите об этом отправителю и удалите все копии этого сообщения.

Всем привет! Нашел решение, позволяющее найти Элементы Тени внутри Корня Тени на любом глубоком уровне.
С помощью модуля узла «query-selector-shadow-dom» мы можем легко идентифицировать веб-элементы в Shadow DOM. Нет необходимости проходить через все корни Тени.
Используя элемент (by.shadowDomCss ('')) мы можем указать на элемент Web внутри Shadow Root на любом уровне.

Привет Алагапан,
не могли бы вы описать немного больше с примером пожалуйста.Спасибо

В среду, 19 августа 2020 г., в 7:52 alagappan-annamalai <
уведомления@github.com> написал:

Всем привет! Нашел решение найти теневые элементы внутри
Shadow Root на любом глубоком уровне.
С помощью модуля узла «query-selector-shadow-dom» мы можем
легко идентифицировать веб-элементы в Shadow DOM. Нет необходимости проходить через
через все корни Тени.
Используя element(by.shadowDomCss('')), мы можем указать на веб-элемент внутри
Shadow Root на любом уровне.

—
Вы получаете это, потому что вы прокомментировали.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/angular/protractor/issues/4367#issuecomment-676304234 ,
или отписаться
https://github.com/notifications/unsubscribe-auth/AK2OQDTZK2ZVJTICP3VGS3DSBPDJVANCNFSM4DR44ABQ
.

Привет, Алагаппан, не могли бы вы описать немного больше с примером, пожалуйста. Спасибо.
…
В среду, 19 августа 2020 г., в 7:52 alagappan-annamalai < @ . * > написал: Всем привет! Нашел решение найти Элементы Тени внутри Корня Тени на любом глубоком уровне. С помощью модуля узла «query-selector-shadow-dom» мы можем легко идентифицировать веб-элементы в Shadow DOM. Нет необходимости проходить через все корни Тени. Используя element(by.shadowDomCss('')), мы можем указать на веб-элемент внутри Shadow Root на любом уровне. — Вы получаете это, потому что вы прокомментировали. Ответьте на это письмо напрямую, просмотрите его на GitHub < # 4367 (комментарий) > или отмените подписку https://github.com/notifications/unsubscribe-auth/AK2OQDTZK2ZVJTICP3VGS3DSBPDJVANCNFSM4DR44ABQ .

На приведенном выше снимке экрана тег paper-input-container с id=container находится на корневом слое тени 6+. Чтобы взять этот веб-элемент, мы можем использовать element(by.shadowDomCss('paper-input#textbox paper-input-container#container')); Этот короткий идентификатор элемента будет действовать на WebElement.

Привет @firstor / @msbasanth , я не могу получить элемент, присутствующий в DOM с теневым корнем. Я скопировал ваш приведенный выше код в файл .ts, но получил ошибку компиляции в строке №. 6:
Код: пусть shadowDomInUse = (document.head.createShadowRoot .......
Ошибка: свойство createShadowRoot не существует для типа HTMLHeadElement .

Я также получил эту ошибку, и решение состоит в том, чтобы заменить createShadowRoot на attachShadow потому что метод createShadowRoot() устарел в пользу attachShadow(). См. ссылку:
https://developer.mozilla.org/en-US/docs/Web/API/Element/createShadowRoot

Кстати, @firstor , спасибо за этот вклад! До сих пор он работал отлично. Я потратил так много времени, пытаясь заставить by.deepCss работать с Protractor и Angular 10. Недавно я начал использовать нативную инкапсуляцию shadowDom со своими компонентами Angular 10, encapsulation: ViewEncapsulation.ShadowDom которые я люблю, но не доволен. не мог получить доступ к каким-либо вложенным элементам shadowDom во время тестирования e2e. К счастью, я нашел этот код!

@Роб4226
Пожалуйста, загляните в пакет https://www.npmjs.com/package/query-selector-shadow-dom

Выглядит многообещающе.

@msbasanth @Rob4226 Я новичок в транспортире, я пытаюсь получить доступ к тексту «Загрузки» на странице загрузки Chrome
мой код:

Я также пробовал var x = await element.element(by.css_sr('h1')).getText(); Это не работает.
Я получаю сообщение об ошибке ниже:

Спасибо за ваш ответ на этот вопрос!

Я исправил это, мне нужно создать отдельную переменную элемента для каждого вложенного теневого корневого элемента.

@firstor Я очень признателен за этот код. большое спасибо 👍

Здравствуйте, я сейчас пытаюсь выбрать теневой дом. Я получаю следующую ошибку при использовании обходного пути:

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

Использование:
const parent = element(by.css_sr('my-wrapper > div > div::sr my-data')); const domElement = parent.element(by.css('my-checkbox input')); console.log('Displayed', await domElement.isDisplayed());

<my-data> <my-checkbox> <input> <my-checkbox> </my-data> .....
Что я делаю неправильно?

Здравствуйте, я сейчас пытаюсь выбрать теневой дом. Я получаю следующую ошибку при использовании обходного пути:

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

Использование:
const parent = element(by.css_sr('my-wrapper > div > div::sr my-data')); const domElement = parent.element(by.css('my-checkbox input')); console.log('Displayed', await domElement.isDisplayed());

<my-data> <my-checkbox> <input> <my-checkbox> </my-data> .....
Что я делаю неправильно?

Привет @wasoek , Можете ли вы предоставить инструмент разработчика Chrome> Проверить элемент для этого элемента из Shadow Root. Это даст более подробную информацию по этому вопросу.

Привет,

Это может быть обработано с помощью любого из следующих 2 методов,

Пусть element1 = element.all(by.css_shadowroot('downloads-manager::sr div')).get(1)

Пусть element2 = element1.element(by.css_shadowroot('::sr downloads-item::sr div::sr downloads-item')).getText();
ИЛИ

browser.element(by.css_shadowroot('менеджер загрузок::sr div[id="mainContainer"]::sr загрузок-item::sr div::sr загрузок-item')).getText();
[здесь вместо n-го дочернего элемента мы используем идентификатор, чтобы он сфокусировался на элементе]

Спасибо,
Алагаппан А

От: shopmujahid [email protected]
Отправлено: четверг, 3 декабря 2020 г., 9:20
Кому: angular/транспортир [email protected]
Копия: Alagappan Annamalai [email protected]
Тема: Re: [угловой/транспортир] Запрос в поддержку ShadowDOM (#4367)

Я пытаюсь получить доступ к элементам во втором элементе div теневого дома (выделено), но он всегда извлекает первый элемент div с сообщением ниже:

W/element - для локатора найдено более одного элемента by.css_shadowroot("downloads-manager::sr div") - будет использоваться первый результат

ниже мой xpath:
browser.element(by.css_shadowroot('менеджер загрузок::sr div:nth-child (1)::sr downloads-item::sr div::sr downloads-item')).getText();

может ли кто-нибудь помочь мне в этом? заранее спасибо

[изображение] https://user-images.githubusercontent.com/58770415/100961235-336c0280-34df-11eb-9618-1f24ffcd62a0.png

—
Вы получаете это, потому что вы прокомментировали.
Ответьте на это письмо напрямую, просмотрите его на GitHub https://github.com/angular/protractor/issues/4367#issuecomment-737647758 или отмените подписку https://github.com/notifications/unsubscribe-auth/AORWPO6XNK7RUWPVHCWKBCTSS4DH5ANCNFSM4DR44ABQ .

Я пытаюсь получить доступ к одному из элементов div внутри shadow dom, и nth-child(), и type-of() в моем случае не работают.
кто-нибудь сталкивался с этой проблемой раньше?

Ниже приведена структура DOM и мой xpath.

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

Я получаю сообщение об ошибке "элемент не найден".

Любая помощь будет принята с благодарностью. Заранее спасибо.

Привет,

Попробуйте удалить ::sr в локаторе элементов, так как он находится за пределами Shadow Root.
Используйте любой из этих двух локаторов элементов и посмотрите, работает он или нет.

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

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

Спасибо,

Алагаппан А
От: shopmujahid [email protected]
Отправлено: среда, 9 декабря 2020 г., 12:09
Кому: angular/транспортир [email protected]
Копия: Alagappan Annamalai [email protected]
Тема: Re: [угловой/транспортир] Запрос в поддержку ShadowDOM (#4367)

Я пытаюсь получить доступ к одному из элементов div внутри shadow dom, и nth-child(), и type-of() в моем случае не работают.
кто-нибудь сталкивался с этой проблемой раньше?

Ниже приведена структура DOM и мой xpath.
[2134234] https://user-images.githubusercontent.com/58770415/101593797-cc9e8b80-39ad-11eb-8fd0-a7cd7541773f.jpg

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

Я получаю сообщение об ошибке "элемент не найден".

Любая помощь будет принята с благодарностью. Заранее спасибо.

—
Вы получаете это, потому что вы прокомментировали.
Ответьте на это письмо напрямую, просмотрите его на GitHub https://github.com/angular/protractor/issues/4367#issuecomment-741567009 или отмените подписку https://github.com/notifications/unsubscribe-auth/AORWPO7CSSI7P5GH37O74R3ST4LO5ANCNFSM4DR44ABQ .

Спасибо @alagappan-annamalai! 👍 второе решение сработало для меня, удалив ::sr и добавив tagname.classname, однако я столкнулся с другой странной проблемой, связанной с отсутствием доступа к дочерним элементам ниже:

Мне нужно получить доступ к выделенному элементу выше

пробовал с обоими xpaths ниже:
browser.element(by.css_sr('d2l-navigation d2l-navigation-main-header div.d2l-navigation-header-right div d2l-dropdown d2l-dropdown-content div div div div ul:nth-child(2)' ))

и

browser.element(by.css_sr('d2l-navigation d2l-navigation-main-header div.d2l-navigation-header-right div d2l-dropdown d2l-dropdown-content div div div div ul li._(имя класса li добавит к нему некоторый текст, когда мы наведем на него курсор)

Я получаю сообщение об ошибке "элемент не найден".
Заранее спасибо.

Спасибо @alagappan-annamalai! 👍 второе решение сработало для меня, удалив ::sr и добавив tagname.classname, однако я столкнулся с другой странной проблемой, связанной с отсутствием доступа к дочерним элементам ниже:

Мне нужно получить доступ к выделенному элементу выше

пробовал с обоими xpaths ниже:
browser.element(by.css_sr('d2l-navigation d2l-navigation-main-header div.d2l-navigation-header-right div d2l-dropdown d2l-dropdown-content div div div div ul:nth-child(2)' ))

и

browser.element(by.css_sr('d2l-navigation d2l-navigation-main-header div.d2l-navigation-header-right div d2l-dropdown d2l-dropdown-content div div div div ul li.__')) (имя класса li добавит к нему некоторый текст, когда мы наведем на него курсор)

Я получаю сообщение об ошибке "элемент не найден".
Заранее спасибо.

С этим можно справиться простым способом без css_sr и предоставления нескольких веб-элементов HTML.
browser.element.all(by.css('d2l-navigation d2l-navigation-main-header ul[class="d2l-datalist vui-list"] li')).get(1);

Браво, сработало как шарм Спасибо @ alagappan-annamalai! ⁇