I'm editing a css style sheet to use as an override on a template that I have no access to. I am wondering if it is possible to use a ::before on a <select name="aaa"> element that has no class or id to isolate it. Basically trying to put a label/icon before the select menu to make things a bit clearer.
<div class="container">
<select name="selection1">...</select>
<select name="selection2">...</select>
</div>
I've tried too many variations to mention and been hunting about with no luck. So I presume it's not possible. But you never know.
<select> doesn't allow for pseudo ::before or ::after. You can use a javascript solution or wrap each individual in a div. Not the greatest solution, but hope it helps.
Related
<div class="summary-item">
<label >Price</label>
<div class="value">
0.99 GBP
</div>
</div>
<div class="summary-item">
<label >Other info</label>
<div class="value">
All languages
</div>
</div>
I am trying to get the "0.99 GBP" using an XPath expression, so far I have reached the label using this (note there is another class by the name summary-item, therefore I need to uniquely identify with the label name Price)
sel.xpath('//*/div[#class="summary-item"]/label[text()="Price"]').extract()
However, I am unable to get to the class, I tried using following-sibling, but I did not succeed, any help will be appreciated.
The existence of child nodes can be part of the predicate. Put the test for label into a predicate for the parent, either as a separate predicate (adding the target node as well):
//div[#class="summary-item"][label[text()="Price"]]/div[#class="value"]
or joined with and:
//div[#class="summary-item" and label[text()="Price"]]/div[#class="value"]
(Note you don’t need //*/div at the start.)
You could use following-sibling if you wanted, it would look like this:
//div[#class="summary-item"]/label[text()="Price"]/following-sibling::div[#class="value"]
(here the label div isn’t part of the predicate).
One more thing to be aware of, using XPath to select HTML classes doesn’t work the same as using CSS – XPath will only match the exact string whereas CSS matches even if the element is in more than one class. In this case it works out okay but you should watch out for it. Search StackOverflow if it will be an issue, there are a few answers descibing it.
All of the elements are dynamic. I can see only Placeholder which is unique from the following html:-
<input
id="ext-gen1617"
type="text"
size="20"
class="x-form-field x-form-text x-form-focus"
autocomplete="off"
aria-invalid="false"
placeholder="Gender"
data-errorqtip=""
role="textbox"
aria-describedby="combobox-1166-errorEl"
aria-required="true"
style="width: 78px;"
/>
I need to get the value displayed in
placeholder="Gender".
I tried using
//input[#placeholder='Gender']
But my webdriver script failed to identify it.
Can anyone please help me out with possible solution to it?
String s=driver.findElement(By.xpath("//input[#placeholder='Gender']")).getAttribute("placeholder");
System.out.println(s);
To get an attribute for a filed, you can use the .getAttribute() method.
I assume you are dealing with (front end)script generated web elements, then you must need to embrace lean way of thinking. Don't try to pull out a web element by it's property alone. If you are not getting them try to build a xpath from its parent or siblings.
say, the HTML goes like this,
<div id="somestatic id">
<div id="xyz">
<input name="dynamic one"/>
</div>
</div>
Then you can build a xpath as ,
//*[#id='staticID']/div/input
for the HTML,
<div id="staticID"></div>
<input name="dynamic one"/>
the xpath is ,
//*[#id='staticID']/following-sibling::input
similarly there are n number of option available. Give them a try
Try
driver.findElement(
By.cssSelector("input[id*='ext-gen']")
).getAttribute("placeholder")
Let me know is the above statement is working or not.
The best way is to find the element with CSS selector in this case -
input[placeholder='Gender'], which can easily find the element.
Considering this example markup (from http://www.ng-newsletter.com/posts/validations.html):
<div class="row">
<div class="large-12 columns">
<label>Your name</label>
<input type="text"
placeholder="Name"
name="inputNameAttributeValue"
ng-model="signup.name"
ng-minlength=3
ng-maxlength=20 required />
<div class="error"
ng-show="signup_form.name.$dirty && signup_form.name.$invalid">
<small class="error"
ng-show="signup_form.name.$error.required">
Your name is required.
</small>
<small class="error"
ng-show="signup_form.name.$error.minlength">
Your name is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.name.$error.maxlength">
Your name cannot be longer than 20 characters
</small>
</div>
</div>
</div>
Is there a way to accomplish the same thing, but use JavaScript instead of custom Angular attributes?
For example, is there a way I can use JavaScript instead of these Angular html attributes: ng-model, ng-minlength, ng-maxlenth, ng-show?
EDIT:
Just to clarify, I'm looking for a solution that uses the Angular JavaScript API. I would like to have a separate JavaScript document (linked from my HTML document) that uses the Angular JavaScript API. For example, is there a way to specify ng-model for a particular form field using the Angular API instead of the custom Angular HTML attribute?
As I understand it, you want to add a directive (for example ng-model) from javascript, similar to how you would do it with jQuery. Short answer: Don't do it.
Longer Answer: It's probably technically possible, but it would violate the basic principles of AngularJS. Your controller should not touch the HTML at all, in fact any code which should directly manipulate the HTML should be placed in a directive. And that directive should be placed on the input directly in your HTML, which is exactly what you wanted to avoid.
If placing directives in your HTML is not practical for your project, then perhaps you should reconsider using AngularJS.
There's a rather long (and well written) answer here on Stackoverflow which explains "how to think in AngularJS", you might find that it's of interest: https://stackoverflow.com/a/15012542/179024
It would also be interesting to know why you want to do this? There is often an "Angular way" of doing things, but it can be different from what we are used to doing.
we have a template that uses this for the record line
<input type="${inputType}" name="${variableName}.code" id="${variable}.${vnum}.${answer.code}" class="checkbox" value="${answer.code}"
[#nested/] [#if (answer.textLength > 0) && scripting]onchange="showOtherBox( this, '${variable}.[#if descriptionHack]${variableNumber}[#else]${vnum}[/#if].${answer.code}.description' )"[/#if]
[#if showValues && (existing == answer.code)]checked="checked"[/#if]/>
On IE8 it renders as this
<span class="field">
<INPUT id=responses.8.L class=checkbox value=L type=checkbox name="responses['8'].answers['L'].code">
<LABEL for=responses.8.L>Award(s) for special accomplishment or performance related to activity participation (please list)</LABEL>
<TEXTAREA id=responses.8.L.description class=" visible" rows=4 cols=60 name="responses['8'].answers['L'].description"></TEXTAREA>
</span>
and on every other browser we tried, it renders as this
<span class="field">
<input type="checkbox" name="responses['8'].answers['L'].code" id="responses.8.L" class="checkbox" value="L" onchange="showOtherBox( this, 'responses.8.L.description' )">
<label for="responses.8.L">Award(s) for special accomplishment or performance related to activity participation (please list)</label>
<textarea rows="4" cols="60" name="responses['8'].answers['L'].description" id="responses.8.L.description" class="visible" classname="visible"></textarea>
</span>
The difference being that in the FTL script, the if statement
[#if (answer.textLength > 0) && scripting]
is true for everything except IE. In IE8 its false for some reason and therefore it does not put the OnChange javascript event on the input tag. Has anyone seen anything like this before? we are using Freemarker 2.3.9
Update, it kinda works if i turn compatibility mode on for IE8. but not exactly. when i do that, the onchange event doesn't fire until the check box loses focus. which is very different than everything else. Is there a quick way to fix this without too much trouble? i suppose i could put something in that says if ie8, insert onclick instead of onchange. that may work, but i would need an authorization from the client to fix it like that.
Since FreeMarker runs on the server only, it's not influenced by the browser directly. You should put something like <!-- answer.textLength = ${answer.textLength}, scripting = ${scripting?string} -->) before that [#if], so that you can see why exactly the condition fails, then find out where the value of the problematic variable is coming from, because usually it's not FreeMarker that sets it. (Bare-bone FreeMarker can't even detect the browser type.)
I'm trying to automate testing of the code... well, written without testing in mind (no IDs on many elements, and a lot of elements with the same class names). I would appreciate any help (questions are below the code):
<div id="author-taxonomies" class="menu-opened menu-hover-opened-inactive" onmouseover="styleMenuElement(this)" onmouseout="styleMenuElement(this)" onclick="toggleSFGroup(this)">Author</div>
<div id="author-taxonomies-div" class="opened">
<div id="top-level-menu" class="opened">
<div id="top-level-menu-item-1" class="as-master">
<div class="filter-label"> Name</div>
</div>
<div id="top-level-menu-item-1" class="as-slave"
style="top: 525px; left: 34px; z-index: 100; display: none;"> </div>
<div id="top-level-menu-item-2" class="as-master">
<div class="filter-label">Title</div>
</div>
<div id="top-level-menu-item-2" class="as-slave">
<div id="top-level-menu-item-2" class="as-slave-title as-slave-title-subgroup"
>Title</div>
<div id="top-level-menu-item-2" class="as-slave-body"> </div>
<div class="as-slave-buffer"> </div>
</div>
<div id="top-level-menu-item-3" class="as-master">
<div class="filter-label">Location</div>
</div>
<div id="top-level-menu-item-3" class="as-slave"> </div>
</div>
</div>
The question is: how to refer particular labels of this menu and the properties with xPath expressions? For example, if I want to:
verify the "Location" label is there
check if "Title" with class "as-slave" is not visible at the moment
It would be something similar to:
//div[#id="top-level-menu-item-3"]/div[#class="filter-label"]
//div[#id="top-level-menu1"] --- and check in code for display: none ... assuming it is selenium rc you are using
Update: also be sure to install the following firefox addin, it is Really useful when trying different xpath expressions on a site https://addons.mozilla.org/en-US/firefox/addon/1095
As a side note: try to avoid using xpath locators in Selenium, if possible. If you have a long xpath expression, it can be up to 20 times slower for Selenium to find the element compared to identifying it using its unique ID. Of course, sometimes there is no alternative to using xpath. However, when you do use it, keep '//' expressions to minimum - this is a real performance killer.
If you're just starting with Selenium, download the selenium add-on for Firefox. As you click on DOM elements, Selenium shows you the xpath to access it.
I am currently working on an open source library for generating xpath expressions through a fluent .Net API. The idea is to be able to generate xpath based selenium locators without having to know xpath.
Here's an example of how the library can be used in your case:
XPathFinder.Find.Tag("div").With.Attribute("id", "top-level-menu-item-3").And.Child("div").With.Attribute("class", "filter-label").ToXPathExpression();
This will produce the following xpath:
"//div[#id='top-level-menu-item-3']/div[#class='filter-label']"
Check it out at
http://code.google.com/p/xpathitup/
You can use firepath that can be installed over firebug(both firefox plugin). When you get a xpath, dont forget to append // before using it. Either in code or in selenium IDE. You are not appending it thats why its unusable. There are two types of xpath absolute and relative. If you use absolute then it will take care of dynamic ids. But if you use relative it will break with each run.