Can't select checkbox using id in Capybara - ruby-on-rails

There is the following RSpec code:
describe 'with valid information' do
it 'should create a new restaurant' do
visit new_restaurant_path
fill_in I18n.translate(:name), with: "Some restaurant"
fill_in I18n.translate(:address), with: "Some address of the restaurant"
fill_in I18n.translate(:average_check), with: 100
check('place_restaurant_food_types_1')
expect { click_button :submit }.to change(Restaurant, :count).by(1)
end
end
But I always get error "cannot check field, no checkbox with id, name, or label 'place_restaurant_food_types_1' found". I tried to replace id for name, but it was still the same. I'm absolutely sure that there is the item with needed id! (I copied it from the page source). How can I fix it?
HTML:
<form accept-charset="UTF-8" action="/restaurants" class="new_place_restaurant" id="new_place_restaurant" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="7yQCirO7MLO6e+Nj46eCSNUjQWd67MJVDIHmUV6/5Y0=" /></div>
<div class="row">
<label for="place_restaurant_name">Название</label>
<input id="place_restaurant_name" name="place_restaurant[name]" size="30" type="text" />
</div>
<div class="row">
<label for="place_restaurant_address">Адрес</label>
<input id="place_restaurant_address" name="place_restaurant[address]" size="30" type="text" />
</div>
<div class="row">
<label for="place_restaurant_average_check">Средний чек</label>
<input id="place_restaurant_average_check" name="place_restaurant[average_check]" size="30" type="text" />
</div>
<div class="row">
<input id="place_restaurant_food_types_1" name="place_restaurant[food_types][1]" type="checkbox" value="1" />
<label for="place_restaurant_food_types_1">Восточная кухня</label>
</div>
<div class="row">
<input id="place_restaurant_food_types_2" name="place_restaurant[food_types][2]" type="checkbox" value="1" />
<label for="place_restaurant_food_types_2">Национальная кухня</label>
</div>
<div class="row">
<input id="place_restaurant_food_types_3" name="place_restaurant[food_types][3]" type="checkbox" value="1" />
<label for="place_restaurant_food_types_3">Японская кухня</label>
</div>
<div class="row">
<input id="place_restaurant_food_types_4" name="place_restaurant[food_types][4]" type="checkbox" value="1" />
<label for="place_restaurant_food_types_4">Китайская кухня</label>
</div>
<div class="row">
<input id="place_restaurant_food_types_5" name="place_restaurant[food_types][5]" type="checkbox" value="1" />
<label for="place_restaurant_food_types_5">Европейская кухня</label>
</div>
<div class="row">
<input id="place_restaurant_food_types_6" name="place_restaurant[food_types][6]" type="checkbox" value="1" />
<label for="place_restaurant_food_types_6">Кавказская кухня</label>
</div>
<div id="map_canvas"></div>
<input id="latitude" name="place_restaurant[latitude]" type="hidden" value="54.352271" />
<input id="longitude" name="place_restaurant[longitude]" type="hidden" value="48.52652" />
<div class="row">
<input id="submit" name="commit" type="submit" value="Сохранить" />
</div>
</form>

You could just use
check("place_restaurant_food_types_1")
as shown in the docs:
The check box can be found via name, id or label text.

Try By Xpath like this
find(:xpath, "//*[#id='place_restaurant_food_types_1']").click

You can use like this
find(:css,"input[id='place_restaurant_food_types_1']").set true

Related

How to make bootstrap 5 validation not visible immediately before the user types (oninput)?

