Reputation: 559
Having this form:
<h3 class="contact-header"><span>Ready to try it</span> GET IN TOUCH</h3>
<%= form_for @contact, url: pages_path, remote: true do |f| %>
<div class= "flex-row">
<div class="form-input-spacing">
<%= f.label :name %>
<%= f.text_field :name, required: true, class: "contact-form-text-area" %>
</div>
<div class="form-input-spacing">
<%= f.label :email %>
<%= f.text_field :email, required: true, class: "contact-form-text-area" %>
</div>
</div>
<div class="area-input">
<%= f.label :message %>
<%= f.text_area :message, rows: 8, cols: 59, required: true, class: "contact-form-text-area",
placeholder: "Send us a message"%>
</div>
<div class="submit-form">
<%= f.submit 'Send Message', class: 'btn btn-primary' %>
</div>
<% end %>
I am trying to test how it would be filled and then sent with Capybara:
scenario "visitor/user sends incomplete contact form" do
visit root_path #form is in root
within(".new_contact") do
# fill_in "#contact_name", with: "Test User"
# fill_in "contact_name", with: "Test User"
find("#contact_name").set("Test User")
end
save_and_open_page
end
I have tried js: true
in the scenario, and both fill_in
and find
but when I do save_and_open_page
nothing is filled.
The reason why I used .new_contact
is because in the Inspector, thats the class that the form takes, the
#contact_nameis the id that the input takes and
contact_nameis the label
for`.
If I use click_button "Send Message"
the button is clicked and a message appears so why is it getting the button but not the input? Thanks!
Upvotes: 0
Views: 141
Reputation: 49870
save_and_open_page
saves the HTML with the element attributes, not the element's properties. It is really only useful for when you want to see modified page structure (the HTML structure has been changed). When you change the content of a field it changes the value property of that element but doesn't actually update the page HTML (value attribute), so when you save the HTML it won't have the value set. If you want to see the page as it was use save_and_open_screenshot
, or just pause your test and look at the browser.
Also fill_in
takes a locator, not CSS, so it would be
fill_in "contact_name", with: "Test User"
from https://rubydoc.info/gems/capybara/Capybara/Node/Actions#fill_in-instance_method - The field can be found via its name, id, test_id attribute, placeholder, or label text.
- not CSS
Upvotes: 1