Develop Reference

scrollBy() invoked through execute_script is not working on chrome store page using Selenium and Python

I'm using selenium with python 3 and Chrome driver. I'm trying to perform a scroll in a chrome store URL.
This one: https://chrome.google.com/webstore/detail/online-game-zone-new-tab/abalcghoakdcaalbfadaacmapphamklh
No matter what I tried - the site doesn't scroll. Tried running "window.scrollBy" and "window.scrollTo".
Tried clicking on "body" first, and other elements - nothing.
current code:
driver.maximize_window()
driver.get(url)
time.sleep(4)
driver.execute_script("window.scrollBy(0, 500)")
What could be the problem? I don't want to send a "down" key or "page down" since I believe I'll need to be more precise.

Scrolling an element into view seems to be working fine on that webpage. Here's an example:
footer=driver.find_element_by_class_name('e-f-ra-gj')
driver.execute_script("arguments[0].scrollIntoView()", footer)

If you observe the chrome store page the page have a header that is fixed to the top of the page. So when the window object is invoked, the focus jumps at the top of the page, leaving the document behind the fixed header.
You can find a detailed discussion in offsetting an html anchor to adjust for fixed header
Additionally, at times ChromeDriver is pretty fast and the scrollTo() action fires before Chrome's default scroll to html anchor event. In these cases, a possible solution would be to induce some delay as follows:
setTimeout(function() {window.scrollTo(0, y);},1)
You can find a detailed discussion in JavaScript issue with scrollTo() in Chrome
As an alternative, to perform a scroll within the chrome store URL you need to induce WebDriverWait for the visibility_of_element_located() of your choice and you can use the following Locator Strategy based solution:
Using scrollIntoView():
driver.get('https://chrome.google.com/webstore/detail/online-game-zone-new-tab/abalcghoakdcaalbfadaacmapphamklh')
driver.execute_script("arguments[0].scrollIntoView();", WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//h2[text()='Related']"))))
Browser Snapshot:

Finding the Javascript file from browser [duplicate]

I am trying to teach myself the Google Closure javascript library. I am examining the TreeControl UI widget.
How can I use Chrome Console to analyze what functions are run when I click on the "Cut" button in the demo below? For instance, can I somehow set a break point for that? I've tried viewing the source and looking around, but I feel that Chrome Console may offer a more systematic method.
https://github.com/google/closure-library/blob/master/closure/goog/demos/tree/demo.html

You may be looking for the "Event Listener Breakpoints" section on the right side of the Debugger area. Open that up and select the click event under "mouse". See the screen image. Then click on the button in the app and you will immediately be taken to the code being executed.

With the Chrome Developer Tools window open, click on the "Sources" tab. If you don't see anything you may need to click on the "Show Navigator" button in the upper-left corner of that tab. With the navigator open, navigate to the file where the cut() function is defined (in your case it's demo.html). When you bring the file into view, find the line where the cut() function is defined and then set a breakpoint on the first line within that function. You can set a breakpoint by clicking the line number on the left side.
Once you've set your breakpoint(s), do something on the page that would trigger the cut() function and the browser should break script execution as soon as it enters the cut() function (assuming your breakpoint is on the first line within the cut() function). From this point you can use the controls on the top right of the tab to step in/out/around code and see what's going on.
Here's a screenshot of me doing it: http://d.pr/i/f6BO
Also, here's a great video that talks about using the Chrome Dev tools, including setting breakpoints: http://www.youtube.com/watch?v=nOEw9iiopwI

The thing that you are looking for is called 'Profiling'.
It can be achieved by:
Go to Profiles
Choose first option ('Collect JavaScript CPU Profile')
Start it before pressing button 'Cut'

This may be helpful for some people:
You can right click an element on the elements tab and use 'break on' to break on e.g. sub element modification. https://developer.chrome.com/devtools/docs/javascript-debugging

Selenium doesn't click on element that is not displayed on a current screen

I open a page and ask selenium to click on a button that is placed at the bottom of this page. The button is not displayed on the current screen (so you have to scroll down to see it). As I know selenium have to scroll to an element automatically when I use Click() method.
Unfortunately when I perform Click() method it only scrolls to the element without clicking on it.
When I make a breakpoint before clicking on the element and scroll to it manually then it clicks on the element well.
I have Selenium Webdriver C# v. 2.48.2
I use ChromeDriver v. 47.0.2526.106 m
It seems to me that this problem has been present in the previous versions (so, for a long time) but some versions ago I could use "Scroll to element" method that solved this problem. Now the method I used doesn't work.
The method was the following:
((IJavaScriptExecutor)Driver).ExecuteScript("arguments[0].scrollIntoView();", webElement);