How to make bootstrap 5 validation not visible immediately before the user types (oninput)?
Here is the program that I use, but the program immediately provides validation to the user even though the user has not provided input interaction:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<form action=" " class="was-validated">
<div class="userid">
<label for="uid" class="form-label"> User Name: </label>
<input type="text" class="form-control" id=" uid " placeholder="Enter user_name" name=" uid " required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the user name. </div>
</div>
<div class="emailid">
<label for="emid" class="form-label"> Email Id: </label>
<input type="email" class="form-control" id=" emid " placeholder="Enter email_id" name=" emid " required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the email id. </div>
</div>
<div class="numberid">
<label for="numid" class="form-label"> Mobile Number: </label>
<input type="number" class="form-control" id=" numid " placeholder="Enter Mobile Number" name="numid" required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the mobile number. </div>
</div>
<div class="txt">
<label for="txt" class="form-label"> Message: </label>
<textarea class="form-control" id="txt" placeholder="Enter message" name="txt" required></textarea>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the message. </div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="Checked" name="remembers" required>
<label class="form-check-label" for="Checked"> I agree on form validation.</label>
<div class="valid-feedback"> </div>
<div class="invalid-feedback"> </div>
</div>
<button type="submit" class="btn btn-info mt-2"> Submit </button>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
You shouldn't have .was-validated on the form in the markup. You add that in your validation script.
<form action=" " class="needs-validation">
Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form>. Otherwise, any required field without a value shows up as invalid on page load.
https://getbootstrap.com/docs/5.2/forms/validation/#how-it-works
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<form action=" " class="needs-validation">
<div class="userid">
<label for="uid" class="form-label"> User Name: </label>
<input type="text" class="form-control" id=" uid " placeholder="Enter user_name" name=" uid " required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the user name. </div>
</div>
<div class="emailid">
<label for="emid" class="form-label"> Email Id: </label>
<input type="email" class="form-control" id=" emid " placeholder="Enter email_id" name=" emid " required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the email id. </div>
</div>
<div class="numberid">
<label for="numid" class="form-label"> Mobile Number: </label>
<input type="number" class="form-control" id=" numid " placeholder="Enter Mobile Number" name="numid" required>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the mobile number. </div>
</div>
<div class="txt">
<label for="txt" class="form-label"> Message: </label>
<textarea class="form-control" id="txt" placeholder="Enter message" name="txt" required></textarea>
<div class="valid-feedback"> Valid data. </div>
<div class="invalid-feedback"> Please fill the message. </div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="Checked" name="remembers" required>
<label class="form-check-label" for="Checked"> I agree on form validation.</label>
<div class="valid-feedback"> </div>
<div class="invalid-feedback"> </div>
</div>
<button type="submit" class="btn btn-info mt-2"> Submit </button>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

Using ajax in thymleaf, update only part of form

I use SpringBoot, Thymeleaf.
I want to update the value only for part of form in update page.
<form id="form" class="needs-validation col-sm-6" th:action="#{'/user/edit/' + ${userInfo.id}}" th:object="${userInfo}" method="post" novalidate>
<input type="hidden" name="_method" value="put"/>
<input type="hidden" name="id" th:value="${userInfo.id}"/>
<div class="form-group">
<label for="name">Name</label>
<h4 id="name" th:text="${userInfo.name}" th:value="${userInfo.name}"></h4>
<input type="hidden" name="name" th:value="${userInfo.name}"/>
</div>
<hr>
<div class="form-group">
<label for="nickname">Nickname</label>
<input id="nickname" type="text" name="nickname" th:value="${userInfo.nickname}" placeholder="enter nickname" required minlength="2">
</div>
<hr>
<div class="form-group">
<label for="volunteerTime">Volunteer Time</label>
<span id="volunteerTime" th:text="${userInfo.volunteerTime}+'hour'" name="volunteerTime" th:value="${userInfo.volunteerTime}"></span>
<input type="text" size="5px" placeholder="hour"/>
<button type="button" name="action" value="plus" onclick="ajax()">plus</button>
<button type="button" name="action" value="minus" onclick="ajax()">minus</button>
</div>
<div class="form-group">
<input type="submit" value="update">
</div>
</form>
The "volunteerTime" section of the above code seeks to update and show values added to existing data according to the number entered.
The same goes for Minus.

Ckeditor ruby gem adds ">" at the end of the entries every time a user edits the textarea entry

Ckeditor ruby gem is adding a ">" at the end of my content entries every time a user edits the content.
Here is a video of it happening: https://drive.google.com/file/d/16sus8LGxHBZLFs_ts5_SJJSwLfisJzom/view?usp=sharing
Here is my update_row controller code for the text_component model. The textarea input is being saved in the content column.
def update_row
#text_component = TextComponent.find(params.fetch("id_to_modify"))
#text_component.tab_id = params.fetch("tab_id")
#text_component.content = params.fetch("content")
if #text_component.valid?
#text_component.save
redirect_to("/guides/"+params.fetch("guide_id"), :notice => "Text component updated successfully.")
else
#guide = Guide.find(params.fetch("guide_id"))
render("guide_templates/show.html.erb")
end
end
ANSWERED: here is the working form code in my edit_form view:
<form action="/update_text_component/<%= #text_component.id %>" method="post">
<!--input for guide_id -->
<div class="form-group">
<input type="hidden" id="guide_id" name="guide_id" class="form-control" value="<%= params.fetch("guide_id") %>">
</div>
<!-- input for tab_id -->
<div class="form-group">
<input type="hidden" id="tab_id" name="tab_id" class="form-control" value="<%= params.fetch("tab_id") %>">
</div>
<div class="form-group">
<label for="content">
Content
</label>
<textarea id="content" name="content" class="ckeditor" rows="10"><%= raw #text_component.content %></textarea>
</div>
<button class="btn btn-block btn-outline-secondary">
Update text component
</button>
</form>
<form action="/update_text_component/<%= #text_component.id %>" method="post">
<!--input for guide_id -->
<div class="form-group">
<input type="hidden" id="guide_id" name="guide_id" class="form-control" value="<%= params.fetch("guide_id") %>">
</div>
<!-- input for tab_id -->
<div class="form-group">
<input type="hidden" id="tab_id" name="tab_id" class="form-control" value="<%= params.fetch("tab_id") %>">
</div>
<div class="form-group">
<label for="content">
Content
</label>
<textarea id="content" name="content" class="ckeditor" rows="10"><%= raw #text_component.content %></textarea>
</div>
<button class="btn btn-block btn-outline-secondary">
Update text component
</button>
</form>

