This is my DOM structure:
<div contentediatble="true">
<span contenteditable="false" class="my-block">
<span contenteditable="false">My Block</span>
<i contenteditable="false" class="icon-remove">X</i>
</span>
</div>
The root <div>looks like a textbox:
In IE 9 and 10, when I click the root <div>, suppose my caret will after the <span class="my-block"> element, and when I typing, the words should be after the whole block.
But actually, when I start typing, the characters is actually INSIDE the <span class="my-block"> element(rather than AFTER), followed by the <i contenteditable="false" class="icon-remove">X</i>, and I can even delete the contents of <span class="my-block"> by using backspace(but not delete the whole span)
This is so annoying and it's really hard to fix. IE really makes tons of troubles to developers :(
However, the expected result works well in FF, Chrome and IE11.
Related
I would like to use an absolute xpath to fill in a search bar. The ids and classes are dynamically generated and there is no name variable or instance. So it feels like I'm stuck without a tool to fill in boxes without the named variable.
Is there a way around this? Can I somehow change the absolute xpath to look like its a name assignment and then query and fill based on the new 'type' I assigned the absolute xpath?
Is there a method for this in Selenium if not available in Splinter?
I've select by CSS and I'm finding this error 'selenium.common.exceptions.InvalidElementStateException: Message: Element is not currently interactable and may not be manipulated'
Edit:
<div class="type-ahead-input-container" role="search">
<div class="type-ahead-input-wrapper">
<div class="type-ahead-input">
<label class="visually-hidden" for="a11y-ember10393">
Search
</label>
<!---->
<input id="a11y-ember10393" class="ember-text-field ember-view" aria-
autocomplete="list" autocomplete="off" spellcheck="false"
placeholder="Search" autocorrect="off" autocapitalize="off" role="combobox"
aria-expanded="true" aria-owns="ember11064" data-artdeco-is-focused="true"/>
<div class="type-ahead-input-icons">
<!---->
</div>
</div>
<!---->
</div>
</div>
As you have asked Is there a method for this in Selenium, the Answer is Yes.
Selenium supports Sikuli. Sikuli automates anything you see on the screen. It uses image recognition to identify and control GUI components. It is useful when there is no easy access to a GUI's internal or source code.
You can find more about Sikuli here.
Let me know if this answers your question.
When you get an error-message like that, it could be that your search result is not what you expected. It could be that you are getting more than one result, ie a list. On a list you can not input.
You can find the input boxes with an xpath, select the prefered one from the list (by trying) and put a text in it with the WebDriverElement _set_value method. That is not appropriate because of the _, but it is usefull.
input_list = browser.find_by_xpath('//div[#class="type-ahead-input"]/input[#class="ember-textfield ember-view"]')
input_list[1]._set_value('just a text to see whether it is working')
My supervisor has recently switched us from HP-UFT to Robot with the Selenium Webdriver and I'm finding it extremely difficult to figure out how to use the driver and/or keyword framework to expand a folding tree ul/li webelement.
Below is a stripped out example of the code on the page:
<ul>
<li class="node-class open" id="i1454430045821320">
<a class="" style="" href="">
<ins> </ins>Location Header 1</a>
<ul>
<li class="node-instance leaf" id="i1454430058247421">
<a class="" style="" href="">
<ins> </ins>Location 1</a>
</li>
<li class="node-instance last leaf" id="i14545337159411690">
<a class="" style="" href="">
<ins> </ins>Location 2</a>
</li>
</ul>
</li>
<li class="node-class closed " id="i14544407827351156">
<a class="" style="" href="">
<ins> </ins>Location Header 2</a>
</li>
What I'm trying to do should be extremely simple: I want to expand a specifed closed tree structure if it's classed as closed. Beneath each branch is an optional nested branch, or a selection checkbox. My end goal is to be able to drill down to a location in the tree that the tester specifies and click the end leaf.
Using "Click Element|xpath=/ul/li[a[contains(text(),'Location Header 2')]" does expand the branch but it also selects all of the child node checkboxes.
In UFT, if I hit this kind of problem I'd simply change the parent <li> class to force it open (if I couldn't click or use any of the other methods to drill down and select).
In Robot, I can use the keyword "Get Element Attribute" to READ the class, but I don't see a keyword to CHANGE it so that idea is out. What I'm looking for is a way to expand the tree branches without inadvertently selecting all of the child nodes.
The drilling down through the tree portion I can deal with once I figure out how to open the nodes correctly but opening up the branch without potentially selecting all of the sub-items is making me pound my head into my desk.
I keep thinking that maybe I'm missing something simple. Any assistance on something that I could try would be greatly appreciated.
Figured it out! Thank you all so much for the ideas.
Click Element At Coordinates | xpath=//ul/li[a[contains(text(),'Location Header 2')] | -100 | 0
Luckily all of the ul element columns on the page have the same css style which sets them at 200px width. I figured through trial and error that the "At Coordinates" option clicks from the center of the object (and not the top left as I originally thought). I figured I'd share this in case anyone else ever has a similar problem.
Im making responsive table and I want it be fully accessible for every people. But in this case i'm not sure where i should use rowheader and where to use columheader.
Here is my code (ofcourse it is just example, there is not actual data):
<div role="grid">
<div class="row" role="row">
<div class="hidden-xs col-sm-offset-4 col-sm-3 " role="columnheader">
<img class="img-responsive" style="width:200px;" src="http://blogmedia.whoishostingthis.com/wp-content/uploads/2013/04/free-hosting.jpg" alt="Vendor 1">
</div>
<div class="hidden-xs col-sm-offset-1 col-sm-3 " role="columnheader">
<img class="img-responsive" style="width:200px;" src="http://jennmoney.biz/assets/free.gif" alt="Vendor 2">
</div>
</div>
<hr class="line">
<div class="raty-table" role="row">
<span class="col-xs-12 col-sm-4" role="rowheader">
Title 1
</span>
<span class="visible-xs-block col-xs-4" role="rowheader">
Vendor 1
</span>
<span class="col-xs-8 col-sm-4" role="gridcell">
Content
</span>
<span class="visible-xs-block col-xs-4" role="rowheader">
Vendor 2
</span>
<span class="col-xs-8 col-sm-4" role="gridcell">
Content
</span>
</div>
</div>
Here is a fiddle:
For vendors should I use rowheader or columnheader? And how I should tag "How long can I sing?" Once it is rowheader and on different screen size it can be columnheader.
I see, it is hard to undestand what I mean, so I made two mocks, but thanks to StackOverflow I can't post it, becouse I have to low reputation...
I must post it as a link: http://postimg.org/gallery/j2elhzmc/ - first picture shows how it looks on desktop, second how it looks at smartphone (if you have the same order as me).
Your grid must be defined as non editable
A grid is considered editable unless otherwise specified. To make a grid read-only, set the aria-readonly attribute of the grid to true.
You should explicitly indicate relationships
If relevant headers cannot be determined from the DOM structure, authors SHOULD explicitly indicate which header cells are relevant to the cell by referencing elements with role rowheader or columnheader using the aria-describedby attribute.
Note that you might reference a "display:none" element in the aria-describedby attribute. I will say that the more semantic choice will then be to set aria-hidden attribute on your rowheader elements.
TL;DR:
Set aria-readonly=true on the grid
Set aria-describedby attribute on your "gridcell" cells referencing each one of your "not always visible" columnheader
Remove role="rowheader" and set aria-hidden="true"
Sorry if I'm missing something obvious but columnheader should be used at the top of each column. (You could have a columnheader in the middle of the table, but that's not typical, although I could see it used as a repeating header if it split across pages.)
A rowheader is usually the first cell in the table for that row. You can have multiple rowheaders but it's not common unless you're showing a multi-dimensional table (eg, a sales report that has a year header for all rows, then quarter headers for every three months, then month headers).
You start getting unreliable results (from screen readers) if you have row headers spread across several non-contiguous cells.
I'm assuming you don't want to use <table> and <th scope='row|col'>
I had a question about microfomats and more specifically hreview-aggregate. A client implemented them a while ago but they are not showing in the SERPs however Google's rich snippet testing tool shows them working perfectly. I took a look at the code and it is currently
<div class="hreview-aggregate">
<div class="rating-45 clearfix">
<span class="rating" title="4.383 of 5 stars">4.383 of 5 stars</span>
<a tabindex="0" href="https://www.example.com/category/" title="View all xxxx Reviews">
<span class="count">View all xxxx Reviews</span>
</a>
</div>
</div>
I changed it up to include class="average" class="best" and a few other spans that they were missing.
<div class="hreview-aggregate">
<div class="rating-45 clearfix">
<span class="rating" title="4.383 of 5 stars"><span class="average">4.383</span> of <span class="best">5</span> stars</span>
<a tabindex="0" href="https://www.example.com/category/" title="View all xxxx Reviews">
View all <span class="count">xxxx</span> Reviews
</a>
</div>
</div>
Will the updated code finally show in the SERPs? Also, the page only has the rating but no reviews, should I use COUNT or VOTES?
I doubt the Google Rich Snippet Tool would pass this. The hreview-aggregate specification (specification) states an item needs to be specified that is being reviewed.
I've also seen the rich snippet tool speak of an average property, but the specification doesn't mention it, if you use value instead of average you comply to the spec and the rich snippet tool picks it up. And you should round the number to one decimal.
You should indeed use votes instead of count if the page doesn't contain any individual reviews.
This is an old question but to those still using hreview-aggregate.
The structure more or less is as follows:
<div class="hreview-aggregate">
<div class="item">
<span class="fn">Item Name</span>
</div>
<div class="rating">
<span class="average">3.5</span>
<span class="best">5</span>
<span class="count">15</span>
</div>
In your code you should have something like this:
<div class="hreview-aggregate">
<div class="item">
<span class="fn">Item Name</span>
</div>
<div class="rating-45 rating clearfix">
<span title="4.383 of 5 stars"><span class="average">4.383</span> of <span class="best">5</span> stars</span>
<a tabindex="0" href="https://www.example.com/category/" title="View all xxxx Reviews">
View all <span class="count">10</span> Reviews
</a>
</div>
</div>
So that it fully validates with: https://search.google.com/structured-data/testing-tool
Should I use COUNT or VOTES?
From the microformat doc itself: http://microformats.org/wiki/hreview-aggregate
count:: This property is used to specify the total number of reviews for the product or service.
votes:: This property is used to specify the total number of users who have rated the product or service, contributing to the average rating. For some sites, the number of votes is equal to the number of reviews, so count may be used and this property omitted.
in your case, see my example with count as I believe this is most applicable to you.
As mentioned before there are several factors that can cause google not to show it.
Google itself says:
When Google finds valid reviews or ratings markup, we may show a rich snippet that includes stars and other summary info from reviews or ratings.
Keyword: MAY
https://developers.google.com/search/docs/data-types/reviews#review-snippets
from my experience they usually do, just make sure its properly formatted and validated.
Say I have multiple price quotes from multiple retailers, how will I retrieve the 5th value from a particular retailer - say Target or Walmart ? I can get to the 5th entry using the matching image logo bit how do I retrieve the value ?
Adding Html Code to make things more clear .I need to retrieve the ratePrice value (198)
<div id="rate-297" class="rateResult standardResult" vendor="15">
<div class="rateDetails">
<h4>Standard Goods
<br>
<img src="http://walmart.com/walmart/ZEUSSTAR999.jpg">
</h4>
<p>
<span class="vendorPart-380">
<img alt="Walmart" src="/cb2048547924/icons/15.gif">
<br>
<strong>
<br>
MNC
</span>
</p>
</div>
<div class="ratePrice">
<h3>
$198
<sup>49</sup>
</h3>
<p>
<strong>$754.49</strong>
<br>
</p>
<a class="button-select" href="https://www.walmart.com/us/order/95134/2013-05-14-10-00/95134/2013-05-17-10-00/297"> </a>
</div>
</div>
If you could provide some HTML it would help. Speaking generally from what you're asking you'd get a locator to the price div or whatever HTML element and then get its text using something like:
_driver.FindElement(locator_of_element).Text
The trick is understanding the HTML in order to target the 5th element. So if you can find the row that has the 5th entry then it's simply a matter or then finding the price div in that row and getting the text of it.
EDIT based on more info provided by OP in comments
Using the HTML you provided (which isn't well formed by the way, missing closing strong tag, a tag, etc.). I'd say do the following:
_driver.FindElement(By.XPath("//div[#class='ratePrice'][5]/h3")).Text