Protractor: ShadowDOM 지원 요청

에 만든 2017년 07월 06일 · 49코멘트 · 출처: angular/protractor

ShadowDOM 지원이 아직 누락된 것 같습니다.

배경

저는 ShadowDOM v1 사양을 구현하는 일부 Polymer 2 구성 요소로 작업 중이며 e2e 테스트를 실행하려면 shadowRoot 내부의 요소를 선택해야 합니다. deepCss 가 해결책이 될 수 있지만 저에게는 효과가 없습니다. 내가 볼 수있는 한 by.deepCss 는 by.css 와 특별한 차이가 없지만 주어진 CSS 선택기의 시작 부분에 * /deep/ 를 추가하지만 /deep/ 는 브라우저에서 더 이상 사용되지 않습니다.

다음 버전으로 작업하고 있습니다.

노드 버전: v6.10.3
각도기 버전: v5.1.2
각도 버전: v4.2.4
브라우저: Chrome
운영 체제 및 버전: Ubuntu v16.04.2 AMD64 LTS Xenial

다음을 포함하여 모든 관련 기사를 확인했지만 만족스러운 답변을 얻지 못한 것 같습니다.

해결 방법

어쨌든 사용자 지정 로케이터를 추가하여 ShadowDOM 요소의 내부 요소를 선택할 수 있습니다. 내 해결 방법은 다음과 같습니다.

/**
 * Usage:
 *   O  element(by.css_sr('#parentElement #innerElement'))          <=> $('#parentElement #innerElement')
 *   O  element(by.css_sr('#parentElement::sr #innerElement'))      <=> $('#parentElement').shadowRoot.$('#innerElement')
 *   O  element.all(by.css_sr('#parentElement .inner-element'))     <=> $$('#parentElement .inner-element')
 *   O  element.all(by.css_sr('#parentElement::sr .inner-element')) <=> $$('#parentElement').shadowRoot.$$('.inner-element')
 *   O  parentElement.element(by.css_sr('#innerElement'))           <=> parentElement.$('#innerElement')
 *   O  parentElement.element(by.css_sr('::sr #innerElement'))      <=> parentElement.shadowRoot.$('#innerElement')
 *   O  parentElement.all(by.css_sr('.inner-element'))              <=> parentElement.$$('.inner-element')
 *   O  parentElement.all(by.css_sr('::sr .inner-element'))         <=> parentElement.shadowRoot.$$('.inner-element')
 */
by.addLocator('css_sr', (cssSelector: string, opt_parentElement, opt_rootSelector) => {
    let selectors = cssSelector.split('::sr');
    if (selectors.length === 0) {
        return [];
    }

    let shadowDomInUse = (document.head.createShadowRoot || document.head.attachShadow);
    let getShadowRoot  = (el) => ((el && shadowDomInUse) ? el.shadowRoot : el);
    let findAllMatches = (selector: string, targets: any[], firstTry: boolean) => {
        let using, i, matches = [];
        for (i = 0; i < targets.length; ++i) {
            using = (firstTry) ? targets[i] : getShadowRoot(targets[i]);
            if (using) {
                if (selector === '') {
                    matches.push(using);
                } else {
                    Array.prototype.push.apply(matches, using.querySelectorAll(selector));
                }
            }
        }
        return matches;
    };

    let matches = findAllMatches(selectors.shift().trim(), [opt_parentElement || document], true);
    while (selectors.length > 0 && matches.length > 0) {
        matches = findAllMatches(selectors.shift().trim(), matches, false);
    }
    return matches;
});

결론

해결 방법은 내 쪽에서 작동하므로 질문합니다~ 내가 놓친 것이 있거나 해결 방법에서 각도기의 배경 원리를 오용했나요? 정중하게 말씀드리지만 ... 귀하의 특정 규칙을 너무 많이 위반하지 않는다면 다음 Protractor 업데이트에 ShadowDOM 지원을 추가할 수 있습니까?

감사합니다.

PRs plz!

출처

firstor

👍21

가장 유용한 댓글

이에 대한 상태는 무엇입니까? by.shadowRoot 함수를 사용할 수 있기를 바랍니다.

SirJackovich 에 2017년 12월 13일

👍4

모든 49 댓글

@first87

이것을 공유해 주셔서 감사합니다. 보기 좋고 좋은 해결 방법입니다.

