I am new to testcafe and JavaScript and unable to select drop down list by select element id.
Above is my html file
<div class="collapse show" id="step-1" style="">
<div class="card card-body pb-0">
<form method="post" class="form-row" id="step-form-1" data- step="2" data-wrapper-key="basic_details">
<div class="form-group col-sm-12 pl-4 pr-4 w-100">
<label for="states">Names of state </label>
<select multiple="" id="states" class="form-control select2-hidden-accessible" label="Names of state"
inputtype="multiselect" required="" options="[object Object]" name="states" tabindex="-1"
aria-hidden="true">
<option value="1">Goa</option>
<option value="2">Punjab</option>
<option value="3">Maharshtra</option>
</form>
</div>
</div>
Here is my js code
test('profile',async t=> {
const selectStates= Selector('#states')
const selectOption=selectStates.find('option');
.click(selectStates)
.click(selectOption.withText('Punjab'))
}
Its not able to even click on drop down button
I am getting error "The element that matches the specified selector is not visible".
I debugged in 0.1x speed and found that the dropdown id is getting clicked but the drop down list is not coming, it keeps showing waiting for element to appear.
In the Select element, multiple="" seems to be the attribute that is triggering the failure
There is an issue with testcafe if multiple="" attribute is provided. So I used some another approach instead of selecting options from drop down if you have a textbox type drop down. You can type the option name and hit enter key so that it gets selected.
test('profile',async t=> {
const selectStates= Selector('#states')
.click(selectStates)
.typeText(selectStates,'Goa')
.pressKey('enter')
.typeText(selectStates,'Punjab')
.pressKey('enter')
.pressKey('esc')
.pressKey('tab')// to go with next selector in the page.
}
)
The above approach worked for me.
Related
I created a Django form that have dropdown in one of the field. When I tried to submit the form without selecting the dropdown item, the form is not submitted because I set in my code that it won't submit unless the form valid using is_valid().
However, it was not showing the validation error message. In the browser console, the is an error message An invalid form control with name='start_position' is not focusable.
I have read some questions about this and they said that it happened because there is a hidden field. After I inspect element, it is true that div class='start_position' is hidden.
However, I don't know how to fix it in Django.
This is the code that create dropdown field.
class LocationForm(forms.Form):
start_position = forms.ModelChoiceField(
required=True,
label="Start Position",
queryset=Location.objects.all()
)
This is the rendered HTML
<div class="formColumn form-group col-md-6 mb-0">
<div id="div_id_start_position" class="form-group">
<label for="id_start_position" class="col-form-label requiredField">
Start Position<span class="asteriskField">*</span>
</label> <div class="">
<select name="start_position" class="select form-control" required="" id="id_start_position" style="display: none;">
<option value="" selected="">---------</option>
<option value="78">Loc 78</option>
<option value="79">Loc 79</option>
<option value="80">Loc 80</option>
</select><div class="nice-select select form-control" tabindex="0">
<span class="current">Loc 78</span>
<ul class="list">
<li data-value="" class="option">---------</li>
<li data-value="78" class="option selected">Loc 78</li>
<li data-value="79" class="option">Loc 79</li>
<li data-value="80" class="option">Loc 80</li>
</ul></div>
</div>
</div>
I want the validation message show like in the other field (I tried DateField and the validation works normally).
I'm using HTML <select> Tag, so as it is known allready:
The element is used to create a drop-down list.
The tags inside the element define the available
options in the list.
I want to achieve next thing:
after I select value in a drop-down list I would like to set select's value to a default value which is "-/-" ..
Here is how it looks:
And code:
<div class="form-group">
<label class="control-label dash-control-label col-sm-3" for="">Select Select2:</label>
<div class="col-sm-3">
<select id="taxSelect" class="form-control dash-form-control select2" style="width: 100%;" data-minimum-results-for-search="Infinity">
<option disabled [ngValue]="null" >-/-</option>
<option *ngFor="let code of codes" [value]="code.id">
{{code.title}}
</option>
</select>
</div>
I mean when I open modal again I want to see "-/-" as it is default value, and not the value that I previously selected.. So basically onSubmit() in typescript I would like to reset to set again "-/-" as a default value..
P.S I've tried:
show() {
$('select').val('0');
$('select').val($('select').children().eq(0).val());
$('select2').val('0');
$('select2').val($('select').children().eq(0).val());
$("select[title='-/-']").attr('selected', 'selected');
}
So basically when Modal is shown I wanted to reset drop-down values to "-/-" but it doesn't work..
Thanks a lot guys!
CHEERS!
I am working on a angular2 App and I am using primeng for UI elements. I have dropdowns where I am using the options in these dropdowns are dynamically generated from an API call. Now, when I click the submit button, I want it to validate the forms before submitting. So I am using 'required="required"' in order to make the validation happen.
I see that, if the data is not loaded into the dropdowns, the validation works fine, but when the data is loaded and dropdown options are populated, the primeng validation breaks and it does not throw any message.
Here's my html code..
<div method="post" class="content-form">
<div class="col-lg-6">
<form #myForm="ngForm" class="form-horizontal" novalidate>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">System of Origin</label>
<div class="col-sm-10">
<p-dropdown class="contentDetails" [options]="systemOfOrigins" [(ngModel)]="defaultSoO" [ngModelOptions]="{standalone: true}" required="required" filter="filter" placeholder="NONE"></p-dropdown>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Content Type</label>
<div class="col-sm-10">
<p-dropdown class="contentDetails" [options]="contentTypes" [(ngModel)]="selectedContentType" [ngModelOptions]="{standalone: true}" filter="filter" required="required" placeholder="Choose"></p-dropdown>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Rendition</label>
<div class="col-sm-10">
<p-dropdown id ="rendition" placeholder="Select Rendition" class="contentDetails" [options]="renditions" [(ngModel)]="renditionSelected" [ngModelOptions]="{standalone: true}" filter="filter" required="required"></p-dropdown>
</div>
</div>
</form>
Am I not using the required attribute properly or is there any other way to do it with API calls ?
Help is appreciated
This issue happens if there is a dummy first element in the options array that is used to display please select text, and the label in that dummy element is having some value in it. So just set the label value as '' or null or undefined. It will work.
Try
<p-dropdown [required]="true">
required is a boolean property. If you are setting it dynamically, [required]="isRequired", otherwise required="true" should do it for you.
Try replacing required="required" with required="true" and seeing if that makes them required. If not, I suggest adding a plunkr
I'm trying to disable a dropdown depending of a value of a different input. I'm working with Semantic UI and Angular.
This is my HTML
<select class="ui search dropdown" ng-attr-id="{{'dd-' + question.id}}"
ng-options="option.value as option.text for option in question.options"
ng-model="question.answer"
ng-disabled="!question.isEnable">
</select>
And this is how is rendered
<div class="ui search dropdown ng-pristine ng-untouched ng-valid selection">
<select ng-attr-id="{{'dd-' + question.id}}" ng-options="option.value as option.text for option in question.options" ng-model="question.answer" ng-disabled="!question.c_questionIsEnable" id="dd-483" disabled="disabled">
<option value="" class="" selected="selected"></option>
<option label="Yes" value="string:213">Yes</option>
<option label="No" value="string:214">No</option>
<option label="Does not apply" value="string:547">Does not apply</option>
</select>
<i class="dropdown icon"></i><input class="search" autocomplete="off" tabindex="0">
<div class="text"></div><div class="menu transition hidden" tabindex="-1">
<div class="item selected" data-value="string:213">Yes</div>
<div class="item" data-value="string:214">No</div>
<div class="item" data-value="string:547">Does not apply</div>
</div>
</div>
As you can see in the rendered code the disabled attribute is present in the <select>,
nevertheless the dropdown is not disabled. Reading the Semantic UI docs, there is a way to set a dropdown in a disable state using the css class disabled but is not working either (the css class is added to the <select>)
HTML code with using class
<select class="ui search dropdown" ng-attr-id="{{'dd-' + question.id}}"
ng-options="option.value as option.text for option in question.options"
ng-model="question.answer"
ng-class="{'disabled': !question.isEnable}">
</select>
Indeed, the class disabled is added to the select input but the dropdown is not disabled, using Chrome Dev Tools, the element gets disabled if I add the class in the following line
<div class="ui search dropdown ng-pristine ng-untouched ng-valid selection disabled">
Is there a way for make this work using <select>?.
Thanks in advance.
There is an easy way to do this.
Wrapping the in a with the field css class, and use the ng-class attribute in there.
Hope this could help.
<div class="ui field" ng-class="{'disabled': !question.isEnable }">
<select class="ui search dropdown" ng-attr-id="{{'dd-' + question.id}}"
ng-options="option.value as option.text for option in question.options"
ng-model="question.answer">
</select>
</div>
I want to fill a HTML form, I am using mechanize module of python.
my HTML code is like that for checkbox and dropdown is :
<div id="post_cd">
<input role="checkbox" id="cd_info" class="cbox" type="checkbox">
<span class="s-iso" style="display:none"></div>
<label for="type" id="cdtype" class="cd" style="width:60px;margin:1px;float:left;text-align:right;">CD type:</label>
<select id='cdtype' class=" ui-iso" style="width:100px;margin:1px;float:left;">
<option value="CD1">Error1</option>
<option value="CD2">Error1</option>
<option value="CD3">Error2</option>
</select>
I have tried with following but getting errors:
for checkbox: form.find_control("cd_info").items[0].selected = True
for dropdown: form['cdtype']= ['Error1']
error:
raise ControlNotFoundError("no control matching "+description)
mechanize._form.ControlNotFoundError: no control matching name 'cd_info'
raise ControlNotFoundError("no control matching "+description)
mechanize._form.ControlNotFoundError: no control matching name 'cdtype'
There is no <form> in your HTML code. So probably form is not pointing to an element around the HTML code you provide at the moment you call find_control or the subscription operator.
You can try to print the text of the form to be sure you are looking at the right thing:
print form