Protractor: طلب دعم ShadowDOM

@ first87

Tnx لتقاسم هذا. يبدو لطيفًا وهو حل رائع.

إذا كنت ترغب في رؤية هذا في إصدار أحدث من Protractor ، يمكنك إضافة علاقات عامة مع محدد موقع جديد مثل element(by. shadowRoot('#parentElement #innerElement'))

wswebcreation حسنًا ، جيد. سأضيف العلاقات العامة.
لكني أريد التأكد من شيء واحد فقط قبل الانتقال: هل أنت بخير مع هذا النمط من المحدد #parentElement::sr #innerElement للإشارة إلى العنصر #innerElement داخل شجرة الظل لـ #parentElement ؟

@ first87

تبدو جيدة بالنسبة لي 👍

أنا لست الوحيد (الوحيد) الذي يقرر بشأن العلاقات العامة. الأعضاء الأساسيون ، الذين سيراجعون أيضًا علاقاتهم العامة ، يقررون في النهاية.

أعتقد أنها ستكون إضافة رائعة وتسجيلًا واضحًا ، لذا اذهب إليها 😉

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 ،

• تبدأ بتقسيم المشروع.
• ثم سيتم إضافته إلى حسابك.
• قم بعمل نسخة على جهازك المحلي
• ثم ادفع التغييرات وانقر على زر "إنشاء علاقات عامة".

الذي عليه أن يقوم بالخدعة

wswebcreation حسنًا ، شكرًا لك على التوجيه.

wswebcreation لقد قمت للتو بإنشاء PR # 4392 .

@ first87 tnx !!

ما هو الوضع على هذا؟ نود أن نكون قادرين على استخدام وظيفة by.shadowRoot.

آمل أن يساعدني أحدهم في حل هذا: https://github.com/angular/protractor/pull/4392#issuecomment -359814654

@ first87 حاولت استخدام محدد المواقع الجديد في اختبارات e2e الخاصة بي. أنا غير قادر على الحصول على العناصر في الظل دوم.

البيئة: تطبيق الزاوي (v5) مع مكونات الويب البوليمرية. منقلة لإجراء اختبارات e2e.

زاوية CLI: 1.6.4
العقدة: 6.10.0
الزاوي: 5.2.0
@ الزاوي / CLI: 1.6.4
مطبوعة: 2.5.3
يوجد أدناه جذر ظل مكون الويب البوليمر الخاص بي ممتدًا في الكروم. يمكنك أن ترى نوع الإدخال = "نص" داخل هذا العنصر المخصص.

لا يمكنني الوصول إلى عنصر الإدخال داخل مكون بوليمر مخصص باستخدام منقلة by.css_sr.

var polymerFirstName = element (by.className ('polyFName')) ؛
var inputElement = polymerFirstName.element (by.css_sr ('input')) ؛ // لا يُرجع شيئًا.

فشلت مع ظهور الخطأ "لم يتم العثور على عنصر باستخدام محدد المواقع: by.css_sr (" الإدخال ")".

أحتاج إلى الوصول إلى عنصر الإدخال الداخلي حتى أتمكن من تنفيذ مهام أتمتة واجهة المستخدم مثل.
polymerFirstName.element (by.css_sr ('input')). clear () ؛
polymerFirstName.element (by.css_sr ('إدخال')). sendKeys ('Ritchie') ؛

أي شيء مفقود؟

msbasanth لقد فاتتك ::sr لأن by.css_sr لن يبدأ في العثور على العناصر في جذر الظل للعنصر ~ سيحفر في شجرة DOM الظل لأي عنصر لكل ::sr .
لذلك يجب عليك استبدال مكتشف عنصر الإدخال الخاص بك بهذا:

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

شكرا لك @ first87 عملت مثل السحر.
آمل أن نحصل على دعم Shadow DOM في المنقلة قريبًا.

