Elaine McGovern
Elaine McGovern

Reputation: 269

Selenium Webdriver Java : Element Not Visible Exception

I am new to Selenium.

I am having difficulty getting the following link to click.

I am getting an elemnt not visible exception:

org.openqa.selenium.ElementNotVisibleException: element not visible

For

driver.findElement(By.xpath("//a[@href='/Home/Members']")).click();

I have looked through stackoverflow and the solutions given don’t work for me.

My code is as follows:

I have included a couple of my sanity checks, which i will take out when the link clicks

public void clickMembersBenefitsFromHasLoggedInScreen() {

    if(driver.findElements(By.xpath("//a[@href='/Home/Members']")).size() != 0) {


            int okSize=driver.findElements(By.xpath("//a[@href='/Home/Members']")).size();

            System.out.println("ok_size "+okSize);

            System.out.println("Hello World "+driver.findElement(By.xpath("//a[@href='/Home/Members']")).getTagName());

            driver.findElement(By.xpath("//a[@href='/Home/Members']")).click();

        }else {
            System.out.println("[AerCardHomePageModel][Does Not Have Members Benefits Button]");
        }
}

And the HTML Page it is acting upon is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LoggedIn - AerCard</title>
    <link href="/Content/css?v=XHx4C0AbUkAQdcPtt7lhY9Ne4vCiFZm7FZ_iSLXgqSk1" rel="stylesheet"/>

    <script src="/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>

    <script src='https://cdn.polyfill.io/v2/polyfill.min.js'></script>

</head>
<body>

    <div id="aerCardApp">
        <div class="" style="height:120px; background-color:white">

            <div class="pull-left" style="height:75%; width:15%; text-align:center; margin-left: 50px">
                <img style="max-height:100%" src="/img/aer lingus.JPG" />

            </div>
            <div class="pull-right" style="height:75%; width:15%; text-align:center; margin-right: 50px">
                <img style="max-height:100%" src="/img/boi.JPG" />

            </div>
        </div>
        <div class="" style="background-color:lightgray">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="navbar-collapse collapse pull-right">
                        <ul class="nav navbar-nav navbar-right">

    </ul>

                </div>
            </div>
        </div>
        <div class="" style="height:120px; background-color:black">
            <div  class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <h3 v-cloak style="color:white; padding-top:15px">Welcome {{Name}} {{AerCardId}}</h3>
                        <h4 v-cloak style="color:white;">Aer Credit Card Members benefit Section</h4>
                    </div>
                    <div v-if="MemberShipDate !== null" class="col-lg-6 pull-right">
                        <h3 style="color:white; padding-top:15px">Aer Credit Card Membership Date</h3>
                        <h4 style="color:white;">{{MemberShipDate}}</h4>
                    </div>
                </div>
            </div>
        </div>
        <div v-cloak class="container body-content">




<div class="row">
    <div class="col-lg-6">
        <h3>Login to your AerClub Account</h3>
        <div class="jumbotron" style="margin-top: 35px;">
            <div v-show="!isLoggedIn">
                <form id="loginForm" v-on:submit.prevent="onSubmit(this)">
                    <div class="alert alert-danger" v-if="formErrors.length">
                        <strong>Please correct the following error(s):</strong>
                        <ul>
                            <li v-for="error in formErrors">{{ error }}</li>
                        </ul>
                    </div>
                    <div class="form-group">
                        <label for="formTitle">Username/Email</label>
                        <input type="text" class="form-control" id="username" v-model:bind="username">
                        <label for="formFirstName">Password</label>
                        <input type="password" class="form-control" id="password" v-model:bind="password">
                    </div>
                    <button type="submit" class="btn btn-success pull-right">Login</button>
                </form>
            </div>
            <div v-show="isLoggedIn">
                <strong>Congratulations</strong>
                <p>You have successfully connected your</p>
                <p>AerClub rewards account with your Bank</p>
                <p>Of Ireland Aer Credit Card</p>
                <p><a href="/Home/Members" class="btn btn-primary  pull-right">Members Benefits &raquo;</a></p>
            </div>
        </div>
    </div>
    <div class="col col-lg-6">
        <img style="width:100%; padding-left:20px; padding-top:30px" src="/img/cc.png" />
    </div>

</div>

            <hr />
        </div>
        <div class="page-footer" style="height:50px">
            <div class="row">
                <div class="col-xs-12 col-sm-6" style="text-align:center; padding-top:10px">
                    <span class="txt-color-white"> © 2018 -  All Rights Reserved</span>
                </div>
            </div>
        </div>

    </div>

    <script src="/bundles/jquery?v=FVs3ACwOLIVInrAl5sdzR2jrCDmVOWFbZMY6g6Q0ulE1"></script>

    <script src="/bundles/bootstrap?v=2Fz3B0iizV2NnnamQFrx-NbYJNTFeBJ2GM05SilbtQU1"></script>

    <script src="/Scripts/Views/common.js"></script>

        <script src="/Scripts/bundle/LoggedIn.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>

</body>
</html>

Upvotes: 2

Views: 2808

Answers (2)

C.Aglar
C.Aglar

Reputation: 1319

I am not an expert but i had similar problems. Especially in hrefs it sometime does not find the element. Sometimes it does not load the full page and therefore element you are looking for is invisible. You might try explicit wait as follows

WebDriverWait wait = new WebDriverWait(driver, 15);
WebElement elem = wait7.until(ExpectedConditions.visibilityOfElementLocated(By.id("")));

Sometimes cssSellector works better. You might try cssSellector.

Upvotes: 0

undetected Selenium
undetected Selenium

Reputation: 193058

As per the HTML you have shared the link with text as Members Benefits... is visible once you are Logged In. So to identify the WebElement you have to induce WebDriverWait along with ExpectedConditions clause elementToBeClickable as follows :

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.partialLinkText("Members Benefits"))).click();

Upvotes: 1

Related Questions