A question that comes up time and again during web application test automation with QF-Test is: How do I scroll? How do I trigger a scroll event? Can I tell QF-Test to turn the mouse wheel? Can I simulate scrolling with the mouse in QF-Test? I just want to scroll down a little!
In general, our first response to these kinds of questions is: You shouldn’t have to. QF-Test handles scrolling by itself and will fully automatically scroll elements into the viewport as soon as it needs to interact with them. That’s why QF-Test does not record scroll events, or offer a ‘Scroll’ node, because in 99% of cases, QF-Test will do the right thing automatically.
But you’re probably here because you’re part of that 1% of cases where that mechanism is not enough. So in this blog post, I will tell you all about how QF-Test scrolls your web application and how to control that scrolling yourself.
Scroll manually using keyboard events
If you just want to scroll a set amount, you should try to scroll by recording keyboard events.
In most web applications, the arrow keys can be used to scroll around. Space and Shift+Space will scroll roughly one window height, and the Home and End keys should scroll to the top and bottom of the document, respectively. That way you might be able to skip the more complicated methods described below.
Fine-tune the QF-Test scrolling algorithm
Let’s say QF-Test is already scrolling for you, but it’s not quite doing it the way you need. QF-Test offers several SUT options you can use to configure its scrolling behavior.
You can set these options in a SUT script node or using the @option doctag in QF-Test 9.
Options.OPT_WEB_SCROLL_VISIBLE
This option controls how web nodes are scrolled visible. Possible values are:
Options.VAL_WEB_SCROLL_VISIBLE_DEFAULT(use the QF-Test algorithm),Options.VAL_WEB_SCROLL_VISIBLE_NEVER(prohibits scrolling),Options.VAL_WEB_SCROLL_VISIBLE_TOPOptions.VAL_WEB_SCROLL_VISIBLE_BOTTOMOptions.VAL_WEB_SCROLL_VISIBLE_MINIMAL- a custom JSON string matching the
optionsparameter of theElement:scrollIntoViewJavaScript API
Options other than « default » and « never » will call node.scrollIntoView() directly in the browser’s JavaScript context. scrollIntoView is a pretty powerful part of the JavaScript Element API. You can learn all about it’s advanced options in the mdn web docs.
You can also override this option on an individual component by setting the node property qfs:scrollvisible:
def node = rc.getComponent("myElement") // replace with a component's QF-Test ID
node.setProperty("qfs:scrollvisible", Options.VAL_WEB_SCROLL_VISIBLE_NEVER)
Options.OPT_WEB_MIN_DELAY_AFTER_AUTO_SCROLL
With this option, you can introduce some additional delay after every automatic scroll action, in ms. This is useful if your application uses animations that are triggered by scrolling or if your application just needs a little more time to reload data after scrolling. The default value is 150.
Options.OPT_PLAY_SCROLL_ITEM
Set to False to stop QF-Test from automatically scrolling to sub-items of lists, tables or trees. You can use this if QF-Test scrolls to weird places when navigating a tree, for example.
Options.OPT_PLAY_SCROLL_PADDING
Extra padding for automatic scrolling, in px. Use this to make QF-Test increase or decrease the calculated minimal required scroll amount so that more of the surroundings of the target element remain visible. The default value is 5.
Options.OPT_PLAY_WEB_AUTO_SCROLL
When set to False, QF-Test will not perform any auto-scrolling at all. Use this to completely opt-out of automatic scrolling and handle it manually.
Scroll components into view
You can trigger the QF-Test scrolling algorithm manually in an SUT script like this:
node = rc.getComponent("myElement") // replace with a component's QF-Test ID
// Boolean scrollPointVisible(int targetX, int targetY, boolean propagate)
node.scrollPointVisible(0, 0, true)
This will try to scroll the element so that it becomes visible. If the element cannot be made completely visible, it will scroll it so that at least the requested target point becomes visible.
If the QF-Test algorithm is not helpful in your situation, maybe because you want to trigger a scroll action by itself, you can use a small SUT script which calls any JavaScript scrolling function like this:
node = rc.getComponent("myElement") // replace with a component's QF-Test ID
node.evalJS("_qf_node.scrollIntoView()") // arbitrary JavaScript
Scroll by set amounts
But what if you need even more control over the scrolling or don’t have a particular component you want to scroll to?
You can also any scroll container by a precise amount using JavaScript.
For example, this SUT script would scroll the window down by 25 pixels:
node = rc.getComponent("genericDocument")
node.evalJS("window.scrollBy(0,25)")
The first parameter of the scrollBy method controls the x-axis, so you can even scroll sideways using this method.
And that’s it. That was all you need to know about scrolling web content with QF-Test to get you out of even the trickiest situations.
If you are still stuck, you can get in touch with our support team, who are always happy to help!