document.querySelectorAll("span + a") didn't work? - getelementbyid

I have a HTML like this.
<span class="vm-video-side-notification-text-item">
Includes copyrighted content
</span>
I use
var x = document.querySelectorAll("span + a");
alert(x.length);
the alert is "0"... I don't know why.
I see the w3school says
element+element
div + p
Selects all <p> elements that are placed immediately after <div> elements
so I try span + a. Can anyone correct my mistake?

You're conflating elements with tags.
While the start tag of the a is directly after the start tag of the span indeed, the a element is inside the span element.
So, in order for your example to work, you can either
change the query selector to "span > a" for "any a directly inside a span"
var x = document.querySelectorAll("span > a");
alert(x.length);
or change the html to have the a element after the span element
<span class="vm-video-side-notification-text-item">
</span>
Includes copyrighted content
(... but not both!)

Related

How to retrieve hidden elements when visibility is hidden

I want to retrieve hidden text when the visibiility attribute is hidden:
<div id = "tt52433002" class="yui-module yui-overlay yui-tt yui-overlay-hidden" style="z-index: 2; visibility: hidden;">
<div class="bd">Associated with the domain : testci20160503105556.com</div>
</div>
I tried:
browser.hidden(:class, 'bd').text
and
browser.hidden(:class, 'bd').value
But I get this error:
"unable to locate element, using {:class=>"bd", :tag_name=>"input", :type=>"hidden"}"
Watir is designed to act like a user. So if a user can not see the text in an element, then Watir will not return the text of the element.
Also, the element you are looking for is a div not a hidden.
If you need the text you can do:
browser.div(class: 'bd').inner_html
which makes a JavaScript call to provide the result.
This works:
browser.div.attribute_value('id') => tt52433002
as does this:
browser.div(class: 'bd').inner_html[/testci\d{14}/] => testci20160503105556
First things first. The error says that Watir cannot find an element using the criteria you specified. That means either that no such thing exists anywhere in the DOM, or that it might be inside a frame.
Since the element you want is a div, then you should be using the .div method to access it
browser.div(:class => 'bd') #finds first matching div
A potential second problem could occur if that classname is not very unique. Unless you specify an additional parameter, such as index, or perhaps a portion of the text contained by the div, you may not find the div you are looking for. A fast debugging trick (I like to do it from IRB) is to get a collection of matching divs and check the size
div_count = browser.divs(:class => 'bd').size
puts "there are #{divcount} divs of class bd in the dom"
If the count is anything more than 1, then you likely need to change how you are selecting it to ensure you get the right one. for example
browser.div(:class => 'bd', :text => /Associated with the domain/)
If the count is zero, then check for frames
frame_count = browser.frames.size
iframe_count = browser.iframes.size
If there are frames you will have to tell watir to look inside the frame for the div, if more than one frame then be sure you specify the right one
browser.frame.div(:class => 'bd') #looks for div inside first frame
Once you are sure you have the right div, then you ought to be able to use a method like .text or as in another answer .inner_html to get the contents of the div.

Adobe Dynamic Tag Manager: Event-Based Rule Upon Unordered List

If there are no Class or DIV designations for the items within this unordered list, how would you go about using the %this.innerHTML% notation to pull which link was clicked in an Event-Based rule?
< div class="relatedCategories rowBottomSpace" >
< strong class="header black short">Related Categories</strong>
<ul>
<li>
LINK 1
<span>|</span>
</li>
<li>
LINK 2
<span>|</span>
</li>
<li>LINK 3
</li>
</div>
Solution #1: Update your selector to be more specific
This is the solution I mentioned in my comment above. Assumption is that your Condition's Element Tag or Selector is something like div.relatedCategories. If you change it to specifically target links within it: div.relatedCategories a then this will reference the link that was clicked.
Solution #2: Use a custom condition and data element
Let's say for whatever reason(s) you want to keep the original higher level selector:
div.relatedCategories.
Leave it as such, and then under
Rule Conditions > Criteria
choose Data > Custom and then click "Add Criteria".
In the Custom code box, add the following:
var target = (event.target) ? event.target : event.srcElement;
_satellite.setVar('linkTarget',target);
return true;
This will create a data element called linkTarget which will hold an html element object reference to the clicked link. So then you can use %linkTarget.innerHTML% or alternatively, back up in the Custom code box you can set linkTarget to be target.innerHTML and then reference with %linkTarget%.

XPATH- How to select radio button and text in a single xpath expression?

