UI 反应水豚按钮点击测试

Question

我正在尝试让一个简单的菜单栏图标可供点击。但是，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)

Answer 1

如果它是唯一带有 tabindex="0" 的按钮，您可以这样做

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

如果你能为 select 按钮想出一个 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 无效，因为您正在按 class 名称搜索，但根据您的 html 按钮没有设置任何 class 属性.无论如何，如果可能，水豚最好不要使用 execute_script，因为 execute_script 没有与之相关的等待或重试行为，并且可以快捷方式进行大量检查，这些检查确认实际上可以执行您想要测试的操作.

UI 反应水豚按钮点击测试

UI react capybara button click test

testing

rspec

capybara

reactjs