Selecting right element in 'Two scroll' navigation

How to?
#1

Describe the problem.

Url1: Saved

When you visit this page, you can see a right-hand modal. If you have an account, there is a list of products here that scrolls.

When trying to set up WebScraper, I cannot figure out how to get the extension to scroll the 'Saved' modal. It always scrolls the main site page in the background.

Ive tried starting with the root page url, gem.app, and first using a SelectorElementClick to 'open' the Saved modal. But it still ends up scrolling in the main UX.

Sitemap:
{"_id":"gemSaved","startUrl":["https://gem.app/saved"],"selectors":[{"delay":2000,"elementLimit":500,"id":"scroll","multiple":true,"parentSelectors":["_root"],"selector":"div:nth-of-type(n+8) img.jsx-3659364842, div.jsx-1391266968","type":"SelectorElementScroll"},{"id":"itemSelect","linkType":"linkFromAttributes","multiple":true,"parentSelectors":["scroll"],"selector":"a","type":"SelectorLink"},{"id":"itemTitle","multiple":false,"parentSelectors":["itemSelect"],"regex":"","selector":".jsx-2342336358 a","type":"SelectorText"},{"id":"price","multiple":false,"parentSelectors":["itemSelect"],"regex":"","selector":"div.valueWrap","type":"SelectorText"},{"id":"source","multiple":false,"parentSelectors":["itemSelect"],"regex":"","selector":".jsx-2045488200 a","type":"SelectorText"},{"clickActionType":"real","clickElementSelector":"img.next","clickElementUniquenessType":"uniqueHTML","clickType":"clickMore","delay":750,"discardInitialElements":"do-not-discard","id":"imageSelect","multiple":true,"parentSelectors":["itemSelect"],"selector":"div.imageArea","type":"SelectorElementClick"},{"id":"image","multiple":true,"parentSelectors":["imageSelect"],"selector":"img.jsx-3659364842","type":"SelectorImage"}]}

#2

Hi,

To target the inner scroll, you will have to manually locate the scroll selector in the sitemap JSON and insert the line "scrollElementSelector": "ABC"

"ABC" will have to be replaced with the correct element identifier which I am unable to find without being able to access the HTML with the scroll present.

scroll
scroll743×469 37.6 KB

To find the selector, you will have to manually inspect the HTML and identify the element that has a CSS value that looks like "overflow-y: auto;" but it could be slightly different.

#3

Thank you! This worked.

I had to be sure to format the selector value properly.

In this case, the target page HTML was:

Formatting this properly for WebScraper looked like this:

"scrollElementSelector":"div.jsx-790059879.savedScroll"

Hope it can help someone else. Thank you again.