如何处理水豚黄瓜动态内容

Question

我有这个 HTML/JS 代码：

<script>
  function sync()
  {
    var n1 = document.getElementById('textArea');
    var n2 = document.getElementById('textArea2');
    n2.value = n1.value;
  }
</script>


<h1>TESTING PAGE</h1>

<div>
  Edit text:
  </br>
  <textarea id="textArea" rows="4" cols="50" >Input text to copy...</textarea>
  </br>
  <button id="copyButton" type="button" onclick="sync()">Copy Text</button>
  </br>
  </br>
  <textarea id="textArea2" rows="4" cols="50">  </textarea>
  </br>
  <a href="testPage2.html">Link to next page</a>
</div>

如您所见，我只是在按下按钮时将内容从一个文本框复制到另一个文本框。我使用 Javascript 来做到这一点。

当我尝试从两个文本框中获取文本以进行比较时，“.text”方法仅提供加载页面时文本框中的文本，而不是我之后添加的文本。

更改元素后如何访问它们以便我可以获得当前文本内容？

谢谢！

Answer 1

text方法获取指定元素的后代文本节点内容。这不是您想要的表单字段，而是您想要的 value

find('#textArea2').value

也就是说，你真的不应该只是获取值并与 ==/eq 进行比较，因为如果你的 JS 很慢，它会导致不稳定的测试。长期使用水豚会更好 matchers/assertions like

val = find('#textArea').value
click_button('Copy Text')
expect(page).to have_field('textArea2', with: val) # RSpec    
# assert_field('textArea2', with: val) # minitest

如何处理水豚黄瓜动态内容

How to handle capybara cucumber dynamic content

javascript

ruby

selenium

cucumber

capybara