I currently have a large number of circumstances where I need to verify that a page (along with all of its elements) are displaying correctly. The isDisplayed() method of WebElement appears to be a logical way to do this, however I would like to understand precisely what this method is doing to determine whether or not an element "is displayed". The javadoc does not shed any light on the inner workings of the method and other information on the web appears to be sparse at best.
If anyone could provide a detailed description of how this method works, I would be very grateful.
I would trust in Selenium to work out if an element is displayed or not. If it doesn't work you can raise a bug and/or fix any issues you see and provide a patch.
This is what the method does (Taken from the current Selenium source code):
/**
* Determines whether an element is what a user would call "shown". This means
* that the element is shown in the viewport of the browser, and only has
* height and width greater than 0px, and that its visibility is not "hidden"
* and its display property is not "none".
* Options and Optgroup elements are treated as special cases: they are
* considered shown iff they have a enclosing select element that is shown.
*
* #param {!Element} elem The element to consider.
* #param {boolean=} opt_ignoreOpacity Whether to ignore the element's opacity
* when determining whether it is shown; defaults to false.
* #return {boolean} Whether or not the element is visible.
*/
bot.dom.isShown = function(elem, opt_ignoreOpacity) {
if (!bot.dom.isElement(elem)) {
throw new Error('Argument to isShown must be of type Element');
}
// Option or optgroup is shown iff enclosing select is shown (ignoring the
// select's opacity).
if (bot.dom.isElement(elem, goog.dom.TagName.OPTION) ||
bot.dom.isElement(elem, goog.dom.TagName.OPTGROUP)) {
var select = /**#type {Element}*/ (goog.dom.getAncestor(elem, function(e) {
return bot.dom.isElement(e, goog.dom.TagName.SELECT);
}));
return !!select && bot.dom.isShown(select, /*ignoreOpacity=*/true);
}
// Image map elements are shown if image that uses it is shown, and
// the area of the element is positive.
var imageMap = bot.dom.maybeFindImageMap_(elem);
if (imageMap) {
return !!imageMap.image &&
imageMap.rect.width > 0 && imageMap.rect.height > 0 &&
bot.dom.isShown(imageMap.image, opt_ignoreOpacity);
}
// Any hidden input is not shown.
if (bot.dom.isElement(elem, goog.dom.TagName.INPUT) &&
elem.type.toLowerCase() == 'hidden') {
return false;
}
// Any NOSCRIPT element is not shown.
if (bot.dom.isElement(elem, goog.dom.TagName.NOSCRIPT)) {
return false;
}
// Any element with hidden visibility is not shown.
if (bot.dom.getEffectiveStyle(elem, 'visibility') == 'hidden') {
return false;
}
// Any element with a display style equal to 'none' or that has an ancestor
// with display style equal to 'none' is not shown.
function displayed(e) {
if (bot.dom.getEffectiveStyle(e, 'display') == 'none') {
return false;
}
var parent = bot.dom.getParentElement(e);
return !parent || displayed(parent);
}
if (!displayed(elem)) {
return false;
}
// Any transparent element is not shown.
if (!opt_ignoreOpacity && bot.dom.getOpacity(elem) == 0) {
return false;
}
// Any element with the hidden attribute or has an ancestor with the hidden
// attribute is not shown
function isHidden(e) {
//IE does not support hidden attribute yet
if (goog.userAgent.IE) {
return true;
}
if (e.hasAttribute) {
if (e.hasAttribute('hidden')){
return false;
}
} else {
return true;
}
var parent = bot.dom.getParentElement(e);
return !parent || isHidden(parent);
}
if (!isHidden(elem)) {
return false;
}
// Any element without positive size dimensions is not shown.
function positiveSize(e) {
var rect = bot.dom.getClientRect(e);
if (rect.height > 0 && rect.width > 0) {
return true;
}
// A vertical or horizontal SVG Path element will report zero width or
// height but is "shown" if it has a positive stroke-width.
if (bot.dom.isElement(e, 'PATH') && (rect.height > 0 || rect.width > 0)) {
var strokeWidth = bot.dom.getEffectiveStyle(e, 'stroke-width');
return !!strokeWidth && (parseInt(strokeWidth, 10) > 0);
}
// Zero-sized elements should still be considered to have positive size
// if they have a child element or text node with positive size, unless
// the element has an 'overflow' style of 'hidden'.
return bot.dom.getEffectiveStyle(e, 'overflow') != 'hidden' &&
goog.array.some(e.childNodes, function(n) {
return n.nodeType == goog.dom.NodeType.TEXT ||
(bot.dom.isElement(n) && positiveSize(n));
});
}
if (!positiveSize(elem)) {
return false;
}
// Elements that are hidden by overflow are not shown.
if (bot.dom.getOverflowState(elem) == bot.dom.OverflowState.HIDDEN) {
return false;
}
Not sure it really needs any more explanation, the comments are quite clear. Let me know if you want any more info added.
WebDriver has its own W3C specification.
The section about determining visibility is what you are after.
I would warn that saying something "is displayed" is such a broad term, and thus there are many scenarios to it. Therefore, there may well be situations that WebDriver does not account for.
So it's important, vital in fact, to remember that something being "displayed" or "visible" has many meanings. (In the same way a page being fully loaded, also has many meanings.)
Also remember Selenium is entirely open source. There is nothing stopping you from getting a fresh checkout of the repository and inspecting it locally.
As per the documentation isDisplayed() method determines whether the WebElement is displayed or not and returns a boolean whether or not the element is displayed or not. This method avoids the problem of having to parse an element's style attribute.
This implementation is inline with the specification with in the WebDriver Level 2 W3C Working Draft which mentions:
Although WebDriver does not define a primitive to ascertain the
visibility of an
element in the
viewport,
we acknowledge that it is an important feature for many users. Here we
include a recommended approach which will give a simplified
approximation of an element’s visibility, but please note that it
relies only on tree-traversal, and only covers a subset of visibility
checks.
The visibility of an element is guided by what is perceptually visible
to the human eye. In this context, an element’s displayedness does not
relate to the
visibility or
display style
properties.
The approach recommended to implementors to ascertain an element’s
visibility was originally developed by the Selenium project, and is
based on crude approximations about an element's nature and
relationship in the tree. An element is in general to be considered
visible if any part of it is drawn on the canvas within the boundaries
of the viewport.
The element displayed algorithm is a boolean state where true
signifies that the element is displayed and false signifies that the
element is not displayed. To compute the state on element, invoke the
Call(bot.dom.isShown, null, element). If doing so does not produce an
error, return the return value from this function call. Otherwise
return an error with error code unknown error.
This function is typically exposed to GET requests with a URI Template of:
/session/{session id}/element/{element id}/displayed
Related
I am working on a polymer2 shadow dom template project need to select children elements from parent elements. I found this article introduces a way to select child shadow dom elements that like this:
// No fun.
document.querySelector('x-tabs').shadowRoot
.querySelector('x-panel').shadowRoot
.querySelector('#foo');
// Fun.
document.querySelector('x-tabs::shadow x-panel::shadow #foo');
However, when I tried in my polymer2 project, like this:
//First: works!!
document.querySelector('container')
.shadowRoot.querySelector('app-grid')
.shadowRoot.querySelector('#apps');
//Second: Doesn't work!// got null
document.querySelector('container::shadow app-grid::shadow #apps')
// Thrird: document.querySelector('* /deep/ #apps') // Doesn't work, got null
I really need the second way or the third, which to put selectors in (), but both couldn't work. Does anyone know why the second one doesn't work? Thank you so much!
::shadow and /deep/ has never(?) worked in Firefox, and is depraved in Chrome 63 and later.
Source
Eric Biedelman has written a nice querySelector method for finding all custom elements on a page using shadow DOM. I wouldn't use it myself, but I have implemented it so I can "querySelect" custom elements in the console. Here is his modified code:
// EXAMPLES
// findCustomElement('app-grid') // Returns app-grid element
// findCustomElements('dom-if') // Returns an array of dom-if elements (if there are several ones)
// findCustomElement('app-grid').props // Returns properties of the app-grid element
function findCustomElement(customElementName) {
const allCustomElements = [];
customElementName = (customElementName) ? customElementName.toLowerCase() : customElementName;
function isCustomElement(el) {
const isAttr = el.getAttribute('is');
// Check for <super-button> and <button is="super-button">.
return el.localName.includes('-') || isAttr && isAttr.includes('-');
}
function findAllCustomElements(nodes) {
for (let i = 0, el; el = nodes[i]; ++i) {
if (isCustomElement(el)) {
el.props = el.__data__ || el.__data || "Doesn't have any properties";
if (customElementName && customElementName === el.tagName.toLowerCase()) {
allCustomElements.push(el);
} else if (!customElementName) {
allCustomElements.push(el);
}
}
// If the element has shadow DOM, dig deeper.
if (el.shadowRoot) {
findAllCustomElements(el.shadowRoot.querySelectorAll('*'));
}
}
}
findAllCustomElements(document.querySelectorAll('*'));
if (allCustomElements.length < 2) {
return allCustomElements[0] || customElementName + " not found";
} else if (customElementName) {
allCustomElements.props = "Several elements found of type " + customElementName;
}
return allCustomElements;
}
Remove the if (isCustomElement(el)) { statement, and you can querySelect whatever element and get an array of it if several of them exists. You can change findAllCustomElements to implement a smarter querySelect using the recursive loop on shadowDoom as base. Again, I wouldn't use this myself – and instead pass on variables from parent element(s) to children where the children have observers that activates specific behaviors – but I wanted to give you a general implementation of a fallback if nothing else works.
The problem with your question is that you don't give any specifics about WHY you want to select the children in the first place.
When I hover the mouse on button, then many options are displayed. Now I want to validate that all the options are displayed or not at single time.
static content = {
timeRangeContainer { $("div.filter-list")[0] }
timeRangeFilterOptions { timeRangeContainer.find ("div.filter-drop li")}
}
def hovermouse(){
interact{
moveToElement(timeRangeFilterButton)
}
def optionDisplayed(){
timeRangeFilterOptions[0].isDisplayed()
}
}
In the above example, I can check only one element whether it displayed or not , But I want to check all the options are displayed or not at single line of code such as (timeRangeFilterOptions.isDisplayed()). Is it possible ?
One way to do it would be:
boolean optionsDisplayed(){
timeRangeFilterOptions*.displayed.every()
}
I want to limit map extent to the initial extent of the map and limit user from panning more than certain extent.
I tried following but nothing has changed:
map = new Map( "map" , {
basemap: "gray",
center: [-85.416, 49.000],
zoom : 6,
logo: false,
sliderStyle: "small"
});
dojo.connect(map, "onExtentChange", function (){
var initExtent = map.extent;
var extent = map.extent.getCenter();
if(initExtent.contains(extent)){}
else{map.setExtent(initExtent)}
});
Just to flesh out Simon's answer somewhat, and give an example. Ideally you need two variables at the same scope as map:
initExtent to store the boundary of your valid extent, and
validExtent to store the last valid extent found while panning, so that you can bounce back to it.
I've used the newer dojo.on event syntax as well for this example, it's probably a good idea to move to this as per the documentation's recommendation - I assume ESRI will discontinue the older style at some point.
var map;
var validExtent;
var initExtent;
[...]
require(['dojo/on'], function(on) {
on(map, 'pan', function(evt) {
if ( !initExtent.contains(evt.extent) ) {
console.log('Outside bounds!');
} else {
console.log('Updated extent');
validExtent = evt.extent;
}
});
on(map, 'pan-end', function(evt) {
if ( !initExtent.contains(evt.extent) ) {
map.setExtent(validExtent);
}
});
});
You can do the same with the zoom events, or use extent-change if you want to trap everything. Up to you.
It looks like your extent changed function is setting the initial extent variable to the maps current extent and then checking if that extent contains the current extents centre point - which of course it always will.
Instead, declare initExtent at the same scope of the map variable. Then, change the on load event to set this global scope variable rather than a local variable. In the extent changed function, don't update the value of initExtent, simply check the initExtent contains the entire of the current extent.
Alternatively you could compare each bound of the current extent to each bound of the initExtent, e.g. is initExtent.xmin < map.extent.xmin and if any are, create a new extent setting any exceeded bounds to the initExtent values.
The only problem is these techniques will allow the initExtent to be exceeded briefly, but will then snap the extent back once the extent changed function fires and catches up.
I originally posted this solution on gis.stackexchange in answer to this question: https://gis.stackexchange.com/a/199366
Here's a code sample from that post:
//This function limits the extent of the map to prevent users from scrolling
//far away from the initial extent.
function limitMapExtent(map) {
var initialExtent = map.extent;
map.on('extent-change', function(event) {
//If the map has moved to the point where it's center is
//outside the initial boundaries, then move it back to the
//edge where it moved out
var currentCenter = map.extent.getCenter();
if (!initialExtent.contains(currentCenter) &&
event.delta.x !== 0 && event.delta.y !== 0) {
var newCenter = map.extent.getCenter();
//check each side of the initial extent and if the
//current center is outside that extent,
//set the new center to be on the edge that it went out on
if (currentCenter.x < initialExtent.xmin) {
newCenter.x = initialExtent.xmin;
}
if (currentCenter.x > initialExtent.xmax) {
newCenter.x = initialExtent.xmax;
}
if (currentCenter.y < initialExtent.ymin) {
newCenter.y = initialExtent.ymin;
}
if (currentCenter.y > initialExtent.ymax) {
newCenter.y = initialExtent.ymax;
}
map.centerAt(newCenter);
}
});
}
And here's a working jsFiddle example: http://jsfiddle.net/sirhcybe/aL1p24xy/
I have a SharePointWebControls:UserField in a page layout that needs to be excluded from spell checking, as otherwise whenever a user is selected there are a large number of spelling errors are detected in the code-behind for the control.
It seems that in Sharepoint 2007 this behaviour could be implemented by using excludefromspellcheck = "true" but this doesn't seem to work for Sharepoint 2010. Has anyone come across the same problem and found a way around it?
Based on SpellCheckEntirePage.js, that appears to still be the way:
var elements=document.body.getElementsByTagName("*");
for (index=0; index < elements.length;++index)
{
if (null !=elements[index].getAttribute("excludeFromSpellCheck"))
{
continue;
}
// snipped - if (elements[index].tagName=="INPUT")
// snipped - else if (elements[index].tagName=="TEXTAREA")
}
But excludeFromSpellCheck is not a property of UserField, so it probably won't automatically copy down to the rendered HTML. When rendered, the UserField control is made up of several elements. I would try looking at the View Source to see if excludeFromSpellCheck is making it into the final HTML. But to set the attribute on the appropriate elements, you might need to use some jQuery like this:
$("(input|textarea)[id*='UserField']").attr("excludeFromSpellCheck", "true");
You can disable the spell check for certain fields by setting the "excludeContentFromSpellCheck" attribute to "true" on text area and input controls that you dont want to be spell checked.
I did this on all my page layouts. Now i dont get false positives anymore.
The solution is to add a div tag around the fields you don't want spell checked and adding a javascript that sets "excludeFromSpellCheck" to "true" for the elements within the div tag.
The solution i found is described here: Inaccurate Spell Check on SharePoint Publishing Pages
Joe Furner posted this solution, which has worked for me.
https://www.altamiracorp.com/blog/employee-posts/spell-checking-your-custom-lay
It excludes all PeoplePickers on the page:
function disableSpellCheckOnPeoplePickers() {
var elements = document.body.getElementsByTagName("*");
for (index = 0; index < elements.length; index++) {
if (elements[index].tagName == "INPUT" && elements[index].parentNode && elements[index].parentNode.tagName == "SPAN") {
var elem = elements[index];
if (elem.parentNode.getAttribute("NoMatchesText") != "") {
disableSpellCheckOnPeoplePickersAllChildren(elem.parentNode);
}
}
}
}
function disableSpellCheckOnPeoplePickersAllChildren(elem) {
try {
elem.setAttribute("excludeFromSpellCheck", "true");
for (var i = 0; i < elem.childNodes.length; i++) {
disableSpellCheckOnPeoplePickersAllChildren(elem.childNodes[i]);
}
}
catch(e) {
}
}
This code is working partially only,because if you put the people picker value again checking the people picker garbage value for one time.
I've got a working DnD implementation however I've run into a snag. It seems that if I set dojo.dnd.Source.checkAcceptance to true, the Source container I do that to stops checking the dndType, it accepts everything.
I'm checking if there is a node present in the dojo.dnd.Source container, if there is I want to disable dropping. I do this twice because if content is already present when the page loads, we want to disable dropping additional content there and only allow the Source container to contain 1 node. Likewise for the onDrop event.
If checkAcceptance = false, then that works and doesn't accept any drops, however if checkAcceptance = true then it accepts everything.
I'm using dojo version 1.4.2.
Here's the offending code:
var contentSourceA = new dojo.dnd.Source("ContentCol",{accept: ["contentItem"]});
if (dojo.query("#ContentCol")[0].children.length > 1) {
contentSourceA.checkAcceptance = function(){return false;}
}else{
contentSourceA.checkAcceptance = function(){return true;}
}
dojo.connect(contentSourceA,'onDrop',function(source,node,copy){
if (dojo.query("#ContentCol")[0].children.length > 1) {
contentSourceA.checkAcceptance = function(){return false;}
}else{
contentSourceA.checkAcceptance = function(){return true;}
}
});
So hence my question: Does changing dojo.dnd.Source.checkAcceptance affect the type checking functionality? If not, what have I done wrong here? Should I do this via one of the Topic events?
The type checking logic is encapsulated in the default implementation of dojo.dnd.Source.checkAcceptance function. If you override this function, the default logic is lost.
You can create your own DnD source class by inheriting dojo.dnd.Source:
dojo.declare("AcceptOneItemSource", dojo.dnd.Source, {
checkAcceptance : function(source, nodes) {
if (this.node.children.length > 1) {
return false;
}
return this.inherited(arguments);
}
});