I'm writing a program in Java that submits a form using WebDriver. There is a method findElement that allows you to select elements using class name, css selector, id, link text, name, partial link text, tag name, or xpath.
Here's the button that I want to select:
<div class="editable" style = "width:82px;float:right;margin-right:10px;">
<a href="#" onclick="$('order_form').submit(); return false;" class="btn">
<img class="btn" src="/myhuds/images/rd_images/btn_place_order.gif" alt="Place Order" width="82" height="17" border="0">
</a>
</div>
I can't use class name because there are multiple buttons on the page. Any ideas on how I might go about using the findElement method to select this button?
Thanks!
Try using this. You can add some browser plugin to get XPath.
driver.findElement(By.xpath("Your XPath"));
You can add an id to the button (may be to all buttons in your page) and find as -
driver.findElement(By.id("Your ID"));
Use CSS selectors. You can find a short explanation here W3, and couple examples here :Examples.
Therefore, try to use driver.findElement(By.cssSelector(...));
For your specific case you can search based on img #alt attribute using XPath
driver.findElement(By.xpath("//img[#alt='Place Order']")).click();
Step 1:
With the available DOM Structure Generate CSS Selector for the "Place Order"
Image
css=a[onclick*='order_form'] > img[src*='btn_place_order.gif']
Then Perform Click on "Place Order" Image.
driver.findElement(By.cssSelector("a[onclick*='order_form'] > img[src*='btn_place_order.gif']")).click();
Following example should help:
Html File:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h1 class="page-header">Login</h1>
<ul class="errors"></ul>
<div>
<form class="login-form" action="checkLogin.html" method="post">
<label for="username-field">Username1</label>
<input type="text" name="username" class="username-field" />
<br />
<label for="password-field">Password1</label>
<input type="password" name="password" class="password-field" />
<br />
<input type="submit" value="Submit" />
</form>
</div>
<div>
<form class="login-form" action="checkLogin.html" method="post">
<label for="username-field">Username2</label>
<input type="text" name="username" class="username-field" />
<br />
<label for="password-field">Password2</label>
<input type="password" name="password" class="password-field" />
<br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
To locate the input field for Password1 :
WebElement passwordField1: driver.findElement(By.cssSelector("div:nth-child(3) .password-field"));
To locate the input field for Password2 :
WebElement passwordField2: driver.findElement(By.cssSelector("div:nth-child(4) .password-field"));
Learn more about nth-child() selectors here.
Related
I'm trying to style input type file using Laravel -> Form::file:
<div class="col-md-3">
{{ Form::file('images[]', ["class"=>"required","multiple"=>true]) }}
</div>
It should look like that:
I've searcched in web for some solutions and there are possibilities with js but in some of them it's commented that it's not always working in all browsers.
What should be the right way to do that?
you can solve this through "label" tag.
<label for="form-file">Upload a file</label>
<input type="file" name="file" id="form-file" class="hidden" />
Just hide the input with css or move it somewhere -9999px to the left, and style the label element to whatever you desire. When user will click on label it will show the upload popup.
I hope this help.
EDIT:
Here is example.
With "Form::file" you can just add label and add ID parametr to your function.
Here's you can attach your file in laravel
<div class="row p-t-20">
<input id="file-upload" type="file" name="banner_url" value="{{old('banner_url')}}" />
{!! $errors->first('banner_url', '
<p class="text-warning errorBag">:message</p>') !!}
<label for="file-upload" id="file-drag">
<div id="file-cont">
Select a file to upload
<br />OR
<br />Drag a file into this box
</div>
<br />
<br /><span id="file-upload-btn" class="btn btn-success">Add a file</span>
</label>
<progress id="file-progress" value="0">
<span>0</span>%
</progress>
<output for="file-upload" id="messages"></output>
this is the easy and the stylish way to input your file in laravel
please share anyone who needs this thanks
Is there a way to style the "popup" when a field is invalid in AngularJS?
I have no idea WHERE this thing is styled? We also have Bootstrap loaded, not sure if it's there. Can't right-click to "find element" either.
That's the browser validation kicking in. Disable it as follows:
<form novalidate></form>
Edit: Example of a form using novalidate with AngularJS's validation:
<form name="form" class="css-form" novalidate>
Name:
<input type="text" ng-model="user.name" name="uName" required /><br />
E-mail:
<input type="email" ng-model="user.email" name="uEmail" required/><br />
<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
<span ng-show="form.uEmail.$error.required">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>
</form>
I believe it is no longer possible to style these popups:
Link
I'm having some problems with the bootstrap forms. For some reason they all get messed up.
This is what it should look like:
http://i.imgur.com/vjCZvwc.png
This is how it shows up on my page:
http://i.imgur.com/48qtLc7.png
As you can see, it makes the input box smaller and it places 'br' code behind every line. It also puts a random 'p' in it without any closing tag. (nowhere to be found on the page)
My input code:
<form>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>
The output code in the browser:
<form>
<fieldset>
<legend>Legend</legend>
<p>
<label>Label name</label><br />
<input type="text" placeholder="Type something…"><br />
<span class="help-block">Example block-level help text here.</span><br />
<label class="checkbox"><br />
<input type="checkbox"> Check me out<br />
</label><br />
<button type="submit" class="btn">Submit</button><br />
</fieldset>
</form>
So my question is; What could possibly be causing this and how do I fix it?
I'm using Bootstrap v2.3.2 as a theme on wordpress and followed this tutorial, so most of my code looks like it.
blog.teamtreehouse (dot) com/responsive-wordpress-bootstrap-theme-tutorial
Thank you for taking the time to read this. :)
This is not a problem with Bootstrap, but with your WordPress editor (or how you're using it).
You'll need to use a plain text editor or reconfigure what your editor does to HTML on save.
I'm building a super-simple sign-up form for a mini app and thought it'd be fun to use the browser's built-in HTML5 validations if I could - so I made the text input for the form a type="email" for funsies. Load it up in Chrome (27.0.1453.116) and attempted to enter an invalid email ("lksjdf" or something, you know), and as expected an error message pops up when I attempt to submit. But the unexpected part was the validation message is offset from the text box by about 60 pixels (give or take a few)(note that the email field is active, but the error message appears to point to the password field):
If I remove all styling and just leave the markup, the validation message position is improved, but about the amount of margin and padding that were on the form field:
When I repeat the process in Firefox, the validations show up correctly.
As we're narrowing down the issue, it appears that having an <h1> tag just before the form tag causes the problem to appear - if I remove the <h1> tag then the validation message lines up correctly.
Is this a bug in Chrome? Is there a way I can force Chrome's validation messages to line up with the input correctly? Why would another tag cause it to not line up?
Here's the code so you can test/verify:
<!DOCTYPE html>
<html>
<head>
<title>Sample App | Sign Up</title>
<!-- stripped out styles and js -->
</head>
<body>
<!-- stripped out other irrelevant markup -->
<h1>Sign Up</h1>
<form accept-charset="UTF-8" action="" id="new_user" method="post">
<label for="user_name">Name</label>
<input id="user_name" name="user[name]" size="30" type="text" />
<label for="user_email">Email</label>
<!-- This is the validation test field! -->
<input id="user_email" name="user[email]" size="30" type="email" />
<label for="user_password">Password</label>
<input id="user_password" name="user[password]" size="30" type="password" />
<label for="user_password_confirmation">Confirm Password</label>
<input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
<input class="btn btn-large btn-primary" name="commit" type="submit" value="Create my account" />
</form>
</body>
</html>
im confused, the w3c validation service seems to be saying that asp.net cannot legally render a hidden field inside a form tag on the page, have a look at this ...
http://validator.w3.org/check?uri=http%3a%2f%2fmotcombegarage%2eco%2euk%2f
from what i can tell it seems to be saying that the following code sample is invalid markup WTF !!!
<html>
<head> ... header stuff ... </head>
<body>
<form method="post" action="" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="ctl09_HiddenField" id="ctl09_HiddenField" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NzEyODQ1M2RkJPtW5VtaL7LPuSxnn1JM1yVnOeGAovb8b4b3KShHy4M=" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKt17cxAr+s9MgFAqjXzJsHz7KyzLpZjYtTK89blY7GgKAElK/5syvVNn4h7rVehcQ=" />
</div>
... other code ...
</form>
</body>
</html>
This presents 2 problems for me if the code is in fact invalid:
This code is generated by the .net framework for handling postbacks so editing it could be a problem
i have no idea what the valid context for a form field should be (lolz)
Is this a bug or have i done something wrong ???
EDIT:
As pointed out by Peter O below I added the missing div tag in my markup ... comparing this to the markup that the validator uses shows that this div whilst present in the markup is apparently not worth validating ... so that kinda changes the question to ... why is it ignoring that div ? ...
Seems a bit odd that you can't put an input tag inside a form tag directly though ... surely thats the point of a form tag, to contain input tags ??
The only way I've seemed to get rid of the message, following the code on your homepage, is to assign a value to the first hidden input
<div class="aspNetHidden">
<input type="hidden" name="ctl09_HiddenField" id="ctl09_HiddenField" value="toverton" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NzEyODQ1M2RkJPtW5VtaL7LPuSxnn1JM1yVnOeGAovb8b4b3KShHy4M=" />
</div>
In all liklihood, this is most likely a bug.
The INPUT elements should be placed within a DIV element, like this:
<form ... >
<div>
<input type="hidden" ... />
<input type="hidden" ... />
<input type="hidden" ... />
</div>
</form>