Capybara Element not found error even though the element exists

Question

I am writing a selenium test with capybara and trying to fill out a pop-up box. I am not able to fill in the name of the element using fill_in method in capybara. This works perfectly fine with other forms in other pages but not on this one.

Here is my test code:

describe "Jobs" do
  before do
    login(users(:admin))
  end

  it "creates a job on a workspace" do
    visit('#/workspaces')
    click_button "Create Workspace"
    within_modal do
      fill_in 'name', :with => "testing-jobs"
      click_button "Create Workspace"
    end
    click_link "Dismiss the workspace quick start guide"
    page.should have_content('All Activity')
    Workspace.find_by_name("testing-jobs").should_not be_nil

    click_link "Jobs"
    click_button "Create"
    within('#facebox') do
      find(".name").click
      fill_in '. name', :with => "real job"
      choose "onDemand"
      click_button "Create"
    end
    page.should have_content "real job"
  end
end

The first fill_in with respect to workspace works really fine but when I get to the jobs it just screws up.

Here is the actual dev code from firebug:

<div id="facebox" class="dialog_facebox" style="top: 30px; left: 424.5px;">
<div class="popup" style="max-height: 626px;">
<div class="content">
<div class="configure_job_dialog dialog">
<div class="dialog_header">
<div class="errors"></div>
<div class="dialog_content" data-template="configure_job_dialog">
<form action="#">
<label class="required">Name</label>
<input class="name" type="text" value="">

I am using the name class in the fill_in method but capybara is not catching it. I tried to debug a little more to see why my workspace gets created but not the job. The workspace code is as follows.

<input type="text" maxlength="256" tabindex="1" placeholder="Name this workspace" name="name">

Any help is highly appreciated.

Answer 1

Problem

Based on the html given, you will not be able to use the fill_in method. The reasons are that:

• The fill_in method locates elements based on their id attribute, name attribute or label text. It does not support locating elements by a CSS-selector, which .name is.
• The element does not have an id or name attribute and therefore cannot be used by fill_in. As well, the label is not directly associated with the input via for and id attributes. I believe fill_in only checks explicit labels (rather than implicit labels).

Note that the fill_in works for the workspace because that input has a name attribute specified.

Solution

The ideal solution would be to update the input to have an id attribute, name attribute or explicit label. However, if that is not possible or if you need to use the CSS-selector, you can find the element and then set the value:

find('.name').set("real job")