Anyone knows automation script to verify a view (homePage/Browse) is scrollable or not. i can use ScrollTo(id) which is at the bottom of the page. But it is not a correct method to do, as test case passes if that element present in 1st page
Basically You cannot. You could try to cast the view to ScrollView class however any custom view can implement scroll.
Get the coordinates of any particular element like button etc unique element.
Swipe using driver.swipe() to 100 or more pixels.
And get the coordinates of that element again and check whether x or y coordinates changed or not.
This will let you know whether it is a single page application or more to scroll.
Basically there is no API to check the view is scrollable or not but if you still require this then you can do work around
#Test
public void testVerticalScroll()
{
//Try to Scroll till the 15th row
driver.scrollTo("List item:15");
//Assert that the 1st row is not visible.
Assert.assertFalse( driver.findElement(By.name("List item:01")).isDiaplyes())
//Assert that the 15th row is not visible.
Assert.assertTrue( driver.findElement(By.name("List item:15")).isDiaplyes())
}
You can consider the last visible element as "YourText" But this is
just a workaround that needs to be customized for each page.
Here we are using swipe until we find the element. In this case, the last visible element indicates the margin of the page.
Dimension dimensions = driver.manage().window().getSize();
Double screenHeightStart = dimensions.getHeight() * 0.5;
int scrollStart = screenHeightStart.intValue();
System.out.println("s="+scrollStart);
Double screenHeightEnd = dimensions.getHeight() * 0.2;
int scrollEnd = screenHeightEnd.intValue();
for (int i = 0; i < dimensions.getHeight(); i++) {
driver.swipe(0,scrollStart,0,scrollEnd,2000);
if (driver.findElement(By.name("YourText")).size()>0)
exit;
}
driver.findElement(By.name("YourText")).click();
There is a way to check it. You have to find a layer that you will target for example:
MobileElement scrollableLayer= driver.findElementById("elementID");
Then you will extract attribute value "scrollable" of that element like this:
String scrollableState = scrollableLayer.getAttribute("scrollable");
And then you can check if the String value is true or false.
if (scrollableState.equals("true")){System.out.println("it's scrolable"); }else{System.out.println("it's not scrolable");}
Or you can do whatever you want with it :)
Related
in java Selenium web driver on chrome, I need to make sure that an image has a height attribute. The HTML code I have is this:
<img src="https://www.w3schools.com/tags/img_girl.jpg">
and I'm trying to execute
boolean s = driver.findElement(By.tagName("img")).getAttribute("height") !=null;
but this always returns true although there's no height attribute! and if I try to execute
String s = driver.findElement(By.tagName("img")).getAttribute("height");
I'll get 600 despite there is no height attribute in the HTML code. is there any other way I can check it?
Try this example:
#Test
public void testHeightAttribute(){
driver.get("https://webelement.click/en/welcome");
WebElement img = driver.findElement(By.xpath("//img[1]"));
System.out.println(img.findElements(By.xpath(".[#height]")).size());
System.out.println(img.findElements(By.xpath(".[#src]")).size());
}
I am not sure this is the most elegant way though :). The idea is that you're looking up elements using the element itself as a search context (looking up element within itself). If no attribute is present in DOM then the list would be empty (size() == 0). Otherwise it would be 1.
Basically the common method would look like:
public boolean hasAttributeInDom(WebElement element, String attr){
return !element.findElements(By.xpath(".[#" + attr + "]")).isEmpty();
}
You can check height parameter in styles section of Developer tools. Refer to attached screen shot of sample image from Stack overflow. You can see height parameter at right hand side. Generally, dimension are mentioned here.
You will need to understand and look for particular image property in Styles section as its display CSS properties for entire page.
I apologize if this question is somewhat ambiguous. I have noticed that with Geb elements won't be scrolled into view if said element is off the page and needs to be scrolled to using an "internal" scroll bar
by "internal" scroll bar I am referring to scroll bars that are nested within a given webpage, detached from the global webpage's scroll bar.
When I attempt to grab an element that is off the page due to this internal scroll bar, geb returns a null object (geb couldn't find the element on the page)
I have done a few different hacks that manually scroll these internal scroll bars, but I was wondering if Geb provided any funcionalty to handling these nested scrollbars.
Here is a code snippet to show how I handle finding a given row:
class TabledModule extends Module {
static content = {
headers {$(By.xpath("//lane-group-header"))}
table {$(By.xpath("//div[#class=',y-class']"))}
}
Navigator getAllRows(){
return table.children()
}
Navigator getRow(String text){
return table.children().find{it.text().contains(text)}
}
Navigator getRow(int index){
return table.children()[index]
}
}
from my script:
getAllRows() //returns 50 which it should (only 20 are displayed)
def row = getRow(45) //returns a navigator as it should
row.click() //successfully clicks the correct row
def row2 = getRow("someString") //returns null when the row is off the page this is the problem and I'm wondering now if it is a bug, since getting the row by index seems to work fine.
For this module only about 20 of the 50 rows are shown to show the other rows you have to scroll through a nested scroll bar to get to them. the row I want to access is found lower on the list so it requires scrolling to access it.
what's interesting is that getAllRows().size() returns the correct number of rows: 50, but when I call getRow for a row that's off the page, it returns null. If the same row is found at the top of the list then it works. it only returns null if it needs to be scrolled to.
So I found out what my issue was. If I grab an element off screen with index instead of string. Geb is able to grab the navigator and is able to click on said navigator, but if the element is off the screen, then GEB is unable to get text on the element. to fix this I implemented this method.
Navigator getRow(String text){
JavascriptExecutor jse = (JavascriptExecutor)browser.driver
for(int x = 0; x<getAllRows().size();x++){
def row = getRow(x)
WebElement element = row.firstElement()
jse.executeScript("arguments[0].scrollIntoView(true);", element);
if(row.text().contains(text)){
return row
}
}
return null
}
I implemented drag and drop of images and now i want to constrain proportions of images while resizing.
/**
* Variable: constrainChildrenOnResize
*
* Specifies if children should be constrained according to the <constrainChildren>
* switch if cells are resized (including via <foldCells>). Default is false for
* backwards compatiblity.
*/
mxGraph.prototype.constrainChildrenOnResize = false;
i set this to true but its not working :s
What API/property i need for this functionality..
constrainChildrenOnResize is responsible for positioning and size of the children of resized cell. It means that children should keep their position relatively to the parent-cell.
In your case I would suggest to extend mxVertexHandler using union method. In this example you can see how to implement min-width/min-height restrictions. Using this example you are able to write your own rules for constrain.
Here is my simple solution:
var vertexHandlerUnion = mxVertexHandler.prototype.union;
mxVertexHandler.prototype.union = function (bounds) {
var result = vertexHandlerUnion.apply(this, arguments);
var coff = bounds.width / bounds.height
result.width = result.height * coff;
return result;
};
So this function is called every time you move mouse during dragging the resizer.
bounds - object, always same and represent old geometry of the cell (before resizing)
result - object, represents new values, which are going to be applied. Between this line ad return statement you can place any code you need to modify result.
In my simple example I just get the initial relation between width and height of the cell (coff) and then set new width by multiplying coff and new height. It will work if you drag corner or top/bottom. In real project this logic should be slightly extended, or you should make visible only corner handlers.
By the way, this code will work for all resizable cells on your graph. If you want to apply it only to images or some other kind of cells - you can put condition and check the cell type before recalculating. You can get current cell or its state via this.state.cell or this.state inside of union function.
For example only for vertecies:
... ...
var result = vertexHandlerUnion.apply(this, arguments);
if (this.state.cell.isVertex()) {
//calculations here
}
return result;
I have a flyout that appears near the cursor when a particular user input is triggered.
According to the docs, the Flyout.Placement property is only a preference and does not necessarily reflect the position of the flyout.
I expect the framework to call GetFlyoutPlacement to determine the actual placement. I want to know what the actual placement is so that I can add a little arrow pointing at the cursor position, something like shown in the following:
Is my only option to make the call to GetFlyoutPlacement myself (triggered on the Flyout.Opening event), or is there some more convenient way to do this?
My calls on GetFlyoutPlacement and GetFlyoutPlacementTargetInfo resulted in Error HRESULT E_FAIL has been returned from a call to a COM component. which didn't leave me very much to go on, so I just ended up implementing what I imagine is the logic behind those functions:
public static FlyoutPlacementMode GetActualFlyoutPlacement(
Rect placementTarget,
Size flyoutSize,
FlyoutPlacementMode preferredPlacement )
{
Rect ViewArea = Window.Current.Bounds;
ViewArea.X = 0; // may have non-zero offset for multi-monitor setups
ViewArea.Y = 0; // but we are only interested in offset relative to app view area
switch (preferredPlacement)
{
case FlyoutPlacementMode.Right:
if (desiredSize.Width < ViewArea.Width - placementTarget.Right) return FlyoutPlacementMode.Right;
if (desiredSize.Width < placementTarget.Left) return FlyoutPlacementMode.Left;
if (desiredSize.Height < placementTarget.Top) return FlyoutPlacementMode.Top;
return FlyoutPlacementMode.Bottom;
case FlyoutPlacementMode.Left:
...
}
}
Checkout the approach I suggested here. I believe it is better, because instead of guessing the internal placement algorithm it just compares the absolute coordinates of the flyout and the target element.
I have a responsive layout and I am using sticky.js for my header. This seems to be working minus a few glitches that I can live with. But my anchors are always off (I am using smooth scrolling). I am not sure how to compensate for the sticky header when scrolling to an anchor when the responsive layout is constantly changing the width and height?
Unfortunately there is not a whole lot you can do with straight-CSS which won't distort your design. To tackle this issue in previous projects, I have used jQuery to handle these types of scrolling/anchor issues.
What You Have Now: <a> tags that look for id's on the page. The problem is this: when the site goes responsive, those anchor tags don't line up so nicely with your DOM layout.
My Solution: To give you the high level concept - I used jQuery to modify the ID positions on the fly. Say you click on a link when the site is full-size, and everything is fine. jQuery is not needed here. Now say that when you click that same link when the site was scaled to about the 768px-width range (iPad portrait): then my anchors might look as if they were about 100px off (for example). I wrote a bit of jQuery to handle this: "If the width is __, then offset the anchor ID's by ___px."
I would recommend using JS to account for the difference at time-of-scroll, rather than trying to artificially alter the height property of your anchor tags. Here's a function that might work for you, using pure JS:
adjustScroll = function () {
// Sticky nav selector (you'll have to provide your own selector)
const nav = document.querySelector('header>nav');
if (location.href.indexOf("#") >= 0) {
// Find the name of the anchor
let n = location.href.substr(location.href.indexOf("#")+1);
// Find the anchor by name, if it exists
let a = document.querySelector('a[name="'+n+'"]');
if (!a) {
return;
}
// Set y value as y-value of the anchor, offset by the header height
let y = a.offsetTop;
y -= nav.height + 10;
// Scroll to the y position
window.scrollTo(0, y);
}
}
// Call it wherever you need to call it
adjustScroll();
Examples of where to call it might be on a DOMContentLoaded event, or on an onclick event for anchor tags.