Rspec: feature spec 功能测试测试JavaScript.

我们要把应用各组件放在一起做集成测试，这样才能保证模型和控制器之间能够良好契合。

在 RSpec 中，这种测试称为功能测试(feature spec)，有时也称为验收测试(acceptance test)或集成测试(integration test)。这种测试的作用是确保软件作为一个整体能按预期使用。

Capybara库 (8000star)，用来定义功能测试的步骤，模拟真实用户的使用过程。 5.1已经自带这个库，因为系统测试依赖它。

Rails5.1 框架增加了系统测试。用的是MiniTest.

作者喜欢使用Rspec开发Rails应用。

在spec/rails_helper.rb中加入 require 'capybara/rspec'

6.3 一个简单的功能测试

bin/rails generate rspec:feature projects

feature test 和controller test 的区别：控制器测试绕过用户界面，直接把参数发给controller actions.

it "user creates a new project" do

user = FactoryGirl.create(:user)

visit root_path

click_link "Sign in"

fill_in "Email", with: user.email

fill_in "Password", with: user.password

click_button "Log in"

expect {

click_link "New Project"

fill_in "Name", with: "Test Project"

fill_in "Description", with: "Trying out Capybara"

click_button "Create Project"

expect(page).to have_content "Project was successfully created"

expect(page).to have_content "Test Project"

expect(page).to have_content "Owner: #{user.name}"

}.to change(user.projects, :count).by(1)

end

用到了expect{}.to , scenario作用等同于it。

6.2 Capybara DSL

除了，click_link, fill_in, with, click_button还有很多方法。

scenario "works with all kinds of HTML elements" do

visit "/fake/page"

click_on "A link or button label"

check "A checkbox label"

uncheck "A checkbox label"

choose "A radio button lable"

select "An option", from: "A select menu"

attach_file "A file upload label", "/some/file/in/my/test/suite.gif"

expect(page).to have_css "h2#subheading"

expect(page).to have_selector "ul li"

expect(page).to have_current_path "/projects/new"

end

选择符还可以限定范围，让 Capybara 在页面的某一部分中(within)查找指定的元素。假设有如下的 HTML:

<div id="node">
<a href="http://nodejs.org">click here!</a>

</div>
<div id="rails">

<a href="http://rubyonrails.org">click here!</a> </div>

我们可以像下面这样指明点击哪个“click here!”链接:

within "#rails" do

click_link "click here~!"

end

此外，还可以使用 Capybara 提供的多个 find 方法找出特定元素及其值。例如:

    language = find_field("Programming language").value
    expect(language).to eq "Ruby"

    find("#fine_print").find("#disclaimer").click
    find_button("Publish").click

以上是我最常使用的 Capybara 方法 ,完整方法见Capybara DSL 文档。

6.5调试feature test

save_and_open_page,保存并打开出错的页面。需要手动打开open tmp/...。

安装gem 'launchy'后可以自动打开保存的HTML文件。

测试完成后，应当在提交版本控制之前，把不需要的save_and_open_page删除。

it "guest adds a project" do

visit projects_path

save_and_open_page

click_link "New Project"

end

6.6测试JavaScript交互

bin/rails g rspec:feature tasks

scenario "user toggles a task", js:true do

user = FactoryGirl.create(:user)

project = FactoryGirl.create(:project,

name: "RSpec tutorial",

owner: user

)

task = project.tasks.create!(name: "Finish RSpec tutorial")

visit root_path

click_link "Sign in"

fill_in "Email", with: user.email

fill_in "Password", with: user.password

click_button "Log in"

click_link "RSpec tutorial"

check "Finish RSpec tutorial"

expect(page).to have_css "label#task_#{task.id}.completed"

expect(task.reload).to be_completed

uncheck "Finish RSpec tutorial"

expect(page).to_not have_css "label#task_#{task.id}.completed"

expect(task.reload).to_not be_completed

end

be_completed 匹配器matcher ：

js:true选项传给scenario，Capybara默认带JS驱动。

然后变更运行浏览器，换为Chrome运行测试

配置：

1. spec/rails_helper.rb中把下面一行注释去掉，

Dir[Rails.root.join('spec/support/**/*.rb')].each { |f| require f }

2. 创建文件 spec/support/capybara.rb，并写：

Capybara.javascript_driver = :selenium_chrome

3. 安装ChromeDriver.需要看

见 ChromeDriver 官方文档。

如果安装了brew，则敲击brew install chromedriver

出现提示：

Error: No available formula with the name "chromedriver"

It was migrated from homebrew/core to caskroom/cask.

You can access it again by running:

brew tap caskroom/cask

And then you can install it by running:

brew cask install chromedriver

安装提示安装，成功。

运行bin/rspec spec/features/tasks_spec.rb，弹出chrome窗口，我们的应用在这个窗口加载，自动点击连接填写表单自动，完成任务，测试成功。为了运行效率只在需要JavaScript的案例上面使用js:true

6.7headless driven

不在浏览器窗口运行测试，只在命令行界面中运行。禁止打开新窗口。

让Selenium在Chrome的*面模式下运行测试：

编辑spec/support/capybara.rb.

Capybara.javascript_driver = :selenium_chrome_headless

6.8 等待JavaScript执行完毕

默认情况下，Capybara等待2了，如果没有按钮出现，放弃，这个时间可以调整。

Capybara.default_max_wait_time = 15

这个设置在rspec/rails_helper.rb内加载的地方就行，可以放在capybara.rb文件中。

缺点：整体速度变慢，

可以使用using_wait_time针对特定案例修改时间。

scenario "runs a really slow process" do

using_wait_time(15) do

# 测试代码

end

6.9小结

功能测试，先在浏览器实操以下模拟需要的步骤，然后在使用Capybara一一实现。

站在客户角度，看有些操作是否可以简化，甚至删除，从而提升用户体验。

Rspec: feature spec 功能测试 测试JavaScript.

相关推荐

Rspec: feature spec 功能测试测试JavaScript.