1

jQuery UI ダイアログ ボタンを click_button または selenium.click に応答させることができた人はいますか? これを機能させることができないようです。

基本的に、Cucumber/Webrat/Selenium を使用して、Rails アプリの jQuery UI ダイアログでフォームをテストしようとしています。

多くのテーブル行を含むページがあり、各行をクリックするとフォーム付きのダイアログ ボックスが表示されます。各フォーム要素には一意の ID があるため、マークアップは有効です。

ボタンは Dialog プラグインによって動的に作成できるため、ダイアログを初期化して「保存」ボタンと「キャンセル」ボタンを追加します。興味深いことに、プラグインは入力タグではなく、ボタン タグを挿入します。また、以下に示すように、開くときに id を追加して、テスト フレームワークがボタンをターゲットにできるようにします。

$('.inventory_dialog').dialog({
  autoOpen: false,
  modal: true,
  buttons: {
    'Save': function() {
      // ajax submit stuff
    },
    Cancel: function() {
      // cancel stuff
    }
  },
  open: function() {
    // add ids to buttons for selenium
    var inventory_id = $(this).attr('id').split('_').pop();
    $('.ui-dialog-buttonpane')
      .find('button:contains("Save")').attr('id', 'inventory_'+inventory_id+'_save_button')
      .end()
      .find('button:contains("Cancel")').attr('id', 'inventory_'+inventory_id+'_cancel_button');
  }
});

マークアップは次のようになります。

<div id="inventory_dialog_392827" class="inventory_dialog">
  <form action="/suppliers/22/listings/27738/inventory/392827" class="edit_inventory" id="edit_inventory_392827" method="post"><div style="margin:0;padding:0"><input name="_method" type="hidden" value="put" /></div>
    <div class="input_block">
      <label for="inventory_392827_new_quantity">Quantity</label>
      <input id="inventory_392827_new_quantity" name="inventory[new_quantity]" type="text" value="10" />
    </div>
    <div class="input_block">
      <label for="inventory_392827_claim_quantities">Groups of</label>
      <input id="inventory_392827_claim_quantities" name="inventory[claim_quantities]" type="text" value="6-8" />
    </div>
  </form>
</div>

私のCucumberステップ（現在）は次のようになります：

When /^I click the "(.+)" button in the inventory dialog$/ do |button_name|
  debugger
  selenium.click "//button[@id='inventory_#{@current_offer.id}_#{button_name.downcase}_button']"
  selenium_wait
end

Cucumber を実行して「デバッガー」にヒットすると、入力フィールドで手動で「selenium.click」することができます。

selenium.click "//input[@id='inventory_392827_new_quantity']"

これにより、そのフィールドにカーソルが正常に配置されます。ただし、ボタンをクリックしても機能しません。

selenium.click "//button[@id='inventory_392827_save_button']"

コマンドラインデバッガーでそれを入力すると、nil が返されます (例外がないため、これは成功だと思います) が、Firefox は何もしません。ダイアログ ボックスはブラウザで開いたままになります。response.body を出力すると、そのボタンが表示されます。

私も試しました

click_button "inventory_392827_save_button"

しかし、「selenium_wait」コマンドはタイムアウトします。これは、その要素が表示されないことを意味します。

私は立ち往生しています...

4

3 に答える 3

0

XPath や CSS などの別の配置方法でボタンを配置した方がよい場合があります。ボタンの HTML を追加すると、いくつかの提案をしようと思います。

たとえば、ターゲットボタンに「送信」のクラスがある場合、次を使用できます。

css=input.submit

ターゲット ボタンの値が「Click Me」の場合は、次のように使用できます。

//input[@value='Click Me']

別の提案はid、一意の番号なしで属性を使用することです。そのため、次のようにするとうまくいく場合があります。

//input[substring(@id, string-length(@id) -11, 12) = '_save_button']
于 2009-12-08T09:17:17.283 に答える
0

私は同様の問題を抱えていました.これが私がそれを成し遂げた方法です(Capybara/Selenium/Factory_Girlを使用)。

jQuery UI ダイアログ ボタンは、この HTML を生成します。私の場合、2 つのボタン [追加] と [キャンセル] があります。

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
 <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
   <span class="ui-button-text">Add</span>
 </button>

 <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
   <span class="ui-button-text">Cancel</span>
 </button>
</div>

しかし、実際のボタン名は上記のようにボタン タグ内にネストされたスパンであるため、click_button メソッドは機能しません。

だから私は .feature ステップに書いた：

When I press the jquery dialog "Add" button

そして、これを「base.rb」に追加しました：

# jQuery Dialog buttons
When /^I press the jquery dialog "([^\"]*)" button$/ do |button_text|
  page.find("div.ui-dialog-buttonpane").find('span', :text => button_text).click
end
于 2010-10-28T13:13:04.333 に答える
0

「fireEvent ... click」または clickAt に変更すると、問題は解決しますか?

于 2009-12-07T14:04:25.133 に答える