在带有 Capybara 的 Rails 5.2 中，我的资产似乎没有被加载

Question

我正在尝试使用 RSpec Capybara 和 selenium-chrome 驱动程序在 Rails 上运行集成测试。

我也在使用capybara-angular gem。

我对到底发生了什么有点困惑，因为当我睡觉时我看不到我的脚本我的 rspec 测试检查了 chrome 调试器中的源选项卡，它似乎没有加载我的资产，尽管它似乎 ng-if 语句在页面被隐藏时正在工作。

所以我不太确定发生了什么。该页面在开发中按预期工作，但 $scope 上的变量未在测试中设置。

这是我在“system.rb”中的设置

   RSpec.configure do |config|
  config.before(:each, type: :system) do
    driven_by :rack_test
  end
  config.before(:each, type: :system, js: true) do
    driven_by :selenium_chrome
  end
end

require "capybara-screenshot/rspec"
include Capybara::Angular::DSL

这是我正在运行的测试：

it "shows changes to the budget when the budget is changed", :js do
    visit(root_path)
    sleep 0.5
    fill_in "inputEmail", with: "test@tester.com"
    fill_in "password", with: "test"
    click_on("Log In")
    sleep 0.25
    click_on("Budgeting")

    sleep 10
     expect(page).to  have_selector("#current_project_name", text: "Project A")
     expect(page).to have_selector("#budgetInput1")

    fill_in "#budgetInput1", with: "100"
    # Fail on next line with 'expected to find visible css "#budgetInput1" but there were no matches'
    page.should have_selector("#budgetInput1", text: "100") # <--test fails with
  end

据我所知，找不到它的原因是该元素出现在带有ng-if="showBudget" 的div 中。 $scope.showBudget=true 在控制器中设置，但控制器似乎没有加载，{{showBudget==unknown}} 返回 true，这表明 AngularJS 正在加载，但页面清单加载的脚本没有。

如何解决这个问题？

Answer 1

事实证明问题与我想象的有些不同。当我查看源选项卡时，在开发过程中，我使用了大量文件，包括清单中列出的所有内容。在 capybara 测试中，包括 jquery 和 angular 在内的所有这些文件都被连接到一个文件中。 jquery 在顶部，在底部，大约第 40000 行是我的角度控制器文件。问题是它创建的文件不是基于我的 javascript 资产的最新版本。

rake assets:clean
rake assets:precompile

这在开发中通常不需要，我在 js 文件中所做的更改会立即被拾取，但我想在使用 selenium chrome 运行 Capybara 测试时需要它。

Answer 2

您似乎没有使用正确的期望。由于您可以在 ID 为 budgetInput1 的元素上调用 fill_in ，因此期望（不知道为什么要混合 expect 和 should 语法）与 text 选项将不起作用。你可能想要的是

expect(page).to have_field('budgetInput1', with: '100')

如果您希望 fill_in 触发页面上的更新，将 id 为“budgetInput1”的输入元素替换为不同的元素，那么您可能需要发送输入、选项卡或单击在初始元素之外触发更改。

另一方面，我不确定为什么您的测试中有 sleep ——fill_in 将等待匹配元素存在，所以在调用 visit 后真的不需要休眠半秒——对于 10 秒的睡眠（您的应用程序真的需要 10 秒来响应吗？？？）您可以只使用 expect(page).to have_selector("#current_project_name", text: "Project A", wait: 10) 上的等待选项，以便在元素存在时立即继续测试，而不是等待所有 10 秒，如果没必要。