Saya mencoba memilih opsi dari drop-down untuk tes e2e sudut menggunakan busur derajat.
Berikut adalah cuplikan kode dari opsi pilih:
<select id="locregion" class="create_select ng-pristine ng-invalid ng-invalid-required" required="" ng-disabled="organization.id !== undefined" ng-options="o.id as o.name for o in organizations" ng-model="organization.parent_id">
<option value="?" selected="selected"></option>
<option value="0">Ranjans Mobile Testing</option>
<option value="1">BeaverBox Testing</option>
<option value="2">BadgerBox</option>
<option value="3">CritterCase</option>
<option value="4">BoxLox</option>
<option value="5">BooBoBum</option>
</select>
Saya telah mencoba:
ptor.findElement(protractor.By.css('select option:1')).click();
Ini memberi saya kesalahan berikut:
String tidak valid atau ilegal telah ditentukan Build info: version: '2.35.0', revision: 'c916b9d', time: '2013-08-12 15:42:01' System info: os.name: 'Mac OS X' , os.arch: 'x86_64', os.version: '10 .9 ', java.version:' 1.6.0_65 'Info driver: driver.version: tidak diketahui
Saya juga telah mencoba:
ptor.findElement(protractor.By.xpath('/html/body/div[2]/div/div[4]/div/div/div/div[3]/ng-include/div/div[2]/div/div/organization-form/form/div[2]/select/option[3]')).click();
Ini memberi saya kesalahan berikut:
ElementNotVisibleError: Elemen saat ini tidak terlihat sehingga mungkin tidak berinteraksi dengan Durasi perintah atau waktu tunggu: 9 milidetik Info pembuatan: versi: '2.35.0', revisi: 'c916b9d', waktu: '2013-08-12 15:42: 01 'Info sistem: os.name:' Mac OS X ', os.arch:' x86_64 ', os.version: '10 .9', java.version: '1.6.0_65' ID Sesi: bdeb8088-d8ad-0f49-aad9 -82201c45c63f Info driver: org.openqa.selenium.firefox.FirefoxDriver Capabilities [{platform = MAC, acceptSslCerts = true, javascriptEnabled = true, browserName = firefox, rotatable = false, locationContextEnabled = true, version = 24.0, cssSelectorsEnabled = true, database, cssSelectorsEnabled = true, database = benar, handleAlerts = true, browserConnectionEnabled = true, nativeEvents = false, webStorageEnabled = true, applicationCacheEnabled = false, takeScreenshot = true}]
Adakah yang bisa membantu saya dengan masalah ini atau menjelaskan apa yang mungkin saya lakukan salah di sini.
sumber
Bagi saya bekerja seperti pesona
Semoga membantu.
sumber
ElementFinder
dapat berantai, jadi Anda dapat melakukan:element(by.css('.specific-select')).element(by.cssContainingText('option', 'BeaverBox Testing')).click();
Pendekatan elegan akan melibatkan pembuatan abstraksi yang mirip dengan apa yang ditawarkan oleh binding bahasa selenium lainnya di luar kotak (misalnya
Select
kelas dalam Python atau Java).Mari buat pembungkus yang nyaman dan sembunyikan detail implementasi di dalamnya:
Contoh penggunaan (perhatikan seberapa mudah dibaca dan digunakan):
Solusi diambil dari topik berikut: Pilih -> opsi abstraksi .
FYI, membuat permintaan fitur: Pilih -> opsi abstraksi .
sumber
click()
. Terima kasih.sumber
Untuk mengakses opsi tertentu, Anda perlu menyediakan selektor nth-child ():
sumber
Beginilah cara saya melakukan pilihan saya.
sumber
Inilah cara saya melakukannya:
sumber
waitForAngular()
metode busur derajat .Coba ini, ini berhasil untuk saya:
sumber
Anda dapat mencoba ini semoga berhasil
sumber
Cara lain untuk mengatur elemen opsi:
sumber
Untuk memilih item (opsi) dengan id unik seperti di sini:
Saya menggunakan ini:
sumber
Kami menulis perpustakaan yang mencakup 3 cara untuk memilih opsi:
Fitur tambahan dari fungsi ini adalah mereka menunggu elemen untuk ditampilkan sebelum tindakan apa pun di
select
dilakukan.Anda bisa menemukannya di npm @ hetznercloud / protractor-test-helper . Pengetikan untuk TypeScript juga disediakan.
sumber
Mungkin tidak super elegan, tapi efisien:
Ini hanya mengirimkan kunci ke bawah pada pilihan yang Anda inginkan, dalam kasus kami, kami menggunakan modelSelector tetapi jelas Anda dapat menggunakan selektor lain.
Kemudian di model objek halaman saya:
Dan dari pengujian:
sumber
Masalahnya adalah bahwa solusi yang bekerja pada kotak pilih bersudut biasa tidak bekerja dengan md-select dan md-option Angular Material menggunakan busur derajat. Yang ini telah diposting oleh orang lain, tetapi berhasil untuk saya dan saya belum dapat mengomentari postingannya (hanya 23 poin rep). Juga, saya membersihkannya sedikit, daripada browser.sleep, saya menggunakan browser.waitForAngular ();
sumber
element(by.model('selectModel')).click(); element(by.css('md-option[value="searchOptionValue"]')).click();
mdSelectElement.getAttribute('aria-owns').then( function(val) { let selectMenuContainer = element(by.id(val)); selectMenuContainer.element(by.css('md-option[value="foo"]')).click(); } );
Ada masalah dengan memilih opsi di Firefox yang diperbaiki peretasan Droogans yang ingin saya sebutkan di sini secara eksplisit, berharap itu bisa menyelamatkan seseorang dari beberapa masalah: https://github.com/angular/protractor/issues/480 .
Meskipun pengujian Anda berhasil secara lokal dengan Firefox, Anda mungkin menemukan bahwa pengujian tersebut gagal di CircleCI atau TravisCI atau apa pun yang Anda gunakan untuk CI & penerapan. Menyadari masalah ini sejak awal akan menghemat banyak waktu saya :)
sumber
Pembantu untuk menyetel elemen opsi:
sumber
Jika di bawah ini adalah dropdown-
Kemudian kode busur derajat bisa-
Sumber- https://github.com/angular/protractor/issues/600
sumber
Pilih opsi berdasarkan Indeks:
sumber
Saya telah sedikit meningkatkan solusi yang ditulis oleh PaulL. Pertama-tama saya memperbaiki kode agar kompatibel dengan API Protractor terakhir. Dan kemudian saya mendeklarasikan fungsi di bagian 'onPrepare' dari file konfigurasi Protractor sebagai anggota instance browser , sehingga dapat direferensikan dari spesifikasi e2e apa pun.
sumber
Saya telah menjaring internet untuk mendapatkan jawaban tentang bagaimana memilih opsi dalam model dropdown dan saya telah menggunakan kombinasi ini yang telah membantu saya dengan materi Angular.
Tampaknya saat membuang kode semua dalam satu baris, ia dapat menemukan elemen di tarik-turun.
Butuh banyak waktu untuk solusi ini, saya harap ini membantu seseorang.
sumber
Kami ingin menggunakan solusi elegan di atas sana dengan menggunakan material angularjs tetapi tidak berhasil karena sebenarnya tidak ada tag opsi / md-opsi di DOM hingga md-pilih telah diklik. Jadi cara "elegan" tidak berhasil untuk kami (perhatikan bahan bersudut!) Inilah yang kami lakukan untuk itu, tidak tahu apakah ini cara terbaik tetapi pasti berfungsi sekarang
Kami perlu memiliki 4 pilihan yang dipilih dan saat pilihan terbuka, ada overlay dalam cara memilih pilihan berikutnya. itulah mengapa kita perlu menunggu 500ms untuk memastikan kita tidak mendapat masalah dengan efek material yang masih beraksi.
sumber
Cara lain untuk mengatur elemen opsi:
sumber
sumber
Anda dapat memilih opsi dropdown berdasarkan nilai:
$('#locregion').$('[value="1"]').click();
sumber
Berikut adalah cara melakukannya dengan nilai opsi atau indeks . Contoh ini agak kasar, tetapi menunjukkan cara melakukan apa yang Anda inginkan:
html:
ts:
sumber
sumber
Kita dapat membuat kelas DropDown khusus untuk ini dan menambahkan metode sebagai:
Juga, untuk memverifikasi nilai apa yang saat ini dipilih, kita dapat memiliki:
sumber
Contoh di bawah ini adalah cara termudah. Saya telah menguji dan lulus dalam Versi Protractor
5.4.2
Kode lengkap
sumber
Ini adalah jawaban satu baris sederhana di mana sudut memiliki pelacak khusus yang dapat membantu memilih dan mengindeks dari daftar.
sumber
Pilih opsi berdasarkan properti CSS
atau
Di mana locregion (id), organization.parent_id (nama model) adalah atribut elemen pilih.
sumber