Hi I'm fairly new to using Ruby/Capybara and RSPEC...I'm trying to select the month from a dropdown selectbox with value like the following
<legend> Expiration Date </legend>
</div>
<ul>
<li class="select input required"
id="cart_driver_attributes_credit_card_attributes_exp_month_input">
<select autocomplete="off" class="required select-box expiration-date"
id="cart_driver_attributes_credit_card_attributes_exp_month"
name="cart[driver_attributes][credit_card_attributes][exp_month]">
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
========================================================================
I'm using the following to select the month
select "August", :from => "select"
I tried several ways to select a month, but I keep getting Capybara::ElementNotFound:
The :from option accepts id, name or label of the select (documentation). So in your case:
select "August", :from => "cart_driver_attributes_credit_card_attributes_exp_month"
Related
I want to create select function on my laravel project , this Select is select2 multiple like on this doc link . on bulma documentation this select multiple is not have function javascript code . only like this :
<div class="select is-multiple">
<select multiple size="8">
<option value="Argentina">Argentina</option>
<option value="Bolivia">Bolivia</option>
<option value="Brazil">Brazil</option>
<option value="Chile">Chile</option>
<option value="Colombia">Colombia</option>
<option value="Ecuador">Ecuador</option>
<option value="Guyana">Guyana</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Suriname">Suriname</option>
<option value="Uruguay">Uruguay</option>
<option value="Venezuela">Venezuela</option>
</select>
</div>
can someone help how to create this select2 so we can add more than 1 value on this field select ?
I want to retrieve max value for each combobox present in a web page, with xpath.
Here is a sample HTML containing several combobox with choices:
<label> <span class="invisible_spoken">Some choice</span>
<select class="select_class">
<option value="0">0</option>
<option value="1" >
1
</option>
<option value="2" >
2
</option>
</select>
</label>
<label> <span class="invisible_spoken">Some choice</span>
<select class="select_class">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</label>
<label> <span class="invisible_spoken">Some choice</span>
<select class="select_class">
<option value="0">0</option>
<option value="1">1</option>
</select>
</label
What I would want to retrieve is the maximum value of each combobox, sample output :
2, 3, 1
I've tried with an expression like :
//table[#id="rooms"]//select[contains(#class, "b_selectbox")]/option[not(//table[#id="rooms"]//select[contains(#class, "b_selectbox")]/option/#value > #value)]/#value
But it is returning just combobox max values of the maximum combo value, in the sample case just 3 that is the highest, in the case there will be two combobox with maximum values equals to 3, then it will return those 2 ...
Xpath Selector for Options with highest value.
//label/select[#class="select_class123"]/option[not(../option/#value > #value)]
o/p: Option elements with highest values.
(//label/select[#class="select_class"]/option[not(../option/#value > #value)])/#value
o/p: 2, 3, 1
Test XML XPath online:
<select class="select_class">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select class="select_class">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="select_class">
<option value="0">0</option>
<option value="1">1</option>
</select>
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')
In Cannot click html element with watir, i was trying to click an element which gives me the row below:
I am not able to find the three dropdown lists which you see in the image above.
How do I do it ? Each time, the id of the dropdown elements changes.
For example, the middle one html code is:
<td>
<select id="filtersJob6_intrinsic_enumOperator" name="filtersJob6_intrinsic_enumOperator" onchange="if(top.document.getElementById('filtersJob6_intrinsic_enumOperator').value=='isNull'||top.document.getElementById('filtersJob6_intrinsic_enumOperator').value=='isNotNull'){top.document.getElementById('filtersJob6_intrinsic_operand1Container').style.display='none';}else{top.document.getElementById('filtersJob6_intrinsic_operand1Container').style.display='inline';}">
<option value="equals" selected="selected">equals</option>
<option value="notEqual">not equals</option>
<option value="isNull">is not set</option>
<option value="isNotNull">is set</option>
</select>
</td>
The id id="filtersJob6_intrinsic_enumOperator" can have any number 4,7,6,5 etc.
How do I make the watir find this element ?
EDIT -
Here is the code for the first dropdown:
<select id="filtersJob3_intrinsic_name" name="filtersJob3_intrinsic_name" onchange="var shown=0;top.document.getElementById('filtersJob3_intrinsic_operator').style.display='none';top.document.getElementById('filtersJob3_intrinsic_operand1').style.display='none';top.document.getElementById('filtersJob3_intrinsic_operand2').style.display='none';top.document.getElementById('filtersJob3_intrinsic_dateOperator').style.display='none';top.document.getElementById('filtersJob3_intrinsic_enumOperator').style.display='none';top.document.getElementById('filtersJob3_intrinsic_listOperator').style.display='none';top.document.getElementById('filtersJob3_intrinsic_uuidOperator').style.display='none';top.document.getElementById('filtersJob3_intrinsic_datehelp1').style.display='none';top.document.getElementById('filtersJob3_intrinsic_datehelp2').style.display='none';top.document.getElementById('filtersJob3_intrinsic_operand1abortStatus').style.display='none';top.document.getElementById('filtersJob3_intrinsic_operand1outcome').style.display='none';top.document.getElementById('filtersJob3_intrinsic_operand1priority').style.display='none';top.document.getElementById('filtersJob3_intrinsic_operand1status').style.display='none';top.document.getElementById('filtersJob3_intrinsic_operand1errorCode').style.display='none';if(top.document.getElementById('filtersJob3_intrinsic_name').value=='abortStatus'){shown=1;top.document.getElementById('filtersJob3_intrinsic_enumOperator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand1abortStatus').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2Container').style.display='none';}if(top.document.getElementById('filtersJob3_intrinsic_name').value=='outcome'){shown=1;top.document.getElementById('filtersJob3_intrinsic_enumOperator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand1outcome').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2Container').style.display='none';}if(top.document.getElementById('filtersJob3_intrinsic_name').value=='priority'){shown=1;top.document.getElementById('filtersJob3_intrinsic_enumOperator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand1priority').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2Container').style.display='none';}if(top.document.getElementById('filtersJob3_intrinsic_name').value=='status'){shown=1;top.document.getElementById('filtersJob3_intrinsic_enumOperator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand1status').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2Container').style.display='none';}if(top.document.getElementById('filtersJob3_intrinsic_name').value=='errorCode'){shown=1;top.document.getElementById('filtersJob3_intrinsic_enumOperator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand1errorCode').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2Container').style.display='none';}if(top.document.getElementById('filtersJob3_intrinsic_name').value=='jobId'){shown=1;top.document.getElementById('filtersJob3_intrinsic_uuidOperator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand1').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2Container').style.display='none';}if(top.document.getElementById('filtersJob3_intrinsic_name').value=='createTime'){shown=1;top.document.getElementById('filtersJob3_intrinsic_dateOperator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand1').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_datehelp1').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_datehelp2').style.display='inline';}if(top.document.getElementById('filtersJob3_intrinsic_name').value=='finish'){shown=1;top.document.getElementById('filtersJob3_intrinsic_dateOperator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand1').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_datehelp1').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_datehelp2').style.display='inline';}if(top.document.getElementById('filtersJob3_intrinsic_name').value=='modifyTime'){shown=1;top.document.getElementById('filtersJob3_intrinsic_dateOperator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand1').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_datehelp1').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_datehelp2').style.display='inline';}if(top.document.getElementById('filtersJob3_intrinsic_name').value=='start'){shown=1;top.document.getElementById('filtersJob3_intrinsic_dateOperator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand1').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_datehelp1').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_datehelp2').style.display='inline';}if(!shown){top.document.getElementById('filtersJob3_intrinsic_operator').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operator').onchange();top.document.getElementById('filtersJob3_intrinsic_operand1').style.display='inline';top.document.getElementById('filtersJob3_intrinsic_operand2').style.display='inline';}">
<option value="abortStatus" selected="selected">Abort Status</option>
<option value="abortedBy">Aborted By</option>
<option value="createTime">Create Time</option>
<option value="directoryName">Directory Name</option>
<option value="elapsedTime">Elapsed Time</option>
<option value="errorCode">Error Code</option>
<option value="errorMessage">Error Message</option>
<option value="finish">Finish Date & Time</option>
<option value="credentialName">Impersonation Credential</option>
<option value="jobId">Job ID</option>
<option value="jobName">Job Name</option>
<option value="lastModifiedBy">Last Modified By</option>
<option value="launchedByUser">Launched By User</option>
<option value="licenseWaitTime">License Wait Time</option>
<option value="liveProcedure">Live Procedure</option>
<option value="liveSchedule">Live Schedule</option>
<option value="modifyTime">Modify Time</option>
<option value="outcome">Outcome</option>
<option value="owner">Owner</option>
<option value="priority">Priority</option>
<option value="procedureName">Procedure Name</option>
<option value="projectName">Project Name</option>
<option value="resourceWaitTime">Resource Wait Time</option>
<option value="runAsUser">Run As User</option>
<option value="scheduleName">Schedule Name</option>
<option value="start">Start Date & Time</option>
<option value="stateName">State Name</option>
<option value="status">Status</option>
<option value="totalWaitTime">Total Wait Time</option>
<option value="workspaceWaitTime">Workspace Wait Time</option>
</select>
You can use a regular expression in your locator:
browser.select_list(:id => /filtersJob\d+_intrinsic_enumOperator/).select value_to_select
In this example, the regular expression is denoted by opening and closing forward slashes, and the digit within the original string is replaced with \d+, which means "one or more digits".
EDIT:
Given this minimal HTML snippet:
<select id="filtersJob6_intrinsic_enumOperator">
<option value="isNull">is not set</option>
<option value="isNotNull">is set</option>
</select>
Use select to choose on option based on text:
b.select_list(:id => /filtersJob\d+_intrinsic_enumOperator/).select 'is set'
Use select_value to choose an option based on the value attribute:
b.select_list(:id => /filtersJob\d+_intrinsic_enumOperator/).select_value 'isNotNull'
I am trying to use capybara to target a value within a dropdown menu that lives within an iframe. Here is the HTML for the dropdown that I am trying to select:
<select class="colored required" aria-required="true" id="birthdate-month" name="birthdate-month" aria-label="Birth Month">
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
Here is the step definition I have written to try and target that dropdown menu and select an option within it:
find('#birthdate-month').find(:xpath, 'option[06]').select_option
When I run this, I get:
'Unable to find css "#birthdate-month" (Capybara::ElementNotFound)'.
Any ideas on what I'm doing wrong? Thanks!
EDIT:
I got it to work by inserting this into my step definition
browser = page.driver.browser
browser.switch_to.frame(iframe_name)
step(step)
browser.switch_to.default_content