최신 버전의 각도기에서 이것을 보려면 element(by. shadowRoot('#parentElement #innerElement')) 와 같은 새 로케이터로 PR을 추가할 수 있습니다.

wswebcreation 에 2017년 07월 17일

@wwebcreation 좋아, 좋아. PR을 추가하겠습니다.
하지만 이동하기 전에 한 가지를 만들고 싶어 : 당신은 선택의이 스타일 괜찮 #parentElement::sr #innerElement 표시하는 요소 #innerElement 의 그림자 나무 내부 #parentElement ?

firstor 에 2017년 07월 17일

@first87

잘생겼어요👍

나는 PR에 대해 결정하는 (유일한) 사람이 아닙니다. PR도 검토할 핵심 구성원이 결국 결정합니다.

훌륭한 추가와 명확한 기록이 될 것 같으니 어서 가보세요 😉

wswebcreation 에 2017년 07월 17일

@wwebcreation 내 커밋을 푸시

firstor 에 2017년 07월 17일

안녕하세요 @first87님 ,

이 문서를 본 적이 있습니까? 그것은 당신이 취하는 데 필요한 모든 단계를 담고 있습니다.

wswebcreation 에 2017년 07월 18일

@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 모든 테스트 통과

이제 다음에는 무엇을 해야 합니까?

firstor 에 2017년 07월 18일

안녕하세요 @first87님 ,

프로젝트를 분기하여 시작합니다.
그러면 계정에 추가됩니다.
로컬 시스템에 복제 수행
그런 다음 변경 사항을 푸시하고 "PR 작성" 버튼을 클릭하십시오.

그것은 트릭을해야합니다

wswebcreation 에 2017년 07월 18일

@wswebcreation 네 , 안내해주셔서 감사합니다.

firstor 에 2017년 07월 18일

@wswebcreation 방금 PR #4392 를 만들었습니다.

firstor 에 2017년 07월 18일

👍2

@first87 티앤엑스 !!

wswebcreation 에 2017년 07월 18일

이에 대한 상태는 무엇입니까? by.shadowRoot 함수를 사용할 수 있기를 바랍니다.

SirJackovich 에 2017년 12월 13일

👍4

누군가 이 문제를 해결하는 데 도움이 되길 바랍니다 .

firstor 에 2018년 01월 23일

👍1

@first87 내 e2e 테스트에서 새 로케이터를 사용해 보았습니다. 나는 그림자 돔에서 요소를 얻을 수 없습니다.

환경: 폴리머 웹 구성 요소가 있는 Angular(v5) 애플리케이션. e2e 테스트를 실행하기 위한 각도기.

각도 CLI: 1.6.4
노드: 6.10.0
각도: 5.2.0
@angular/cli: 1.6.4
타이프스크립트: 2.5.3
아래는 크롬에서 확장된 폴리머 웹 구성 요소 섀도우 루트입니다. 이 사용자 정의 요소 내에서 입력 유형 = "텍스트"를 볼 수 있습니다.

각도기 by.css_sr을 사용하여 사용자 지정 폴리머 구성 요소 내부의 입력 요소에 액세스할 수 없습니다.

var polymerFirstName = 요소(by.className('polyFName'));
var inputElement = polymerFirstName.element(by.css_sr('입력')); // 아무것도 반환하지 않습니다.

"로케이터를 사용하여 요소를 찾을 수 없음: by.css_sr("input")" 오류로 실패했습니다.

shadowroot

다음과 같은 UI 자동화 작업을 수행할 수 있도록 내부 입력 요소에 액세스해야 합니다.
polymerFirstName.element(by.css_sr('입력')).clear();
polymerFirstName.element(by.css_sr('input')).sendKeys('Ritchie');

내가 놓치고 있는 것이 있습니까?

msbasanth 에 2018년 01월 24일

@msbasanth by.css_sr 가 요소의 섀도우 루트에서 요소를 찾기 시작하지 않기 때문에 ::sr 놓쳤습니다 ~ 각 ::sr 대한 모든 요소의 섀도우 DOM 트리를 파헤칠 것입니다
따라서 입력 요소 찾기를 다음과 같이 바꿔야 합니다.

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

firstor 에 2018년 01월 24일

❤1

@first87 덕분 에 매력처럼 작동했습니다.
곧 이 shadow DOM 지원을 각도기에서 얻을 수 있기를 바랍니다.

msbasanth 에 2018년 01월 25일

