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&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?