Not able to find element of a web application in selenium webdriver

Question

I am trying to click a button using selenium webdriver

driver.findElement(By.xpath(".//*[@id='addLog']")).click();

But am getting an error

org.openqa.selenium.WebDriverException: unknown error: Element <button id="addLog" type="button" class="btn btn-awh1" onclick="addLog()">...</button> is not clickable at point (516, 209). Other element would receive the click: <div id="BBOverlay" style="opacity: 0.216303; width: 1034px; height: 506px;"></div>

HTML:

<!-- Operation Button -->
<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <div class="col-md-4" />
            <div class="col-md-4" style="text-align: center;">
                <div class="btn-group">
                    <button id="addLog" class="btn btn-awh1" type="button"     onclick="addLog()">
                    Create My Health Log
                      <i class="fa fa-plus" aria-hidden="true"/>
                    </button>
                </div>
            </div>
            <div class="col-md-4" />
        </div>
    </div>
    <!-- End Of Operation Button -->
</div>

The code before this operation button is

  <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
    <li class="active" role="presentation">
    <a href="#log" aria-controls="log" role="tab" data-toggle="tab">My Health Log</a>
    </li>
    <li role="presentation">
    <a href="#details" aria-controls="details" role="tab" data-toggle="tab">My Health Details</a>
    </li>
    <li role="presentation">
    <li role="presentation">
    </ul>
    <!-- Tab panes -->
    <div class="tab-content" style="margin-top:25px">
    <!-- My Health Log -->
    <div id="log" class="tab-pane active center" role="tabpanel">

Any help is appreciated.

Answer 1

If you read the error message, it states that there is an element covering the element you are trying to click. I'm not sure what the element is

<div id="BBOverlay" style="opacity: 0.216303; width: 1034px; height: 506px;"></div>

but from the id it looks like it's an overlay of some sort. I would wait for that element to be invisible and then click the desired button. I can't know if that will work for sure given the info you've provided so you'll have to try it and let me know.

new WebDriverWait(driver, 10).until(ExpectedConditions.invisibilityOfElementLocated(By.id("BBOverlay")));
driver.findElement(By.id("addLog")).click();

Answer 2

Try the following xpath if it works for you:

driver.findElement(By.xpath("//button[contains(text(),'Create My Health Log')]")).click();

OR

driver.findElement(By.xpath("//button[@class='btn btn-awh1']")).click();

OR

driver.findElement(By.xpath("//button[@id='addLog'][@class='btn btn-awh1']")).click();

OR

driver.findElement(By.cssSelector(".btn-group #addLog")).click();

OR

driver.findElement(By.cssSelector(".row .form-group .col-md-4 .btn-group #addLog")).click();

I guess the element is below in page and you need to scroll for it: This will work I guess

WebElement elements = driver.findElement(By.xpath("//button[@class='btn btn-awh1']"))   
Thread.sleep(3000L);
JavascriptExecutor js = (JavascriptExecutor) driver;
int yPosition = elements.getLocation().getY();
js.executeScript("window.scroll (0, " + yPosition + ") ");
Thread.sleep(3000L);
driver.findElement(By.xpath("//button[@class='btn btn-awh1']")).click();

Let me know if any of them works for you.