이것은 작동합니다! 감사합니다! 특히 중첩된 그림자 돔이 있는 경우 요소를 찾는 것이 매우 어려울 것입니다. 콘솔에서 로케이터를 테스트할 수 없기 때문입니다. 다시 한 번 감사합니다!

rominoushana 에 2018년 02월 16일

@firstor 정말 감사합니다! 이것이 곧 통합될 수 있기를 바랍니다....

그래도 이것에 대해 당신의 도움을 받기를 바랐습니다. 필요에 따라 ::sr을 사용하여 올바른 값을 얻을 수 있지만 title.getText() 를 수행하면 "잘못된" 값을 얻는 것 같습니다. 오브제로 다가오는 것 같습니다. 아래의 다음 출력을 참조하십시오.

[ 'Title' ]은(는) 'Title'이어야 합니다.

해당 개체/배열에서 문자열을 가져오는 데 성공하지 못했고 아이디어가 있는지 궁금합니다.

해결 방법에 대해 다시 한 번 감사드립니다!!

편집: 무시!! 이것을 참조하고 https://stackoverflow.com/questions/29478905/protractor-element-gettext-returns-an-object-and-not-string 트릭을 수행했습니다

oseasmoran73 에 2019년 01월 04일

@firstor / @msbasanth 님 안녕하세요, shadow-root DOM에 있는 요소를 가져올 수 없습니다. 위의 코드를 .ts 파일에 복사했지만 라인 번호에서 컴파일 오류가 발생했습니다. 6:
코드: let shadowDomInUse = (document.head.createShadowRoot .......
오류: 'HTMLHeadElement' 유형에 'createShadowRoot' 속성이 없습니다 .

응용 프로그램: 각도 v7
노드JS: 6.9.0
타이프스크립트: 2.3.3
각도기: 5.3.2

shadow-root 내부의 입력 상자에 일부 텍스트를 입력하는 방법을 사용하는 방법에 대해 자세히 설명해 주시겠습니까?
감사 해요!

ssudhanshu 에 2019년 03월 07일

❤1

@firstor
감사합니다. 이렇게 사용하려고 합니다.
var searchBar = 요소(by.css_sr('::sr 입력'));
var searchButton = 요소(by.css_sr('::sr i'));

아래 오류가 발생합니다
[11:36:06] E/런처 - TypeError: 잘못된 로케이터

내가 뭘 잘못하고 있죠?
도움을 주시면 감사하겠습니다. 미리 감사드립니다.

ansreenath 에 2019년 05월 24일

@firstor 안녕하세요, 해결 방법에 감사드립니다)
그러나 Protractor 마스터 브랜치에 병합되지 않는 한 우리 팀에서 완전히 사용할 수 없습니다(원격 노드에서 Protractor를 사용하므로 테스트가 실행될 때 라이브러리를 항상 끌어옵니다).

https://github.com/angular/protractor/pull/4786 병합에 진전이 있습니까?

alexzavg 에 2019년 09월 04일

이에 대한 업데이트가 있습니까?

sudeeppaudyal 에 2019년 09월 16일