هذا يعمل! شكرا لك! سيكون من الصعب جدًا تحديد موقع العناصر الآن خاصةً إذا كانت هناك مجالات ظل متداخلة: (بما أننا لا نستطيع اختبار محددات المواقع في وحدة التحكم. شكرًا مرة أخرى!

firstor شكرا جزيلا لك على هذا! نأمل أن يتم دمج هذا قريبًا ...

كنت آمل أن أحصل على بعض المساعدة منك على الرغم من ذلك. بينما يمكنني الحصول على القيمة الصحيحة باستخدام :: sr حسب الحاجة ، عندما أحصل على القيمة title.getText() يبدو أنني أحصل على القيمة "غير الصحيحة". يبدو أنه يأتي ككائن. انظر الناتج التالي أدناه:

من المتوقع أن يكون ['Title'] هو "Title".

لم أنجح في الحصول على السلسلة من هذا الكائن / المصفوفة وكنت أتساءل عما إذا كانت لديك أي فكرة؟

شكرا مرة أخرى على الحل !!

تحرير: تجاهل !! أشر إلى هذا وقام بالخدعة https://stackoverflow.com/questions/29478905/protractor-element-gettext-returns-an-object-and-not-string. شكرا لك مرة أخرى!!

مرحبًا firstor / msbasanth ، لا يمكنني الحصول على عنصر موجود في
الكود: اسمح لـ shadowDomInUse = (document.head.createShadowRoot .......
خطأ: الخاصية 'createShadowRoot' غير موجودة في النوع 'HTMLHeadElement' .

التطبيق: الزاوي v7
NodeJS: 6.9.0
مطبوعة: 2.3.3
المنقلة: 5.3.2

هل يمكنك توضيح كيفية استخدام طريقتك لإدخال بعض النص في مربع الإدخال داخل جذر الظل؟
شكرا!

firstor
شكرا على هذا. أحاول استخدامه على هذا النحو.
var searchBar = element (by.css_sr (':: sr input')) ؛
var searchButton = element (by.css_sr (':: sr i')) ؛

أتلقى الخطأ أدناه
[11:36:06] E / launcher - TypeError: محدد موقع غير صالح

ما الخطأ الذي افعله؟
أي مساعدة بتقدير كبير. شكرا لك مقدما.

firstor مهلا ، شكرا على الحل)
ومع ذلك ، لا يمكننا استخدامها بشكل كامل في فريقنا ما لم يتم دمجها في فرع Protractor الرئيسي (نحن نستخدم منقلة على العقد البعيدة بحيث يتم سحب libs دائمًا عند إجراء الاختبارات).

أي تقدم في دمج https://github.com/angular/protractor/pull/4786 ؟

أي تحديث على هذا؟

أي تحديث؟ هذا مانع للعديد من المواصفات مؤخرًا (

مرحبا firstor ،

التطبيق: الزاوي 8
NodeJS: 12.13.1
مطبوعة: 3.5.3
المنقلة: 5.4.0

شكرا لك على الحل الخاص بك.

أحاول أن أجد عنصرًا في ShadowRoot. في هندسة الواجهة الأمامية لدينا ، لدينا 3 مستويات للعمق

• المستوى الأول: تطبيق Micro frontend
• المستوى الثاني: مكوّن الواجهة الأمامية الصغيرة
• المستوى الثالث: مكون المادة الزاوي

يمكن الوصول إلى مستوى 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 مستويات للعمق

• المستوى الأول: تطبيق Micro frontend
• المستوى الثاني: مكوّن الواجهة الأمامية الصغيرة
• المستوى الثالث: مكون المادة الزاوي

يمكن الوصول إلى مستوى 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 ().

thx @ 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 (). إذا كان الأمر كذلك ، كيف نفعل ذلك؟

شكرا،
لاكشمي

تضمين التغريدة
قم بتعريف محدد المواقع هذا في ملف آخر باسم

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 يمكنني أن أرى في ملفك الشخصي أنك تتمتع بخبرة في shadow DOM. هل يمكنك من فضلك أن تكون لطيفًا وتقدم مثالاً على كيفية الوصول إلى shadow DOM المتداخل؟ أنا أعاني من ذلك لمدة أسبوعين الآن وما زلت لا أستطيع الوصول إلى بعض العناصر:
هذا هو المثال الخاص بي ، أحتاج إلى الوصول إلى عنصر div المميز: div.a-selected-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- القائمة المنسدلة :: sr appkit-dropdown :: sr div.a-selected-text ')) ؛

ما يثير الدهشة ، أن محدد موقع مشروع التطبيق يعمل بشكل جيد ، لكن عندما أتعمق أكثر ، مهما حاولت ، فإنه لا يعمل.
يعمل بشكل جيد: 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 يمكنني أن أرى في ملفك الشخصي أنك تتمتع بخبرة في shadow DOM. هل يمكنك من فضلك أن تكون لطيفًا وتقدم مثالاً على كيفية الوصول إلى shadow DOM المتداخل؟ أنا أعاني من ذلك لمدة أسبوعين الآن وما زلت لا أستطيع الوصول إلى بعض العناصر:
هذا هو المثال الخاص بي ، أحتاج إلى الوصول إلى عنصر div المميز: div.a-selected-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- القائمة المنسدلة :: sr appkit-dropdown :: sr div.a-selected-text ')) ؛

ما يثير الدهشة ، أن محدد موقع مشروع التطبيق يعمل بشكل جيد ، لكن عندما أتعمق أكثر ، مهما حاولت ، فإنه لا يعمل.
يعمل بشكل جيد: 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- القائمة المنسدلة :: sr div.a-selected-text ')) ؛

OMG ، لقد حصلت عليه الآن ، وأنا قادر على العثور على جميع محددات المواقع التي أحتاجها!
شكرا جزيلا للمساعدة!
مع أطيب التحيات،
ماجدة

من: alagappan-qa [email protected]
تاريخ الإرسال: السبت 4 يوليو 2020 ، الساعة 4:34 صباحًا
إلى: angular / protractor [email protected]
نسخة إلى: Bartkowiak-Jowsa، Magdalena [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 يمكنني أن أرى في ملفك الشخصي أنك تتمتع بخبرة مع shadow DOM. هل يمكنك من فضلك أن تكون لطيفًا وتقدم مثالاً على كيفية الوصول إلى shadow DOM المتداخل؟ أنا أعاني من ذلك لمدة أسبوعين الآن وما زلت لا أستطيع الوصول إلى بعض العناصر:
هذا هو المثال الخاص بي ، أحتاج إلى الوصول إلى عنصر div المميز: div.a-selected-text:
[تمت إزالة الصورة بواسطة المرسل. image] https://user-images.githubusercontent.com/50359393/86498151-c532e080-assign4-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- القائمة المنسدلة :: sr appkit-dropdown :: sr div.a-selected-text ')) ؛

ما يثير الدهشة ، أن محدد موقع مشروع التطبيق يعمل بشكل جيد ، لكن عندما أتعمق أكثر ، مهما حاولت ، فإنه لا يعمل.
يعمل بشكل جيد: 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- القائمة المنسدلة :: sr div.a-selected-text ')) ؛

-
أنت تتلقى هذا لأنك علقت.
قم بالرد على هذا البريد الإلكتروني مباشرةً ، أو قم بعرضه على GitHub https://github.com/angular/protractor/issues/4367#issuecomment-653710546 ، أو إلغاء الاشتراك https://github.com/notifications/unsubscribe-auth/AMAGYYOPZMDJCRSHT5XI45TRZ2ILDANCN .FSM4DR44ABQ

Capgemini Polska Sp. حديقة حيوان،
ماي. Żwirki i Wigury 16a 02-092 Warszawa ،
S؟ d Rejonowy dla M.ST. ورزاوي ، الثاني عشر ويدزيا؟ Gospodarczy Rejestrowy، nr KRS: 0000040605،
NIP: 526-11-84-467 ،
ويسوكو ؟؟ kapita؟ u zak؟ adowego: 16.403.320،00 z ؟.
تحتوي هذه الرسالة على معلومات قد تكون خاصة أو سرية وهي مملوكة لمجموعة Capgemini. إنه مخصص فقط للشخص الذي يتم توجيهه إليه. إذا لم تكن أنت المستلم المقصود ، فلا يحق لك قراءة هذه الرسالة أو أي جزء منها أو طباعتها أو الاحتفاظ بها أو نسخها أو نشرها أو توزيعها أو استخدامها. إذا تلقيت هذه الرسالة عن طريق الخطأ ، فيرجى إخطار المرسل على الفور وحذف جميع نسخ هذه الرسالة.

مرحبًا بالجميع ، اعثر على حل لتحديد موقع عناصر الظل داخل جذر الظل في أي مستوى عميق.
بمساعدة وحدة العقدة "query-selector-shadow-dom" ، يمكننا تحديد عناصر الويب في Shadow DOM بسهولة. لا حاجة لاجتياز جميع جذور الظل.
استخدام element (by.shadowDomCss ('')) ، يمكننا الإشارة إلى عنصر الويب داخل Shadow Root على أي مستوى.

مرحبا Alagappan ،
هل يمكنك أن تصف أكثر قليلاً بمثال من فضلك. شكراً

يوم الأربعاء ، 19 آب (أغسطس) 2020 الساعة 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
.

مرحبًا Alagappan ، هل يمكنك من فضلك وصف المزيد مع مثال من فضلك
...
يوم الأربعاء 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 .

في لقطة الشاشة أعلاه ، تكون حاوية إدخال الورق ذات المعرف = الحاوية في 6+ طبقة جذر الظل. لأخذ webElement ، يمكننا استخدام element (by.shadowDomCss ('paper-input # textbox paper-input-container # container')) ؛ سيعمل معرّف العنصر القصير هذا على WebElement.

مرحبًا firstor / msbasanth ، لا يمكنني الحصول على عنصر موجود في
الكود: اسمح لـ shadowDomInUse = (document.head.createShadowRoot .......
خطأ: الخاصية 'createShadowRoot' غير موجودة في النوع 'HTMLHeadElement' .

حصلت أيضًا على هذا الخطأ والحل هو استبدال createShadowRoot بـ attachShadow لأن طريقة createShadowRoot () قد تم إهمالها لصالح attachShadow (). انظر المرجع:
https://developer.mozilla.org/en-US/docs/Web/API/Element/createShadowRoot

بالمناسبة firstor ، شكرا لك على هذه المساهمة! لقد كان يعمل بشكل رائع حتى الآن. لقد أهدرت الكثير من الوقت في محاولة الحصول على by.deepCss للعمل مع منقلة و Angular 10. لقد بدأت مؤخرًا في استخدام تغليف shadowDom الأصلي مع مكونات Angular 10 الخاصة بي ، encapsulation: ViewEncapsulation.ShadowDom التي أحبها ولكن لم أكن سعيدًا. تعذر الوصول إلى أي عناصر shadowDom متداخلة أثناء اختبار e2e. الحمد لله وجدت هذا الرمز!

هههههههههههههه
يرجى النظر في الحزمة https://www.npmjs.com/package/query-selector-shadow-dom

تبدو واعدة.

msbasanth @ Rob4226 أنا جديد في المنقلة ، أحاول الوصول إلى النص "التنزيلات" لصفحة تنزيل
رمز بلدي :

لقد جربت أيضًا 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 Developer Tool> فحص العنصر لهذا العنصر من Shadow Root. سيعطي المزيد من التفاصيل حول هذه المسألة.

مرحبا،

يمكن التعامل مع هذا باستخدام أي من الطريقتين أدناه ،

دع 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 downloads-item :: sr div :: sr downloads-item')). getText ()؛
[هنا بدلاً من الطفل التاسع ، نستخدم المعرف ، بحيث يركز على العنصر]

شكرا،
Alagappan أ

من: shopmujahid [email protected]
تاريخ الإرسال: الخميس 3 ديسمبر 2020 الساعة 9:20 صباحًا
إلى: angular / protractor [email protected]
نسخة إلى: Alagappan Annamalai [email protected] ؛ التعليق [email protected]
الموضوع: Re: [الزاوية / المنقلة] طلب دعم ShadowDOM (# 4367)

أحاول الوصول إلى العناصر الموجودة تحت عنصر div الثاني من shadow dom (المظلل) ولكنه يسترد دائمًا عنصر div الأول بالرسالة التالية:

W / element - تم العثور على أكثر من عنصر واحد لـ locator by.css_shadowroot ("Downloads-manager :: sr div") - سيتم استخدام النتيجة الأولى

فيما يلي مسار xpath الخاص بي:
browser.element (by.css_shadowroot ('downloads-manager :: 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/AORWPO6XNK7RUWPVHCWKBCTSS4DH544NQFSM4 .

أحاول الوصول إلى أحد عناصر div داخل shadow dom كلاهما nth-child () و type-of () لا يعملان في حالتي.
هل واجه أحد هذه المشكلة من قبل؟

يوجد أدناه بنية DOM و xpath الخاص بي

في انتظار browser.element (by.css_shadowroot ('d2l-navigation :: sr d2l-navigation-main- header: nth-type-of (3)'))

لا أتلقى أي خطأ في العثور على عنصر.

اى مساعدة ستقابل بالامتنان الشديد، شكرا مقدما.

مرحبا،

حاول إزالة :: sr في محدد موقع العنصر لأنه خارج Shadow Root.
استخدم أيًا من محددات مواقع العناصر المكونة من عنصرين ومعرفة ما إذا كانت تعمل أم لا.

في انتظار 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'))

شكرا،

Alagappan أ
من: shopmujahid [email protected]
تاريخ الإرسال: الأربعاء ، 9 ديسمبر 2020 ، الساعة 12:09 مساءً
إلى: angular / protractor [email protected]
نسخة إلى: Alagappan Annamalai [email protected] ؛ التعليق [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

في انتظار 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/AORWPO7CSSI7P5GH37O74R3ST4LO5ANCNQFSM4 .

شكرا @ 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 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 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! ⁇