2

I'm trying to check whether a scrollbar is present when there are more than 2 elements in a pop up.

Here is the HTML code for the div which enables the scroll bar if when there are more than 2 elements.

<div class="MuiDialogContent-root-6843 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-6319 mx-auto jss6317 jss6897 MuiTypography-h5-6328">Details</h5></div><div align="center"><div class="MuiTabs-root-6435 jss6898"><div class="MuiTabs-scrollable-6442" style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"></div><div class="MuiTabs-scroller-6440 MuiTabs-scrollable-6442" style="margin-bottom: 0px;"><div class="MuiTabs-flexContainer-6437" role="tablist"><button class="MuiButtonBase-root-6413 MuiTab-root-6446 jss6845 MuiTab-textColorSecondary-6450 Mui-selected jss6849 MuiTab-wrapped-6452" tabindex="0" type="button" role="tab" aria-selected="true" id="simple-tab-any" aria-controls="simple-tabpanel-any"><span class="MuiTab-wrapper-6453 jss6846">Anytime</span><span class="MuiTouchRipple-root-6681"></span></button><button class="MuiButtonBase-root-6413 MuiTab-root-6446 jss6845 MuiTab-textColorSecondary-6450 MuiTab-wrapped-6452" tabindex="-1" type="button" role="tab" aria-selected="false" id="simple-tab-night" aria-controls="simple-tabpanel-night"><span class="MuiTab-wrapper-6453 jss6846">Night time</span><span class="MuiTouchRipple-root-6681"></span></button><button class="MuiButtonBase-root-6413 MuiTab-root-6446 jss6845 MuiTab-textColorSecondary-6450 MuiTab-wrapped-6452" tabindex="-1" type="button" role="tab" aria-selected="false" id="simple-tab-any_bonus" aria-controls="simple-tabpanel-any_bonus"><span class="MuiTab-wrapper-6453 jss6846">Anytime bonus</span><span class="MuiTouchRipple-root-6681"></span></button></div><span class="jss6454 jss6456 MuiTabs-indicator-6445 jss6899" 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" style="height: 380px;"><div class="jss6848"><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-6319 jss6317 jss6900 MuiTypography-body1-6321">99/- Internet Card</p><p class="MuiTypography-root-6319 font-weight-bold jss6317 jss6901">660 MB Total</p></div><div class="pt-2"><div class="MuiLinearProgress-root-6903 jss6902 MuiLinearProgress-colorSecondary-6905 MuiLinearProgress-determinate-6906" role="progressbar" aria-valuenow="71" aria-valuemin="0" aria-valuemax="100"><div class="MuiLinearProgress-bar-6913 MuiLinearProgress-barColorSecondary-6915 MuiLinearProgress-bar1Determinate-6917" style="transform: translateX(-29%);"></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-6319 font-weight-bold pr-2 jss6317 jss6924 MuiTypography-h5-6328" style="color: rgb(136, 0, 102);">470.29 MB</h5><p class="MuiTypography-root-6319 jss6317 jss6925 MuiTypography-body2-6320" style="color: rgb(136, 0, 102);">remaining</p></div><p class="MuiTypography-root-6319 jss6317 jss6926">5 d : 13 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-6319 jss6317 jss6927 MuiTypography-body1-6321">99/- Internet Card</p><p class="MuiTypography-root-6319 font-weight-bold jss6317 jss6928">637 MB Total</p></div><div class="pt-2"><div class="MuiLinearProgress-root-6903 jss6902 MuiLinearProgress-colorSecondary-6905 MuiLinearProgress-determinate-6906" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"><div class="MuiLinearProgress-bar-6913 MuiLinearProgress-barColorSecondary-6915 MuiLinearProgress-bar1Determinate-6917" style="transform: translateX(0%);"></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-6319 font-weight-bold pr-2 jss6317 jss6929 MuiTypography-h5-6328" style="color: rgb(136, 0, 102);">637 MB</h5><p class="MuiTypography-root-6319 jss6317 jss6930 MuiTypography-body2-6320" style="color: rgb(136, 0, 102);">remaining</p></div><p class="MuiTypography-root-6319 jss6317 jss6931">19 d : 13 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; right: 0px;"><div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></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.

public DataDetailViewPage validateScrollbar() {

    // find details pop up in data card
    detailsPopup = driver.findElements(By.cssSelector("div[role='tabpanel']")).get(3);  
    
    //get scroll bar using java script(vertical scroll bar)
    String script = "return document.documentElement.scrollHeight>document.documentElement.clientHeight;";
    
    JavascriptExecutor scrollBarPresent = (JavascriptExecutor) driver;

    //get scroll bar is present to a boolean variable
    Boolean scroll = (Boolean) (scrollBarPresent.executeScript(script));

    //size of the detail cards present inside details pop up
    int elementCount = detailsPopup.findElements(By.xpath("//div[@class='py-3 card-body']")).size();

    //here we check whether scroll bar is present if element count is grater than 2.if present return true or else return false
    if (elementCount > 2) {
        Assert.assertTrue(scroll);
    } else {
        Assert.assertFalse(scroll);
    }
    
    //return new object of DataDetailViewPage
    return new DataDetailViewPage();
}

Right now I have 2 elements and result should be false I'm getting "expected false but found true" error.

Can you tell me what I did wrong here?

Improve this question

1 Answer 1

Reset to default
0

With the HTML code you shared, I tried the below and it worked out. I got the desired result.

I also added in additional elements to increase the content and enable scrollbar and got the right result for that as well.

String JS_ELEMENT_IS_SCROLLABLE = "return arguments[0].scrollHeight > arguments[0].offsetHeight;";
JavascriptExecutor jse = (JavascriptExecutor)driver;
WebElement container = driver.findElement(By.xpath("//div[@role='tabpanel'][1]/div"));
Boolean isScrollable = (Boolean)jse.executeScript(JS_ELEMENT_IS_SCROLLABLE, container);
if (isScrollable) {
    System.out.println("Scrollbar present");
} else {
    System.out.println("Scrollbar Not present");
}
Improve this answer
1
  • 1
    Once I applied your java script code it worked. Thanks. I replaced String script = "return document.documentElement.scrollHeight>document.documentElement.clientHeight;"; to this String script = "return arguments[0].scrollHeight > arguments[0].offsetHeight;"; and changed the scroll execute script accordingly.
    – Darshani Kaushalya
    Jun 9, 2022 at 15:39

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.