javascript - 前端單元測試 - 如何在下拉protractorjs e2e測試中選擇選項




前端e2e (17)

我正在嘗試使用量角器從角落e2e測試的下拉菜單中選擇一個選項。

以下是選擇選項的代碼片段:

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

這給了我以下錯誤:

指定了一個無效或非法的字符串Build info:version:'2.35.0',revision:'c916b9d',time:'2013-08-12 15:42:01'系統信息:os.name:'Mac OS X' ,os.arch:'x86_64',os.version:'10 .9',java.version:'1.6.0_65'驅動程序信息:driver.version:unknown

我也試過:

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'系統信息:os.name:'Mac OS X',os.arch:'x86_64',os.version:'10 .9',java.version:'1.6.0_65'會話ID:bdeb8088-d8ad-0f49-aad9 -82201c45c63f驅動程序信息:org.openqa.selenium.firefox.FirefoxDriver Capabilities [{platform = MAC,acceptSslCerts = true,javascriptEnabled = true,browserName = firefox,rotate = false,locationContextEnabled = true,版本= 24.0,cssSelectorsEnabled = true,databaseEnabled = true,handlesAlerts = true,browserConnectionEnabled = true,nativeEvents = false,webStorageEnabled = true,applicationCacheEnabled = false,takesScreenshot = true}]

任何人都可以幫助我解決這個問題,或者點亮我在這裡可能會做的錯誤。


一個優雅的方法將涉及到抽像類似於其他硒語言綁定提供了現成的(例如Python或Java中的Select類)。

讓我們製作一個方便的包裝並隱藏內部的實現細節:

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

解決方案取自以下主題: 選擇 - >選項抽象

僅供參考,創建了一項功能請求: 選擇 - >選項抽象


通過CSS屬性選擇選項

element(by.model("organization.parent_id")).element(by.css("[value='1']")).click();

要么

element(by.css("#locregion")).element(by.css("[value='1']")).click();

locregion(id),organization.parent_id(模型名稱)是select元素的屬性。


以下是我的做法:

$('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
});

問題是在常規角度選擇框上工作的解決方案不適用於使用量角器的Angular Material md-select和md-option。 這張是另一張貼的,但它對我有用,我無法評論他的帖子(只有23個重點)。 此外,我清理了一下,而不是browser.sleep,我用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
});

在Firefox中選擇Droogans的黑客修復選項存在一個問題,我希望在此明確提及,希望能夠幫助別人解決一些問題: https://github.com/angular/protractor/issues/480https://github.com/angular/protractor/issues/480

即使您的測試是通過Firefox本地傳遞的,您可能會發現它們在CircleCI或TravisCI上失敗,或者您在CI和部署中使用的任何測試失敗。 從一開始就意識到這個問題會為我節省很多時間:)


對我來說,就像一個魅力

element(by.cssContainingText('option', 'BeaverBox Testing')).click();

希望能幫助到你。


您可以按值選擇下拉選項: $('#locregion').$('[value="1"]').click();


我一直在網絡上搜索關於如何在模型下拉菜單中選擇一個選項的答案,並且我已經使用了這種組合幫助了我與Angular材質。

元素(by.model(“ModelName”))。click()。element(By.xpath('xpath location'))。click();

看起來,當將代碼全部放在一行中時,它可以在下拉列表中找到該元素。

花了很多時間來解決這個問題,我希望這能幫助別人。


我們想使用angularjs材質上的優雅解決方案,但它沒有效果,因為DOM中實際上沒有選項/ md選項標籤,直到md-select被點擊。 所以這種“優雅”的方式對我們來說不起作用(注意角材!)這是我們為之而做的,不知道它是否是最好的方式

element.all(by.css('md-select')).each(function (eachElement, index) {
    eachElement.click();                    // select the <select>
    browser.driver.sleep(500);              // wait for the renderings to take effect
    element(by.css('md-option')).click();   // select the first md-option
    browser.driver.sleep(500);              // wait for the renderings to take effect
});

我們需要選擇4個選擇,當選擇打開時,選擇下一個選擇的方式有一個覆蓋。 這就是為什麼我們需要等待500毫秒,以確保我們不會遇到仍在實施的物質效應。


我有一個類似的問題,並最終編寫了一個幫助函數來選擇下拉值。

我最終決定,我很好地選擇了選項編號,因此編寫了一個方法,它接受一個元素和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/ : http://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/


按索引選擇選項:

var selectDropdownElement= element(by.id('select-dropdown'));
selectDropdownElement.all(by.tagName('option'))
      .then(function (options) {
          options[0].click();
      });

設置選項元素的另一種方法:

var select = element(by.model('organization.parent_id'));
select.$('[value="1"]').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');

這是我做我的選擇。

function switchType(typeName) {
     $('.dropdown').element(By.cssContainingText('option', typeName)).click();
};

選擇具有獨特ID的項目(選項),如下所示:

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

element(by.model('parent_id')).sendKeys('BKN01');




protractor