0

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?

1 Answer 1

0

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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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