Question

我有一个iframe，它是表单的目标：

<form target="preview">
    <textarea name="content"></textarea>
</form>

<iframe name="preview"></iframe>

当用户在textarea中输入时，表单会被提交（为了简洁，我省略了去抖动代码）：

$('textarea').keyup(function() {
  // debouncer ensures this happens at *most* every two seconds
  $('form').submit();
});

我有一个脚本可以将iframe的高度调整为其内容：

$('iframe').load(function() {
  var height = $('body', $(this).contents()).height();
  $(this).height(height);
});

现在我正在编写一个功能规范来断言高度调整实际发生了。我已经确定我需要使用evaluate_script来获取iframe的高度。所以，从理论上讲，我的规范看起来应该是这样的：

def preview_iframe_height
  page.evaluate_script('$("iframe").height()')
end

scenario 'preview grows to content', js: true do
  initial_height = preview_iframe_height
  fill_in('Content', with: 'some content')
  expect(preview_iframe_height).to be > initial_height
end

但是，此代码不会等待请求重新填充iframe并始终失败。我知道Capybara非常擅长等待使用像have_content这样的匹配器出现的内容，但我不知道如何等待高度改变。有什么想法吗？

我的测试套件：

RSpec的
水豚
鬼驱

Answer 1

感谢@ taryn-east上面的评论，我已成功改编this from Thoughtbot's blog：

def preview_iframe_height
  page.evaluate_script('$("iframe").height()')
end

scenario 'preview grows to content', js: true do
  page.execute_script(%{
    iframe_loaded = false;
    $('iframe').load(function() {
      iframe_loaded = true;
    });
  });

  initial_height = preview_iframe_height
  content = "line\n\n" * 30
  fill_in('Content', with: content)

  Timeout.timeout(Capybara.default_wait_time) do
    loop until page.evaluate_script('iframe_loaded')
  end

  expect(preview_iframe_height).to be > initial_height
end

这定义了一个变量iframe_loaded，并在iframe加载完成后将其设置为true。在继续预期之前，规范会等待iframe_loaded成为true。

这可以抽象为辅助方法，以便更广泛地使用。

请upvote @taryn-east对此问题的非常有用的评论！

使用Capybara改变了断言高度

1 个答案: