CSS Zoom and Mouse Events

[Steven Zaluk]

Hi,

I am working on a project where we rely on dynamically setting a CSS zoom attribute to either increase or decrease the zoom on a page.  I am trying to hover over an item on the page using the Actions class but when the zoom is set (depending upon how much zoom is set) other elements on the page are being interacted with instead of the intended element.  

My questions is when we say something like this:

Actions actions = new Actions(webDriver);

actions.moveToElement(webElement).perform();

Does the moveToElement() use the original coordinates of the web element or does it take into account the zoom factor when it tries to move to it?  From my testing it seems to not take into account the zoom factor and it's moving to a web element located in the original coordinates.

Thanks,

Steve

[David Burns]

This is a depends.

When does that zoom get initiated? After the action chains have started working? If after then we use what we know about the element before we do the move.

I wouldnt have thought that zoom would affect things too much since we rely on the browser to tell us where elements are and if its not calculating that properly its either we are asking for it before the zoom takes affect (like before you hover) or the browser is doing the wrong thing.

If you can give us a reduced test case in a bug report if you feel its wrong then we can look at it.

David

David Burns
Email: david...@theautomatedtester.co.uk
URL: http://www.theautomatedtester.co.uk/

--
You received this message because you are subscribed to the Google Groups "Selenium Developers" group.
To unsubscribe from this group and stop receiving emails from it, send an email to selenium-develo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-developers/CADPXkqzBAdBnNqua8tq%2BUb1TudMaf8wgOmrMxrjshMJnTSN_bg%40mail.gmail.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Steven Zaluk]

Thanks for the response.  I will try to put a test case together and send that over.

Basically, we are using controls that are added to a site through Javascript that help people with visual impairments navigate a site easier.  The main component of this is custom zooming.  The controls get initiated after the page is loaded so it does seem like it's using what is known about the element before it zooms.  I even tried reinstantiating the page object after zooming hoping that would capture the new coordinates but that doesn't seem to do the trick either.  When I looked at the Javadoc for moveToElement, the following is there:

   * The element is scrolled into view and its location is calculated using getBoundingClientRect.

According to what I read online, getBoundingClientRect takes into consideration CSS transforms like scaling when computing the elements bounding rectangle but unfortunately we are using the CSS zoom property. 

I do some recalculations on the X and Y coordinates and use those as offsets and this works *most* of the time when doing a mouse over but I am definitely looking for a better way to handle this.

Thanks,

Steve   

To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-developers/CAPmg_ctVUoAhh6EJSkU%2Bba6T_9FsGMVM6rJnJjDW3fb8X7_BLw%40mail.gmail.com.

[Mark Collin]

Problems aside, using a custom JavaScript function to zoom in to help people with visual impairments is pointless (been there and tested such functionality before).

 

People with visual impairments either always have the browser zoom turned up so that they can read *all* the sites they are looking at (as all sites need to be made larger), or they use a customised accessibility style sheet, or they use a screen reader.

 

All you are doing is adding a function that people without disabilities think that people with disabilities would use, increasing the JavaScript load on the page and making the code/styling more complex.  It’s basically a fail whichever way you look at it.

To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-developers/CADPXkqwu-9ZiXkKsZdrr3xpYe4F-XjzWYZk2QEOp%2BiPGk81uLQ%40mail.gmail.com.

[Steven Zaluk]

Thanks for your amazing insight.  Being this is a product for a company that has been the leader in assistive technology for over 20 years and that being their core business, I will go with the work they have done to test out the validity of what we are trying to build.  We have received very favorable feedback from numerous case studies with people who have visual disabilities ranging from mild to severe.  This is also just a part of a larger offering that integrates with the most popular screen reader on the market that we also manufacture.  We just did our first public demo at the Boston Accessibility Conference last Saturday at the Microsoft New England R&D Center in Cambridge, MA and people who were there were very excited with what we have built so far.  So in short, this is not just adding simple zooming to a web page.

Thanks,

Steve

To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-developers/01dd01cebdb4%240a55ef50%241f01cdf0%24%40lazeryattack.com.

[Steven Zaluk]

I have another question that is somewhat related to this.  Part of what we do is to dynamically alter the style of an element after the page loads depending upon what the user does with our control.  For example,  when the zoom is on and a user hovers over an element on the screen we apply an image to the background to make it stand out.  We do this by setting a style called backgound-image.  We do this with other styles too like the cursor.  I am noticing that if I try to pull the style attribute of that WebElement by doing webElement.getAttribute("style") before or after we apply that style it is the same.  If I create a new WebElement directly after we apply that style the correct value is returned.  I am using the PageFactory to instantiate my objects like this:

    @FindBy(how = How.CSS, using = P1_LOCATOR)

    private WebElement p1;

My question is when I try to pull back things like an attribute or a style on a WebElement using the proper methods (i.e. getAttribute() or getCssValue()), are those values pulled off the object at the time of the calling or are they using "cached" values from when that object was initialized by the PageFactory?  I am seeing the latter but I can't imagine that is the way it would work.

Thanks,

Steve