2

I have a pop up which enables a scroll bar depending on the element count it contains. Right now there are more than two elements and scroll bar is present.

Below is my html view of the pop up.

<div class="MuiDialogContent-root-2848 px-3 pb-5 pt-0"><div class="text-center justify-content-center"><div class="col-md-6 mx-auto mt-3"><h5 class="MuiTypography-root-1259 mx-auto jss1257 jss2866 MuiTypography-h5-1268">Details</h5></div><div align="center"><div class="MuiTabs-root-2223 jss2867"><div class="MuiTabs-scrollable-2230" style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"></div><div class="MuiTabs-scroller-2228 MuiTabs-scrollable-2230" style="margin-bottom: 0px;"><div class="MuiTabs-flexContainer-2225" role="tablist"><button class="MuiButtonBase-root-1545 MuiTab-root-2234 jss2850 MuiTab-textColorSecondary-2238 Mui-selected jss2854 MuiTab-wrapped-2240" tabindex="0" type="button" role="tab" aria-selected="true" id="simple-tab-any" aria-controls="simple-tabpanel-any"><span class="MuiTab-wrapper-2241 jss2851">Anytime</span><span class="MuiTouchRipple-root-2445"></span></button><button class="MuiButtonBase-root-1545 MuiTab-root-2234 jss2850 MuiTab-textColorSecondary-2238 MuiTab-wrapped-2240" tabindex="-1" type="button" role="tab" aria-selected="false" id="simple-tab-night" aria-controls="simple-tabpanel-night"><span class="MuiTab-wrapper-2241 jss2851">Night time</span><span class="MuiTouchRipple-root-2445"></span></button><button class="MuiButtonBase-root-1545 MuiTab-root-2234 jss2850 MuiTab-textColorSecondary-2238 MuiTab-wrapped-2240" tabindex="-1" type="button" role="tab" aria-selected="false" id="simple-tab-any_bonus" aria-controls="simple-tabpanel-any_bonus"><span class="MuiTab-wrapper-2241 jss2851">Anytime bonus</span><span class="MuiTouchRipple-root-2445"></span></button></div><span class="jss2242 jss2244 MuiTabs-indicator-2233 jss2868" style="left: 0px; width: 91.8125px;"></span></div></div></div><div class="pt-3" role="tabpanel" id="full-width-tabpanel-any" aria-labelledby="full-width-tab-any"><div class="scrollbar-container scroll-section ps ps--active-y" style="height: 380px;"><div class="jss2853"><div class="justify-content-center py-2 row"><div class="col-lg-7 col"><div class="card"><div class="py-3 card-body"><div class="d-flex justify-content-between align-items-center"><p class="MuiTypography-root-1259 jss1257 jss2869 MuiTypography-body1-1261">99/- Internet Card</p><p class="MuiTypography-root-1259 font-weight-bold jss1257 jss2870">637 MB Total</p></div><div class="pt-2"><div class="MuiLinearProgress-root-2872 jss2871 MuiLinearProgress-colorSecondary-2874 MuiLinearProgress-determinate-2875" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"><div class="MuiLinearProgress-bar-2882 MuiLinearProgress-barColorSecondary-2884 MuiLinearProgress-bar1Determinate-2886" style="transform: translateX(-100%);"></div></div></div><div class="d-flex justify-content-between pt-2 align-items-center"><div class="d-inline-flex align-items-baseline flex-wrap"><h5 class="MuiTypography-root-1259 font-weight-bold pr-2 jss1257 jss2893 MuiTypography-h5-1268" style="color: rgb(136, 0, 102);">0 Bytes</h5><p class="MuiTypography-root-1259 jss1257 jss2894 MuiTypography-body2-1260" style="color: rgb(136, 0, 102);">remaining</p></div><p class="MuiTypography-root-1259 jss1257 jss2895">15 hrs : 55 min more</p></div></div></div></div></div><div class="justify-content-center py-2 row"><div class="col-lg-7 col"><div class="card"><div class="py-3 card-body"><div class="d-flex justify-content-between align-items-center"><p class="MuiTypography-root-1259 jss1257 jss2896 MuiTypography-body1-1261">99/- Internet Card</p><p class="MuiTypography-root-1259 font-weight-bold jss1257 jss2897">637 MB Total</p></div><div class="pt-2"><div class="MuiLinearProgress-root-2872 jss2871 MuiLinearProgress-colorSecondary-2874 MuiLinearProgress-determinate-2875" role="progressbar" aria-valuenow="99" aria-valuemin="0" aria-valuemax="100"><div class="MuiLinearProgress-bar-2882 MuiLinearProgress-barColorSecondary-2884 MuiLinearProgress-bar1Determinate-2886" style="transform: translateX(-1%);"></div></div></div><div class="d-flex justify-content-between pt-2 align-items-center"><div class="d-inline-flex align-items-baseline flex-wrap"><h5 class="MuiTypography-root-1259 font-weight-bold pr-2 jss1257 jss2898 MuiTypography-h5-1268" style="color: rgb(136, 0, 102);">636.70 MB</h5><p class="MuiTypography-root-1259 jss1257 jss2899 MuiTypography-body2-1260" style="color: rgb(136, 0, 102);">remaining</p></div><p class="MuiTypography-root-1259 jss1257 jss2900">19 d : 15 hrs more</p></div></div></div></div></div><div class="justify-content-center py-2 row"><div class="col-lg-7 col"><div class="card"><div class="py-3 card-body"><div class="d-flex justify-content-between align-items-center"><p class="MuiTypography-root-1259 jss1257 jss2901 MuiTypography-body1-1261">99/- Internet Card</p><p class="MuiTypography-root-1259 font-weight-bold jss1257 jss2902">637 MB Total</p></div><div class="pt-2"><div class="MuiLinearProgress-root-2872 jss2871 MuiLinearProgress-colorSecondary-2874 MuiLinearProgress-determinate-2875" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"><div class="MuiLinearProgress-bar-2882 MuiLinearProgress-barColorSecondary-2884 MuiLinearProgress-bar1Determinate-2886" style="transform: translateX(-100%);"></div></div></div><div class="d-flex justify-content-between pt-2 align-items-center"><div class="d-inline-flex align-items-baseline flex-wrap"><h5 class="MuiTypography-root-1259 font-weight-bold pr-2 jss1257 jss2903 MuiTypography-h5-1268" style="color: rgb(136, 0, 102);">0 Bytes</h5><p class="MuiTypography-root-1259 jss1257 jss2904 MuiTypography-body2-1260" style="color: rgb(136, 0, 102);">remaining</p></div><p class="MuiTypography-root-1259 jss1257 jss2905">9 d : 15 hrs more</p></div></div></div></div></div></div><div class="ps__rail-x" style="left: 0px; bottom: 0px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 0px; height: 380px; right: 0px;"><div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 305px;"></div></div></div></div><div class="pt-3" role="tabpanel" hidden="" id="full-width-tabpanel-night" aria-labelledby="full-width-tab-night"></div><div class="pt-3" role="tabpanel" hidden="" id="full-width-tabpanel-any_bonus" aria-labelledby="full-width-tab-any_bonus"></div></div></div>