Try to use Actions to scroll
Actions action = new Actions(driver);
action.MoveToElement(elementToClick).Build().Perform();
elementToClick.Click();

Livefyre textarea scrolls to bottom on spacebar

So, I'm running a small wordpress website which uses Livefyre comment system plugin. The website also uses Nicescroll, a plugin that makes your scroll bar 'cooler'. Now, whenever I try to create a space between letters inside the comment box, instead of a space, I get my window scrolled to the bottom of the page ( using Chrome ). I have tried various javascripts found on StackOverflow, without succes. I wanna mention that everytime I disable Nicescroll plugin, everything works perfectly.
What can I do to prevent my browser from scrolling to the bottom of the page when trying to use spacebar inside that specific textarea ? Also, I have a custom search box on my website, which apparently is not affected by nicescroll.

Well, you could just set the spacebarenabled option to false to disable scrolling via space bar at all (but users might expect that to work as it would with the normal scrollbar).
If that’s not an option, then you either have to get into the event handling this plugin uses and figure out a way to not have keypress events from textareas bubble up to where it catches them, or modify its event handling to have it check whether the target element of the event was a textarea or not before it scrolls.

How do I debug and inspect things that change on response to mouseclicks or focus changes?

I'm currently toying around with some autocomplete form fields, and am finding it very hard to inspect the generated drop down items. As soon as I click on the "inspect element" button or try to right click on the dropdowns, the original autocomplete input runs an onclick event (or something that triggers on a focus change) and hides, deletes or otherwise modifies the element I was trying to inspect.
Is there a way to work with the debugger so that the mouseclicks and other commands I give to it don't get intercepted by the script I'm trying to debug?
I currently have this kind of problem on both Firebug and on Chrome's inspector. The only solution I can think right now would be setting some smart breakpoints inside the appropriate event handlers but that is hard to do if I don't know what event handlers to look for or where they are hidden in the original code...

You could set a breakpoint and inspect after it is triggered, I have noticed that freezes the DOM.

You need to use breakpoints. As far as tracking down what's happening where, Chrome's "Call Stack" window can be very helpful.
Cheers

In Firebug you have a Break on next item in Script panel. Since Firebug 1.10, there's a keyboard shortcut for this: Ctrl+Alt+B on Windows (it works even if focus is in the page, not in Firebug).
You'll probably need to have Script panel focused in Firebug since this is a shared shortcut for Break on... which differs in each panel.
It generally freezes the DOM although it's not 100% reliable.
It's also not ideal because it will stop at any JavaScript execution, and will not be helpful if there is some aggressive polling in the background, or global capturing of keyboard events. Anyway it's still better than nothing.

Chrome pauses Javascript execution on F8; it took a bit of repetition but pressing F8 at the right time prevented JS from defocusing the element.

If you are having problem selecting the element, you can try cmd + shift + c on Mac to select the element without right clicking it.
If its DOM manipulation problem, you might try to force state on the input element by right clicking on the element in the Elements panel and set force state to focus.

Open the docked DevTools first (the undocked approach will not work due to the OS limitations.)
Once the autocomplete box is displayed, right-click it and select "Inspect Element" in the context menu. The focus will move to the DevTools but the autocomplete box will still be shown (this worked for me on Linux, tip-of-tree Chromium, M25. Your mileage may vary.)

/**
* Utility to freeze actual DOM state, for example dropdown menu
*/
function easyBreak() {
function doBreak() {
// put breakpoint here to freeze actual dom and write to console easyBreak()
// you have 3 seconds to get to desired state
var a = 0;
}
window.setTimeout(doBreak, 3000);
}

You could use DOM breakpoints.
I'm having a similar case here : I want to inspect dropdown items that only show when the input has focus.
On Chrome, I right-click on the parent element and choose Break on > Subtree modifications.
It will pause - like it does with JS breakpoints - anytime the DOM changes within that parent. You can then inspect the children while the DOM is frozen.