My company is trying to perform a browser update from IE8 to IE11. They want my team to automate tests that determine if their applications' web-elements have shifted at all in IE11 compared to IE8.
I did some research and found that the .getLocation() method returns the (x,y) points of an element on the screen. My questions are: what do they use exactly to measure x and y coordinates (i.e. pixels / screen size)? Does it take into account the browser's tool bar at the top of the screen?
I have my doubts about the .getLocation()method so is there a better and more efficient way (than .getLocation()) of determining if a shift has occurred in a web-element's location from browser to browser?
From this link, it looks like the location is measured from the HTML content render pane and therefore ignores the browser window, etc.
You could use JavascriptExecutor and then .getBoundingClientRect but I'm not sure if that will return you any different results. My guess is .getLocation is a wrapper to the JS commands but I can't prove that.
You might consider using an existing tool that compares a page in two browsers. I remember using one years ago that displayed every difference in element position between two browsers but I don't remember now what it was.
Related
I would like to check the position of the elements on a web application on which I am working on. It's a stable application so the positions won't change so much. After searching on the internet I've found this method:
Point getLocation()
Where on the page is the top left-hand corner of the rendered element?
Returns: A point, containing the location of the top left-hand corner of the element
After playing a little bit with it I realized that the position depends on the window size and screen resolution (though I read it somewhere I still checked it just to make sure it's true).
Is there another way? I have a lot of elements so it will be tricky to just store some values depending on a set of resolutions and window dimensions.That would be a lot of work.
In the end nothing beats manual testing when it comes to visual stuff :D
It has to depend on the window size, because the layout of the page changes with the window size.
What you're asking for is essentially:
Can I get the position of elements on the page as if the window was
infinitely wide and infinitely high so that the result would be
static?
No, sorry, you can't do that, because you're probably the first person wanting to do such thing. The positions you're asking for are meaningless. Also, these numbers will most likely be different across the browsers.
I believe you have two options:
Set a fixed window size for this test. If you'll run the test at 1024*768 px every time, it usually won't break. In this case, your positions shouldn't change and you'll get your results.
Bonus idea: you can get a screenshot of the page and compare the images. If the page's content is more or less static, your screenshot will always be the same, so you can compare it to a reference screenshot.
Don't check the absolute numbers, try to check for example whether a WebElement contains the right text, images (and whether the images have been loaded) or even whether a WebElement is visually contained in another WebElement.
So I understand that there is a difference between the way web browsers show colors, but I am just wondering why there is a difference between how Java displays colors and web browsers do and if there is a way to correct for this in a java program.
My specific instance:
From this page:
http://xkcd.com/color/rgb/
I am using the color 'periwinkle'. It is RGB value #8e82fe.
When building a java application (high level description, colored objects being shown for an experiment), the color is not the same it was on the web.
Is there a way to correct for this in the code?
Thanks,
Brian
Don't use XKCD for your comparisons. Reading into the background behind that page ( see here and here ) that the experiment has nothing to do with what the actual color is, but what people think the name of the color is.
If your RGB colors are not matching out, then something is (probably) wrong in your code. Try adding an FF as the front (switching it to ARGB) and see if that resolves the problem.
Also, if you get IE, Firefox and Chrome ( I happen to have all of them at work ) and put the same web page in, and compare them, they should look the same ( they do to me, anyways... ).
According to XKCD's survey, most of those people think periwinkle averages out to #8e82fe.
While the color lovers website tends to think of periwinkle as #8480d9.
According to Decimal Color codes, periwinkle is defined to be #aaaaff.
The web color version of Periwinkle resolves to #ccccff.
Of course, that's not accounting for the various tones of periwinkle.
You're probably not comparing the same colors to begin with.
Problem Description
I am writing a Java application that lets programmers query for page elements on a web page by specifying visible attributes. One of the most important and difficult is Color.
To be specific, i need a way to get the user-visible color of web page elements using Selenium 2 and Webdriver. I want to be able to query for color values (#ff0000) or names (red).
One parameter should control the percentage of similar colors needed to be "dominating" enough. If set to 100% the element is not allowed to have any other color. If set to 50% the element needs to be halfway filled with the color.
There should be another parameter to control the "tolerance" of these colors. With a higher tolerance, red could also match the orange "Ask Question" button here on Stackoverflow.
Example
Given the well-known Stackoverflow web page, i highlighted the page element to check:
With a higher color tolerance and a not too high domination percentage, the following queries should return the specified result:
color('#FFEFC6') // exact match: true
color('yellow') // match in tolerance range: true
color('orange') // true
color('blue') // false
color('green') // false
My first approach
Best bet would be using CSS attributes like color and background-color. But these do not take images into account, which are needed for good color queries. Also, they could produce difficulties because of css selector inheritance and the handling of transparency. In addition, absolutely positioned elements with a higher z-index above the current element could produce unexpected results.
Given is the web page element to check. It is represented either as JavaScript DOM element (or JQuery object) or as RemoteWebElement in the Java bindings of Webdriver.
It is possible to take automated Screenshots of the current state of the web page (i am using Firefox), see here: Take a screenshot with Selenium WebDriver
The coordinates of the page element to check are known. Therefore, the screenshot image could cropped to that size and area and be analyzed somehow to check if the query returns true or false.
Implementation
I am not limited to Java in this case. JavaScript would be very nice because i am doing the other queries with the help of JQuery too. Performance matters. I am counting on you, i fear this is a very difficult task. Therefore i need your input.
UPDATE
I solved this issue by taking screenshots and analyzing the pixel data of the relevant part. That way i can deal with all kinds of background images and transparency. It's part of the Abmash framework, which is open source and free to anybody to use: Abmash on Github
Easiest way:
Get screenshot (save in memory)
Crop screenshot to the element top = el.offsetTop, left = el.offsetLeft, width = el.offsetWidth, height = el.offsetHeight
Get the pixel data for the cropped image
Loop through the pixels getting the total sums of the R, G, B elements then divide the total sums by the pixel count to get the average. Test the average color against your constraints.
If you really want to use JavaScript
You could send the pixel data to JavaScript for processing if you're intent on doing the final check in JavaScript.
Or you could send JavaScript the IMAGE URI for the cropped image. Then draw that IMG to a CANVAS then loop through the pixel with ctx2d.getImageData(...)
Only do the above if the element is an IMG or a has a background-image CSS. Just use color and background-color CSS checks otherwise.
i am facing an issue while using sikuli through java, if there are 2 elements of same kind(or similar image) it fails to click on the correct element. so i wanted to know if it is possible to make sikuli just work inside a particular region and can some one please explain how can it be done ??
Yes sikuli can work within a particular region. The challenge is defining a region that only contains one of your two elements. You define a region by x,y coordinates. You can also increase the size of a region based on the location of a unique pattern (image) on your display.
while exists("foo.png"):
hover("bar.png")
ClickMeRegion = find("bar.png").nearby(5).right()
ClickMeRegion.click("baz.png")
So in the above I look for image foo.png/bar.png/baz.png image pairs that are being displayed. First I hover on bar.png so that visually I can see which pair the script is looking at. Then I create a region extending 5 pixels around the center of bar.png and extend this to the right of the display. This highlights a single baz.png image. I can then click on the one baz.png that I am interested in.
For more info on regions see: http://doc.sikuli.org/region.html
I am currently using "Selenium" to develop web auotomation scripts in Java. I am trying to find a way to capture entire scrolling DIV(html) into an image. Any quick solution ??
Example: http://i.stack.imgur.com/AZduC.png
When you say you want the content, do you mean the HTML or just the text on the screen? If its the text, you can use an XPATH like selenium.getText(//div[#id='theDiv']). If its the HTML, you could evaluate JavaScript on the page to the the innerHTML, like this:
selenium.getEval("this.browserbot.getCurrentWindow().document.getElementById('theDiv').innerHTML")
You can get a screenshot of the whole page with Selenium's captureEntirePageScreenshot(String imageFileURLToWrite).
In principal it should be possible to post process the image to extract just the DIV. You'd need to work out the exact pixel bounds of the DIV, which would probably require the use of getEval() to run some JavaScript on the client.
Its pretty easy.
You take screenshot from the browser window
You take location X and Y of the Div
You take size of the Div: Width and Length
Create Bitmap with the same size and copy subimage using info from 2 and 3 from screenshot taken in step 1.
If you want I can give you code from C#. But its not so hard and I believe you can code it by your own hands.