Scroll Event Issue in WPT

Support
1

Hi Guys,

can some one help me if there is any wrong with script and use case is i need to scroll down the page after navigate.

Script:-

combineSteps
navigate Robot or human?
execAndWait window.setInterval(‘window.scrollBy(0,100)’, 0)
execAndWait document.querySelector(‘ul.paginator-list>li:nth-child(2)>button’).click()

Actual Behaviour:- Scrolling is getting applied to all the test steps.

Expected Behaviour :- should only happen after navigate step.

WPT link :- http://www.webpagetest.org/result/160316_EM_1EN/

Thanks,
ANil.

2

A few tips that may steer you in the right direction:

  • It’s not clear how scrolling will alter the test results. Omit it if possible.
  • Calling setInterval with a 0ms delay will infinitely scroll the page. Do you mean to use setTimeout to scroll only once?
  • Passing a string to setTimeout/Interval is usually frowned upon because it causes the string to be converted into executable JS, which can have a lot of stability issues. Try passing a function instead.
  • Consider combining multiple execAndWaits into one, if possible. For example: execAndWait foo(), bar(). The comma is legal JS syntax for combining multiple statements into one. The wait of the first execAndWait may interfere with the second. Keep the script simple to avoid weird errors.
  • Your selector doesn’t match anything on the page. document.querySelector(‘ul.paginator-list>li:nth-child(2)>a’) targets the page 2 link. I just changed “button” to “a”.
  • Do you want page 1 in the WPT results? If you’re only looking to record page 2 activity, wrap it in logData commands.
  • Check if combineSteps is necessary. I don’t think it is if you’re able to simplify the execAndWaits into one. IIRC it’s only needed if you have more than one.

Taking that all into consideration, I’d recommend trying this script:

logData 0
navigate Robot or human?
logData 1
execAndWait window.setTimeout(function() { window.scrollBy(0,100); document.querySelector(‘ul.paginator-list>li:nth-child(2)>a’).click(); }, 0)

In this case I just combined the two JS statements into the setTimeout callback. This ensures that the click happens after the scroll. But generally if you have two synchronous JS statements in back-to-back execAndWait commands, they can be combined by a comma delimiter.

One reason why you may actually want to keep the scroll and click scripts separate is if scrolling triggers some network activity. You probably want to omit that from the results, so the logData command should be moved to be between the scroll and click. I tried it on your test page and didn’t see any activity, so it should be ok as is.

Try running a test with this revised script and let me know if it works.

3

Thanks for the reply and inputs Rick.
My intention is to click on link 2 after doing scroll on page 1, as i need to capture performance during scroll.
i ran the script you provided, seems to be scrolling event not triggered and it just clicking on link 2.

logData 0
navigate http://www.walmart.com/search/?query=tod...s&cat_id=0
logData 1
execAndWait window.setTimeout(function() { window.scrollBy(0,100); document.querySelector(‘ul.paginator-list>li:nth-child(2)>a’).click(); }, 0)

can you please help out here.
[hr]
Below is the test run for your reference : http://www.webpagetest.org/result/160316_K6_19Z7/

4

I’m also not sure if the setTimeout is necessary. Try this anyway:

execAndWait window.setTimeout(function() { var next = document.querySelector(‘ul.paginator-list>li:nth-child(2)>a’); next.scrollIntoView(); next.click(); }, 0)

The thing is that you’re scrolling immediately before navigating away, so it may be happening too quickly to see. If you really needed, you could separate the JS statements with another setTimeout or sleep.

What exactly do you mean by “capture performance during scroll”? I didn’t see any network activity when I scrolled the page and you’re not recording the Chrome timeline to measure jankiness.

If you can remove the scrolling requirement you can simplify the script:

execAndWait document.querySelector(‘ul.paginator-list>li:nth-child(2)>a’).click()

5

Thanks Rick, let me try.
Need to set the cookie to see the activity during scroll and this feature is not live yet, so im running that particular test in our private instance.