cucumber asynchronous javascript error

Question

Whenever the "save" button from compositions/index.html.erb is pressed, an ajax request is being completed and a row is appended that shows the Composition.content string in that same page. But my cucumber tests shows an error:

Feature: User creates compositions

  Scenario: User creates a composition                                                   # features/composition.feature:2
    Given I go to the compositions page                                                  # features/step_definitions/composition_steps.rb:1
    And I fill in "Content" with "My Globe number: +63-916-475-4261"                     # features/step_definitions/composition_steps.rb:5
    When I press "Save"                                                                  # features/step_definitions/composition_steps.rb:9
    Then I should see "My Globe number: +63-916-475-4261" added in the compositions page # features/step_definitions/composition_steps.rb:18
      Unable to find xpath "/html" (Capybara::ElementNotFound)
      (eval):2:in `text'
      ./features/step_definitions/composition_steps.rb:22:in `/^I should see "(.*?)" added in the compositions page$/'
      features/composition.feature:6:in `Then I should see "My Globe number: +63-916-475-4261" added in the compositions page'

Failing Scenarios:
cucumber features/composition.feature:2 # Scenario: User creates a composition

1 scenario (1 failed)
4 steps (1 failed, 3 passed)
0m0.904s

Is the error caused because the added row isn't yet rendered at that point? Please give me some answers. Thanks!

Below are the involved files.

composition.feature

Feature: User creates compositions
  Scenario: User creates a composition
    Given I go to the compositions page
    And I fill in "Content" with "My Globe number: +63-916-475-4261"
    When I press "Save"
    Then I should see "My Globe number: +63-916-475-4261" added in the compositions page

composition_step.rb

Given /^I go to the compositions page$/ do
  visit compositions_path
end

Given /^I fill in "(.*?)" with "(.*?)"$/ do |arg1, arg2|
  fill_in(arg1, :with => arg2)
end

When /^I press "(.*?)"$/ do |arg1|
  click_button 'Save'
end

Then /^I should see "(.*?)" added in the compositions page$/ do |arg1|
  page.should have_content(arg1)
end

compositions/index.html.erb

<%= form_for @new_composition, remote: true do |f| %>
  <%= f.label :content %>
  <%= f.text_field :content %>
  <%= f.submit 'Save', id: "composition_submit" %>
<% end %>

<h1>Listing compositions</h1>

<table id="compositions_table">
<% @compositions.each do |composition| %>
  <tr>
    <td><%= composition.content %></td>
  </tr>
<% end %>
</table>

compositions_controller.rb

class CompositionsController < ApplicationController
  def index
    @new_composition = Composition.new
    @compositions = Composition.all

    respond_to do |format|
      format.html # index.html.erb
      format.json { render json: @compositions }
    end
  end

  def create
    @composition = Composition.new(params[:composition])

    respond_to do |format|
      if @composition.save
        format.js
        format.json { render json: @composition, status: :created, location: @composition }
      else
        format.js
        format.json { render json: @composition.errors, status: :unprocessable_entity }
      end
    end
  end
end

create.js.erb

$('#compositions_table').prepend("<%= j(render('compositions/composition', composition: @composition)) %>")

Answer 1

try this in composition_step.rb

When /^(?:|I )fill in "([^\"]*)" with "([^\"]*)"$/ do |field, value|
 fill_in(field, :with => value)
end

When /^(?:|I )press "([^\"]*)"$/ do |button|
 click_button(button)
end

Then /^I should see "([^"]*)" within "([^"]*)"$/ do |text, selector|
  find(:xpath, "//#{selector}[contains(text(),'#{text}')]").should_not(be_nil, "Could  not find the text '#{text}' within the selector '#{selector}'")
end

Then /^I should see "(.*?)" added in the compositions page$/ do |text|
  page.should have_content(text)
end

Scenario like this

Scenario: User creates a composition
    Given I go to the compositions page
    When I fill in "Content" with "My Globe number: +63-916-475-4261"
    And I press "Save"
    Then I should see "My Globe number: +63-916-475-4261" added in the compositions page