I am trying to input a certain text into the field 'payment__card-name', I have tried few webdriver code's but couldn't get through this issue,
This is the latest code i wrote, not sure what is going wrong in here, please help
//driver.findElement(By.xpath("//*div[#id='checkout-form-fieldset-payment']/fieldset/div[1]/div[2]/div/fieldset/div/div[1]/div[2]/input[#id='payment__card-name']")).sendKeys("add1");
Actual HTML code -
<body>
<div id="app-root">
<div class="">
<div class="c-navigation" role="banner">
<section class="app-checkout">
<section class="tickets-summary">
<div class="page-content page-content--mobile-full-width">
<div class="checkout-form">
<div class="app-checkout-form-feedback"/>
<form method="post" accept-charset="utf-8" id="checkout-form-passengers">
<form method="post" accept-charset="utf-8" id="checkout-form-contact-details">
<form method="post" accept-charset="utf-8" id="checkout-form-payment">
<div class="checkout-form-panel checkout-form-panel--no-padding app-payment" id="checkout-form-fieldset-payment">
<fieldset>
<legend class="checkout-form-panel--padding-fix checkout-form-panel__header h3">Payment</legend>
<div class="checkout-form-panel--padding-fix">
<div class="checkout-form-panel__col-from-medium-12 payment-switch__toggle">
<div>
<div class="payment-details payment__clearfix" id="checkout-form-fieldset-payment-details">
<fieldset>
<div class="">
<div class="payment__clearfix checkout-form-panel__col-from-small-6">
<div class="input__wrap">
<div class="input__wrap input__wrap--error">
<label for="payment__card-name">Name on card</label>
<input type="text" id="payment__card-name" name="payment__card-name" data-type="name" maxlength="50" value=""/>
<div class="input__feedback">Please enter the card holder's name exactly as it appears on the card</div>
</div>
</div>
Here is the xpath that you can use.
//div[#id='checkout-form-fieldset-payment']/fieldset//input[#id='payment__card-name']
Screenshot:
Related
I have written a google web app using materializecss. All works well on a laptop. I have designed it to be responsive, testing by reducing the width of the browser on my laptop and again, it workds well.
But, when I try it on an actual android phone using chrome, it is correctly reducing the number of columns, but I can barely read the text as it is soo small. It looks like the screen is laptop width, with each of the input fields taking the full width. When I click on any field, it goes maximum zoom to somewhere on the page and I have to scroll around to find the field I have clicked on, then zoom out a little. Sorry I can't explain any more, its wierd.
I have created a simple test by copying the 'Getting Started' code and 'Text Input' code from the materialize website and exactly the same thing happens.
There's not a lot in the form-JS, I have just been trying some Materialize form inits.
It looks fine when you run it in the code snippet on in a browser on a laptop, but when you try it on a phone it goes all wrong.
document.addEventListener('DOMContentLoaded', function() {
// M.updateTextFields();
M.AutoInit();
});
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12 l6">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s12 l6">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input disabled value="I am not editable" id="disabled" type="text" class="validate">
<label for="disabled">Disabled</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="col s12">
This is an inline input field:
<div class="input-field inline">
<input id="email_inline" type="email" class="validate">
<label for="email_inline">Email</label>
<span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
</div>
</div>
</div>
</form>
</div>
</div> <!-- Close Container -->
<!--JavaScript at end of body for optimized loading-->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
I'm not seeing the problem you describe when testing with the code you posted:
https://codepen.io/panchroma/pen/ExoegNJ
Maybe there's an issue related to this line
<?!= include("form-JS"); ?>
Are you able to post this form-js file as well?
Why is my regex not being triggered? The first error message "Please enter the longtitude" is displayed when nothing is entered. If I entered an obviously wrong value for "longtitude" the error message is not displayed.
<div class="row">
<div class="col span-1-of-3">
<label for="name">Longtitude</label>
</div>
<div class="col span-2-of-3">
<input type="text" ng-pattern="/^[-+]?(180(\.0+)?|((1[0-7]\d)|([1-9]?\d))(\.\d+)?)$/" ng-model="report.lon" name="lon" id="longtitude" placeholder="Enter the longtitude" required />
</div>
<div ng-messages="submitReport.lon.$error" ng-if="submitReport.lon.$dirty">
<div ng-message="required">Please enter the longtitude</div>
<div ng-message="lon">Your longtitude is invalid</div>
</div>
<div ng-show="submitReport.lon.$error.pattern" ng-if="submitReport.lon.$dirty">
<div ng-message="required">Please enter the longtitude</div>
<div ng-message="lon">Your longtitude is invalid</div>
</div>
</div>
It works for me: https://plnkr.co/edit/WPjGeylGESDexh7Q6UKJ?p=preview
Also please note your spelling for Longitude is not correct.
Edit
The problem in the code is that
<div ng-message="lon">Your longitude is invalid</div>
should be
<div ng-message="pattern">Your longitude is invalid</div>
Have html code like below
<form class="form-horizontal" name="myform">
<div class="modal-body" novalidate>
<div class="form-group" >
<label class="col-sm-2 control-label" for="input-username">Username (*)</label>
<div class="col-sm-10">
<input type="text" name="username" ng-pattern="/^[a-zA-Z0-9]{4,10}$/" placeholder="Username" id="input-username" class="form-control" data-ng-model="newuser.username">
<div class="help-block">Username must be 4-10 characters.</div>
</div>
</div>
</div>
</form>
using ng-pattern copy in an example but it not right work for me, when type in under 4 character, html css not highlight red border, and when type in 4 character css not highlitght green border. I don't know why I can not show right css
Patters arent usually used for checking length... You can do ng-minlength and ng-maxlength for that like this:
<form class="form-horizontal" name="myform">
<div class="modal-body" novalidate>
<div class="form-group" >
<label class="col-sm-2 control-label" for="input-username">Username (*)</label>
<div class="col-sm-10">
<input type="text" name="username" ng-minlength="4" ng-maxlength="10" ng-pattern="/^[a-zA-Z0-9]{4,10}$/" placeholder="Username" id="input-username" class="form-control" data-ng-model="newuser.username">
<div class="help-block" ng-if="myform.$invalid">Username must be 4-10 characters.</div>
</div>
</div>
</div>
</form>
I have an ng-repeat to iterate over form fields.
The problem is, if I have an invalid form I don't get any feedback. I don't see the span, nor do I see has-error get applied to the div.
I must be missing something simple, can anyone see what it is?
Here's the ng-repeat code:
<div ng-repeat="i in items">
<ng-form novalidate class="user-form" name="userForm">
<div class="form-group has-feedback" ng-class="{'has-error':userForm.userInput.$invalid}">
<label class="control-label">{[{ i.item }]}</label>
<input-field item="i"></input-field>
<span ng-show="userForm.userInput.$invalid">TEST</span>
</div>
</ng-form>
</div>
Which generates an entry like this:
<div ng-repeat="i in items">
<ng-form novalidate="" class="user-form" name="userForm">
<div class="form-group has-feedback" ng-class="{'has-error':userForm.userInput.$invalid}">
<label class="control-label">Username</label>
<input name="userInput" class="form-control" type="text" ng-model="item.answer" placeholder="Username" required>
<span ng-show="userForm.userInput.$invalid" class="ng-hide">TEST</span>
</div>
</ng-form>
</div>
You want create more than one "userForm"?
If not you can change it to
<ng-form novalidate class="user-form" name="userForm"> <div ng-repeat="i in items">
<div class="form-group has-feedback" ng-class="{'has-error':userForm.userInput.$invalid}">
<label class="control-label">{[{ i.item }]}</label>
<input-field item="i"></input-field>
<span ng-show="userForm.userInput.$invalid">TEST</span>
</div> </div>
</ng-form>
Hope it helps.
I've created a basic angular form and can't determine why it's not submitting.
http://contact-info.checkoutbiblebowl.com/
The form validation is valid and it still won't submit. I feel like I've overlooked something silly, but have looked at this over the last few days and can't figure out what it is. Any suggestions?
<form method='post' action='' name='form' novalidate ng-controller="myController">
<div class="row form">
<div class="form-inline">
<div class="form-row">
<label class="form-label" style='margin-top: 20px'>Name</label>
<div class="form-item">
<div style="float: left">
First<br/>
<input type="text" ng-model="firstName" name="firstName" class="small" style="width: 200px" maxlength="32" required>
<div ng-cloak ng-show="form.firstName.$error.required" class="required">First name is required</div>
</div>
<div style="float: left; margin-left: 1em">
Last<br/>
<input type="text" ng-model="lastName" name="lastName" class="small" style="width: 200px" maxlength="32" required>
<div ng-cloak ng-show="form.lastName.$error.required" class="required">Last name is required</div>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="button-row">
<button ng-disabled="!form.$valid" type="submit" class="btn" ng-click="debug()">Submit</button>
</div>
</div>
</div>
</form>
My Controller:
<script type="text/javascript">
angular.module('contact', []).
controller('myController', function ($scope) {
$scope.debug = function () {
console.log($scope.form);
}
});
</script>
I think you just need to specify the action explicitly, not with an empty string otherwise angular will prevent the submission.
http://docs.angularjs.org/api/ng.directive:form
like so:
http://plnkr.co/edit/WtP03BFVyEsnOqf3n8a4?p=preview