125

分度器を使用して角度のある e2e テストのドロップダウンからオプションを選択しようとしています。

select オプションのコード スニペットは次のとおりです。

<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' システム情報: os.name: 'Mac OS X' 、os.arch: 'x86_64'、os.version: '10.9'、java.version: '1.6.0_65' ドライバー情報: driver.version: 不明

私も試しました:

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 機能 [{platform=MAC, acceptSslCerts=true, javascriptEnabled=true, browserName=firefox, rotatable=false, locationContextEnabled=true, version=24.0, cssSelectorsEnabled=true, databaseEnabled =true、handlesAlerts=true、browserConnectionEnabled=true、nativeEvents=false、webStorageEnabled=true、applicationCacheEnabled=false、takesScreenshot=true}]

誰でもこの問題を手伝ってくれるか、ここで間違っている可能性があることに光を当ててください。

4

33 に答える 33

257

私にとっては魅力のように働いた

element(by.cssContainingText('option', 'BeaverBox Testing')).click();
于 2014-06-17T08:47:49.760 に答える
90

同様の問題があり、最終的にドロップダウン値を選択するヘルパー関数を作成しました。

最終的に、オプション番号で選択しても問題ないと判断したため、要素とオプション番号を受け取り、そのオプション番号を選択するメソッドを作成しました。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/

于 2013-12-01T03:05:10.503 に答える
32

洗練されたアプローチには、他の Selenium 言語バインディングがすぐに使用できるもの ( 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');

次のトピックからの解決策: Select -> option abstraction


参考までに、機能リクエストを作成しました: Select -> option abstraction

于 2015-04-03T00:17:42.027 に答える
22
element(by.model('parent_id')).sendKeys('BKN01');
于 2014-08-15T19:58:28.947 に答える
8

これが私の選択の仕方です。

function switchType(typeName) {
     $('.dropdown').element(By.cssContainingText('option', typeName)).click();
};
于 2014-05-26T13:43:12.840 に答える
5

これを試してください、それは私のために働いています:

element(by.model('formModel.client'))
    .all(by.tagName('option'))
    .get(120)
    .click();
于 2015-04-13T09:17:50.623 に答える
5

これが私がそれをした方法です:

$('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();
于 2014-04-29T16:24:45.790 に答える
4

オプション要素を設定する別の方法:

var select = element(by.model('organization.parent_id'));
select.$('[value="1"]').click();
于 2016-10-06T07:24:48.187 に答える
4

あなたはそれがうまくいくことを願って試すことができます

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
});
于 2014-03-09T12:41:59.547 に答える
3

オプションを選択する 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>

この関数の追加機能は、要素に対するアクションが実行される前に、要素が表示されるのを待つことselectです。

npm @hetznercloud/protractor-test-helperで見つけることができます。TypeScript のタイピングも提供されます。

于 2018-06-11T10:18:18.867 に答える
2

あまりエレガントではないかもしれませんが、効率的です:

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);
于 2014-03-27T05:09:50.327 に答える
1

Droogans のハックが修正した Firefox でのオプションの選択に問題があり、ここで明示的に言及したいと思います

テストが Firefox でローカルでパスしても、CircleCI や TravisCI、または CI とデプロイに使用しているものでは失敗することがあります。最初からこの問題を認識していれば、多くの時間を節約できたでしょう:)

于 2015-07-17T09:28:41.207 に答える
1

モデルのドロップダウンでオプションを選択する方法についての答えを求めてネットをトロールしてきましたが、この組み合わせを使用して、Angular マテリアルを使用するのに役立ちました。

element(by.model("ModelName")).click().element(By.xpath('xpathlocation')).click();

コードをすべて 1 行でスローすると、ドロップダウンで要素を見つけることができるようです。

このソリューションには多くの時間がかかりました。これが誰かの助けになることを願っています。

于 2016-08-31T11:33:42.417 に答える
1

オプション要素を設定するヘルパー:

selectDropDownByText:function(optionValue) {
            element(by.cssContainingText('option', optionValue)).click(); //optionValue: dropDownOption
        }
于 2016-12-30T18:49:55.600 に答える
1

インデックスでオプションを選択:

var selectDropdownElement= element(by.id('select-dropdown'));
selectDropdownElement.all(by.tagName('option'))
      .then(function (options) {
          options[0].click();
      });
于 2017-04-17T15:17:28.413 に答える
0

オプション要素を設定する別の方法:

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');
于 2015-05-22T17:18:07.270 に答える
0

ドロップダウン オプションを値で選択できます。 $('#locregion').$('[value="1"]').click();

于 2016-11-22T11:34:39.123 に答える
0

angularjs マテリアルを使用してエレガントなソリューションを使用したかったのですが、実際には md-select がクリックされるまで DOM に option / md-option タグがないため、機能しませんでした。そのため、「エレガントな」方法は私たちにとってはうまくいきませんでした (角度のある素材に注意してください!) 代わりに私たちが行ったことを次に示します。これが最善の方法かどうかはわかりませんが、現在は確実に機能しています

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 ミリ秒待機する必要があります。

于 2015-03-05T13:59:43.627 に答える
0

このためのカスタム DropDown クラスを作成し、メソッドを次のように追加できます。

async selectSingleValue(value: string) {
        await this.element.element(by.xpath('.//option[normalize-space(.)=\'' + value + '\']')).click();
    }

また、現在選択されている値を確認するには、次のようにします。

async getSelectedValues() {
        return await this.element.$('option:checked').getText();
    }
于 2019-12-02T12:39:14.250 に答える
0
static selectDropdownValue(dropDownLocator,dropDownListLocator,dropDownValue){
    let ListVal ='';
    WebLibraryUtils.getElement('xpath',dropDownLocator).click()
      WebLibraryUtils.getElements('xpath',dropDownListLocator).then(function(selectItem){
        if(selectItem.length>0)
        {
            for( let i =0;i<=selectItem.length;i++)
               {
                   if(selectItem[i]==dropDownValue)
                   {
                       console.log(selectItem[i])
                       selectItem[i].click();
                   }
               }            
        }

    })

}
于 2018-12-06T10:31:08.850 に答える
0
----------
element.all(by.id('locregion')).then(function(Item)
{
 // Item[x] = > // x is [0,1,2,3]element you want to click
  Item[0].click(); //first item

  Item[3].click();     // fourth item
  expect(Item[0].getText()).toEqual('Ranjans Mobile Testing')


});
于 2016-05-20T08:55:36.703 に答える