Rails页面JS可在实际的浏览器/手动测试中使用，但不能在PhantomJS&中使用硒规格 [英] Rails page JS works in real browser / manual testing but not in PhantomJS & Selenium specs

问题描述

在我的一个Rails项目中，我正在一个接口上通过AJAX完全对资源(Commands)进行CRUD操作(即不需要重新加载页面).因此，有一个将命令添加到列表的链接，用户可以单击任何命令以编辑其数据，然后单击保存"以通过AJAX进行更新，依此类推.最后的操作(单击更新"按钮)给我带来麻烦:它在我尝试过的任何浏览器中都可以正常运行，但是当我按照Capybara规范中的完全相同的步骤进行操作(使用PhantomJS或Poltergeist驱动程序)时，这些规范立即失效那一步.

In one of my Rails projects, I'm working on an interface to do CRUD operations on a resource (Commands) fully via AJAX (ie. no page reload needed). So there's a link to add a Command to the list, the user can click on any Command to edit its data then click Save to update via AJAX, and so forth. This last operation (clicking the Update button) is causing me trouble: it works perfectly in any browser I've tried, but when I follow the exact same steps in my Capybara specs (using either PhantomJS or Poltergeist driver) the specs fail right around that step.

我要发帖询问指导:如何继续前进.在这种情况下，我可以摆脱不完整的测试范围，但是让我担心PhantomJS不能正确执行所有页面的javascript. (由于不相关的原因，此应用严重依赖PhantomJS，因此对我来说，了解其JS执行的忠诚度非常重要.)

I'm posting to ask for guidance re: how to move forward with this. I can get away with incomplete test coverage in this case, but it worries me to think that PhantomJS isn't executing all page javascript properly. (This app relies heavily on PhantomJS for unrelated reasons, so it's important for me to know how faithful its JS execution is.)

有人知道PhantomJS不太忠实地执行Jquery AJAXy JS的情况吗?如果是这样，该怎么办?

Does anyone know of any cases where PhantomJS executes Jquery AJAXy JS less-than-faithfully, and if so, what can be done about it?

先谢谢了.具体内容和代码段如下.任何想法都表示赞赏.

Thanks in advance. Specifics and code snippets are below. Any ideas are appreciated.

这是香草Jquery.没什么复杂的.

This is vanilla Jquery. Nothing too complicated.

// User clicks "Save" in a URL edit form to update that URL
$('.command .update_url').click(function(){
  var command = $(this).parents('.command');
  var command_path = command.attr('command_path');
  var new_url = command.find('.url_field').val();

  $.ajax({
    type: 'PATCH',
    url: command_path,
    data: { command: { url: new_url }}, // <-- (Defines required param)
    success: function(data){
      if (data.success) {
        // ... Close edit window & display cues that save is complete
      } else {
        alert("Unable to save changes. Please refresh the page.");
      }
    }
  })
});

规范

以下是使用Capybara，FactoryGirl和其他功能的普通Rspec集成测试.

The spec

The following is a plain Rspec integration test that uses Capybara, FactoryGirl, and not much else.

@user = create :user
@site = create :site, user: @user
@command = create :command, site: @site, url: "http://example.com/123"

stub_login(@user) # a helper I wrote that stubs Devise #current_user etc.
visit site_path(@site)
first('.command .edit_link').click

within '.editing' do
  fill_in 'url', with: "http://example.com/456"
  click_button "Save" # <-- (This triggers the above listener)
  # <-- (PhantomJS: Controller hits an error here) 
end

# <-- (The spec fails before this point)
page.should have_css '.command .edit_link', text: "http://example.com/456"
page.should_not have_css '.url_field'
@command.reload.url.should eq  "http://example.com/456"

预期行为

同样，这在真实的实时浏览器中完美运行.应该这样做，因为上述类型的ajax非常普遍并且并不特别复杂.

The expected behavior

Again, this works perfectly in a real live browser. Which it should, because the above sort of ajax is extremely common and not particularly complicated.

单击按钮时，将触发上述JS侦听器.侦听器收集几个变量，然后向Rails应用发送请求，以使用提供的URL更新该Command记录.

When the button is clicked, the above JS listener is triggered. The listener gathers a couple variables, then sends a request to the Rails app to update that Command record with the URL provided.

当我打开浏览器并遵循上面的Capybara规范中定义的完全相同的步骤时，控制器将按预期看到以下参数:

When I open up my browser and follow the exact same steps as defined in the above Capybara spec, the controller sees the following parameters as expected:

Parameters: {
  "command" => {"url"=>"http://example.com/456"},
  "action" => "update",
  "controller" => "commands",
  "id" => "578"}

但是当我执行Capybara规范时，命令"参数不存在，这会触发完全相同的JS代码.这就是问题的症结所在.见下文.

But the "command" param is absent when I execute the Capybara spec, which triggers the exact same JS code. That's the crux of the problem; see below.

当我使用 Poltergeist (PhantomJS)驱动程序运行以上示例时，CommandsController引发错误，因为不存在必需的参数(:command).但是该参数应包含在PATCH请求中；请参阅上面的JS中的定义必需的参数".相反，Rails控制器接收以下参数:

When I run the above example using the Poltergeist (PhantomJS) driver, the CommandsController raises an error because a required parameter (:command) wasn't present. But that parameter should be included in the PATCH request; see "Defines required param" in the JS above. Instead, the Rails controller receives the following params:

Parameters: {
  "action" => "update",
  "controller" => "commands",
  "id" => "934"}

...可以理解地触发ParameterMissing错误:

...which understandably triggers a ParameterMissing error:

1) Command pages user updates command URL
   Failure/Error: Unable to find matching line from backtrace
   ActionController::ParameterMissing:
     param not found: command
   # /Users/topher/.rvm/gems/ruby-2.0.0-p598/gems/actionpack-4.0.3/lib/action_controller/metal/strong_parameters.rb:173:in `require'
   # ./app/controllers/commands_controller.rb:46:in `command_params'
   # ./app/controllers/commands_controller.rb:14:in `update'

