ドロップダウンでオプションを選択する方法 protractorjs e2e tests

protractor を使って angular 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();

次のようなエラーが発生します:

無効または不正な文字列が指定されました ビルド情報: バージョン: '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: 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:要素は現在表示されていないため、操作できません。 Command duration or timeout: 9 milliseconds ビルド情報: バージョン: '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, rotatable=false, locationContextEnabled=true, version=24.0, cssSelectorsEnabled=true, databaseEnabled=true, handlesAlerts=true, browserConnectionEnabled=true, nativeEvents=false, webStorageEnabled=true, applicationCacheEnabled=false, takesScreenshot=true}] 。

どなたか、この問題を解決してくださる方、あるいは私が間違ったことをしているのではないかとお考えの方はいらっしゃいませんか?

ソリューション

私も同じような問題を抱えていましたが、結局、ドロップダウンの値を選択するヘルパー関数を書きました。

最終的には、オプション番号で選択しても問題ないと判断し、要素と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/

解説 (1)

特定のオプションにアクセスするには、nth-child()セレクタを指定する必要があります。

ptor.findElement(protractor.By.css('select option:nth-child(1)')).click();
解説 (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
});
解説 (0)