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.
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")
Related
I'm using a template with custom CSS (.less) for checkboxes (making them appear as "Yes|No", "On|Off", etc.)
Using #Html.CheckboxFor(model => model.BooleanProperty, new { #class="custom-switch" }) results in a checkbox not appearing, at all.
So I got to digging around, found many questions on here with similar issues, but none of the solutions worked for me so far. The solution I'm currently working on is to use a custom EditorFor template. This is rendering the checkbox correctly, however, what I'm experiencing is that if the slider is switched to "NO", it's passing across to the controller as null instead of false, and if it's switched to "YES" it's passing across to the controller as "on".
I know that Html.CheckboxFor renders a checkbox element followed by a hidden input element. What purpose does this serve? Following are rendered HTML from the two methods as well any questions pertaining to that specific :
Straight HTML for Checkbox
::before ::after
When this is passed to the controller, why is the value of BoolProperty "true,false"?
#Html.CheckboxFor(model => model.BoolProperty, new { #class="custom-switch" })
<input checked="checked" data-val="true" data-val-required="The BoolProperty is required." id="BoolProperty" name="BoolProperty" type="checkbox" value="true" class="custom-switch">
<input name="BoolProperty" type="hidden" value="false">
What purpose does the hidden input field play? If I remember right, only the first "BoolProperty" named value would actually be passed to the controller anyways. I can't find anything that would suggest that one updates the other when the value changes, and through testing, I've noticed that the value does not change.
#Html.EditorFor(model => model.BoolProperty, new { #class = "custom-switch" })
<input type="checkbox" checked name="BoolProperty" class="custom-switch">
<label>::before ::after</label>
Why would this pass across the values of "on" or null to the controller? Why not true and false?
The Boolean Editor Template
#model Boolean?
var isChecked = ViewData["checked"] != null && ViewData["checked"].ToString() == "true";
<input type="checkbox" checked="#(isChecked ? "checked" : string.Empty)" name="#name" class="#ViewData["class"].ToString()" />
<label class="lbl"></label>
The hidden field is there to force the field to be included in the form POST even when nothing is checked. Without it, the field is omitted altogether, per the standard. You wouldn't know the difference between a "false" value or a non-existent field.
http://www.w3.org/TR/html401/interact/forms.html
As far as why it uses "on" vs "true", that is something you can control yourself. If you want true/false instead of on/off, use that. "on" is just a default, but not required.
<input type="checkbox" class="checkbox" name="BoolProperty" value="true" />
<input type="hidden" class="checkbox" name="BoolProperty" value="false" />
About the hidden field
I can't find anything that would suggest that one updates the other
when the value changes, and through testing, I've noticed that the
value does not change.
No, it doesn't change. The browsers, then a checkbox is not checked, don't submit anything using that name. So, the hidden propose is to submit the value "false" (with the same name) when the checkbox isn't checked.
When the checkbox is checked (as you said) the posted value is "true,false" (first the value of the checkbox and then the value of the hidden). The MVC binder deals with this string to convert it to true value setting it to the BooleanProperty.
About the on value
It is the default value for the checkbox. See here.
I have a submit button with text and I want to check for both.
i.e. the actual page has:
<input class="button" type="submit" value="Continue" tabindex="3"
name="nav[save]"></input>`
So I've tried
it "I can see the Continue button" do
expect(page.find('input[type="submit"]').find('input[value="Continue"]')).to be
end
but I get
Unable to find css "input[value=\"Continue\"]"
and
expect(page.find('input[type="submit"]')).
to have_selector('input[value="Continue"]')
but I get
expected to find css "input[value=\"Continue\"]" but there were no matches
If you want to check for both you can do it in single css selector like
input[type=\"submit\"][value=\"Continue\"]
Here's one solution that works with your view:
expect(find('.button').value).to eq 'Continue'
In the console:
[1] pry(#<Cucumber::Rails::World>)> expect(find('.button').value).to eq 'Continue'
=> true
I want to draw fields using a Handlebars partial that have the key name and value. My json is like this:
{ "someKnownField" : { "textValue" : "the value I want" } }
I want a label with someKnownField as its text, and an input with the value of textValue in it. I use a partial because I have hundreds of these fields and don't want to have to hard code their names.
Here's my partial code, called textfield
<div class="control-group">
<label class="control-label" for="input{{#key}}">{{#key}}</label>
<div class="controls">
<input type="text" id="input{{#index}}" placeholder="{{#key}}" value="{{textValue}}">
</div>
</div>
Now, I can't use a {{#with}} helper, a-la {{#with someKnownField}}{{> textfield}}{{/with}} since a with doesn't give you a #key. {{#each}} has a #key but its of the context within the each node (textValue); So how do you key the key name OF the each node itself?
This does not work, but demonstrates what I need to grab:
<label>{{../#key}}</label>
since it's expecting an id in the parent path, not a calculated value (which doesn't exist anyway, since it's not an array itself).
You've done well, but made a typo. The correct way:
<label>{{#../key}}</label>
I have a site that has 2 forms - a short form and a long form. If you look at http://dforbesinsuranceagency.com you'll see the short form next to the masthead photo. The long form is at http://dforbesinsuranceagency.com/request-free-insurance-quotes/
When the user hits Submit on the short form, it kicks them over to the long form page, so that part works fine. The part that gives me fits is that I need the values entered into the short form fields First Name, Last Name, Email Address and Telephone passed to their equivalent fields on the long form.
How do I do this?
This is how I am redirecting the short form to the long form (I added it to the Additional Settings section for the short form):
on_sent_ok: "location = 'http://dforbesinsuranceagency.com//request-free-insurance-quotes';"
Any help would be appreciated.
Hack, hack, hackety, hack hack hack... Without suggesting "not using a form-builder" I don't think there is an elegant solution - you can't use the other PHP method suggested without modifying the plugin itself (and that is a can of worms). I will propose a Javascript solution but there are some caveats (below):
jQuery(document).ready(function($){
$('#quick-quote form:first').submit(function(){
var foo = {};
$(this).find('input[type=text], select').each(function(){
foo[$(this).attr('name')] = $(this).val();
});
document.cookie = 'formData='+JSON.stringify(foo);
});
var ff = $('#container form:first');
if(ff.length){
var data = $.parseJSON(
document.cookie.match('(^|;) ?formData=([^;]*)(;|$)')[2]
);
if(data){
for(var name in data){
ff.find('input[name='+name+'], select[name='+name+']').val(data[name]);
}
}
}
});
What this will essentially do is: on submission, store your mini-form options in a cookie. On page load it will then look for a form in the main body of the page and apply any stored cookie data.
Notes
The jQuery selectors are deliberately ambiguous to avoid any future changes in your admin panel/plugin that will likely screw with the form IDs (thus breaking the script).
I'm not faffing about pairing field/option names - for example the select box in your mini-form is named insurance-type however the matching box in the main form is named ins-type - you will have to ensure they are of the same name.
This also applies to select box values - if there is no matching value, it will be ignored (eg. some of your values in the main form have » » characters in front (and so don't match).
try this.
set the action of our first form to a php file named xyz.php
<form method="post" action="xyz.php">
<input type="text" name="name">
<input type="text" name="email_address">
<input type="submit" value="Go To Step 2">
</form>
the file xyz.php will create a new form for you which in this case is your second form (the big one). Set the action of the form as required. the code of your xyz.php will look something like this.
<form method="post" action="form3.php">
<input type="text" name="name" value="<?php echo $_POST['name']; ?>">
<input type="text" name="email_address" value="<?php echo $_POST['email_address']; ?>">
<input type="radio" group="membership_type" value="Free">
<input type="radio" group="membership_type" value="Normal">
<input type="radio" group="membership_type" value="Deluxe">
<input type="checkbox" name="terms_and_conditions">
<input type="submit" value="Go To Step 3">
</form>
where the input fields of the first form will already be filled with the details given by the user in the first form.
You can create the first form by yourself and let the contact form create the second form for you providing the default values using the method above.
Hope this helps!
How to get the attribute of Title in the input element
<input type="image" title="Previous Page">
<input type="image" title="First Page">
<input type="image" title="Next Page">
<input type="image" title="Last Page">
What have you tried? Typically something like the following should work:
WebElement element = driver.findElement(By.tagName("input"));
String title = element.getAttribute("title");
The answer provided by Jim Evans is the correct one imo, but for a more specific one i'd advise something like below. Remeber that copy-pasta might not work and you need to change something to be able to work on your full HTML.
List<WebElement> elements = driver.findElements(By.tagName("input"));
for (WebElement element : elements) {
if (element.getAttribute("type").equals("image")) {
System.out.println(element.getAttribute("title"));
}
}
The above code will loop for all the in your webpage that are from type="image" and print on the console the "title" attribute of each one of those.
Still thing you should vote Jim's answer as the correct one though.
First, you need to identify the input element from which you want to get the value of the attribute title .
Then something like the following must work.
element.getAttribute("title");
Its very simple and work for as well.
String title = driver.getTitle();