I have Radio button with value as "CREDIT_CARD" and the text of the radio button as "New". Now i need to select a radio button which has text "New".
<div>
<input type="radio" onchange="javascript:toggleAdvancedDisplay('pay_detail','CREDIT_CARD');" value="CREDIT_CARD" name="payment_type" style="margin:0; vertical-align: middle;"/>
<span class="value">New</span>
I tried the below xpath, but it doesn't locate the expected element.
/fieldset[1]/div/div/div[2]/input[#value='CREDIT_CARD']/fieldset[1]/div/div/div[2]/span[contains(text(), 'New')]
What is it i am doing wrong here?
You can try :
xpath = //input[#value='CREDIT_CARD' and following-sibling::span[contains(., 'New')]]
This will get input tag with CREDIT_CARD as value and whose sibling contains New as text.
The <span> element is not a child of the <input> element, but it is the next sibling. XPath should be:
/fieldset[1]/div/div/div[2]/input[#value='CREDIT_CARD' and following-sibling::span[1] = 'New']
Try this. Does this locate the element you're looking for?
xpath = //*[#value="CREDIT_CARD"]/span[contains(.,"New")]

document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

I am getting a w3c validation error here as
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
This is my source code
<ul class="link">
<li><span>1<div class="clr"> </div><label>Vul Postcode in </label></span></li>
<li><span>2<div class="clr"> </div><label>Restaurants </label></span></li>
<li><span>3<div class="clr"> </div><label>Menukaart</label></span></li>
<li><span>4<div class="clr"> </div><label>Afrekenen</label></span></li>
</ul>
Please help me to find out the issue,
Thanks
Pallavi
You have a block element (div) inside of an inline element (span). This is not allowed.
Solution 1: Change span to div:
<div>2<div class="clr"> </div><span class="label">Restaurants </span></div>
(You have to use HTML5 (<!DOCTYPE html>), otherwise block elements wouldn’t be allowed inside of a elements.)
Solution 2: Change div to span:
<span>2<span class="clr"> </span><span class="label">Restaurants </span></span>
Note that you can’t have label inside of an a element (I changed the label to span here). Use the label element only when you have a form.

Ruby/Selenium WebDriver 2: Find New Elements Fast

Environment:
Ruby 1.8.7
Selenium WebDriver 2
Ubuntu 12.04 Desktop
Firefox 13.0.1
Problem:
I have div tags being used as selects. You click on the div and a dropdown style window shows up with more div tags as the select options. Now I can go in and create a way of clicking on each of these options for each 'div as select' but what I'd really like is to write a piece of code that clicks on the divs I know about and then determines which divs are now displayed and enabled after the click. Then I can click on 1 of the options at random.
So my current code is something like this:
allDivs = brwsr.find_elements(:tag_name, 'div')
origDivs = allDivs
allDivs.each do |e|
if ... # Get the div I want
e.click
newDivs = brwsr.find_elements(:tag_name, 'div')
origDivs.each do |orig|
newDivs.delete(orig)
end
# Do something with remaining new divs here
end
end
The main problem I have is that this is extremely slow. I currently have around 200 divs to spin thru and this method takes a few minutes to complete. Normally, I wouldn't expect spinning thru a couple of hundred array elements to take very long. But it does.
To shorten the time I've attempted filtering the allDivs and newDivs by spinning thru them once and deleting anything that is not displayed and enabled.
So I'm currently stuck with a really slow solution. I don't mind this 'finding of new divs' being a little slower as it should also lead to much shorter script dev times. However, taking minutes to complete is way too long.
First question: Can Selenium return only elements which as displayed and enabled with some extra API string around the find_elements call?
Second question: Does someone have a better way of finding the new div elements without having to go thru the array of elements.
It would be very helpful if you could post some sample HTML of the DOM you are trying to automate.
With that said, the ruby webdriver bindings do support finding elements by chaining. Thus, given some html like this:
<div class="outer">
<div class="one">
<div class="alpha">A</div>
<div class="beta">B</div>
<div class="gamma">C</div>
</div>
<div class="two">
<div class="alpha">A</div>
<div class="beta">B</div>
<div class="gamma">C</div>
</div>
<div class="three">
<div class="alpha">A</div>
<div class="beta">B</div>
<div class="gamma">C</div>
</div>
</div>
You could write something like this to find the "B" div in the second group of divs ("two"):
group = brwsr.find_element(:class => "two")
desired_item = group.find_element(:class => "beta")
Or, even more simply through ruby's chaining capabilities:
desired_item = brwsr.find_element(:class => "two").find_element(:class => "beta")
One other way, which I prefer the most is to select an element via a CSS selector, which selects the element faster with an easy to read syntax:
desired_item = brwsr.find_element(:css => "div.two div.beta")

Resources