Compilation stuck at find element by xpath without giving any error

Question

I'm trying to automate a project using selenium page object model.

Below is the html code

   <div class="type-1 overflow-hidden card"><div class="col-xl-8 offset-xl-2"><div class="MuiTabs-root-11706 jss12153"><div class="MuiTabs-scroller-11711 MuiTabs-fixed-11712" style="overflow: hidden;"><div class="MuiTabs-flexContainer-11708 MuiTabs-centered-11710" role="tablist"><button class="MuiButtonBase-root-11658 MuiTab-root-11717 jss11701 MuiTab-textColorSecondary-11721 px-3 Mui-selected jss11703" tabindex="0" type="button" role="tab" aria-selected="true" tabtitles="[object Object],[object Object],[object Object],[object Object]"><span class="MuiTab-wrapper-11724 jss11702">MONEY</span><span class="MuiTouchRipple-root-11659"></span></button><button class="MuiButtonBase-root-11658 MuiTab-root-11717 jss11701 MuiTab-textColorSecondary-11721 px-3" tabindex="-1" type="button" role="tab" aria-selected="false" tabtitles="[object Object],[object Object],[object Object],[object Object]"><span class="MuiTab-wrapper-11724 jss11702">DATA</span><span class="MuiTouchRipple-root-11659"></span></button><button class="MuiButtonBase-root-11658 MuiTab-root-11717 jss11701 MuiTab-textColorSecondary-11721 px-3" tabindex="-1" type="button" role="tab" aria-selected="false" tabtitles="[object Object],[object Object],[object Object],[object Object]"><span class="MuiTab-wrapper-11724 jss11702">VOICE</span><span class="MuiTouchRipple-root-11659"></span></button><button class="MuiButtonBase-root-11658 MuiTab-root-11717 jss11701 MuiTab-textColorSecondary-11721 px-3" tabindex="-1" type="button" role="tab" aria-selected="false" tabtitles="[object Object],[object Object],[object Object],[object Object]"><span class="MuiTab-wrapper-11724 jss11702">SMS</span><span class="MuiTouchRipple-root-11659"></span></button></div><span class="jss11725 jss11727 MuiTabs-indicator-11716 jss12154" style="left: 31px; width: 100px;"></span></div></div></div><div><div class="react-swipeable-view-container" style="flex-direction: row; transition: transform 0.35s cubic-bezier(0.15, 0.3, 0.25, 1) 0s; direction: ltr; display: flex; will-change: transform; transform: translate(0%, 0px);"><div class="overflow-unset !important" aria-hidden="false" data-swipeable="true" style="width: 100%; flex-shrink: 0;"><div role="tabpanel" id="full-width-tabpanel-0" aria-labelledby="full-width-tab-0" dir="ltr"><div><div class="pt-xl-4 pt-2"><div class="col-xl-8 mx-xl-auto pb-xl-4 pb-2 jss11732"><div class="row mb-2"><div class="p-2 col-6"><div class="jss12156 jss12159 text-white p-3 h-100 card"><div class="d-flex justify-content-between"><p class="MuiTypography-root-11591 jss11589 jss12160">Prepaid Balance</p><div class="jss12157"><img src="https://dialog-qa-bucket.s3.ap-southeast-1.amazonaws.com/2021-07/icon-wallet_0.svg" class="jss12157"></div></div><div class="d-flex justify-content-start"><h5 class="MuiTypography-root-11591 text-white font-weight-bold MuiTypography-h5-11600">Rs. 67.58</h5></div><div class="d-flex justify-content-between"><p class="MuiTypography-root-11591 jss11589 jss12161">Valid till 29 Apr 2023</p></div></div></div><div class="p-2 col-6"><div class="jss12162 jss12165 text-white p-3 h-100 card"><div class="d-flex justify-content-between"><p class="MuiTypography-root-11591 jss11589 jss12166">Special Money</p><div class="jss12163"></div></div><div class="d-flex justify-content-start"><h5 class="MuiTypography-root-11591 text-white font-weight-bold MuiTypography-h5-11600">Rs. 0.00</h5></div><div class="d-flex justify-content-between"><p class="MuiTypography-root-11591 jss11589 jss12167">Valid till 01 Oct 2022</p></div></div></div></div></div><div class="py-3 text-center" style="background-color: rgb(248, 248, 248); margin: auto;"><button class="MuiButtonBase-root-11658 MuiButton-root-11631 jss11622 jss12168 MuiButton-outlined-11636 jss11625 mx-xl-3 mx-1 mx-md-2 my-1 my-md-0 text-nowrap MuiButton-outlinedPrimary-11637 MuiButton-disableElevation-11642" tabindex="0" type="button"><span class="MuiButton-label-11632 jss11624 jss12169">Transactions</span><span class="MuiTouchRipple-root-11659"></span></button><a class="MuiButtonBase-root-11658 MuiButton-root-11631 jss11622 jss12171 MuiButton-contained-11639 jss11623 mx-xl-3 mx-1 mx-md-2 my-1 my-md-0 text-nowrap MuiButton-containedPrimary-11640 MuiButton-disableElevation-11642" tabindex="0" aria-disabled="false" href="/reload-and-pay?number=768433670&amp;redirect_uri=https%3A//qa.dialog.lk/selfcare" target="_blank"><span class="MuiButton-label-11632 jss11624 jss12172">Reload</span><span class="MuiTouchRipple-root-11659"></span></a></div></div></div></div></div><div class="overflow-unset !important" aria-hidden="true" data-swipeable="true" style="width: 100%; flex-shrink: 0;"><div role="tabpanel" id="full-width-tabpanel-1" aria-labelledby="full-width-tab-1" dir="ltr" hidden=""></div></div><div class="overflow-unset !important" aria-hidden="true" data-swipeable="true" style="width: 100%; flex-shrink: 0;"><div role="tabpanel" hidden="" id="full-width-tabpanel-2" aria-labelledby="full-width-tab-2" dir="ltr"></div></div><div class="overflow-unset !important" aria-hidden="true" data-swipeable="true" style="width: 100%; flex-shrink: 0;"><div role="tabpanel" hidden="" id="full-width-tabpanel-3" aria-labelledby="full-width-tab-3" dir="ltr"></div></div></div></div></div>

