Capybara::ElementNotFound: Unable to find field "Key name" - ruby-on-rails

I've read the similar questions to this but they don't solve my issue. I'm new with js testing so I think I might be doing something wrong.
The form produces this HTML
<form class="new_category_item_key" id="new_category_item_key" action="/guides/dungeon-boss/categories?category_id=heroes" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="b7wiF07zYh/Nl727M3y0Uk1TbroMJFuGqTK6fYNlNted/5G4Wmz4BZLb7IazzyP5md/wWRb1D28ePhrzt2uMSA==" />
<label for="category_item_key_name">Key name</label>
<input type="text" name="category_item_key[name]" id="category_item_key_name" />
<select name="category_item_key[key_type]" id="category_item_key_key_type"><option value="1">Value</option>
<option value="2">Text</option>
<option value="3">Image</option></select>
<input type="submit" name="commit" value="Add New Key" />
</form>
and I have the following integration test on the form
setup do
#user = users(:michael)
#user1 = users(:archer)
#guide = Guide.find(1)
#mod_relationship = game_mods_relationships(:mod1)
#category = Category.find(1)
Capybara.current_driver = Capybara.javascript_driver # :selenium by default
end
test "adding keys mod success then fail" do
log_in_as(#user)
get edit_guide_category_path(#guide, #category)
assert_template 'categories/edit'
assert_difference 'CategoryItemKey.count', 1 do
fill_in 'Key name', with: "diablo"
click_button "commit"
end
end
when I run the test I get the following error
Capybara::ElementNotFound: Capybara::ElementNotFound: Unable to find field "Key name"
Looking at the HTML I can see the field is there. If I try using the inputs id it still fails, if I remove the fill in line then it says it cant find the button to click which is also there. I assume its getting the right page because get edit_guide_category_path(#guide, #category) works for the other tests (but they are non js tests and don't use selenium).
Its probably something simple but I cant get it.

You're mixing up two different libraries -- You can't use get with Capybara, you use visit(url) to go to the page. You also shouldn't normally be asserting templates in a feature test, thats for lower level tests.

Related

Integration test with Rails, Capybara with React Component

I've created a little scaffold for create posts with Rails, but instead use the standard form with erb I've created a simple React Component (I use the gem react-rails and browserify-rails).
You can find a sample repo with all the source code here!
The React component looks like this:
class NewPostForm extends React.Component {
constructor(props) {
super(props)
this.state = {}
}
render() {
return(
<form action="/posts" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓"/>
<input type="hidden" name="authenticity_token" value={this.props.authenticityToken}/>
<div className="field">
<label for="post_title">Title</label>
<input type="text" name="post[title]" id="post_title" onChange={(e) => this.setState({title: e.target.value})} />
</div>
<div className="field">
<label for="post_body">Body</label>
<textarea name="post[body]" id="post_body" onChange={(e) => this.setState({body: e.target.value})}></textarea>
</div>
{ this.state.title &&
<div class="actions">
<input type="submit" name="commit" value="Create Post" data-disable-with="Create Post"/>
</div>
}
</form>
)
}
}
Note that the submit button is added to the DOM only if the title input field is filled.
The file app/views/posts/_form.html.erb is this:
<%= react_component 'NewPostForm', {authenticityToken: form_authenticity_token.to_s}, {prerender: true} %>
Now I've created this integration test that use Capybara:
require 'test_helper'
class PostCreationTest < ActionDispatch::IntegrationTest
test "post creation" do
visit new_post_path
fill_in 'post[title]', with: 'Big News'
fill_in 'post[body]', with: 'Superman is dead!'
click_button 'Create Post' # <=== DO NOT FIND THIS BUTTON CAUSE IS ADDED WITH REACT
assert page.has_content?('Post was successfully created.')
end
end
The test fail with this error:
Run options: --seed 21811
# Running:
E
Error:
PostCreationTest#test_post_creation:
Capybara::ElementNotFound: Unable to find visible button "Create Post"
test/integration/post_creation_test.rb:9:in `block in <class:PostCreationTest>'
bin/rails test test/integration/post_creation_test.rb:5
In test_helper.rb I've configured Capybara to use poltergeist driver.
Capybara.register_driver :poltergeist do |app|
Capybara::Poltergeist::Driver.new(app, {
js_errors: false,
phantomjs_options: ['--ignore-ssl-errors=yes', '--ssl-protocol=any'],
debug: false,
timeout: 500,
phantomjs: File.absolute_path(Phantomjs.path)
})
end
Capybara.javascript_driver = :poltergeist
Capybara.server_port = 3001
If I display always the submit buttom (removing { this.state.title &&) in the react component the test pass successfully.
So, there is a way to make this test works with this setup and React components?
You have a couple of issues here. First is that you're not actually running your test with a JS capable driver. You have configured poltergeist for use with Capybara, but you've never told Capybara to use if for the specific test you want it used by setting Capybara.current_driver - see https://github.com/teamcapybara/capybara#using-capybara-with-minitest
Adding Capybara.current_driver = Capybara.javascript_driver for the failing test brings up the next issue you have.
PhantomJS (used by Poltergeist) doesn't currently support ES5.1+ JS or modern CSS so you need to polyfill and transpile back to ES5 levels if you want to use it. This becomes immediately clear if you stop hiding the JS errors in your Poltergeist config (js_errors: true). The initial error because of this is that your code uses the Map class which wasn't added until ES6/2015 so it's not supported by Poltergeist (without polyfill).
As a beginner with Capybara JS testing you're probably better off starting your JS requiring tests using selenium (so you can see exactly what's happening and have support for modern JS/CSS), and then when the tests are working possibly staying with selenium and headless chrome or headless FF.
Capybara.javascript_driver = :selenium # or :selenium_chrome

Unable to find field “q” (Capybara::ElementNotFound) via fill_in

Trying to get the "what" form (aka job title), from indeed.com
Error when trying to run the program:
/var/lib/gems/2.3.0/gems/capybara-2.11.0/lib/capybara/node/finders.rb:44:in `block in find': Unable to find field "q" (Capybara::ElementNotFound)
Inspecting element via firefox from indeed.com yields: name="q"
<span class="inwrap">
<input class="input_text" maxlength="512" size="31" aria-labelledby="what_label_top hidden_colon what_label_bot" name="q" autocomplete="off" id="what">
</span>
<div style="width:250px"><!-- --></div>
Which matches the code in the scraper:
def perform_search
# For indeed
fill_in 'q', :with => #skillset
fill_in 'l', :with => #region
find('#fj').click
sleep(1)
end
The entire code can be found at:
https://github.com/jasnow/job-hunter/blob/master/scraper.rb
Now the problem here is the inability to locate name="q" Are there any other ways I could link to that form on indeed.com so I could initiate webscraping? I'm talking xpath or css perhaps.
Your code only allows the URL http://www.indeed.com , but that URL redirects to https://www.indeed.com and also hits http://indeed.com. Therefore your page load is being blocked. Change to config.allow_url("indeed.com") and it should be able to find the input.

j_spring_security_check redirect

I upgraded my application from 2.2.3 to 2.4.3. Now when I click submit on the login page, I see that the POST request to j_spring_security_check has status code 302.
Is there something I need to do after upgrading? I've tried running grails clean-all but that did not help.
I'm using this version: compile ':spring-security-core:2.0-RC3'
settings in config.groovy
grails.plugins.springsecurity.userLookup.userDomainClassName = 'com.aerstone.scanner.security.User'
grails.plugins.springsecurity.userLookup.authorityJoinClassName = 'com.aerstone.scanner.security.UserRole'
grails.plugins.springsecurity.authority.className = 'com.aerstone.scanner.security.Role'
GSP
<form action="${postUrl}" method="POST" id="loginForm" autocomplete="off">
<input type='text' name='j_username' id='username' placeholder="Username"/>
<input type='password' name='j_password' id='password' placeholder="Password"/>
<input type="submit" class="btn" value="Sign in" id="submit"/>
</form>
I had the same issue after an upgrade.
I changed the action of the login form by:
<form action='${ request.contextPath }/j_spring_security_check' method="POST">
Hope that helps
please note that the name had change in the config to be:
grails.plugin.springsecurity....
Notice 'plugin' vs 'plugins'. I've passed this problem but I'm getting invalid credentials all the time.

Capybara finds textfield but does not fill it

I have this textfield:
<p>
<label for="user_email">Email</label>
<input id="user_email" name="user[email]" type="text" value="user4#example.com" />
</p>
And in my test I'm trying to fill it like this:
fill_in "Email", with: "bla"
save_and_open_page
Capybara seems to find it, yet does not fill it... I also tried this:
fill_in "user_email", with: "bla"
and:
fill_in "user[email]", with: "bla"
But didn't work either, this is weird since I have 46 examples running and I'm only getting trouble with this particular textfield and I can't see what's wrong with it.
Am I missing something obvious? Any help would be appreciated.

Rails Capybara not seeing fields

I feel like I'm going insane here. Doing a routine capybara test of my Post model. Specifically, making sure the new page redirects to the newly created post after a valid submission. So in my spec/requests folder, I've got this:
describe "Valid post submission --" do
it "should log in a user and redirect to new post" do
# Sign in works find, so I won't reproduce it
# Make a blogpost
Post.destroy_all
fill_in :name_here, with: "Post Name Here"
fill_in :content_here, with: "This is the content of a really short post."
screenshot_and_open_image
click_on "Post It"
screenshot_and_open_image
puts current_path
page.should have_selector 'h2', text: "prohibited this post"
page.should have_selector 'h1', text: "Post Name Here"
page.should have_selector '.alert', text: "Post was successfully created."
page.should have_selector 'title', text: full_title('Post Name Here')
end
The screenshots and puts are there to clarify what's going on. There are basically two different cases. In
I just leave the fields be and test for the default IDs ("post_name"
and "post_content"); obviously the above test is for case two:
I change the field ids to "name_here" and "content_here" to test if
the label names or anything else is interfering. That's the one the spec of which is
above.
In case 2 the post is getting rejected because Capybara can't find either field.
In case 1, only the content would be empty, but the name field would be filled with the content.
The precise error in case 1 is:
2) Posts Invalid post - should refresh with error if content empty
Screenshot: /Users/myusername/rails/appname/tmp/capybara/screenshot_2013-03-14-22-37-36.634.png
Failure/Error: fill_in :post_name, with: "Post Name Here"
Capybara::ElementNotFound:
cannot fill in, no text field, text area or password field with id, name, or label 'post_name' found
# (eval):2:in `fill_in'
# ./spec/requests/posts_spec.rb:43:in `block (3 levels) in <top (required)>'
Case 2 doesn't throw an error about not finding the appropriate content, I believe because the label has that id as well.
This is ridiculous, because I took a snapshot of the HTML durin the test, just before it errors. Here's case 2 -- both cases look 90% the same here, apart from that ID difference:
<form accept-charset="UTF-8" action="/posts" class="new_post" id="new_post" method="post">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"></div>
<div class="field">
<label for="post_name">Name</label>
<br><input id="name_here" name="post[name]" size="30" type="text">
</div>
<div class="field text-area">
<label for="post_content">Content</label>
<br><textarea cols="50" id="content_here" name="post[content]" rows="20"></textarea>
</div>
<div class="actions btn-group">
<input class="btn" name="commit" type="submit" value="Post It">
</div>
</form>
Note the clear existence of the post_content field. In cases where both fail (Case 1), there are both content_here and name_here fields. So the fields are there. And capybara is generally working (this sort of thing works find in other parts of my app). And the problem isn't a conflict with the label name, because putting a different id on the input fields doesn't help capybara find them.
By the way, this all works perfectly in reality.
Any idea at all what's going on here? I'm super frustrated/clueless.
UPDATE -- Following user2172816's advice, I changed my HAML so the HTML looks like this:
<form accept-charset="UTF-8" action="/posts" class="new_post" id="new_post" method="post">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"></div>
<div class="field">
<label for="post_name">Name</label>
<br><input id="name" name="post[name]" size="30" type="text">
</div>
<div class="field text-area">
<label for="post_content">Content</label>
<br><textarea cols="50" id="content" name="post[content]" rows="20"></textarea>
</div>
<div class="actions btn-group">
<input class="btn" name="commit" type="submit" value="Post It">
</div>
</form>
The test now looks like this:
# Make a blogpost
Post.destroy_all
fill_in "Name", with: "Post Name Here"
fill_in "Content", with: "This is the content of a really short post."
page.should have_selector 'h2', text: "prohibited this post"
page.should have_selector 'h1', text: "Post Name Here"
page.should have_selector '.alert', text: "Post was successfully created."
page.should have_selector 'title', text: full_title('Post Name Here')
But it's still erroring (in new parts of the same spec, too!):
1) Posts Invalid post - should refresh with error if content empty
Screenshot: /Users/username/rails/appname/tmp/capybara/screenshot_2013-03-14-23-54-38.072.png
Failure/Error: fill_in :name, with: "Post Name Here"
Capybara::ElementNotFound:
cannot fill in, no text field, text area or password field with id, name, or label 'name' found
# (eval):2:in `fill_in'
# ./spec/requests/posts_spec.rb:43:in `block (3 levels) in <top (required)>'
2) Posts Invalid post - should refresh with error if name empty
Screenshot: /Users/username/rails/appname/tmp/capybara/screenshot_2013-03-14-23-54-38.274.png
Failure/Error: fill_in :name, with: ""
Capybara::ElementNotFound:
cannot fill in, no text field, text area or password field with id, name, or label 'name' found
# (eval):2:in `fill_in'
# ./spec/requests/posts_spec.rb:33:in `block (3 levels) in <top (required)>'
3) Posts Valid post submission -- should log in a user and redirect to new post
Screenshot: /Users/username/rails/appname/tmp/capybara/screenshot_2013-03-14-23-54-38.459.png
Failure/Error: fill_in :name, with: "Post Name Here"
Capybara::ElementNotFound:
cannot fill in, no text field, text area or password field with id, name, or label 'name' found
# (eval):2:in `fill_in'
# ./spec/requests/posts_spec.rb:67:in `block (3 levels) in <top (required)>'
The attribute "for" of label should be the "id" of the input element, i.e.
<label for="name_here">Name</label>
<br><input id="name_here" name="post[name]" size="30" type="text">
And in the spec you should call:
fill_in 'Name', with: "Post Name Here"

Resources