请注意，当我在浏览器中手动运行完全相同的步骤时，控制器会收到其他参数(请参见上文)，因此不会发生错误.

Note that, when I run the exact same steps manually in a browser, the controller receives additional parameters (see above) and therefore no error occurs.

出于好奇，我安装了selenium-webdriver并尝试使用该驱动程序运行规范.当我在Selenium下运行该规范时，它甚至更早地遇到了一个错误，它们似乎无关紧要，但同样令人困惑.我没有深入研究这一内容，因为我对Selenium不太感兴趣，而且错误使我的头部受伤.如果需要，将发布更多信息.

Out of curiosity I installed selenium-webdriver and tried running the spec using that driver. When I ran the spec under Selenium, it hit an error even sooner, seemingly unrelated but equally confusing. I haven't dug into this one because I don't have much interest in Selenium, and the error makes my head hurt. Will post more if requested.

任何关于这里发生的事情的想法将不胜感激.如上所述，我可以跳过此AJAX更新功能的测试范围；我对我的Jquery很有信心(或者至少我是是 ...)，如果我不知道这一点，那将不会成为一个破坏交易的人.但是，我要做来了解一下PhantomJS是否可以被这样的Javascript信任；如果不能，那真的会降低我对项目的信心.

Any ideas as to what's happening here would be greatly appreciated. As I said above, I can skip test coverage on this AJAX update feature; I'm very confident in my Jquery (or at least I was...) and it won't be a dealbreaker if I can't figure this out. But I do care to get a feel for whether or not PhantomJS can be trusted with Javascript like this; if it can't, that would really reduce my confidence in the project.

提前谢谢！

推荐答案

更新:如@Artjom B所建议，我已升级到PhantomJS 2.0.0.看来，这部分解决了问题:现在运行规范会正确地将AJAX请求发送到服务器，但似乎成功功能仍然无法执行(即，页面HTML不变).因此，至少这使我可以对这些功能进行80％的测试……足够好，可以暂时搁置.

Update: as @Artjom B suggested, I upgraded to PhantomJS 2.0.0. It appears that this partially fixed the problem: running the specs now properly sends the AJAX request to the server, but it appears that the success function still doesn't execute (ie. the page HTML doesn't change). So at least this gets me to the point where I can do 80% tests of these features... good enough to set aside for now.

这篇关于Rails页面JS可在实际的浏览器/手动测试中使用，但不能在PhantomJS&中使用硒规格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！