Protractor: Permintaan dukungan ShadowDOM

@pertama87

Tnx untuk berbagi ini. Ini terlihat bagus dan ini adalah solusi yang bagus.

Jika Anda ingin melihat ini di versi Protractor yang lebih baru, Anda dapat menambahkan PR dengan locator baru seperti element(by. shadowRoot('#parentElement #innerElement'))

@wswebcreation Oke, bagus. Saya akan menambahkan PR.
Tapi saya ingin memastikan satu hal sebelum pergi: apakah Anda setuju dengan gaya pemilih ini #parentElement::sr #innerElement untuk menunjukkan elemen #innerElement di dalam pohon bayangan #parentElement ?

@pertama87

Terlihat bagus untuk saya 👍

Saya bukan (satu-satunya) yang memutuskan tentang PR. Anggota inti, yang juga akan meninjau PR Anda, pada akhirnya memutuskan.

Saya pikir ini akan menjadi tambahan yang bagus dan pencatatan yang jelas, jadi lakukanlah

@wswebcreation Bagaimana saya bisa mendorong komit saya? Sepertinya saya tidak memiliki izin yang cukup untuk berkontribusi.

Hai @first87 ,

Pernahkah Anda melihat dokumen ini . Ini memegang semua langkah yang perlu Anda ambil.

@wswebcreation Ya, saya memeriksa DEVELOPER.md dan tidak menemukan panduan untuk mendorong. Ini adalah langkah-langkah yang saya lakukan:

• 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 untuk membuat cabang saya sendiri
• npm install
• membuat beberapa komitmen
• gulp lint untuk memeriksa apakah kode diformat dengan benar
• npm start , webdriver-manager start , npm test untuk lulus semua tes

Sekarang apa yang harus saya lakukan untuk selanjutnya?

Hai @first87 ,

• Anda mulai dengan forking proyek.
• Kemudian akan ditambahkan ke akun Anda.
• Lakukan klon ke mesin lokal Anda
• Kemudian dorong perubahan Anda dan klik tombol "Buat PR".

Itu harus berhasil

@wswebcreation Ok, terima kasih telah membimbing.

@wswebcreation Saya baru saja membuat PR #4392 .

@first87 Terima kasih !!

Apa statusnya dalam hal ini? Kami ingin dapat menggunakan fungsi by.shadowRoot.

Semoga seseorang membantu saya menyelesaikan ini: https://github.com/angular/protractor/pull/4392#issuecomment -359814654

@ first87 Saya mencoba menggunakan pencari baru Anda dalam tes e2e saya. Saya tidak bisa mendapatkan elemen di shadow dom.

Lingkungan: Aplikasi Angular (v5) dengan Komponen Web Polimer. Busur derajat untuk menjalankan tes e2e.

CLI sudut: 1.6.4
Simpul: 6.10.0
Sudut: 5.2.0
@sudut/cli: 1.6.4
naskah: 2.5.3
Di bawah ini diberikan adalah root bayangan komponen web polimer saya yang diperluas di chrome. Anda dapat melihat jenis input = "teks" di dalam elemen khusus ini.

Saya tidak dapat mengakses elemen input di dalam komponen polimer khusus menggunakan busur derajat by.css_sr.

var polymerFirstName = elemen(by.className('polyFName'));
var inputElement = polymerFirstName.element(by.css_sr('input')); // tidak mengembalikan apa pun.

Gagal dengan kesalahan "Tidak ada elemen yang ditemukan menggunakan locator: by.css_sr("input")".

Saya perlu mengakses elemen input dalam sehingga saya dapat melakukan tugas-tugas Otomasi UI seperti.
polymerFirstName.element(by.css_sr('input')).clear();
polymerFirstName.element(by.css_sr('input')).sendKeys('Ritchie');

Ada yang saya lewatkan?

@msbasanth Anda melewatkan ::sr karena by.css_sr tidak akan mulai menemukan elemen dalam akar bayangan elemen ~ itu akan menggali ke dalam pohon DOM bayangan dari setiap elemen untuk setiap ::sr .
Jadi, Anda harus mengganti pencari elemen input Anda dengan ini:

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

Terima kasih @ first87 itu bekerja seperti pesona.
Berharap kami akan segera mendapatkan dukungan DOM bayangan ini di busur derajat.

Ini bekerja! Terima kasih! Akan sangat sulit menemukan elemen sekarang terutama jika ada shadow dom bersarang :( karena kami tidak dapat menguji locator di konsol. Sekali lagi terima kasih!

@firstor Terima kasih banyak untuk ini! Semoga bisa segera terintegrasi....

Saya berharap untuk mendapatkan bantuan dari Anda dalam hal ini. Meskipun saya bisa mendapatkan nilai yang benar menggunakan ::sr sesuai kebutuhan, ketika saya melakukan title.getText() tampaknya mendapatkan nilai "salah". Tampaknya datang sebagai objek. Lihat output berikut di bawah ini:

Diharapkan [ 'Judul' ] menjadi 'Judul'.

Saya belum berhasil mendapatkan string dari objek/array itu dan bertanya-tanya apakah Anda punya ide?

Sekali lagi terima kasih atas solusinya!!

EDIT: Abaikan!! Merujuk ini dan itu berhasil https://stackoverflow.com/questions/29478905/protractor-element-gettext-returns-an-object-and-not-string . Terima kasih lagi!!

Hai @firstor / @msbasanth , saya tidak bisa mendapatkan elemen yang ada di shadow-root DOM. Saya menyalin kode Anda di atas dalam file .ts tetapi mendapatkan kesalahan kompilasi pada baris no. 6:
Kode: biarkan shadowDomInUse = (document.head.createShadowRoot .......
Kesalahan: Properti 'createShadowRoot' tidak ada pada jenis 'HTMLHeadElement' .

Aplikasi: Sudut v7
NodeJS: 6.9.0
naskah: 2.3.3
busur derajat: 5.3.2

Bisakah Anda menjelaskan cara menggunakan metode Anda untuk memasukkan beberapa teks di kotak input di dalam shadow-root?
Terima kasih!

@firstor
Terima kasih untuk ini. Saya mencoba menggunakannya seperti ini.
var searchBar = elemen(by.css_sr('::sr input'));
var searchButton = elemen(by.css_sr('::sr i'));

Saya mendapatkan kesalahan di bawah ini
[11:36:06] E/peluncur - TypeError: Pencari tidak valid

Apa yang saya lakukan salah?
Bantuan apa pun sangat dihargai. Terima kasih sebelumnya.

@firstor hei, terima kasih atas solusinya)
namun, kami tidak dapat sepenuhnya menggunakannya di tim kami kecuali jika digabungkan ke cabang master Busur Derajat (kami menggunakan Busur Derajat pada node jarak jauh sehingga lib selalu ditarik saat pengujian sedang dijalankan).

Adakah kemajuan dalam menggabungkan https://github.com/angular/protractor/pull/4786 ?

Ada pembaruan tentang ini?

perubahan apapun? ini adalah pemblokir untuk banyak spesifikasi akhir-akhir ini (

Halo @firstor ,

Aplikasi: Sudut 8
NodeJS : 12.13.1
naskah: 3.5.3
Busur derajat: 5.4.0

Terima kasih atas solusi Anda.

Saya mencoba menemukan elemen ke dalam ShadowRoot. Dalam arsitektur frontend kami, kami Memiliki 3 level kedalaman

• Tingkat pertama: Aplikasi mikro frontend
• Tingkat kedua: Komponen frontend mikro
• Tingkat ketiga: Komponen bahan sudut

Level shadowRoot pertama dan kedua dapat diakses tetapi bukan yang terakhir.

Ekstrak sumber Kode:

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

Log hasil:

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

Kami mencoba dengan solusi lain ( https://stackoverflow.com/questions/57979981/how-to-check-in-protractor-javescript-in-shadow-dom-if-the-button-is-enabled-o ). Kami memiliki masalah yang sama:

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

Hasil :

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

Apakah ada batasan mengenai akses batas kedalaman shadowRoot?

Terima kasih atas dukungan Anda.

V1nc3kr0

Halo @firstor ,

Aplikasi: Sudut 8
NodeJS : 12.13.1
naskah: 3.5.3
Busur derajat: 5.4.0

Terima kasih atas solusi Anda.

Saya mencoba menemukan elemen ke dalam ShadowRoot. Dalam arsitektur frontend kami, kami Memiliki 3 level kedalaman

• Tingkat pertama: Aplikasi mikro frontend
• Tingkat kedua: Komponen frontend mikro
• Tingkat ketiga: Komponen bahan sudut

Level shadowRoot pertama dan kedua dapat diakses tetapi bukan yang terakhir.

Ekstrak sumber Kode:

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

Log hasil:

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

Kami mencoba dengan solusi lain ( https://stackoverflow.com/questions/57979981/how-to-check-in-protractor-javescript-in-shadow-dom-if-the-button-is-enabled-o ). Kami memiliki masalah yang sama:

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

Hasil :

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

Apakah ada batasan mengenai akses batas kedalaman shadowRoot?

Terima kasih atas dukungan Anda.

V1nc3kr0

Coba like
var el4 = el3 .element(by.css_sr('::sr mat-select'));

@firstor
Aplikasi Web saya menggunakan Polymer.js dengan 10 level akar Shadow.

Apakah mungkin untuk memanggil elemen akar Bayangan terakhir dari simpul atas alih-alih melintasi akar Bayangan individu.
Terima kasih atas dukunganmu.

Hallo teman-teman ,
Saya baru mengenal busur derajat dan saya berharap saya bisa mendapatkan bantuan tentang cara memasukkan skrip locator ini (shadowDOM) di busur derajat.
saya melakukan beberapa pengujian UI pada komponen web polimer , versi busur derajat : 5.4.2 dan simpul v12.13 .

adakah yang bisa memberi tahu saya di mana harus memasukkan skrip itu? @firstor , @

Terima kasih sebelumnya.

@rugaba
Sertakan skrip dalam file Configuration.js di bawah metode onPrepare().

thx @ alagappan-qa, berhasil!!

Hai,

Apakah mungkin untuk menyertakan skrip ini dalam file js terpisah dan mengimpornya ke dalam file protractor.conf dan menyertakan dalam metode onPrepare(). Jika demikian, bagaimana kita melakukannya?

Terima kasih,
Laksmi

Jika ada yang membutuhkan ini sekarang, lihat https://github.com/angular/protractor/pull/4786#issuecomment -607204672 dan https://github.com/angular/protractor/pull/4786#issuecomment -607224145

Anda juga dapat menggunakan https://github.com/angular/protractor/pull/4786.patch atau https://github.com/angular/protractor/pull/4786.diff

Hai,

Apakah mungkin untuk menyertakan skrip ini dalam file js terpisah dan mengimpornya dalam file protractor.conf dan menyertakan dalam metode onPrepare(). Jika demikian, bagaimana kita melakukannya?

Terima kasih,
Laksmi

@Lakhs02
Deklarasikan locator ini di beberapa file lain sebagai

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

Kemudian dalam metode onPrepare()

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

>

@firstor
Aplikasi Web saya menggunakan Polymer.js dengan 10 level akar Shadow.

Apakah mungkin untuk memanggil elemen akar Bayangan terakhir dari simpul atas alih-alih melintasi akar Bayangan individu.
Terima kasih atas dukunganmu.

@firstor Saya dapat melihat di profil Anda bahwa Anda berpengalaman dengan shadow DOM. Bisakah Anda berbaik hati dan memberikan contoh bagaimana Anda mengakses DOM bayangan bersarang? Saya berjuang dengan itu selama dua minggu sekarang dan masih tidak dapat mengakses beberapa elemen:
Ini adalah contoh saya, saya perlu mengakses elemen div yang disorot: div.a-choosen-text:

Saya mencoba pencari lokasi di bawah ini (dan banyak lainnya) tetapi tidak berhasil:
nameOnTheProjectTab = elemen(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'));

Apa yang mengejutkan, locator untuk proyek aplikasi berfungsi dengan baik, tetapi ketika saya masuk lebih dalam, apa pun yang saya coba, itu tidak berhasil.
Berfungsi dengan baik: static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)'));

Apakah Anda tahu apa yang saya lakukan salah?
Terima kasih sebelumnya,
Magda

>

@firstor
Aplikasi Web saya menggunakan Polymer.js dengan 10 level akar Shadow.

Apakah mungkin untuk memanggil elemen akar Bayangan terakhir dari simpul atas alih-alih melintasi akar Bayangan individu.
Terima kasih atas dukunganmu.

@firstor Saya dapat melihat di profil Anda bahwa Anda berpengalaman dengan shadow DOM. Bisakah Anda berbaik hati dan memberikan contoh bagaimana Anda mengakses DOM bayangan bersarang? Saya berjuang dengan itu selama dua minggu sekarang dan masih tidak dapat mengakses beberapa elemen:
Ini adalah contoh saya, saya perlu mengakses elemen div yang disorot: div.a-choosen-text:

Saya mencoba pencari lokasi di bawah ini (dan banyak lainnya) tetapi tidak berhasil:
nameOnTheProjectTab = elemen(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'));

Apa yang mengejutkan, locator untuk proyek aplikasi berfungsi dengan baik, tetapi ketika saya masuk lebih dalam, apa pun yang saya coba, itu tidak berhasil.
Berfungsi dengan baik: static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)'));

Apakah Anda tahu apa yang saya lakukan salah?
Terima kasih sebelumnya,
Magda

Hai Magda,
Dalam kasus Anda, akar bayangan di bawah panel appkit WebElement tidak diperluas untuk mengetahui Elemen Anda.
Tetapi dalam elemen nameOnTheProjectTab itu diperluas yang menyebabkan masalah ini.
Cobalah pencari elemen di bawah ini,
nameOnTheProjectTab = elemen(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, saya mendapatkannya sekarang, dan saya dapat menemukan semua pencari yang saya butuhkan!
Terima kasih banyak atas bantuannya!
Salam,
Magda

Dari: Alagappan-qa [email protected]
Dikirim: Sabtu, 4 Juli 2020 04.34
Kepada: angular/busur derajat busur
Cc: Bartkowiak-Jowsa, Magdalena [email protected] ; Komentar [email protected]
Subjek: Re: [sudut/busur derajat] Permintaan dukungan ShadowDOM (#4367)

@firstor https://github.com/firstor
Aplikasi Web saya menggunakan Polymer.js dengan 10 level akar Shadow.
[Gambar dihapus oleh pengirim. RJvlf] https://user-images.githubusercontent.com/57852329/72205775-de7d6300-34ac-11ea-93f7-37917052ce90.png
Apakah mungkin untuk memanggil elemen akar Bayangan terakhir dari simpul atas alih-alih melintasi akar Bayangan individu.
Terima kasih atas dukunganmu.

@firstor https://github.com/firstor Saya dapat melihat di profil Anda bahwa Anda berpengalaman dengan shadow DOM. Bisakah Anda berbaik hati dan memberikan contoh bagaimana Anda mengakses DOM bayangan bersarang? Saya berjuang dengan itu selama dua minggu sekarang dan masih tidak dapat mengakses beberapa elemen:
Ini adalah contoh saya, saya perlu mengakses elemen div yang disorot: div.a-choosen-text:
[Gambar dihapus oleh pengirim. gambar] https://user-images.githubusercontent.com/50359393/86498151-c532e080-bd84-11ea-867c-337085b96087.png

Saya mencoba pencari lokasi di bawah ini (dan banyak lainnya) tetapi tidak berhasil:
nameOnTheProjectTab = elemen(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'));

Apa yang mengejutkan, pencari lokasi untuk proyek aplikasi berfungsi dengan baik, tetapi ketika saya masuk lebih dalam, apa pun yang saya coba, itu tidak berhasil.
Berfungsi dengan baik: static projectTab = element(by.css_sr('app-dumbledore::sr lit-route::sr app-dashboard::sr app- project:nth-child (1)'));

Apakah Anda tahu apa yang saya lakukan salah?
Terima kasih sebelumnya,
Magda

Hai Magda,
Dalam kasus Anda, akar bayangan di bawah panel appkit WebElement tidak diperluas untuk mengetahui Elemen Anda.
Tetapi dalam elemen nameOnTheProjectTab itu diperluas yang menyebabkan masalah ini.
Cobalah pencari elemen di bawah ini,
nameOnTheProjectTab = elemen(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'));

—
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub https://github.com/angular/protractor/issues/4367#issuecomment-653710546 , atau berhenti berlangganan 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, nr KRS: 0000040605,
NIP: 526-11-84-467,
Wysoko?? kapita?u zak?adowego: 16.403.320,00 z?.
Pesan ini berisi informasi yang mungkin bersifat istimewa atau rahasia dan merupakan milik Grup Capgemini. Ini ditujukan hanya untuk orang yang dituju. Jika Anda bukan penerima yang dimaksud, Anda tidak berwenang untuk membaca, mencetak, menyimpan, menyalin, menyebarluaskan, mendistribusikan, atau menggunakan pesan ini atau bagian apa pun darinya. Jika Anda menerima pesan ini karena kesalahan, harap segera beri tahu pengirim dan hapus semua salinan pesan ini.

Hai Semuanya, Menemukan solusi untuk menemukan Elemen Bayangan di dalam Akar Bayangan di level terdalam mana pun.
Dengan bantuan modul node "query-selector-shadow-dom", kita dapat mengidentifikasi elemen Web di Shadow DOM dengan mudah. Tidak perlu melintasi semua akar Shadow.
Menggunakan elemen(by.shadowDomCss('')), kita dapat menunjuk ke elemen Web di dalam Shadow Root di level mana pun.

Hai Alagappan,
dapatkah Anda menjelaskan sedikit lebih banyak dengan contoh. Terima kasih

Pada Rabu, 19 Agustus 2020 pukul 07:52 alagappan-annamalai <
[email protected]> menulis:

Hai Semuanya, Menemukan solusi untuk menemukan Elemen Bayangan di dalam
Shadow Root pada level yang dalam.
Dengan bantuan modul node "query-selector-shadow-dom", kita dapat
mengidentifikasi elemen Web di Shadow DOM dengan mudah. Tidak perlu melintasi
melalui semua akar Shadow.
Menggunakan elemen(by.shadowDomCss('')), kita dapat menunjuk ke elemen Web di dalamnya
Shadow Root di level mana pun.

—
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub
https://github.com/angular/protractor/issues/4367#issuecomment-676304234 ,
atau berhenti berlangganan
https://github.com/notifications/unsubscribe-auth/AK2OQDTZK2ZVJTICP3VGS3DSBPDJVANCNFSM4DR44ABQ
.

Hai Alagappan, bisakah Anda menjelaskan sedikit lebih banyak dengan contoh. Terima kasih
…
Pada Rabu, 19 Agustus 2020 pukul 07:52 alagappan-annamalai < @ . * > menulis: Hai Semuanya, Menemukan solusi untuk menemukan Elemen Bayangan di dalam Akar Bayangan pada tingkat yang paling dalam. Dengan bantuan modul node "query-selector-shadow-dom", kita dapat mengidentifikasi elemen Web di Shadow DOM dengan mudah. Tidak perlu melintasi semua akar Shadow. Menggunakan elemen(by.shadowDomCss('')), kita dapat menunjuk ke elemen Web di dalam Shadow Root di level mana pun. — Anda menerima ini karena Anda berkomentar. Balas email ini secara langsung, lihat di GitHub < #4367 (komentar) >, atau berhenti berlangganan https://github.com/notifications/unsubscribe-auth/AK2OQDTZK2ZVJTICP3VGS3DSBPDJVANCNFSM4DR44ABQ .

Pada tangkapan layar di atas, tag paper-input-container dengan id=container berada di 6+ lapisan akar bayangan. Untuk mengambil elemen web ini kita dapat menggunakan elemen(by.shadowDomCss('paper-input#textbox paper-input-container#container')); Pengidentifikasi elemen pendek ini akan bertindak di WebElement.

Hai @firstor / @msbasanth , saya tidak bisa mendapatkan elemen yang ada di shadow-root DOM. Saya menyalin kode Anda di atas dalam file .ts tetapi mendapatkan kesalahan kompilasi pada baris no. 6:
Kode: biarkan shadowDomInUse = (document.head.createShadowRoot .......
Kesalahan: Properti 'createShadowRoot' tidak ada pada jenis 'HTMLHeadElement' .

Saya juga mendapatkan kesalahan ini dan solusinya adalah mengganti createShadowRoot dengan attachShadow karena metode createShadowRoot() telah ditinggalkan dan digantikan oleh attachShadow(). Lihat referensi:
https://developer.mozilla.org/en-US/docs/Web/API/Element/createShadowRoot

Omong-omong @firstor , terima kasih atas kontribusi ini! Ini telah bekerja dengan baik sejauh ini. Saya membuang begitu banyak waktu untuk mencoba mendapatkan by.deepCss untuk bekerja dengan Busur Derajat dan Angular 10. Saya baru-baru ini mulai menggunakan enkapsulasi shadowDom asli dengan komponen Angular 10 saya, encapsulation: ViewEncapsulation.ShadowDom yang saya sukai tetapi saya tidak senang tidak dapat mengakses elemen shadowDom bersarang selama pengujian e2e. Untungnya saya menemukan kode ini!

@Rob4226
Silakan lihat paket https://www.npmjs.com/package/query-selector-shadow-dom

Terlihat menjanjikan.

@msbasanth @Rob4226 Saya baru
kode saya:

Saya juga mencoba var x = menunggu element.element(by.css_sr('h1')).getText(); Ini tidak bekerja.
Saya menerima pesan kesalahan di bawah ini:

Hargai tanggapan Anda tentang ini. Terima kasih!

Saya memperbaikinya, saya perlu membuat variabel elemen terpisah untuk setiap elemen root bayangan bersarang.

@firstor Saya sangat menghargai kode ini. terima kasih banyak 👍

Halo saya saat ini tr untuk memilih shadow dom. Saya mendapatkan kesalahan berikut saat menggunakan solusi:

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

Penggunaan:
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> .....
Apa yang saya lakukan salah?

Halo saya saat ini tr untuk memilih shadow dom. Saya mendapatkan kesalahan berikut saat menggunakan solusi:

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

Penggunaan:
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> .....
Apa yang saya lakukan salah?

Hai @wasoek , Bisakah Anda menyediakan Alat Pengembang Chrome > Elemen Inspeksi untuk elemen ini dari Shadow Root. Itu akan memberikan rincian lebih lanjut tentang masalah ini.

Hai,

Ini dapat ditangani menggunakan salah satu dari 2 metode di bawah ini,

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

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

browser.element(by.css_shadowroot('downloads-manager::sr div[id=”mainContainer”]::sr downloads-item::sr div::sr downloads-item')).getText();
[di sini alih-alih anak ke-n kami menggunakan ID, sehingga akan fokus ke elemen]

Terima kasih,
Alagappan A

Dari: notifikasi [email protected]
Dikirim: Kamis, 3 Desember 2020 09:20
Kepada: angular/busur derajat busur
Cc: Alagappan Annamalai [email protected] ; Komentar [email protected]
Subjek: Re: [sudut/busur derajat] Permintaan dukungan ShadowDOM (#4367)

Saya mencoba mengakses elemen di bawah elemen div kedua dari shadow dom (disorot) tetapi selalu mengambil elemen div pertama dengan pesan di bawah ini:

W/element - lebih dari satu elemen ditemukan untuk locator by.css_shadowroot("downloads-manager::sr div") - hasil pertama akan digunakan

di bawah ini adalah xpath saya:
browser.element(by.css_shadowroot('downloads-manager::sr div:nth-child (1)::sr downloads-item::sr div::sr downloads-item')).getText();

dapatkah seseorang membimbing saya tentang ini? Terima kasih sebelumnya

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

—
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub https://github.com/angular/protractor/issues/4367#issuecomment-737647758 , atau berhenti berlangganan https://github.com/notifications/unsubscribe-auth/AORWPO6XNK7RUWPVHCWKBCTSS4DH5ANCNFSM4DR44ABQ .

Saya mencoba mengakses salah satu elemen div di dalam shadow dom baik nth-child() dan type-of() tidak berfungsi dalam kasus saya.
ada yang pernah menghadapi masalah ini sebelumnya?

Di bawah ini adalah struktur DOM dan xpath saya

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

Saya tidak menerima kesalahan elemen yang ditemukan.

Bantuan apa pun akan sangat dihargai. Terima kasih sebelumnya.

Hai,

Coba hapus ::sr di elemen locator karena berada di luar Shadow Root.
Gunakan salah satu dari 2 pencari elemen ini dan lihat apakah itu berfungsi atau tidak.

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

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

Terima kasih,

Alagappan A
Dari: notifikasi [email protected]
Dikirim: Rabu, 9 Desember 2020 12:09 PM
Kepada: angular/busur derajat busur
Cc: Alagappan Annamalai [email protected] ; Komentar [email protected]
Subjek: Re: [sudut/busur derajat] Permintaan dukungan ShadowDOM (#4367)

Saya mencoba mengakses salah satu elemen div di dalam shadow dom baik nth-child() dan type-of() tidak berfungsi dalam kasus saya.
ada yang pernah menghadapi masalah ini sebelumnya?

Di bawah ini adalah struktur DOM dan xpath saya
[2134234] https://user-images.githubusercontent.com/58770415/101593797-cc9e8b80-39ad-11eb-8fd0-a7cd7541773f.jpg

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

Saya tidak menerima kesalahan elemen yang ditemukan.

Bantuan apa pun akan sangat dihargai. Terima kasih sebelumnya.

—
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub https://github.com/angular/protractor/issues/4367#issuecomment-741567009 , atau berhenti berlangganan https://github.com/notifications/unsubscribe-auth/AORWPO7CSSI7P5GH37O74R3ST4LO5ANCNFSM4DR44ABQ .

Terima kasih @alagappan-annamalai! 👍 solusi kedua bekerja untuk saya dengan menghapus ::sr dan menambahkan tagname.classname, namun saya mengalami masalah aneh lainnya karena tidak mengakses elemen anak di bawah ini:

Saya perlu mengakses elemen yang disorot di atas

mencoba dengan kedua xpath di bawah ini:
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)' ))

dan

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._(nama kelas li akan menambahkan beberapa teks saat kita mengarahkan kursor ke atasnya)

Saya tidak menerima kesalahan elemen yang ditemukan.
Terima kasih sebelumnya.

Terima kasih @alagappan-annamalai! 👍 solusi kedua bekerja untuk saya dengan menghapus ::sr dan menambahkan tagname.classname, namun saya mengalami masalah aneh lainnya karena tidak mengakses elemen anak di bawah ini:

Saya perlu mengakses elemen yang disorot di atas

mencoba dengan kedua xpath di bawah ini:
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)' ))

dan

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.__')) (nama kelas li akan menambahkan beberapa teks saat kita mengarahkan kursor ke atasnya)

Saya tidak menerima kesalahan elemen yang ditemukan.
Terima kasih sebelumnya.

Ini dapat ditangani dengan cara sederhana sendiri tanpa css_sr dan menyediakan beberapa elemen web HTML
browser.element.all(by.css('d2l-navigation d2l-navigation-main-header ul[class="d2l-datalist vui-list"] li')).get(1);

Bravo, bekerja seperti pesona Terima kasih @ alagappan-annamalai! kan