모든 업데이트? 이것은 최근에 많은 사양에 대한 차단기입니다(

alexzavg 에 2019년 11월 29일

안녕하세요 @firstor님

응용 프로그램: Angular 8
노드JS : 12.13.1
타이프스크립트: 3.5.3
각도기 : 5.4.0

해결 방법을 알려주셔서 감사합니다.

ShadowRoot에서 요소를 찾으려고 합니다. 프론트엔드 아키텍처에는 3가지 깊이 수준이 있습니다.

1단계 : 마이크로 프론트엔드 애플리케이션
두 번째 수준: 마이크로 프론트엔드 구성 요소
세 번째 수준 : Angular 재료 구성 요소

Protractor_ShadowRoot-issue

첫 번째 및 두 번째 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

v1nc3kr0 에 2019년 12월 12일

안녕하세요 @firstor님
응용 프로그램: Angular 8
노드JS : 12.13.1
타이프스크립트: 3.5.3
각도기 : 5.4.0
해결 방법을 알려주셔서 감사합니다.
ShadowRoot에서 요소를 찾으려고 합니다. 프론트엔드 아키텍처에는 3가지 깊이 수준이 있습니다.
1단계 : 마이크로 프론트엔드 애플리케이션
두 번째 수준: 마이크로 프론트엔드 구성 요소
세 번째 수준 : Angular 재료 구성 요소
첫 번째 및 두 번째 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 매트 선택'));

alagappan-qa 에 2020년 01월 10일

@firstor
내 웹 애플리케이션은 10개 레벨의 섀도우 루트가 있는 Polymer.js를 사용하고 있습니다.
RJvlf
개별 섀도우 루트를 탐색하는 대신 최상위 노드에서 마지막 섀도우 루트 요소를 호출할 수 있습니까?
지원해 주셔서 감사합니다.

alagappan-qa 에 2020년 01월 11일

안녕하세요 여러분 ,
저는 각도기를 처음 사용하고 이 로케이터 스크립트(shadowDOM)를 각도기에 포함시키는 방법에 대한 도움을 받을 수 있기를 바랍니다.
나는 폴리머 웹 구성 요소, 각도기 버전: 5.4.2 및 노드 v12.13에 대한 몇 가지 UI 테스트를 하고 있습니다.

아무도 그 스크립트를 포함할 위치를 말해 줄 수 있습니까? @firstor , @alagappan-qa

미리 감사드립니다.

rugaba 에 2020년 01월 15일

@rugaba
onPrepare() 메서드 아래의 Configuration.js 파일에 스크립트를 포함합니다.

alagappan-qa 에 2020년 01월 20일

thx @ alagappan-qa, 성공했습니다!!

rugaba 에 2020년 01월 22일

안녕,

이 스크립트를 별도의 js 파일에 포함하고 protractor.conf 파일에 가져와서 onPrepare() 메서드에 포함할 수 있습니까? 그렇다면 어떻게 해야 합니까?

감사 해요,
락슈미

Lakhs02 에 2020년 03월 14일

누군가 지금 이것을 필요로 하는 경우 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를 사용할 수도 있습니다.

DanielRuf 에 2020년 04월 01일

안녕,
이 스크립트를 별도의 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();
}

pntgoswami18 에 2020년 05월 21일

>

@firstor
내 웹 애플리케이션은 10개 레벨의 섀도우 루트가 있는 Polymer.js를 사용하고 있습니다.

개별 섀도우 루트를 탐색하는 대신 최상위 노드에서 마지막 섀도우 루트 요소를 호출할 수 있습니까?
지원해 주셔서 감사합니다.

@firstor 나는 당신의 프로필에서 당신이 shadow DOM에 대해 경험한 것을 볼 수 있습니다. 중첩된 Shadow DOM에 액세스하는 방법에 대해 친절하게 예를 들어 주시겠습니까? 지금 2주 동안 어려움을 겪고 있지만 여전히 일부 요소에 액세스할 수 없습니다.
이것은 내 예입니다. 강조 표시된 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)'));

내가 뭘 잘못하고 있는지 알아?
미리 감사드립니다.
마그다

magdalenaBartkowiakJowsa 에 2020년 07월 03일

>
@firstor
내 웹 애플리케이션은 10개 레벨의 섀도우 루트가 있는 Polymer.js를 사용하고 있습니다.

개별 섀도우 루트를 탐색하는 대신 최상위 노드에서 마지막 섀도우 루트 요소를 호출할 수 있습니까?
지원해 주셔서 감사합니다.
@firstor 나는 당신의 프로필에서 당신이 shadow DOM에 대해 경험한 것을 볼 수 있습니다. 중첩된 Shadow DOM에 액세스하는 방법에 대해 친절하게 예를 들어 주시겠습니까? 지금 2주 동안 어려움을 겪고 있지만 여전히 일부 요소에 액세스할 수 없습니다.
이것은 내 예입니다. 강조 표시된 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 appkit-panel 아래의 섀도우 루트는 요소를 찾기 위해 확장되지 않습니다.
그러나 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-chosen-text'));

alagappan-qa 에 2020년 07월 04일

OMG, 이제 얻었고 필요한 모든 로케이터를 찾을 수 있습니다!
도움을 주셔서 정말 감사합니다!
친애하는,
마그다

