How to use locators of Selenium for tabs within Angular application

Question

I am new to Selenium with Java.

As per the requirement I need to access a TAB within my Angular application.

<a _ngcontent-ng-c689374991="" data-val="Dreams" routerlink="/dreams" data-toggle="tab" href="/dreams" role="tab" class="active"><span _ngcontent-ng-c870109355="" class="slanted-text">Dreams</span></a>

Every time I try to locate the TAB, it gives error stating "Exception in thread "main" org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element:"

Tried the following ways using xpath, but unable to achieve the result:-

Using Full XPath

driver.findElement(By.xpath("/html/body/app-root/app-top-nav/div/div/div/div[2]/div/div[2]/ul/li[5]/a")).click();

Using XPath

driver.findElement(By.xpath("//*[@id=\"offcanvasExample\"]/div[2]/ul/li[1]/a")).click();

Using Router Link

driver.findElement(By.xpath("//div[@_ngcontent-ng-c870109355-router-link='/dreams']")).click();

Using HREF

driver.findElement(By.xpath("//*[contains(text(), 'href=/dreams')]")).click();

Could someone please guide me?

be sure to use a webdriverwait... angular tends to load DOM objects after page load and/or update them frequently. — browsermator
– browsermator, Commented Jan 17, 2024 at 18:12

Dakshesh Dalwadi · Accepted Answer · 2024-04-10 11:18:14Z

0

Wait for the element to be clickable with WebDriverWait in Selenium First, wait for the angular page to complete with the below method

public ExpectedCondition<Boolean> waitForPageLoadingAngular() {
    return driver -> {
        try {
            return (Boolean) ((JavascriptExecutor) getWebDriver()).executeScript("return window.jQuery.active == '0'");
        }
        catch(Throwable  t) {
            return true;
        }
    };
}

This will help to wait for element to be clickable

WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
until(ExpectedConditions.elementToBeClickable(By.xpath("//span[text()='Dreams']")));

answered Apr 10, 2024 at 11:18

Dakshesh Dalwadi

11 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use locators of Selenium for tabs within Angular application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related