How can I write a method in cypress so that I search for the text content "Clinic location is active?" and after finding this text operate the button below it (you have a printscreen for guidance HERE ).
Until now I had written this method to operate the button to be active / inactive after the redClass class, but to be detected by its position on the page, which is slightly useless if a button appears in front of it in the future:
setToOn(value: number) {
cy.get(this.controlsSelector).eq(value).then(($button) => {
if ($button.hasClass('redClass')) {
cy.get(this.offSliderButton).eq(value).click({force:true});
}
})
}
Now I would like not to look for the button by its position (value in the case of the above method), called with the function cypress .eq(), but by the text that is above it, in the control-label class
<div class="form-group">
<label class="control-label" for="inputType">Clinic location is active?</label>
<div class="controls">
<div class="checkboxControl no-select">
<div class="checkboxSlider change greenClass">
<div class="checkboxSlider-state checkboxSlider-state-on">Yes</div>
<div class="checkboxSlider-state checkboxSlider-state-off">No</div>
<input checked="checked" class="form-control" data-val="true" data-val-required="The Clinic location is active? field is required." id="IsActive" name="IsActive" placeholder="Clinic location is active?" type="checkbox" value="true">
<input name="IsActive" type="hidden" value="true">
<label class="grey"></label>
</div>
</div>
</div>
</div>
So I want to call a method,from the test file, like:
clinicLocations.operateButtons('Clinic location is active?').setToOn();
Code for another button from that page:
<div class="form-group">
<label class="control-label" for="inputType">Allow Online Scheduling?</label>
<div class="controls">
<div class="checkboxControl no-select">
<div class="checkboxSlider change greenClass">
<div class="checkboxSlider-state checkboxSlider-state-on">Yes</div>
<div class="checkboxSlider-state checkboxSlider-state-off">No</div>
<input checked="checked" class="form-control" data-val="true" data-val-required="The Allow Online Scheduling? field is required." id="AllowOnlineScheduling" name="AllowOnlineScheduling" placeholder="Allow Online Scheduling?" type="checkbox" value="true"><input name="AllowOnlineScheduling" type="hidden" value="true">
<label class="grey"></label>
</div>
</div>
</div>
</div>
And another code structure for an inactive button (with redClass) :
<div class="form-group">
<label class="control-label" for="inputType">Use service facility NPI number in box 32a of HCFA form?</label>
<div class="controls">
<div data-toggle-selector=".NPInumberBox32a" class="checkboxControl no-select">
<div class="checkboxSlider redClass">
<div class="checkboxSlider-state checkboxSlider-state-on">Yes</div>
<div class="checkboxSlider-state checkboxSlider-state-off">No</div>
<input class="form-control" data-val="true" data-val-required="The Use service facility NPI number in box 32a of HCFA form? field is required." id="UseFacilityNPINoInHCFA" name="UseFacilityNPINoInHCFA" placeholder="Use service facility NPI number in box 32a of HCFA form?" type="checkbox" value="false"><input name="UseFacilityNPINoInHCFA" type="hidden" value="false">
<label class="grey"></label>
</div>
</div>
</div>
</div>
I hope I have provided all the necessary information.
In terms of Cypress commands it's just this
cy.contains('.form-group', 'Clinic location is active')
.find('input[type="checkbox"]')
.click()
I don't understand what clinicLocations.operateButtons refers to, or what your setOn() is doing exactly, but above is correct Cypress code for your requirement.
Related
I'm trying to change what text areas are visible depending on what radio button is checked.
I have followed various guides on google and none have worked.
This is what I currently have, using the click function but still nothing.
HTML:
<div class="row col-md-12">
<!-- Header Delimitation input settings -->
<div class="form-group col-md-4">
<label class="control-label" for="header_delimitation">Header delimitation</label>
<div class="col-md-12">
<div class="radio">
<label for="header_delimitation-0">
<input type="radio" name="header_delimitation" id="header_delimitation-0" value="0">
Fixed Column Width</label>
</div>
<div class="radio">
<label for="header_delimitation-1">
<input type="radio" name="header_delimitation" id="header_delimitation-1" value="1">
Character delimiter
</label>
</div>
</div>
<!-- Text input-->
<div class="form-group" id="header_col_form">
<label class="control-label" for="header_columns_num">Number of Columns</label>
<div class="">
<input id="header_columns_num" name="header_columns_num" type="text" placeholder="number" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group" id="header_delim_form">
<label class=" control-label" for="header_delim">Header delimiter</label>
<div class="">
<input id="header_delim" name="header_delim" type="text" placeholder="delimiter" class="form-control input-md">
</div>
</div>
</div>
JS:
$(document).ready(function () {
$('#header_col_form').hide('fast');
$('#header_delim_form').hide('fast');
$('#header_delimitation-0').click(function () {
$('#header_col_form').show('fast');
$('#header_delim_form').hide('fast');
});
$('#header_delimitation-1').click(function () {
$('#header_delim_form').show('fast');
$('#header_col_form').hide('fast');
});
});
How it looks like now
So functionality wise, it should when header_delimitation_0 is selected, show header_col_form and hide header_delim_form. I will then add the reverse for when header_delimitation_1 is selected.
There is most likely a far simpler and cleaner way of completing this task, if so, any help would be greatly appreciated.
So I have these radio buttons that a user can select and then I need a text input inside of it. How can I validate these inputs so that they are required to select a radio option, and if it is one of the first two, make sure they fill out the text inputs? I assume I need to use the jquery.validator.addMethod somehow, but i'm really lost on what I need to do. I'd really appreciate some help. Thanks so much!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="itemPricing" class="clearfix">
<div class="row">
<div class="col-sm-12" form-group>
<label for="itemPricing" class="required">Pricing</label>
<span id="helpBlock" class="help-block">Select how you want pricing to display on your website.</span>
</div>
<!-- Regular Price -->
<div class="col-sm-12 form-group">
<div class="form-inline radio-input-group">
<div class="radio">
<input type="radio" class="height-initial" name="pricingOptions" id="regularPrice" value="">
<label for="regularPrice" class="required">Regular Price</label>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control money" id="productPrice" name="productPrice">
</div>
</div>
<div class="form-inline radio-input-group">
<div class="radio">
<input type="radio" class="height-initial" name="pricingOptions" id="salePrice" value="">
<label for="salePrice" class="required">Sale Price</label>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control money" id="productPrice" name="productPrice">
</div>
</div>
<div class="form-inline radio-input-group">
<div class="radio">
<input type="radio" class="height-initial" name="pricingOptions" id="emailPrice" value="">
<label for="emailPrice" class="required">Email for Price</label>
</div>
</div>
</div>
</div>
</div>
<!-- end itemPricing -->
<button type="submit" class="btn btn-success save ladda-button" data-style="zoom-in">Save</button>
Yes, skipping server side validation is not an option, but you get a better user experience if you also validate on the client side too. Waiting for the round trip to the server before the user becomes aware of the problem is a sure way to piss the user off. The radio buttons can have onChange handlers that check to see if the button is selected and set the required status of the textbox accordingly.
I'm trying to create form which would simplify adding of the products which are not yet registered to nomenclatures for my small shop. For this I've created module with following form:
<t t-extend="ConfirmPopupWidget">
<t t-jquery="p.body" t-operation="replace">
<div class="product-container">
<div id="search_row" style="padding-bottom: 12px;padding-top: 11px;border-bottom: 1px solid gray;">
<label>Barcode </label>
<input style="height: 18px;" type="text" id="is_ean13" class="search" placeholder="EAN13 Barcode"/>
</div>
<div class="form-group">
<label for="is_name" class="col-sm-2 control-label">Product Name </label>
<div class="col-sm-10">
<input type="text" id="is_name" class="form-control" placeholder="Product name" style="height: 32px;background-color:#D2D2FF"/>
</div>
</div>
<div class="form-group">
<label for="is_sale_price" class="col-sm-2 control-label">Sale price</label>
<div class="col-sm-10">
<input type="text" id="is_sale_price" class="form-control" placeholder="Sale Price"/>
</div>
</div>
<div class="form-group">
<label for="is_internal_reference" class="col-sm-2 control-label">Internal Reference</label>
<div class="col-sm-10">
<input type="text" id="is_internal_reference" class="form-control" placeholder="Internal Reference"/>
</div>
</div>
</div>
</t>
</t>
I want to fill up ean13 barcode field "is_ean13" from barcode scanner, which is already used by POS interface, but could not make it working.
odoo.define('instant_sale.add_product', function (require) {
"use strict";
var bus = core.bus;
// bind event handler
bus.on('barcode_scanned', this, function(barcode) {
this.scan(barcode);
})
});
As it is written in https://media.readthedocs.org/pdf/odoo-development/latest/odoo-development.pdf page 38, but it seems I'm missing something, because I can't catch any event.
How can I catch barcode events in POS interface. Any help is highly appreciated. Thank you!
When the barcode scanner scans something, it will write it like if it was a keyboard then hit enter. This is how you get the information on a scan.
Because of this, you need to put the focus on the field input when you open your view so that the scanner writes in the correct html input.
Ok, I've been having a really weird problem using a checkbox which collapses a hidden div using bootstrap.
if I have data-toggle="collapse" in the checkbox input attribute section, the Div Collapses but requires that every single one of the inputs inside it be filled out.
If data-toggle="collapse" is not there, the hidden div doesn't collapse, and if the checkbox is checked it requires the inputs to be entered and if it's left unchecked I can submit the form without the inputs being entered. (desired action, but the div doesn't hide or show when the checkbox is checked)
How do I hide/show the div when the checkbox is unchecked/checked AND only require the inputs if the box is checked?
I'm using this as the HTML:
<div class="col-md-1">
<input type="checkbox" onclick="ChangeShip()" href="#moreabout" data-toggle="collapse" aria-expanded="false" aria-controls="moreabout" class="form-control" id="chShipAdd" name="chShipAdd" value="no">
</div>
<label for="chShipAdd" class="col-md-3 control-label">Shipping Information?</label>
<div id="shipadddiv" style="visibility: hidden;">
<div class="collapse" id="moreabout" >
<div class="form-group">
<div class="col-md-12">
<br>
<input id="sStreet" name="sStreet" type="text" placeholder="Street Name (required)" class="form-control shipClass" required>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input id="sCity" name="sCity" type="text" placeholder="City (required)" required class="form-control shipClass">
</div>
<div class="col-md-4">
<input id="sState" name="sState" type="text" placeholder="State (required)" required class="form-control shipClass">
</div>
<div class="hidden-lg hidden-md"> </div>
<div class="col-md-4">
<input id="sZipcode" name="sZipcode" type="text" placeholder="Zip (required)" required class="form-control shipClass">
</div>
</div>
</div>
</div>
and the javascript:
function ChangeShip() {
if (!(document.getElementById('chShipAdd').checked)) {
document.getElementById('shipadddiv').style.visibility="hidden";
$(".shipClass").prop("disabled",true);
}
else {
document.getElementById('shipadddiv').style.visibility="visible";
$(".shipClass").prop("disabled",false);
}
}
Any solution that WORKS will be acceptable. I've bashed my brain all day trying to do this simple action. I've tried .prop .attribute .setAttribute .removeAttribute, and much much more.
Any Advice?
You can use jquery to solve this quickly. You can wrap your inputs for change ship and give it and id. And let jquery do the rest.
var form = $('#myForm'),
checkbox = $('#changeShip'),
chShipBlock = $('#changeShipInputs');
chShipBlock.hide();
checkbox.on('click', function() {
if($(this).is(':checked')) {
chShipBlock.show();
chShipBlock.find('input').attr('required', true);
} else {
chShipBlock.hide();
chShipBlock.find('input').attr('required', false);
}
});
See this jsfiddle for your problem. This should help you.
your click event will toggle the display and the disabled, but when the form is loaded you will have hidden content that is not disabled.
simply call the function on document.ready
function ChangeShip() {
var show = $('#chShipAdd').prop('checked');
$('#shipadddiv').toggle(show);
$("#shipadddiv .shipClass").prop("disabled", !show);
}
$(ChangeShip); // call on document.ready
or simply add the disabled attribute to those elements so that the initial form state is valid
If the [required] attribute is still triggered on a [disabled] element you could juggle the attribute value
function ChangeShip() {
var show = $('#chShipAdd').prop('checked');
$('#shipadddiv').toggle(show);
$("#shipadddiv .shipClass").each(function(){
if (!('_required' in this))
this._required = this.required;
this.disabled = !show;
this.required = (show) ? this._required : false;
});
}
Try to do this :
HTML :
<div class="col-md-1">
<input type="checkbox" onclick="ChangeShip()" href="#moreabout" data-toggle="collapse" aria-expanded="false" aria-controls="moreabout" class="form-control" id="chShipAdd" name="chShipAdd" value="no">
</div>
<label for="chShipAdd" class="col-md-3 control-label">Shipping Information?</label>
<div id="shipadddiv" style="visibility: hidden;">
<div class="collapse" id="moreabout" >
<div class="form-group">
<div class="col-md-12">
<br>
<input id="sStreet" name="sStreet" type="text" placeholder="Street Name (required)" class="form-control shipClass" required>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input id="sCity" name="sCity" type="text" placeholder="City (required)" required class="form-control shipClass">
</div>
<div class="col-md-4">
<input id="sState" name="sState" type="text" placeholder="State (required)" required class="form-control shipClass">
</div>
<div class="hidden-lg hidden-md"> </div>
<div class="col-md-4">
<input id="sZipcode" name="sZipcode" type="text" placeholder="Zip (required)" required class="form-control shipClass">
</div>
</div>
</div>
</div>
JQUERY :
$('#chShipAdd').change(function() {
if ($('#chShipAdd').prop('checked')) {
$('#shipadddiv').show();
} else {
$('#shipadddiv').hide();
}
});
So I've been working on a back-end interface for where I'm interning, and everything's been going smoothly mainly. I made a page where you insert a customer. there's a checkbox to add shipping information, and the fields are hidden, and only shown when the checkbox is ticked. it is also required when its showing. i did the same thing for a Tax Exempt check box, where it hides a field to enter a tax id, and is only required when its checked and showing, otherwise, it isn't required. both of these features work great on pc, and theyre coded exactly the same. However; when i go to try it on mobile, the shipping checkbox works, and drops down the fields to enter the info. Yet, the tax exempt box doesnt show the field to enter the Tax ID.
Shipping html:
<div id="changeShipInputs">
<div class="form-group">
<div class="col-md-12">
<input id="Sstreet" name="Sstreet" type="text" maxlength="150" placeholder="Street Name (required)" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input id="Scity" name="Scity" type="text" maxlength="35" placeholder="City (required)" class="form-control">
</div>
<div class="col-md-4">
<input id="Sstate" name="Sstate" type="text" maxlength="35" placeholder="State (required)" class="form-control">
</div>
<div class="hidden-lg hidden-md"> </div>
<div class="col-md-4">
<input id="Szipcode" name="Szipcode" type="text" maxlength="15" placeholder="Zip (required)" class="form-control">
</div>
</div>
</div>
Tax html:
<div id="changeTaxInputs">
<div class="form-group">
<div class="col-md-3">
<input id="taxID" name="taxID" type="text" maxlength="15" placeholder="Tax ID: (required)" class="form-control">
</div>
</div>
</div>
<hr>
<div class="col-xs-12">
<div class="form-group">
<label for="comment">Notes:</label>
<textarea class="form-control" rows="5" maxlength="255" name="comment" id="comment"></textarea>
</div>
</div>
<div class="col-xs-12">
<br>
</div>
Javascript:
var form = $('#myForm'),
checkbox = $('#changeShip'),
chShipBlock = $('#changeShipInputs');
chShipBlock.hide();
checkbox.on('click', function() {
if($(this).is(':checked')) {
chShipBlock.show();
chShipBlock.find('input').attr('required', true);
} else {
chShipBlock.hide();
chShipBlock.find('input').attr('required', false);
}
});
var form = $('#myForm'),
checkbox = $('#changeTax'),
chTaxBlock = $('#changeTaxInputs');
chTaxBlock.hide();
checkbox.on('click', function() {
if($(this).is(':checked')) {
chTaxBlock.show();
chTaxBlock.find('input').attr('required', true);
} else {
chTaxBlock.hide();
chTaxBlock.find('input').attr('required', false);
}
});
The first script is the shipping, the second is the tax.
can anyone tell me why JUST THE TAX BOX wont work on mobile, yet the shipping box works fine on mobile. They both work great on desktop.
Since it's working on JSFiddle correctly, my guess is that maybe a containing div or element is not closed correctly. Compare the containers of the changeShipInputs and changeTaxInputs closely and report back.