UI反应水豚按钮点击测试

时间:2016-09-16 20:38:32

标签: testing reactjs rspec capybara

我试图点击一个简单的菜单栏图标。但是,id和class不可用。我尝试过使用page.execute_script()。

HTML代码

<button tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: inline-block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: 14px; font-weight: 500; transform: translate(0px, 0px); color: white; width: 16.6667%; text-transform: uppercase; background-color: rgb(63, 174, 73);">
  <div>
    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 48px;">
      <!-- react-text: 57 -->Type<!-- /react-text -->
    </div>
  </div>
</button>

水豚代码

script = "document.getElementsByClassName('button')[0].click();"
page.execute_script(script)

1 个答案:

答案 0 :(得分:1)

如果它是tabindex =&#34; 0&#34;的唯一按钮你可以做到

find('button[tabindex="0"]').click()

如果你能想出一个css或xpath表达式来选择按钮(它在页面上可见),你可以不使用execute_script点击它(你最好不要使用execute_script,因为事件更接近用户将生成的事件。另一种选择是,如果按钮是可识别元素中包含的唯一按钮,则可以将查找范围限定为可识别元素。

find('form#my_form').find('button').click()

或者如果它是

部分中的第一个按钮
find('form#my_form').all('button')[0].click()

或者它只是页面上的第一个按钮,而您是来自没有按钮的页面

all('button', minimum: 1)[0].click()

您的execute_script无法正常工作,因为您按类名搜索,但根据您的html按钮没有设置任何类属性。无论如何,如果可能,你最好不要使用Capybara而不使用execute_script,因为execute_script没有与之关联的等待或重试行为,并且快捷方式确认了一些确认可以实际执行您想要测试的操作的检查。