web-dev-qa-db-ja.com

選択要素のオプション値を取得する方法

Protractorを使用して、select要素のオプション値を取得しようとしています。ただし、option要素が見つかりません。

[〜＃〜] html [〜＃〜]

<select ng-options="opions.c as options.n for option in options" ng-model="model">
    <option value="0">Option 1</option>
    <option value="1">Option 2</option>
</select>

仕様ファイル

describe('testing select option', function() {
    it('', function() {
        ptor = protractor.getInstance();

        //This will not get the option required
        ptor.findElement(protractor.By.binding('model'));
    });
});

例外やエラーメッセージを出さずに使用できる関数を見つけられなかったため、オプション値を取得する方法を見つけることができないようです。

誰もがこの問題を解決する方法を知っていますか？

angularjsprotractor
18
Ian Richards

わかりました。これで、分度器を使用してオプション要素を取得する方法を見つけることができました。

以下のサンプルコードは、これを行う方法を示しています。

ptor.findElement(protractor.By.css('select option:nth-child(value of the option you require IE: the number)')).click();
5
Ian Richards

私はドロップダウンをうまく機能させるのにいくつかの問題を抱えており、今日それを解決するためにいくつかの時間を費やしてきました（したがって、他の誰かが便利だと思う場合に備えてここで共有しています）。

以前のバージョンのProtractorには、by.selectedOptionがありました。これは、by.selectと実質的に同じことを行いますが、選択された項目のみを返します。したがって、上記で選択したオプションのテキストを取得するには、次のようにします。

expect(element(by.selectedOption('model')).getText()).toEqual('Option 1');

詳細が必要な場合は、ブログ投稿を作成しました。ドロップダウンでオプションを選択するためのヘルパー関数についても説明します。 http://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns -検証/

分度器の最近のバージョンでは、この機能が削除され、次のように置き換えられました。

expect(element(by.id('my_id')).element(by.css('option:checked')).getText();

これは、任意のファインダーに適用できるため、より柔軟ですが、selectedOptionはモデルFinderでのみ機能しました。

35
PaulL

XPathを使用してみてください：

ptor.findElement(protractor.By.xpath('//select/option[1]'));

同じ手法を使用して、値によってオプションを選択できます。

protractor.By.xpath('//select/option[text()="Option 2"]'));

選択したドロップダウンに基づいて入力が表示されるフォームを設定するために、これを行う必要がありました。例：

makeFord = protractor.By.xpath('//select[@id="make"]/option[text()="Ford"]'));
modelMustang = protractor.By.xpath('//select[@id="model"]/option[text()="Mustang"]'));
makeFord.click();
modelMustang.click();
0
corinna000

以下は、selectのオプションのthe valueを取得する方法です。

[〜＃〜] html [〜＃〜]

<select ng-options="opions.c as options.n for option in options" ng-model="model">
    <option value="Africa">Option 1</option>
    <option value="Switzerland">Option 2</option>
</select>

。specファイル

describe("Country <select>", function() {

  it("should have 'Africa' as the value of the first option", function() {

    browser.get('index.html');

    let all_options = element.all(
      by.options("opions.c as options.n for option in options") //use whatever string is assigned to the ng-options attribute in the html
    );

    let first_option = all_options.get(0);  //or all_options.first()
    let second_option = all_options.get(1); //or all_options.last()

    expect(
      first_option.getAttribute('value')
    ).toEqual("Africa");                           

  });

});

選択されたオプションのthe valueを取得するには（これは、オプションでclick（）を呼び出すことにより、分度器でプログラムによって選択されたオプションである場合があります）：

    expect(
      element(    
        by.model('model') //'model' is the string assigned to the select's ng-model attribute                                
      ).element(                  
          by.css('option:checked') 
        ).getAttribute('value')
    ).toEqual('Swizerland');
0
7stud

これは役立ちます。

//check whether the selected value is equal to the expected value.
expect(element(by.model("model")).getAttribute('value')).toEqual("0");

//catch the selected value
element(by.model("model")).getAttribute('value').then(function (value) {
   console.log('selected value', value);
});
0
Koga