Я пытаюсь выбрать вариант из выпадающего углового Е2Е тестов с помощью транспортира.
Вот фрагмент кода выберите опцию:
<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>
Я пробовал:
ptor.findElement(protractor.By.css('select option:1')).click();
Это дает мне следующую ошибку:
Было указано недопустимое или незаконное строки Построить информация: версия: '2.35.0', редакции: 'c916b9d', время: '2013-08-12 15:42:01' Информация о системе: ОС.имя: 'Mac ОС X', ОС.арка: 'архитектуру x86_64', ОС.версия: '10.9', Ява.версия: '1.6.0_65' Информация для водителя: водитель.версия: неизвестна
Я тоже пробовал:
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();
Это дает мне следующую ошибку:
ElementNotVisibleError: элемент не виден и поэтому не может быть взаимодействовали с Длительность команды или ожидания: 9 мс Построить информация: версия: '2.35.0', редакции: 'c916b9d', время: '2013-08-12 15:42:01' Информация о системе: ОС.имя: 'Mac ОС X', ОС.арка: 'архитектуру x86_64', ОС.версия: '10.9', Ява.версия: '1.6.0_65' ИД сессии: bdeb8088-d8ad-0f49-aad9-82201c45c63f Информация для водителя: орг.openqa.селен.браузер Firefox.FirefoxDriver Возможности [{платформа=МАК, acceptSslCerts=правда, javascriptEnabled=правда, бривземниеку=дополнения, поворотный=false, то locationContextEnabled=правда, версия=24.0, cssSelectorsEnabled=правда, databaseEnabled=правда, handlesAlerts=правда, browserConnectionEnabled=правда, nativeEvents=false, то webStorageEnabled=правда, applicationCacheEnabled=false, то takesScreenshot=истина}]
Может кто-нибудь помочь мне с этой проблемой или пролить свет на то, что я может быть делаю неправильно здесь.
Для меня работал как шарм
element(by.cssContainingText('option', 'BeaverBox Testing')).click();
Надеюсь, что это помогает.
У меня была похожая проблема, и в конце концов написал вспомогательную функцию, которая выбирает в выпадающем списке значений.
В конце концов я решил, что мне было хорошо выбрав параметр количество, поэтому и написал метод, который принимает элемент и optionNumber, и выбирает, что optionNumber. Если optionNumber имеет значение null, она выбирает ничего (оставив в выпадающем списке выбрано).
var selectDropdownbyNum = function ( element, optionNum ) {
if (optionNum){
var options = element.all(by.tagName('option'))
.then(function(options){
options[optionNum].click();
});
}
};
Я написал пост в блоге, Если вы хотите более подробно, он также охватывает проверку текст выбранного параметра в меню: http://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/
Элегантный подход предполагает оформление абстракция похоже на то, что другой язык селен привязки предлагаем вне---коробка (например, "выбрать" класса в Python или Java).
Позвольте'ы сделать удобный фантик и скрыть детали реализации внутри:
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;
Использование пример (обратите внимание, как читаемый и простой в использовании это):
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');
Решение принято со следующей темой: https://stackoverflow.com/questions/28723419/select-option-abstraction.
К вашему сведению, создал запрос: выбрать -> вариант абстракция.
element(by.model('parent_id')).sendKeys('BKN01');
Это, как я сделал мой выбор.
function switchType(typeName) {
$('.dropdown').element(By.cssContainingText('option', typeName)).click();
};
Здесь's, как я это сделал:
$('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();
Вы можете попробовать это надеюсь, что это будет работать
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
});
Мы написали библиотеку, которая включает в себя 3 способа выбрать один из следующих вариантов:
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>
Дополнительной особенностью этой функции является то, что они ждут, когда элемент будет отображаться перед каким-либо действием на "Выбрать" осуществляется.
Вы можете найти его на НПМ @hetznercloud/транспортир-тест-помощник. Typings для машинопись также предоставляются.
Другой способ установить элемент настройки:
var select = element(by.model('organization.parent_id'));
select.$('[value="1"]').click();
Проблема в том, что решения, которые работают на регулярных угловые выбрать ящики не работают с угловым материал МД и МД-с помощью транспортира. Этот был написал другой, но он работал для меня и я не могу комментировать свой пост еще (всего 23 реп точки). Кроме того, я очистил его немного, вместо браузера.сон, я использовал браузер.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
});
Может быть, не очень элегантный, но эффективный:
function selectOption(modelSelector, index) {
for (var i=0; i<index; i++){
element(by.model(modelSelector)).sendKeys("\uE015");
}
}
Это просто отправляет клавишу на выберите вы хотите, в нашем случае, мы используем modelSelector но, очевидно, вы можете использовать любой другой селектор.
Затем в моей объектной модели страницы:
selectMyOption: function (optionNum) {
selectOption('myOption', optionNum)
}
И из теста:
myPage.selectMyOption(1);
Для выбора элементов (вариантов) с уникальными идентификаторами, как здесь:
<select
ng-model="foo"
ng-options="bar as bar.title for bar in bars track by bar.id">
</select>
Я'м через это:
element(by.css('[value="' + neededBarId+ '"]')).click();
Там'ов проблемы с выбором параметров в Firefox, что Droogans'ов взломать исправления, которые я хочу здесь четко указать, надеясь, что это может спасти чью-то беду: https://github.com/angular/protractor/issues/480.
Даже если тесты проходят локально с помощью Firefox, вы можете обнаружить, что они'повторно не на CircleCI или TravisCI или все, что вы're, используя для CI&развертывание. Осознавая эту проблему с самого начала спасло бы меня много времени:)
Помощник, чтобы установить элемент настройки:
selectDropDownByText:function(optionValue) {
element(by.cssContainingText('option', optionValue)).click(); //optionValue: dropDownOption
}
Если ниже данного выпадающего
в
<select ng-model="operator">
<option value="name">Addition</option>
<option value="age">Division</option>
</select>
в
Затем protractorjs код может быть-
в
var operators=element(by.model('operator'));
operators.$('[value=Addition]').click();
в
Источник-протокол HTTPS://GitHub-е. ком/угловая/транспортир/вопросы/600
Я'вэ немного улучшена решение написано Полл. Во-первых, я исправил код, чтобы быть совместимым с последней транспортир API-интерфейс. И тогда я объявляю функцию в 'onPrepare' раздел транспортир config как член экземпляра browser, поэтому он может использоваться форма любой Е2Е спецификаций.
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();
});
};
},
Другой способ установить элемент настройки:
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');