Saya mencoba untuk memilih pilihan dari drop-down untuk sudut e2e tes menggunakan busur derajat.
Berikut ini adalah potongan kode dari pilih opsi:
<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:
Yang tidak sah atau ilegal string ditentukan Membangun info: versi: '2.35.0', revisi: 'c916b9d', waktu: '2013-08-12 15:42:01' Sistem info: os.nama: 'Mac OS X', os.arch: 'x86_64', os.versi: '10.9', jawa.versi: '1.6.0_65' Sopir info: sopir.versi: tidak diketahui
Saya juga 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 dan tidak dapat berinteraksi dengan Perintah durasi atau timeout: 9 milidetik Membangun info: versi: '2.35.0', revisi: 'c916b9d', waktu: '2013-08-12 15:42:01' Sistem info: os.nama: 'Mac OS X', os.arch: 'x86_64', os.versi: '10.9', jawa.versi: '1.6.0_65' Sesi ID: bdeb8088-d8ad-0f49-aad9-82201c45c63f Sopir info: org.openqa.selenium.firefox.FirefoxDriver Kemampuan [{platform=MAC, acceptSslCerts=true, javascriptEnabled=true, browserName=firefox, diputar=false, locationContextEnabled=true, versi=24.0, cssSelectorsEnabled=true, databaseEnabled=true, handlesAlerts=true, browserConnectionEnabled=true, nativeEvents=false, webStorageEnabled=true, applicationCacheEnabled=false, takesScreenshot=true}]
Ada yang bisa tolong bantu saya dengan masalah ini atau melemparkan beberapa cahaya pada apa yang saya bisa lakukan salah di sini.
Saya punya masalah yang sama, dan akhirnya menulis fungsi pembantu yang memilih nilai-nilai menurun.
Akhirnya saya memutuskan bahwa saya baik-baik saja dengan memilih opsi nomor, dan oleh karena itu menulis sebuah metode yang mengambil unsur dan optionNumber, dan memilih yang optionNumber. Jika optionNumber null itu memilih apa-apa (meninggalkan dropdown yang tidak dipilih).
var selectDropdownbyNum = function ( element, optionNum ) {
if (optionNum){
var options = element.all(by.tagName('option'))
.then(function(options){
options[optionNum].click();
});
}
};
Aku menulis posting blog jika anda ingin lebih detail, hal ini juga mencakup memverifikasi teks dari opsi yang dipilih di dropdown: http://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/
Elegan pendekatan akan melibatkan membuat abstraksi sama dengan yang lainnya selenium bahasa binding menawarkan out-of-the-box (misalnya Pilih
kelas di Python atau Java).
Let's membuat nyaman wrapper dan menyembunyikan implementasi detail dalam:
var SelectWrapper = function(selector) {
this.webElement = element(selector);
};
SelectWrapper.prototype.getOptions = function() {
return this.webElement.all(by.tagName('option'));
};
SelectWrapper.prototype.getSelectedOptions = function() {
return this.webElement.all(by.css('option[selected="selected"]'));
};
SelectWrapper.prototype.selectByValue = function(value) {
return this.webElement.all(by.css('option[value="' + value + '"]')).click();
};
SelectWrapper.prototype.selectByPartialText = function(text) {
return this.webElement.all(by.cssContainingText('option', text)).click();
};
SelectWrapper.prototype.selectByText = function(text) {
return this.webElement.all(by.xpath('option[.="' + text + '"]')).click();
};
module.exports = SelectWrapper;
Contoh penggunaan (catatan cara mudah dibaca dan mudah-ke-menggunakan ini):
var SelectWrapper = require('select-wrapper');
var mySelect = new SelectWrapper(by.id('locregion'));
# select an option by value
mySelect.selectByValue('4');
# select by visible text
mySelect.selectByText('BoxLox');
Solusi yang diambil dari topik berikut: https://stackoverflow.com/questions/28723419/select-option-abstraction.
FYI, menciptakan permintaan fitur: Pilih -> pilihan abstraksi.
Berikut ini's bagaimana saya melakukannya:
$('select').click();
$('select option=["' + optionInputFromFunction + '"]').click();
// This looks useless but it slows down the click event
// long enough to register a change in Angular.
browser.actions().mouseDown().mouseUp().perform();
Anda dapat mencoba ini berharap itu akan bekerja
element.all(by.id('locregion')).then(function(selectItem) {
expect(selectItem[0].getText()).toEqual('Ranjans Mobile Testing')
selectItem[0].click(); //will click on first item
selectItem[3].click(); //will click on fourth item
});
Kita menulis sebuah perpustakaan yang meliputi 3 cara untuk memilih opsi:
selectOption(option: ElementFinder |Locator | string, timeout?: number): Promise<void>
selectOptionByIndex(select: ElementFinder | Locator | string, index: number, timeout?: number): Promise<void>
selectOptionByText(select: ElementFinder | Locator | string, text: string, timeout?: number): Promise<void>
Fitur tambahan dari fungsi ini adalah bahwa mereka menunggu untuk elemen yang akan ditampilkan sebelum setiap aksi pilih
dilakukan.
Anda dapat menemukannya pada npm @hetznercloud/busur derajat-uji-pembantu. Typings untuk Naskah yang disediakan juga.
Masalahnya adalah bahwa solusi yang bekerja pada regular sudut pilih kotak tidak bekerja dengan Sudut Bahan md-pilih dan md-opsi menggunakan busur derajat. Yang satu ini telah diposting oleh yang lain, tetapi bekerja untuk saya dan saya tidak dapat mengomentari posting-nya belum (hanya 23 rep poin). Juga, saya membersihkannya sedikit, bukan dari browser.tidur, saya menggunakan browser.waitForAngular();
element.all(by.css('md-select')).each(function (eachElement, index) {
eachElement.click(); // select the <select>
browser.waitForAngular(); // wait for the renderings to take effect
element(by.css('md-option')).click(); // select the first md-option
browser.waitForAngular(); // wait for the renderings to take effect
});
Mungkin tidak super elegan, tapi efisien:
function selectOption(modelSelector, index) {
for (var i=0; i<index; i++){
element(by.model(modelSelector)).sendKeys("\uE015");
}
}
Ini hanya mengirimkan kunci ke bawah pada pilih yang anda inginkan, dalam kasus kami, kami menggunakan modelSelector tapi jelas anda dapat menggunakan yang lain pemilih.
Kemudian di halaman saya object model:
selectMyOption: function (optionNum) {
selectOption('myOption', optionNum)
}
Dan dari uji:
myPage.selectMyOption(1);
Untuk memilih item (pilihan) dengan id yang unik seperti berikut ini:
<select
ng-model="foo"
ng-options="bar as bar.title for bar in bars track by bar.id">
</select>
I'm menggunakan ini:
element(by.css('[value="' + neededBarId+ '"]')).click();
Ada's masalah dengan memilih opsi di Firefox yang Droogans's hack perbaikan yang ingin saya sampaikan di sini secara eksplisit, berharap itu dapat menyelamatkan seseorang beberapa masalah: https://github.com/angular/protractor/issues/480.
Bahkan jika anda tes passing lokal dengan Firefox, anda mungkin menemukan bahwa mereka're gagal pada CircleCI atau TravisCI atau apa pun yang anda're menggunakan CI&penyebaran. Menyadari masalah ini dari awal akan menyelamatkan saya banyak waktu:)
Jika di bawah adalah diberikan dropdown-
<select ng-model="operator">
<option value="name">Addition</option>
<option value="age">Division</option>
</select>
Kemudian protractorjs kode bisa-
var operators=element(by.model('operator'));
operators.$('[value=Addition]').click();
Sumber-https://github.com/sudut/busur derajat/masalah/600
I've ditingkatkan sedikit solusi yang ditulis oleh PaulL. Pertama-tama saya tetap kode untuk menjadi kompatibel dengan busur derajat API. Dan kemudian saya menyatakan fungsi dalam 'onPrepare' bagian dari busur derajat config sebagai anggota browser contoh, sehingga dapat dirujuk bentuk apapun e2e spec.
onPrepare: function() {
browser._selectDropdownbyNum = function (element, optionNum) {
/* A helper function to select in a dropdown control an option
* with specified number.
*/
return element.all(by.tagName('option')).then(
function(options) {
options[optionNum].click();
});
};
},
Cara lain untuk mengatur pilihan elemen:
var setOption = function(optionToSelect) {
var select = element(by.id('locregion'));
select.click();
select.all(by.tagName('option')).filter(function(elem, index) {
return elem.getText().then(function(text) {
return text === optionToSelect;
});
}).then(function(filteredElements){
filteredElements[0].click();
});
};
// using the function
setOption('BeaverBox Testing');