I am trying to change the default value from 5 --> 25. But cannot seem to get the syntax correct.
I would be grateful for any suggestions.
<select class="ui-pg-selbox ui-widget-content ui-corner-all" role="listbox" title="Records per Page">
<option role="option" value="5" selected="selected">5</option>
<option role="option" value="10">10</option>
<option role="option" value="25">25</option>
<option role="option" value="50">50</option>
<option role="option" value="100">100</option></select>
I know this isn't quite right,...
select.ui-pg-selbox.ui-widget-content.ui-corner-all {
selected:15
}
Related
In Lighthouse report I have an error: "ARIA items do not have accessible names" and it looks like div.ss-list is the problem (because it has role="listbox" attribute which fails aria-input-field-name audit). Unfortunately my slimselect doesn't copy custom attributes from select when initialized, for example aria-label="category".
Is there a way to copy/add custom attributes to slimselect div.ss-list element when initializing (without injection html after initializing) or do you have any other good solutions to that issue?
Here is sample code from devtools with already created slimselect:
<select name="category" aria-label="Category" class="search__select" tabindex="-1" data-ssid="ss-59594" aria-hidden="true" style="display: none;">
<option value="">All</option>
<option value="5576">Category 1</option>
<option value="10">Category 2</option>
<option value="82">Category 3</option>
<option value="199">Category 4</option>
</select>
<div class="ss-59594 ss-main search__select" style="">
<div class="ss-single-selected ss-open-below">
<span class="placeholder">All</span>
<span class="ss-deselect ss-hide">x</span>
<span class="ss-arrow"><span class="arrow-up"></span></span>
</div>
<div class="ss-content ss-open">
<div class="ss-search">
<input type="search" placeholder="Search" tabindex="0" aria-label="Search" autocapitalize="off" autocomplete="off" autocorrect="off">
</div>
<div class="ss-list" role="listbox">
<div class="ss-option ss-disabled ss-option-selected" role="option" data-id="97962314">All</div>
<div class="ss-option" role="option" data-id="79478522">Category 1</div>
<div class="ss-option" role="option" data-id="32989768">Category 2</div>
<div class="ss-option" role="option" data-id="53607703">Category 3</div>
<div class="ss-option" role="option" data-id="31214879">Category 4</div>
</div>
</div>
</div>
I have a Date of Birth field in my application which does not have either of the usual identification elements like id, value, name etc. i am not sure how to identify these DOB elements and change the values of those. Could anyone help me on this.
Here's a full div portion of the HTML from the page where the DOB section is identified.
<div ng-class="{invalid:(fieldVM.$dirty || formController.$submitted) && fieldVM.$invalid}" class="jl-form-control ng-scope bday-select-input" label="Date of Birth" jl-validation-field="dateOfBirth">
<!-- ngIf: helperText -->
<div class="jl-label-wrapper">
<label for="joltForm-profileForm-dateOfBirth-input" id="joltForm-profileForm-dateOfBirth-labelStandard" ng-bind-html="label" class="jl-label ng-binding">Date of Birth</label>
<span class="jl-optional-text">(optional)</span>
</div>
<span class="error-icon"/>
<div class="inner-icon">
<input type="hidden" name="dateOfBirth" aria-required="true" required="required" id="joltForm-profileForm-dateOfBirth-input" ng-model="model.data.dateOfBirth" class="ng-pristine ng-untouched ng-invalid ng-invalid-required ng-invalid-sync-validate" tabindex="0" aria-invalid="true">
<div class="jl-layout-33-33-33">
<select jl-model="month" jl-change="checkChange(day, month, year)" jl-options="item for item in months" class="jl-select item jl-in ng-pristine ng-valid ng-touched" ng-options="item for item in months" ng-model="month" ng-change="checkChange(day, month, year)" tabindex="0" aria-invalid="false" style="transition-delay: -9999s;">
<option value="" class="" selected="selected">MM</option>
<option value="string:01" label="01">01</option>
<option value="string:02" label="02">02</option>
<option value="string:03" label="03">03</option>
<option value="string:04" label="04">04</option>
<option value="string:05" label="05">05</option>
<option value="string:06" label="06">06</option>
<option value="string:07" label="07">07</option>
<option value="string:08" label="08">08</option>
<option value="string:09" label="09">09</option>
<option value="number:10" label="10">10</option>
<option value="number:11" label="11">11</option>
<option value="number:12" label="12">12</option>
</select>
<select jl-model="day" jl-change="checkChange(day, month, year)" jl-options="item for item in days" class="jl-select item jl-in ng-pristine ng-untouched ng-valid" ng-options="item for item in days" ng-model="day" ng-change="checkChange(day, month, year)" tabindex="0" aria-invalid="false">
<option value="" class="" selected="selected">DD</option>
<option value="string:01" label="01">01</option>
<option value="string:02" label="02">02</option>
<option value="string:03" label="03">03</option>
<option value="string:04" label="04">04</option>
<option value="string:05" label="05">05</option>
<option value="string:06" label="06">06</option>
<option value="string:07" label="07">07</option>
<option value="string:08" label="08">08</option>
<option value="string:09" label="09">09</option>
<option value="number:10" label="10">10</option>
<option value="number:11" label="11">11</option>
<option value="number:12" label="12">12</option>
...
...
...
<option value="number:30" label="30">30</option>
<option value="number:31" label="31">31</option>
</select>
<select jl-model="year" jl-change="checkChange(day, month, year)" jl-options="item for item in years" class="jl-select item jl-in ng-pristine ng-untouched ng-valid" ng-options="item for item in years" ng-model="year" ng-change="checkChange(day, month, year)" tooltip="Required" tooltip-trigger="focus" tooltip-enable="(fieldVM.$dirty || formController.$submitted) && fieldVM.$invalid" tooltip-class="errorClass" tooltip-append-to-body="true" tabindex="0" aria-invalid="false">
<option value="" class="" selected="selected">YYYY</option>
<option value="number:1915" label="1915">1915</option>
<option value="number:1916" label="1916">1916</option>
...
...
...
<option value="number:2013" label="2013">2013</option>
<option value="number:2014" label="2014">2014</option>
<option value="number:2015" label="2015">2015</option>
</select>
</div>
</div>
<div class="help-block ng-binding"/>
</div>
Its an AngularJS web application.
The select elements look identifiable based on their ng-model attribute - which is "month", "day" and "year". You can locate elements using the ng-* attributes by using a CSS (or XPath) locator:
browser.select(css: 'select[ng-model="month"]').select('07')
browser.select(css: 'select[ng-model="day"]').select('31')
browser.select(css: 'select[ng-model="year"]').select('2014')
If you tend to use the ng-model a lot for identification, you should add it to the list of validate locators. This will save you from having to write CSS/XPath locators.
require 'watir-webdriver'
Watir::HTMLElement.attributes << :ng_model
browser.select(ng_model: 'month').select('07')
browser.select(ng_model: 'day').select('31')
browser.select(ng_model: 'year').select('2014')
Note that the above suggestions assume that there is only one set of month/day/year fields on the page. If there are multiple, you will need to be more specific in the locators. In this case, it looks like the encompassing div element has an identifiable class - "bday-select-input":
birthday = browser.div(class: 'bday-select-input')
birthday.select(css: 'select[ng-model="month"]').select('07')
birthday.select(css: 'select[ng-model="day"]').select('31')
birthday.select(css: 'select[ng-model="year"]').select('2014')
I have this code
<div th:class="form-group">
<td><label class="control-label leftMargin10 rightMargin10" scope="col" th:text="#{insertHours.hhFrom}">Attivita'</label></td>
<td><select class="form-control" th:field="*{hhFrom}">
<option th:each="i : ${#numbers.sequence(0, 23)}" th:value="${i}" th:text="${i}" th:selected="${ i==9 } ">Options</option>
</select>
</td>
</div>
When I try to add a condition in th:selected it doesn't work.
I have also replaced with this code:
th:attr="${i==9}? selected=selected: '' "
but the result is the same.
The HTML
<select class="form-control" id="hhFrom" name="hhFrom">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
Thanks in advance to answers
You cannot use th:field along with th:selected.
If you replace th:field with name=someMeaningfullName the code will work just fine.
Check out this thread on the Thymeleaf forum for more information
Another hack that, is pretty simple and works, is to close the select tag: <select ... />
Please note /> at the end of first line:
<select th:field="*{percentage}" />
<option th:each="i : ${#numbers.sequence(0, 100)}" th:value="${i}" th:text="${i}" th:selected="${i==75}"></option>
</select>
Renders as:
<select id="percentage" name="percentage" />
<option value="0">0</option>
<option value="1">1</option>
...
<option value="74">74</option>
<option value="75" selected="selected">75</option>
<option value="76">76</option>
...
<option value="100">100</option>
</select>
Both web browser and Thymeleaf will handle this fine.
I used Thymeleaf v.3.0.9.RELEASE
Also I found out that if you put <div> tag around option fields, selected="selected" will also work. e.g
<select th:field="*{name}">
<div>
<option disabled="true" selected="selected" value="">Select</option>
<option value="1">first</option>
<option value="2">second</option>
</div>
</select>
Iam new to selenium and i want to enter value in dropdown list and tried with various methods and searched in web and i have seen
many posts in the STACKOVER flow nothing worked for me
this is the HTML code
i tried with
1) x=Select(driver.find_element_by_id("expiry-date-month"))
x.select_by_value("4")
2) element = driver.find_element_by_id('expiry-date-month')
for option in element.find_elements_by_tag_name('option'):
if option.text=='4':
option.click()
i want to Select the Month check box values when iam trying getting error message as "Element is not currently visible and so may not be interacted with" please show me a solution for this
HTML code
<form id="form-credit-card" method="get" enctype="application/x-www-form-urlencoded" novalidate="novalidate">
<div class="row-fluid"/>
<div class="row-fluid">
<div class="row-fluid card-wrap">
<div class="row-fluid name-wrap">
<div class="row-fluid dob-wrap hide" style="opacity: 0;">
<div class="row-fluid maestro-wrap hide" style="opacity: 0;">
<div class="row-fluid">
<div class="span3 iframe expiry-wrap">
<label for="expiry-date">Expiration date</label>
<select id="expiry-date-month" class="expirydatemonth selectBox" size="1" name="expirydatemonth" style="display: none;">
<option value="">Month</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<a class="selectBox expirydatemonth selectBox-dropdown selectBox-active" style="width: 30px; display: inline-block; -moz-user-select: none;" title="" tabindex="0">
<span class="selectBox-label" style="width: 0px;">Month</span>
<span class="selectBox-arrow"/>
</a>
<span class="slash">/</span>
<select id="expiry-date-year" class="expirydateyear selectBox" size="1" name="expirydateyear" style="display: none;">
<a class="selectBox expirydateyear selectBox-dropdown" style="width: 30px; display: inline-block; -moz-user-select: none;" title="" tabindex="0">
</div>
As a workaround you need to enable display for that dropdown using JavaScript, as display is set to 'none'.
Below code should work for you:
JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("document.getElementById('expiry-date-month').style.display='block';");
//Then Select required value
x=Select(driver.find_element_by_id("expiry-date-month"))
x.select_by_value("4")
I'm having this problem with Magento onepage checkout:
I have a local environment with wamp and a test server.
Local environment is a clean installation + the template.
Test server is an installation + all templates that have been used before (I picked up from a previous developer)
Here the issue:
After implementing the new template on test, onepage checkout isn't showing any payment methods in frontend.
I have compared both installations files and I can't find the difference, but when I see the page source on the checkout page this is what I see:
Test Server (Payments aren't shown):
<form action="" id="co-payment-form">
<fieldset id="checkout-payment-method-load">
</fieldset>
</form>
When I see pagesource of my local, there's a lot more going on...
<form action="" id="co-payment-form">
<fieldset id="checkout-payment-method-load">
<dl class="sp-methods" id="checkout-payment-method-load">
<dt>
<input id="p_method_paypal_express" value="paypal_express" type="radio" name="payment[method]" title="PayPal Express Checkout" onclick="payment.switchMethod('paypal_express')" class="radio" />
<label for="p_method_paypal_express"> <!-- PayPal Logo -->
<img src="https://fpdbs.paypal.com/dynamicimageweb?cmd=_dynamic-image&buttontype=ecmark&locale=en_US" alt="Acceptance Mark" class="v-middle" />
What is PayPal?
<!-- PayPal Logo -->
</label>
</dt>
<dd>
<ul class="form-list" id="payment_form_paypal_express" style="display:none;">
<li class="form-alt">You will be redirected to the PayPal website.</li>
</ul>
</dd>
<dt>
<input id="p_method_authorizenet" value="authorizenet" type="radio" name="payment[method]" title="Credit Card (Authorize.net)" onclick="payment.switchMethod('authorizenet')" class="radio" />
<label for="p_method_authorizenet">Credit Card (Authorize.net) </label>
</dt>
<dd>
<ul class="form-list" id="payment_form_authorizenet" style="display:none;">
<li>
<label for="authorizenet_cc_type" class="required"><em>*</em>Credit Card Type</label>
<div class="input-box">
<select id="authorizenet_cc_type" name="payment[cc_type]" class="required-entry validate-cc-type-select">
<option value="">--Please Select--</option>
<option value="AE">American Express</option>
<option value="VI">Visa</option>
<option value="MC">MasterCard</option>
<option value="DI">Discover</option>
</select>
</div>
</li>
<li>
<label for="authorizenet_cc_number" class="required"><em>*</em>Credit Card Number</label>
<div class="input-box">
<input type="text" id="authorizenet_cc_number" name="payment[cc_number]" title="Credit Card Number" class="input-text validate-cc-number validate-cc-type" value="" />
</div>
</li>
<li id="authorizenet_cc_type_exp_div">
<label for="authorizenet_expiration" class="required"><em>*</em>Expiration Date</label>
<div class="input-box">
<div class="v-fix">
<select id="authorizenet_expiration" name="payment[cc_exp_month]" class="month validate-cc-exp required-entry">
<option value="" selected="selected">Month</option>
<option value="1">01 - January</option>
<option value="2">02 - February</option>
<option value="3">03 - March</option>
<option value="4">04 - April</option>
<option value="5">05 - May</option>
<option value="6">06 - June</option>
<option value="7">07 - July</option>
<option value="8">08 - August</option>
<option value="9">09 - September</option>
<option value="10">10 - October</option>
<option value="11">11 - November</option>
<option value="12">12 - December</option>
</select>
</div>
<div class="v-fix">
<select id="authorizenet_expiration_yr" name="payment[cc_exp_year]" class="year required-entry">
<option value="" selected="selected">Year</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
</div>
</div>
</li>
</ul>
</dd>
</dl>
<script type="text/javascript">
//<![CDATA[
payment.init();
//]]>
</script>
</fieldset>
</form>
Can someone PLEASE help me correct this? I have been stuck in this for the past few days and can't seem to at least get close to a solution :(
Thank you in advance for your time and sorry if the code looks messy.
I fixed it finally. It was a module that was hidden somewhere that was actually calling the payment methods. Since I change template the call was just empty and nothing was being showed since the extension was elsewhere in the installation.
Thank you guys for your help you did point me in the right direction to find this. Much appreciated.