This is my page class

public class DataDetailViewPage extends TestBase {

//@FindBy(xpath = "//span[text()='DATA']")
WebElement dataTab;

//@FindBy(xpath = "//*[@id=\"full-width-tabpanel-1\"]/div/div/div[1]/div/div[1]")
WebElement dataCard;

//@FindBy(xpath = "/html/body/div[3]/div[3]")
WebElement detailsPopup;

//@FindBy(xpath = "//*[@id=\"full-width-tabpanel-any\"]/div/div[1]/div[3]/div/div/div")
WebElement detailCard;

//@FindBy(xpath = "//*[@id=\"full-width-tabpanel-any\"]/div/div[1]/div[1]/div/div/div/div[2]/div")
WebElement progressBar;

//@FindBy(xpath = "/html/body/div[3]/div[3]/div/div[1]/button/span/svg/path")
WebElement closePopUp;


  public DataDetailViewPage() { PageFactory.initElements(driver, this); }
 


  
     * public DataDetailViewPage clickDataTab() {
     * 
     * // Thread.sleep(1000);
     * 
     * // dataTab.click();
     * 
     * try { Thread.sleep(5000); System.out.println("Waiting time Data Btn"); }
     * catch (InterruptedException e) { e.printStackTrace(); }
     * 
     * JavascriptExecutor js = (JavascriptExecutor) driver;
     * js.executeScript("arguments[0].click();", dataTab);
     * 
     * return new DataDetailViewPage(); }
     
 

public DataDetailViewPage clickDataCard() {
    
    try {
        Thread.sleep(1000);
    } catch (InterruptedException e) {
        e.printStackTrace();
    }
    
    dataCard = driver.findElement(By.xpath("//*[@id=\"full-width-tabpanel-1\"]/div/div/div[1]/div/div[1]/div/div[2]"));
    
    JavascriptExecutor js = (JavascriptExecutor) driver;
    js.executeScript("arguments[0].click();", dataCard);
    
    //dataCard.click();

    return new DataDetailViewPage();
}

public DataDetailViewPage validateDataCardPopUp() {
    
    detailsPopup = driver.findElement(By.xpath("/html/body/div[3]/div[3]"));

    String handler = driver.getWindowHandle();

    Set handlers = driver.getWindowHandles();

    boolean elementPresent = false;

    Iterator iterator = handlers.iterator();

    while (iterator.hasNext()) {

        String popUps = iterator.next().toString();

        if (!popUps.contains(handler)) {

            driver.switchTo().window(popUps);

            elementPresent = detailsPopup.isDisplayed();

            Assert.assertTrue(elementPresent);

        } else {
            Assert.assertFalse(elementPresent);

        }
    }
    return new DataDetailViewPage();
}

public DataDetailViewPage validateScrollbar() {
    
    detailsPopup = driver.findElement(By.xpath("/html/body/div[3]/div[3]"));

    String script = "return document.documentElement.scrollHeight>document.documentElement.clientHeight;";

    JavascriptExecutor scrollBarPresent = (JavascriptExecutor) driver;

    Boolean scroll = (Boolean) (scrollBarPresent.executeScript(script));

    int elementCount = detailsPopup.findElements(By.className("py-3 card-body")).size();

    if (elementCount >= 3) {
        Assert.assertTrue(scroll);
    } else {
        Assert.assertFalse(scroll);
    }
    return new DataDetailViewPage();
}

public DataDetailViewPage validateProgressBarColour() {
    
    progressBar = driver.findElement(By.xpath("//*[@id=\"full-width-tabpanel-any\"]/div/div[1]/div[1]/div/div/div/div[2]/div/div"));
    
    String colour = progressBar.getCssValue("background-color");

    String actualColour = Color.fromString(colour).asHex();

    String expectedColour = "#880066";

    Assert.assertEquals(actualColour, expectedColour);

    return new DataDetailViewPage();
}

public DataDetailViewPage validateCloseDetailPopup() {
    
    closePopUp = driver.findElement(By.xpath("/html/body/div[3]/div[3]/div/div[1]/button/span/svg/path"));
    
    closePopUp.click();

    Assert.assertTrue(detailsPopup.isDisplayed());

    return new DataDetailViewPage();
}

}

This is my test class

public class DataDetailViewTest extends TestBase {

DataDetailViewPage dataPage;

public DataDetailViewTest() {
    super();
}

@BeforeTest
public void setUpDataView() {
    dataPage = new DataDetailViewPage();
}

@Test
public void verifyDataDetailView(){
    
    dataPage = dataPage.clickDataTab();
    
      dataPage = dataPage.clickDataCard();
      
      dataPage = dataPage.validateDataCardPopUp();
      
      dataPage = dataPage.validateScrollbar();
      
      dataPage = dataPage.validateProgressBarColour();
      
      dataPage = dataPage.validateCloseDetailPopup();
     
}

}

compilation is stuck at Trying to find Element By : By.xpath: //*[@id="full-width-tabpanel-1"]/div/div/div[1]/div/div[1]/div/div[2]

I tried locating element with @FindBy and css selector as well. but cannot go further.

How can I locate element without being stuck and move forward?

Answer 1

Issue was in xpath. Selenium could not able to locate eliment with given xpath. Threfore I customize the xpath use findElements to identify all similar elements. Then use get index to get specific element.

driver.findElements(By.xpath("//div[@class='text-center justify-content-center']")).get(0);