Below is the code to get scroll bar value.

// find details pop up in data card
    
    //detailsPopup = driver.findElements(By.cssSelector("div#full-width-tabpanel-any")).get(0);
    
    
    //get scroll bar using java script(vertical scroll bar)
    //String script = "return document.documentElement.scrollHeight>document.documentElement.clientHeight;";
    String script = "return arguments[0].scrollHeight > arguments[0].offsetHeight;";
    
    JavascriptExecutor scrollBarPresent = (JavascriptExecutor) driver;

    //get scroll bar is present to a boolean variable
    //Boolean scroll = (Boolean) (scrollBarPresent.executeScript(script));
    Boolean scroll = (Boolean)scrollBarPresent.executeScript(script, detailsPopup);
    System.out.print(scroll);

When I print the scroll value it returns false even though it should be true. This script work only when scrollbar is not present. why is it not getting the scroll value when it is present?

Improve this question
4
  • It would help if you can share your JS and CSS(scrollbar-container scroll-section ps ps--active-y) for enabling the scrollbar for your container.
    – IAmMilinPatel
    Jun 28, 2022 at 6:01
  • How can I get CSS(scrollbar-container scroll-section ps ps--active-y). can you guide me?
    – Darshani Kaushalya
    Jun 28, 2022 at 8:32
  • You can get them from the developers or from the HTML DOM. You can get that from the browser console as well.
    – IAmMilinPatel
    Jun 29, 2022 at 2:37
  • overflow-y: auto;
    – Darshani Kaushalya
    Jun 29, 2022 at 2:57

1 Answer 1

Reset to default
2

The problem in your piece of code would be because you are trying to get the scrollbar for the parent element of the element for which you want to check the scrollbar.

Parent element: <div class="pt-3" role="tabpanel" id="full-width-tabpanel-any" aria-labelledby="full-width-tab-any">

Actual element: <div class="scrollbar-container scroll-section ps ps--active-y" style="height: 880px;">

This worked for me:

WebElement detailsPopup = driver.findElement(By.cssSelector("div[class='scrollbar-container scroll-section ps ps--active-y']"));
String script = "return arguments[0].scrollHeight > arguments[0].offsetHeight;";
JavascriptExecutor scrollBarPresent = (JavascriptExecutor) driver;
Boolean scroll = (Boolean)scrollBarPresent.executeScript(script, detailsPopup);
System.out.print(scroll);

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.