我如何在Capybara中测试页面是否未重新加载(JavaScript onClick拦截有效)
How can I test in Capybara that a page has *not* reloaded (JavaScript onClick intercept has worked)?
我用的是水豚、黄瓜和波尔特盖斯特。我正在测试一个附加在表单提交按钮上的JavaScript函数,该函数旨在捕获提交事件并阻止它(在后台执行AJAX请求)。无论有没有AJAX,页面最终看起来都是一样的,但AJAX方法要快得多,不会中断浏览体验等。
我能做些什么来测试表单确实没有提交,并且这些更改是动态AJAX调用而不是重新加载的结果?
@jules答案的修改版本:
describe "My page", :js do
it "reloads when it should" do
visit "/"
expect_page_to_reload do
click_link "Reload me"
end
end
def expect_page_to_reload
page.evaluate_script "$(document.body).addClass('not-reloaded')"
yield
expect(page).not_to have_selector("body.not-reloaded")
end
end
编辑2017-01-19:
我发现了我的这个旧答案,奇怪的是,它似乎没有回答实际问题,而是相反(检查页面是否已重载)。这是我们目前在应用程序中所做的,以检查页面是否而重新加载:
def expect_page_not_to_reload
page.evaluate_script %{$(document.body).addClass("not-reloaded")}
expect(page).to have_selector("body.not-reloaded")
yield
sleep 0.5 # Give it a chance to reload before we check.
expect(page).to have_selector("body.not-reloaded")
end
这两个答案都依赖于jQuery来添加类。
我遇到了同样的问题,并提出了一个解决方案,可能不是最好的解决方案,但它很有效:)
#support/reload.rb
def init_reload_check
page.evaluate_script "window.not_reloaded = 'not reloaded';"
end
def not_reloaded
page.evaluate_script("window.not_reloaded") == "not reloaded"
end
#Ajax Test
it "should not reload the page", js: true do
init_reload_check
click_link "Ajax Link"
expect(not_reloaded).to be_truthy
end
这是我对Henrik N的回答。不依赖于jQuery或他正在使用的任何断言库。
def assert_page_reloads(message = "page should reload")
page.evaluate_script "document.body.classList.add('not-reloaded')"
yield
if has_selector? "body.not-reloaded"
assert false, message
end
end
def assert_page_does_not_reload(message = "page should not reload")
page.evaluate_script "document.body.classList.add('not-reloaded')"
yield
unless has_selector? "body.not-reloaded"
assert false, message
end
page.evaluate_script "document.body.classList.remove('not-reloaded')"
end
Capybara适用于用户级功能测试。没有一种简单的方法来测试实现细节,比如表单是使用AJAX还是传统的表单提交。它鼓励您根据最终用户体验编写测试。
你可以做几件事:
-
Capybara支持查找器和断言的等待时间。有几种方法可以设置它,使用
Capybara.default_wait_time
、Capybara.using_wait_time
或将wait
选项传递给断言方法。如果您设置了较低的等待时间,您可以确保单击提交按钮的结果很快返回。 -
研究JavaScript单元和集成测试框架,如Jasmine。这可以用来测试设置事件绑定和AJAX调用的JavaScript代码。您可以使用间谍来确保在单击按钮时进行预期的AJAX调用。
feature "User creates comment", do
context "with JavaScript enabled", js: true do
scenario "creates comment via AJAX" do
initial_page_id = assign_page_id
# Perform AJAX action
...
page_reloaded = current_page_id != initial_page_id
expect(page_reloaded).to eq(false)
end
def assign_page_id
page_id = SecureRandom.hex
page.evaluate_script "window.pageIdForTesting = '#{page_id}'"
end
def current_page_id
page.evaluate_script("window.pageIdForTesting")
end
end
context "without JavaScript" do
# Can be used if progressively enhancing
...
end
end
相关文章:
- 在新的浏览器选项卡上加载新的aspx页面后调用JavaScript函数
- 更改css链接并等待加载新的css
- 如何在Ajax加载新内容时停止JavaScript执行
- 当在ng视图中加载新路由时,Tabbing(tabindex)针对错误的元素
- 如何使用输入数据加载新的extjs图表
- JQuery Masonry.Ajax图标和“;加载新项目”;绳子放错地方了
- 通过javascript在同一个打开的选项卡中重新加载新的网页内容
- 当用户到达页面右侧时加载新内容
- 数据表 AJAX 筛选器重新加载数据
- 超链接单击以加载新页面并执行JavaScript
- 单击时加载新的 SVG
- 在RadWindow中加载新页面,然后从加载的窗体中关闭窗口
- ajax在页面刷新之前不会加载新的sql结果
- 谷歌地图API-在从ajax页面加载新数据之前清除标记、多段线
- 使用Ajax加载页面,并在必要时加载新脚本
- 加载新页面时的过渡效果,AJAX
- Ajax没有正确加载新页面
- 正在加载新的Javascript,但正在调用旧的Javascript.MVC
- 咕噜咕噜的手表:实时加载重新加载落后 1 步....
- 我怎么能有一个花哨的盒子一样的弹出体加载,但与cookie不连续加载重新加载