Sizzle selector syntax pattern of searchable items - jquery-selectors

I'm still learning how to use Sizzle selector. So far I know this:
Sizzle('#blah') - searches the entire document for element(s) with id 'blah'.
Sizzle('.blah') - searches the entire document for element(s) with css class 'blah'.
Then today I found this:
Sizzle('> div') - searches entire document for elements of 'div' tags. (I could be wrong but that's what it is doing for me)
Which makes me ponder, what other syntax are there to search for stuff using Sizzle??

The > is called child selector and is used to find direct/immediate children of parent elements.
Example:
<ul id="ul">
<li>Child</li>
<li>Child</li>
<li>Child</li>
<li>
<ul>
<li>Child Again</li>
<li>Child Again</li>
<li>Child Again</li>
</ul>
</li>
</ul>
Sizzle:
Sizzle('ul#ul > li')
In the above example, the child selector will only select direct children that is ones with text Child not Child Again

Here's the official reference on which selectors Sizzle supports: http://wiki.github.com/jeresig/sizzle/. But, as has already been said, it's basically the same syntax as CSS3 selectors.
And here's the link the OP was apparently asking for: http://www.w3.org/TR/css3-selectors/

pretty much any selector you can do with css3 you can do with sizzle.

Related

wicket 9: Testing page rendering. How To find a path to a component, link, etc

I want to use wicket tester to test my web application, however I'm totally lost on
what is a path and how to come up with one while testing certain components and behaviour
i.e
public void executeAjaxEvent(final String componentPath, final String event);
How does one come up with a componentPath?
I'm trying to brute force the path of this piece code, so that I could click optionLink, but still no luck, testing seems to be pointless endeavor as there are no way to find a path
<ul class="dropdown-menu">
<li wicket:id="options">
<a href="#" wicket:id="optionLink">
</a>
</li>
</ul>
You could use wicketTester.debugComponentTrees() to print the Page's children paths.
A component path is a sequence of wicket:id separated by a colon and from the page to the specific component.
In your case:
options:0:optionLink
Note that repeaters add additional counters in between, thus the number for the n-th list item.
With DebugSettings#setComponentPathAttributeName() you can specify an HML attribute that should be used to write each component's path into the markup.

How to prevent tinymce from adding class to every new li in list

I'm using the lists plugin from tinymce.
I have made a function that will add a class to one of the li elements in the list.
If I add the class to the last element in the list, every new li element added by the editor when hitting enter will have the same class.
I've tried looking into content filtering, but there it looks like I can only prevent any li element having a class.
How can I make tinymce add new li elements without a class?
What happens now:
<ul>
<li>asd</li>
<li>asd</li>
<li class="optional">asd</li> (updated by right clicking and selecting optional)
<li class="optional">asd</li> (new elements when hitting enter)
<li class="optional">asd</li>
<li class="optional">asd</li>
</ul>
What I want
<ul>
<li>asd</li>
<li>asd</li>
<li class="optional">asd</li> (updated by right clicking and selecting optional)
<li>asd</li> (new elements when hitting enter)
<li>asd</li>
<li>asd</li>
</ul>
Thanks in advance!
There is a configuration option that tells TinyMCE to not bring styles from one root block element (<p>, <li> etc) to another: keep_styles.
The documentation is here: https://www.tiny.cloud/docs/configure/content-filtering/#keep_styles
The setting either takes true (default) or false. As an example:
keep_styles: false
If you set this to false you won't get the current list item's classes/styles brought down to the next list item.
Here is a running example: https://fiddle.tiny.cloud/dNhaab

Does Sightly really not support any arithmetic operators?

I'm trying to subtract 2 from the total number of items in a list in Sightly.
<ul data-sly-list="${javaClass.list}">
<li>
<span> ${itemList.size -2 # context='number'}</span>
</li>
</ul>
The result is:
org.apache.sling.scripting.sightly.SightlyException: Parsing error in
template ...: token recognition error at: '-' for expression
${itemList.size -2 # context='number'}
Do I really have to create a method in Java for this? Like:
javaClass.getListCountMinusTwo()
I'd be grateful for any kind of workaround.
Sightly only supports logical and comparison operators (spec) and that is intended as the view rendering scripts are not supposed to contain business logic, this should come from the model/use-objects.

jquery .html() returning null in ie7

On click li element i am getting the current element value and appending it into another div dynamically.Its working fine in all browsers.But returning null in IE7.I don`t the reason that why its happening?Please can any one give me a solution for this..Part of the code only i pasted here.
Sample code:
////////////.//This line returning null in IE7./////////////////
$('#pagelink_a #pagelinkli_'+tab_lastid_val).html()
(tab_lastid_val value can be a 1 or 2 or 3.Clixked li element value comes here)
<div class="pagelink">
<div id="pagelink_a">
<ul>
/******** all li element are clickable***********/
<li id="pagelinkli_1"><a>Google</a></li>
<li id="pagelinkli_2"><a>Chrome</a></li>
<li id="pagelinkli_3"><a>Firefox</a></li>
</ul>
</div>
</div?
try this:
$('#pagelink_a').find('li[id=pagelinkli_'+tab_lastid_val']').html();
code is not tested but i think it should work.
Given your html layout, your parent div is .pagelink not #pagelink_a , so replace your following line:
$('#pagelink_a #pagelinkli_'+tab_lastid_val).html()
for this one:
$('.pagelink #pagelinkli_'+tab_lastid_val).html()
Just use
$('#pagelinkli_'+tab_lastid_val).html()
The # tag identifies an ID which only a single element may have. There is no need to have anything preceding it. You also labeled the previous class as id, which is wrong. I don't know how your other browsers managed to get anything.
Although bit off topic, it may be better to actually drop IE7 support entirely. Due to small user base and decreasing popularity, it may be costing you more money by support it than to not support it.
Try instead of html() , and try append().
For example
$('#ID').append('Your content');

Select parent element of known element in Selenium

I have a certain element that I can select with Selenium 1.
Unfortunately I need to click the parent element to get the desired behaviour. The element I can easily locate has attribute unselectable, making it dead for clicking. How do I navigate upwards with XPath?
There are a couple of options there. The sample code is in Java, but a port to other languages should be straightforward.
Java:
WebElement myElement = driver.findElement(By.id("myDiv"));
WebElement parent = (WebElement) ((JavascriptExecutor) driver).executeScript(
"return arguments[0].parentNode;", myElement);
XPath:
WebElement myElement = driver.findElement(By.id("myDiv"));
WebElement parent = myElement.findElement(By.xpath("./.."));
Obtaining the driver from the WebElement
Note: As you can see, for the JavaScript version you'll need the driver. If you don't have direct access to it, you can retrieve it from the WebElement using:
WebDriver driver = ((WrapsDriver) myElement).getWrappedDriver();
Little more about XPath axes
Lets say we have below HTML structure:
<div class="third_level_ancestor">
<nav class="second_level_ancestor">
<div class="parent">
<span>Child</span>
</div>
</nav>
</div>
//span/parent::* - returns any element which is direct parent.
In this case output is <div class="parent">
//span/parent::div[#class="parent"] - returns parent element only of exact node type and only if specified predicate is True.
Output: <div class="parent">
//span/ancestor::* - returns all ancestors (including parent).
Output: <div class="parent">, <nav class="second_level_ancestor">, <div class="third_level_ancestor">...
//span/ancestor-or-self::* - returns all ancestors and current element itself.
Output: <span>Child</span>, <div class="parent">, <nav class="second_level_ancestor">, <div class="third_level_ancestor">...
//span/ancestor::div[2] - returns second ancestor (starting from parent) of type div.
Output: <div class="third_level_ancestor">
Let's consider your DOM as
<a>
<!-- some other icons and texts -->
<span>Close</span>
</a>
Now that you need to select parent tag 'a' based on <span> text, then use
driver.findElement(By.xpath("//a[.//span[text()='Close']]"));
Explanation: Select the node based on its child node's value
Take a look at the possible XPath axes, you are probably looking for parent. Depending on how you are finding the first element, you could just adjust the xpath for that.
Alternatively you can try the double-dot syntax, .. which selects the parent of the current node.
This might be useful for someone else:
Using this sample html
<div class="ParentDiv">
<label for="label">labelName</label>
<input type="button" value="elementToSelect">
</div>
<div class="DontSelect">
<label for="animal">pig</label>
<input type="button" value="elementToSelect">
</div>
If for example, I want to select an element in the same section (e.g div) as a label, you can use this
//label[contains(., 'labelName')]/parent::*//input[#value='elementToSelect']
This just means, look for a label (it could anything like a, h2) called labelName. Navigate to the parent of that label (i.e. div class="ParentDiv"). Search within the descendants of that parent to find any child element with the value of elementToSelect. With this, it will not select the second elementToSelect with DontSelect div as parent.
The trick is that you can reduce search areas for an element by navigating to the parent first and then searching descendant of that parent for the element you need.
Other Syntax like following-sibling::h2 can also be used in some cases. This means the sibling following element h2. This will work for elements at the same level, having the same parent.
We can select the parent tag with the help of Selenium as follows:
driver.findElement(By.xpath("//table[#id='abc']//div/nobr[.='abc']/../.."));
this will help you to find the grandparent of the known Element. Just Remove one (/..) to find the immediate Parent Element.
Like:
driver.findElement(By.xpath("//table[#id='abc']//div/nobr[.='abc']/..));
There are some other ways to implement this, but it worked fine for me.
You can do this by using /parent::node() in the xpath. Simply append /parent::node() to the child elements xpath.
For example:
Let xpath of child element is childElementXpath.
Then xpath of its immediate ancestor would be childElementXpath/parent::node().
Xpath of its next ancestor would be childElementXpath/parent::node()/parent::node()
and so on..
Also, you can navigate to an ancestor of an element using
'childElementXpath/ancestor::*[#attr="attr_value"]'. This would be useful when you have a known child element which is unique but has a parent element which cannot be uniquely identified.
Have once way you don't need to execute script and you still get the parent element:
// identify element
WebElement ele =driver.findElement(By.xpath("//*[#id=\"ext-gen6\"]/div[5]/"));
//identify parent element with ./.. expression in xpath
WebElement parent = ele.findElement(By.xpath("./.."));
The key word here is xpath "./.."