File upload formatting in Bootstrap MVC

I have this in an MVC view
<form id="fileupload" action="#Url.Action("Save")" method="POST" enctype="multipart/form-data">
<div class="container">
<div class="row">
<div class="form-group">
<label for="datepicker1">Invoice Date</label>
<div class='bfh-datepicker' id='datepickerDiv'>
<input type='text' id="datepicker1" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="InvoiceNumberTB">Invoice Number</label>
<input type="text" class="form-control" id="InvoiceNumberTB" />
</div>
<div class="form-group">
<label for="NetAmountTB">Net Amount</label>
<input type="text" id="NetAmountTB" class="form-control text-right" placeholder="0.00" />
</div>
<div class="form-group">
<label for="TaxAmountTB">Sales Tax</label>
<input type="text" id="TaxAmountTB" class="form-control text-right" placeholder="0.00" />
</div>
<div class="form-group">
<label for="InvoiceTotalTB">Invoice Total</label>
<input type="text" id="InvoiceTotalTB" class="form-control text-right" placeholder="0.00" />
</div>
<div class="form-group">
<label for="InvoiceDescriptionTB">Description</label>
<input type="text" id="InvoiceDescriptionTB" class="form-control" />
</div>
<div class="form-group">
<label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
<span class="btn btn-success fileinput-button">
<span>Add File...</span>
<input type="file" id="DocumentUploadTB" class="form-control" />
</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span> Save</button>
</div>
</div>
</div>
But the label for the file upload is not formatting as I would have hoped (at the top of the field as the others) but looks like this
Could someone point me in the correct direction?
Thanks
Wrap the content after the label in a form-control-static div and lose the form-control class on the input:
<div class="form-group">
<label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
<div class="form-control-static">
<span class="btn btn-success fileinput-button">
<span>Add File...</span>
<input type="file" id="DocumentUploadTB" />
</span>
</div>
</div>
You want your btn span to display as a block element. Try adding a display: block; style to it, or use a simple bootstrap utility class like .show:
<div class="form-group">
<label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
<span class="btn btn-success fileinput-button show">
<span>Add File...</span>
<input type="file" id="DocumentUploadTB" class="form-control" />
</span>
</div>
Example: http://codepen.io/kspearrin/pen/PqpgYq

ASP.Net MVC 4 C# login form with PhantomJS and Selenium

I have a specific question, as i can't figure out how to submit form without "id" or "name" in selenium.webdriver (phantomjs) there is html logim form:
<div class="ui-helper-child-2 ui-page-column-last ui-page-column-span-12">
<div class="ui-page-column-block ui-widget-signin">
<h1>Sign In</h1>
<form action="/glo/en-us/session,create/view.html" method="post">
<div class="ui-helper-child-1">
<label class="ui-state-required" for="username">Customer ID:</label>
<input id="username" name="username" maxlength="9" type="text" value="" />
</div>
<div class="ui-helper-child-2">
<label class="ui-state-required" for="password">Password:</label>
<input id="password" name="password" maxlength="20" type="password" value="" />
</div>
<div class="ui-helper-child-3">
<label class="ui-state-required" for="companyId">Company:</label>
<select id="companyId" name="companyId">
<option selected="selected" value="glo">Choose company</option>
<option value="asp">new to asp</option>
<option value="aeg">who is it</option>
<option value="asus">who use this brand name</option>
</select>
</div>
<div class="ui-helper-child-4">
<input id="callback" name="callback" type="hidden" value="/glo/en-us/home,show/view.html?error=1" />
<input type="submit" value="Sign In" />
</div>
</form>
</div>
and one more time how to login? I can add information to by webdriver.FindElement(username) and so on, but not know how to post data as i don't have id or name in submit element.
I think this will work for you:
driver.FindElement(By.CssSelector(".ui-helper-child-4>[type='submit']")).Click();

Resources