anyone have the solution for below case ?
<el-input v-model="contactNo" v-mask="'## ### #####'" masked="true" /> // this is valid
I got the error, because v-mask directive requires 1 input, found 2
<el-input placeholder="enter phone number" v-model="contactNo" class="input-with-select">
<el-select v-model="select" slot="prepend" placeholder="select">
<el-option label="restaurant phone" value="1"></el-option>
<el-option label="order phone" value="2"></el-option>
<el-option label="personal phone" value="3"></el-option>
</el-select>
You need to remove apostrophes from v-mask value or bind prop with ::
Option 1:
v-mask="## ### #####"
Option 2:
:v-mask="'## ### #####'"
Related
I'm new to protractor and need to know how can i get the text i.e. Connections in the below code block. I need to click this "Connections". Anyhelp would be really appreciated. Thanks in advance
<md-option ng-repeat="worksite in vmSplashController.worksites track by $index" id="option_worksite_TRANSFER" ng-value="worksite" tabindex="0" class="ng-scope" role="option" aria-selected="false" value="[object Object]">
<div class="md-text ng-binding">
Connections
</div>
</md-option>
Full code
<md-dialog ng-cloak aria-span="" id="splashDialog" class="asui-popup-container splashContainer">
<form name="splash">
<md-dialog-content class="agentDetails" flex>
</md-dialog-content>
<md-dialog-content class="agentOptions" flex layout="row">
<md-input-container class="md-input-has-placeholder" id="nav_worksite" ng-if="vmSplashController.worksites.length >= 1" flex="50" layout="column">
<label class="select-lable">Worksite</label>
<md-select md-no-ink name="nav_worksite" required ng-model="vmSplashController.worksites.selected" ng-model-options="{trackBy: '$value.locationCode'}" aria-label="Select Worksite" md-container-class="md-select-custom nav-worksite-selectbox" ng-change="vmSplashController.onWorksiteChange(vmSplashController.worksites.selected)">
<md-option ng-repeat="worksite in vmSplashController.worksites track by $index" id="option_worksite_{{worksite.locationCode}}" ng-value="worksite">
{{**Here that Div is being created i.e. Connections along with other two options**}}
</md-option>
</md-select>
</md-input-container>
</md-dialog-content>
<md-dialog-actions layout="row">
<md-button md-no-ink class="md-primary nobg-btn" ng-click="vmSplashController.onConfirm()" ng-disabled="splash.$invalid">
CONFIRM
</md-button>
</md-dialog-actions>
</form>
</md-dialog>
I treid this
element(by.cssContainingText('.option_worksite_TRANSFER > div.md-text', 'Connections')).click();
but getting the below error.
Message:
Failed: No element found using locator: by.cssContainingText(".option_worksite_TRANSFER > div.md-text", "Connections")
First - I'm a bit confused. In example you are trying to select class option_worksite_TRANSFER, but in error message it has an id.
If you are trying to select value from dropdown, try this solution:
https://stackoverflow.com/a/39047319/6331748
Try this using xpath:
element(by.xpath("//div[text()='Connections']")).click();
Try using the below code:
element(by.cssContainingText('[id^="option_worksite"] > div.md-text', 'Connections')).click();
Adding waits:
var EC = protractor.ExpectedConditions;
var ele = element(by.cssContainingText('[id^="option_worksite"] > div.md-text', 'Connections'));
browser.wait(EC.visibilityOf(ele), 5000).then(function(){
ele.click();
});
I am using contact form 7 for a number of forms on my site.
I am using almost identical code for two forms.
The problem is, on one form, i am missing 'required field' messages, loading animation on send and the success message.
However, my other forms are working perfectly.
The not working properly form can be found here (just click on any button):
http://trailerbins2u.com.au/
The Code for this form is:
<div class="thrive-col left-col">
[text* your-name placeholder "Name*"][text your-company placeholder "Company"]</div>
<div class="thrive-col right-col">
[email* your-email placeholder "Email*"]
[tel* your-phone placeholder "Phone Number*"]</div>
[text* your-address placeholder "Drop Off Address*"]</div>
[date* your-drop placeholder "Trailer Drop Off Date*"]</div>
[text* your-time placeholder "Preferred Time*"]
[select* your-trailer "Select Trailer Size*" "4 Cubic Metre Lite" "4 Cubic Metre" "5 Cubic Metre" "6 Cubic Metre"]
<div class="thrive-col left-col"><label>Do You Have Household Rubbish?</label>
[checkbox* your-household-rubbish "Household Junk" "Furniture & Furnishings" "Appliances & Whitegoods" "Paper & Stationary" "Office Waste & E-waste" "Rugs & Flooring" "Packaging Waste" "Green Waste" "Mattress" "None of the Above"]</div>
<div class="thrive-col right-col"><label>Do you have Construction Waste?</label>
[checkbox* nl default:10 your-construction-rubbish "Plasterboard (Gyprock)" "Timber & Framing" "Joinery & Cabinets" "Timber Flooring" "Carpet & Underlay" "Packaging Waste" "Builders Rubble" "Kitchen Demolition" "Bathroom Demolition" "None of the Above"]</div>
[textarea your-message placeholder "Your Message"]
[submit "Send"]
My other, perfectly working form can be found here (again, click on any button):
http://trailerbins2u.com.au/rubbish-removal-sydney/
And the code:
<div class="thrive-col left-col">
[text* your-name placeholder "Name*"] [text your-company placeholder "Company"]</div>
<div class="thrive-col right-col">[email* your-email placeholder "Email*"]
[tel* your-phone placeholder "Phone Number*"]</div>
[date* your-drop placeholder "Date Removal Required"]
[text* your-time placeholder "Time*"]
[text* your-address placeholder "Address*"]
<div class="thrive-col left-col"><label>Do You Have Household Rubbish?</label>
[checkbox* your-household-rubbish "Household Junk" "Furniture & Furnishings" "Appliances & Whitegoods" "Rugs & Flooring" "Packaging Waste" "Green Waste" "Mattress" "None of the Above"]</div>
<div class="thrive-col right-col"><label>Do you have Construction Rubbish?</label>
[checkbox* your-construction-rubbish "Plasterboard (Gyprock)" "Timber & Framing" "Joinery & Cabinets" "Timber Flooring" "Carpet & Underlay" "Packaging Waste" "Builders Rubble" "Kitchen Demolition" "Bathroom Demolition" "None of the Above"]</div>
[textarea your-message placeholder "Your Message"]
[submit "Send"]
So as you can see, the code is almost identical. Contact forms 7 is obviously working properly for the second form to send, and no css should be affecting it, as it should affect both.
Any ideas on what's gone wrong?
Thanks Everyone!
It may be due to an extra form tag placed before the short code.
i use a react-datepicker which i adjust to be compatible with redux form. My Datepicker component is like this:
const MyDatePicker = ({ input, meta: { touched, error } }) => (
<div>
<DatePicker
{...input} dateFormat="YYYY-MM-DD"
selected={input.value ? moment(input.value, 'YYYY-MM-DD') : null}
/>
{
touched && error &&
<span className="error">
{error}
</span>
}
</div>
);
By the way it does not show the validation messages when i trigger a validation.
When i enter a date in a date input like the screenshot above:
an error is shown multiple times (5789 to be more accurate). That has the impact of making my app slow when i use dates. I google it but i didn't find a proper solution. Do you have any idea how to handle this? The error is:
Uncaught Error: Error serializing unrecognized object Sun Mar 26 2017 00:00:00 GMT+0200
at b.rep (index.js:143)
at Object.com.cognitect.transit.impl.writer.marshal (transit.js:2912)
at Object.com.cognitect.transit.impl.writer.emitObjects (transit.js:2755)
at Object.com.cognitect.transit.impl.writer.emitArray (transit.js:2765)
at Object.com.cognitect.transit.impl.writer.marshal (transit.js:2930)
at Object.com.cognitect.transit.impl.writer.emitTaggedMap (transit.js:2892)
at Object.com.cognitect.transit.impl.writer.emitEncoded (transit.js:2909)
at Object.com.cognitect.transit.impl.writer.marshal (transit.js:2934)
at Object.com.cognitect.transit.impl.writer.emitObjects (transit.js:2755)
at Object.com.cognitect.transit.impl.writer.emitArray
Last but not least i use REDUX-FORM/IMMUTABLE
I am too getting same issue. My code look like.
<Container>
{label && <Label icon={icon}>{label}</Label>}
<DatePickerPure
onBlur={() => input.onBlur()}
// onChange={(val) => input.onChange(val ? val.toDate(val) : null)}
onChange={(val) => input.onChange(val ? moment(val) : null)}
selected={dateValue}
id={`field_${input.name}`}
placeholder={placeholder}
/>
<FieldError touched={touched} error={error} warning={warning} />
</Container>
In beginning date Filed was not picking correct date for the very 1st time. It was always picking 1 previous day. As soon as I use momnet(val), date field picking correct date but i m getting this error in my console.
If any body can help
<hs-details-item>
<hs-label>Location</hs-label>
<hs-value-block>
<hs>
<hs-text-box ng-class="{'disabled': isAmenityPosting }" class="required" input-control="{title:'Location', okCallback:setJobSite, value:jobSiteName,
autocomplete:{ values:getJobSiteList, reload: true }, ss:'location'}">
<i class="icon-room"></i><span hs-placeholder="Select Location" class="ng-binding"></span>
</hs-text-box>
</hs>
<hs>
<!-- ngIf: isBarcodeShow() --><hs-button ng-class="{'disabled': soCreating }" class="barcode-special-btn smaller ng-scope" ng-if="isBarcodeShow()" hs-gesture="{handler:startScan, param: onBarcodeScanCompleted}"><i class="icon-br-code"></i></hs-button><!-- end ngIf: isBarcodeShow() -->
</hs>
</hs-value-block>
</hs-details-item>
Scenario: click on “Location” field...
What would be the best way to come up with a command in Protractor to select "location" field from the above Snippet Code?
Can it be done by not using Xpath?
Multiple options here. A sort of a non-welcomed, but short and readable way, would be to use an XPath expression and check the preceding label:
var locationTextBox = element(by.xpath("//hs-label[. = 'Location']/following::hs-text-box"));
locationTextBox.click();
I have a form which is generated by simple form:
TL TR
<div class="form-group radio_buttons required user_register_temp_package">
<label class="radio_buttons required control-label">
<abbr title="zorunlu">
*
</abbr>
Paket
</label>
<label class="radio">
<input class="radio_buttons required" id="user_register_temp_attributes_domain_package_id_1" name="user[register_temp_attributes][domain_package_id]" type="radio" value="1">
Small
</label>
<label class="radio">
<input checked="checked" class="radio_buttons required" id="user_register_temp_attributes_domain_package_id_2" name="user[register_temp_attributes][domain_package_id]" type="radio" value="2">
Medium
</label>
<label class="radio">
<input class="radio_buttons required" id="user_register_temp_attributes_domain_package_id_3" name="user[register_temp_attributes][domain_package_id]" type="radio" value="3">
Large
</label>
</div>
TL TR
I have a simple spec like this:
# encoding: UTF-8
require 'spec_helper'
feature 'Register' do
background do
visit new_user_registration_path
end
scenario 'fill register form and register' do
# TL TR
choose('user_register_temp_attributes_domain_package_id_1')
# TL TR
end
end
My spec_helper.rb is
ENV['RAILS_ENV'] ||= 'test'
require File
.expand_path('../../config/environment', __FILE__)
require 'rspec/rails'
require 'rspec/autorun'
require 'capybara/rspec'
Capybara.javascript_driver = :webkit
Capybara.default_selector = :css
Dir[Rails.root.join('spec/support/**/*.rb')].each { |f| require f }
ActiveRecord::Migration.check_pending! if defined?(ActiveRecord::Migration)
RSpec.configure do |config|
# ## Mock Framework
#
# If you prefer to use mocha, flexmock or RR, uncomment the appropriate line:
#
# config.mock_with :mocha
# config.mock_with :flexmock
# config.mock_with :rr
# Remove this line if you're not using ActiveRecord or ActiveRecord fixtures
config.fixture_path = "#{::Rails.root}/spec/fixtures"
# If you're not using ActiveRecord, or you'd prefer not to run each of your
# examples within a transaction, remove the following line or assign false
# instead of true.
config.use_transactional_fixtures = true
# If true, the base class of anonymous controllers will be inferred
# automatically. This will be the default behavior in future versions of
# rspec-rails.
config.infer_base_class_for_anonymous_controllers = false
# Run specs in random order to surface order dependencies. If you find an
# order dependency and want to debug it, you can fix the order by providing
# the seed, which is printed after each run.
# --seed 1234
config.order = 'random'
# Capybara DSL
config.include Capybara::DSL
# Factory girl
config.include FactoryGirl::Syntax::Methods
end
The Capybara API for the choose method says:
"Find a radio button and mark it as checked. The radio button can be found via name, id or label text."
But when I run spec with choose('user_register_temp_attributes_domain_package_id_1'), I get
Capybara::ElementNotFound: Unable to find radio button "user_register_temp_attributes_domain_package_id_1"
I've tried code below but got Capybara::ElementNotFound: Unable to find css "user_register_temp_attributes_domain_package_id_1" error:
find('#user_register_temp_attributes_domain_package_id_1[value=1]').set(true)
It seems there is no problem with fill_in, check or click_button methods.
Regards.
Most likely underlying driver thinks that this radio button is invisible. By default Capybara finds only visible elements (as Capybara.ignore_hidden_elements is true by default) so it didn't find that element.
Try:
choose('user_register_temp_attributes_domain_package_id_1', visible: false)
You can improve error message by submitting a pull request to Capybara.