보낸 사람: alagappan-qa [email protected]
보냄: 2020년 7월 4일 토요일 오전 4:34
받는 사람: 각도/각도기 [email protected]
참조: Bartkowiak-Jowsa, Magdalena [email protected] ; 댓글 [email protected]
제목: Re: [각도/각도기] ShadowDOM 지원 요청(#4367)

@firstor https://github.com/firstor
내 웹 애플리케이션은 10개 레벨의 섀도우 루트가 있는 Polymer.js를 사용하고 있습니다.
[발신자가 삭제한 이미지입니다. RJvlf] https://user-images.githubusercontent.com/57852329/72205775-de7d6300-34ac-11ea-93f7-37917052ce90.png
개별 섀도우 루트를 탐색하는 대신 최상위 노드에서 마지막 섀도우 루트 요소를 호출할 수 있습니까?
지원해 주셔서 감사합니다.

@firstor https://github.com/firstor 프로필에서 Shadow DOM에 대한 경험이 있음을 알 수 있습니다. 중첩된 Shadow DOM에 액세스하는 방법에 대해 친절하게 예를 들어 주시겠습니까? 지금 2주 동안 어려움을 겪고 있지만 여전히 일부 요소에 액세스할 수 없습니다.
이것은 내 예입니다. 강조 표시된 div 요소에 액세스해야 합니다. div.a-choosen-text:
[발신자가 삭제한 이미지입니다. 이미지] https://user-images.githubusercontent.com/50359393/86498151-c532e080-bd84-11ea-867c-337085b96087.png

내가 뭘 잘못하고 있는지 알아?
미리 감사드립니다.
마그다

—
당신이 댓글을 달았기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하거나 GitHub https://github.com/angular/protractor/issues/4367#issuecomment-653710546 에서 확인하거나 https://github.com/notifications/unsubscribe-auth/AMAGYYOPZMDJCRSHT5XI45TRZ2ILDANCNFSM4DR44ABQ 구독을 취소

캡제미니 폴스카 Sp. 즈우,
울. Żwirki i Wigury 16a 02-092 Warszawa,
S?d Rejonowy dla M.ST. Warszawy, XII Wydzia? Gospodarczy Rejestrowy, nr KRS: 0000040605,
NIP: 526-11-84-467,
위소코?? kapita?u zak?adowego: 16.403.320,00z?.
이 메시지에는 권한이 있거나 기밀일 수 있는 정보가 포함되어 있으며 Capgemini Group의 자산입니다. 그것은 주소가 지정된 사람만을 위한 것입니다. 귀하가 의도한 수신자가 아닌 경우 이 메시지 또는 그 일부를 읽거나, 인쇄하거나, 보관하거나, 복사하거나, 배포하거나, 사용할 권한이 없습니다. 이 메시지를 잘못 수신한 경우 발신자에게 즉시 알리고 이 메시지의 모든 사본을 삭제하십시오.

magdalenaBartkowiakJowsa 에 2020년 07월 07일

안녕하세요 여러분, 깊은 수준에서 그림자 루트 내부의 그림자 요소를 찾는 솔루션을 찾았습니다.
노드 모듈 "query-selector-shadow-dom"의 도움으로 Shadow DOM의 웹 요소를 쉽게 식별할 수 있습니다. 모든 그림자 루트를 통과할 필요가 없습니다.
element(by.shadowDomCss('')), 우리는 모든 수준에서 Shadow Root 내부의 Web 요소를 가리킬 수 있습니다.

alagappan-annamalai 에 2020년 08월 19일

안녕하세요 Alagappan님
예를 들어 좀 더 자세히 설명해 주시겠습니까? 감사합니다.

2020년 8월 19일 수요일 오전 7:52 alagappan-annamalai <
[email protected]>은 다음과 같이 썼습니다.

안녕하세요 여러분, 내부의 그림자 요소를 찾는 솔루션을 찾았습니다.
모든 깊은 수준의 그림자 루트.
노드 모듈 "query-selector-shadow-dom"의 도움으로 우리는
Shadow DOM에서 웹 요소를 쉽게 식별합니다. 횡단할 필요 없음
모든 그림자 뿌리를 통해.
element(by.shadowDomCss(''))를 사용하여 내부의 웹 요소를 가리킬 수 있습니다.
모든 수준에서 그림자 루트.
—
당신이 댓글을 달았기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/angular/protractor/issues/4367#issuecomment-676304234 ,
또는 구독 취소
https://github.com/notifications/unsubscribe-auth/AK2OQDTZK2ZVJTICP3VGS3DSBPDJVANCNFSM4DR44ABQ
.

sudeeppaudyal 에 2020년 08월 19일

안녕하세요 Alagappan님, 예를 들어 좀 더 자세히 설명해 주시겠습니까?감사합니다.
…
2020년 8월 19일 수요일 오전 7:52 alagappan-annamalai < @ . * > 작성: 안녕하세요 여러분, 모든 딥 레벨에서 Shadow Root 내부의 Shadow Elements를 찾는 솔루션을 찾았습니다. 노드 모듈 "query-selector-shadow-dom"의 도움으로 Shadow DOM의 웹 요소를 쉽게 식별할 수 있습니다. 모든 그림자 루트를 통과할 필요가 없습니다. element(by.shadowDomCss(''))를 사용하여 모든 수준에서 Shadow Root 내부의 Web 요소를 가리킬 수 있습니다. — 당신이 댓글을 달았기 때문에 이것을 받게 됩니다. 이 이메일에 직접 답장하거나 GitHub < #4367 (comment) >에서 확인하거나 https://github.com/notifications/unsubscribe-auth/AK2OQDTZK2ZVJTICP3VGS3DSBPDJVANCNFSM4DR44ABQ 구독을 취소

72205775-de7d6300-34ac-11ea-93f7-37917052ce90
위의 스크린샷에서 id=container인 태그 paper-input-container는 6+ 섀도우 루트 레이어에 있습니다. 이 webElement를 사용하려면 element(by.shadowDomCss('paper-input#textbox paper-input-container#container')); 이 짧은 요소 식별자는 WebElement에서 작동합니다.

alagappan-annamalai 에 2020년 08월 20일

@firstor / @msbasanth 님 안녕하세요, shadow-root DOM에 있는 요소를 가져올 수 없습니다. 위의 코드를 .ts 파일에 복사했지만 라인 번호에서 컴파일 오류가 발생했습니다. 6:
코드: let shadowDomInUse = (document.head.createShadowRoot .......
오류: 'HTMLHeadElement' 유형에 'createShadowRoot' 속성이 없습니다 .

또한 이 오류가 발생했으며 해결책은 createShadowRoot 를 attachShadow 로 바꾸는 것입니다. 왜냐하면 createShadowRoot() 메소드가 attachShadow()를 위해 더 이상 사용되지 않기 때문입니다. 참조 참조:
https://developer.mozilla.org/en-US/docs/Web/API/Element/createShadowRoot

그건 그렇고 @firstor , 이 공헌에 감사드립니다! 지금까지 훌륭하게 작동했습니다. 나는려고 너무 많은 시간을 낭비 by.deepCss 나는 최근에 내 코너 (10 개) 구성 요소와 기본 shadowDom 캡슐화를 사용하기 시작했다 각도기와 각도 (10)와 일에 encapsulation: ViewEncapsulation.ShadowDom 내가 사랑하지만 행복 I되지 않은 e2e 테스트 중에 중첩된 shadowDom 요소에 액세스할 수 없습니다. 고맙게도 이 코드를 찾았습니다!

Rob4226 에 2020년 09월 24일

@Rob4226
https://www.npmjs.com/package/query-selector-shadow-dom 패키지를 살펴보십시오.

유망해 보인다.

msbasanth 에 2020년 09월 24일

@msbasanth @Rob4226 저는 각도기를 처음 사용합니다. 크롬 다운로드 페이지의 '다운로드' 텍스트에 액세스하려고 합니다.
내 코드 :

나는 또한 시도했다 var x = await element.element(by.css_sr('h1')).getText(); 작동하지 않습니다.
아래 오류 메시지가 나타납니다.

이 감사합니다!

shopmujahid 에 2020년 10월 09일

수정했습니다. 모든 중첩된 섀도 루트 요소에 대해 별도의 요소 변수를 생성해야 합니다.

@firstor 이 코드에 대해 대단히 감사합니다. 많은 감사합니다 👍

shopmujahid 에 2020년 10월 10일

안녕하세요 저는 현재 shadow dom을 선택하는 tr입니다. 해결 방법을 사용할 때 다음 오류가 발생합니다.

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 에 2020년 11월 30일

안녕하세요 저는 현재 shadow dom을 선택하는 tr입니다. 해결 방법을 사용할 때 다음 오류가 발생합니다.
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 개발자 도구 > 요소 검사를 제공할 수 있습니까? 그러면 이 문제에 대해 더 자세히 알 수 있습니다.

alagappan-annamalai 에 2020년 12월 01일

안녕,

이것은 아래 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('downloads-manager::sr div[id=”mainContainer”]::sr 다운로드 항목::sr div::sr 다운로드 항목')).getText();
[여기서 n번째 자식 대신에 ID를 사용하므로 요소에 초점을 맞춥니다.]

감사 해요,
알라가판 A

보낸 사람: shopmujahid [email protected]
보냄: 2020년 12월 3일 목요일 오전 9:20
받는 사람: 각도/각도기 [email protected]
참조: Alagappan Annamalai [email protected] ; 댓글 [email protected]
제목: Re: [각도/각도기] ShadowDOM 지원 요청(#4367)

Shadow dom(강조 표시됨)의 두 번째 div 요소 아래에 있는 요소에 액세스하려고 하지만 항상 아래 메시지와 함께 첫 번째 div 요소를 검색합니다.

W/요소 - locator by.css_shadowroot("downloads-manager::sr div")에 대해 둘 이상의 요소가 발견됨 - 첫 번째 결과가 사용됩니다.

아래는 내 xpath입니다.
browser.element(by.css_shadowroot('downloads-manager::sr div:nth-child (1)::sr 다운로드 항목::sr div::sr 다운로드 항목')).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 구독을 취소

alagappan-annamalai 에 2020년 12월 03일

내 경우에는 nth-child()와 type-of()가 모두 작동하지 않는 shadow dom 내부의 div 요소 중 하나에 액세스하려고 합니다.
전에이 문제에 직면 한 사람이 있습니까?

아래는 DOM 구조와 내 xpath입니다.
2134234

Browser.element(by.css_shadowroot('d2l-navigation::sr d2l-navigation-main- header:nth-type-of (3)'))를 기다립니다

요소를 찾을 수 없음 오류가 수신됩니다.

어떤 도움이라도 대단히 감사하겠습니다. 미리 감사드립니다.

shopmujahid 에 2020년 12월 09일

안녕,

섀도우 루트 외부에 있으므로 요소 로케이터에서 ::sr을 제거해 보세요.
이 2개의 요소 로케이터 중 하나를 사용하여 작동하는지 여부를 확인하십시오.

Browser.element(by.css_shadowroot('d2l-navigation d2l-navigation-main- header:nth-type-of (3)'))를 기다립니다
또는

browser.element(by.css_shadowroot('d2l-navigation d2l-navigation-main-header div. d2l-navigation-header-right'))를 기다립니다.

감사 해요,

알라가판 A
보낸 사람: shopmujahid [email protected]
보냄: 2020년 12월 9일 수요일 오후 12:09
받는 사람: 각도/각도기 [email protected]
참조: Alagappan Annamalai [email protected] ; 댓글 [email protected]
제목: Re: [각도/각도기] ShadowDOM 지원 요청(#4367)

아래는 DOM 구조와 내 xpath입니다.
[2134234] https://user-images.githubusercontent.com/58770415/101593797-cc9e8b80-39ad-11eb-8fd0-a7cd7541773f.jpg

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/AORWPO7CSSI7P5GH37O74R3ST4LO5ANNCNFSM4DR44ABQ 구독을 취소

alagappan-annamalai 에 2020년 12월 09일

@alagappan-annamalai 감사합니다! 👍 두 번째 솔루션은 ::sr을 제거하고 tagname.classname을 추가하여 저에게 효과적이었습니다. 그러나 아래의 자식 요소에 액세스하지 못하는 다른 이상한 문제가 발생했습니다.
2134234

위의 강조 표시된 요소에 액세스해야 합니다.

아래의 두 xpath로 시도했습니다.
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 클래스 이름은 마우스를 가져갈 때 일부 텍스트를 추가합니다.)

요소를 찾을 수 없음 오류가 수신됩니다.
미리 감사드립니다.

shopmujahid 에 2020년 12월 11일

@alagappan-annamalai 감사합니다! 👍 두 번째 솔루션은 ::sr을 제거하고 tagname.classname을 추가하여 저에게 효과적이었습니다. 그러나 아래의 자식 요소에 액세스하지 못하는 다른 이상한 문제가 발생했습니다.
위의 강조 표시된 요소에 액세스해야 합니다.
아래의 두 xpath로 시도했습니다.
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 에 2020년 12월 11일

Bravo, 매력처럼 일했습니다 @lagappan-annamalai 감사합니다! ⁇

shopmujahid 에 2020년 12월 12일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Protractor: ShadowDOM 지원 요청

배경

해결 방법

결론

가장 유용한 댓글

모든 49 댓글

관련 문제