Finding element by CSS using Selenium

Question

I have The following element in my web page:

<button id="btnPackageDownloadtopPackageTable1dde0fcb2-948b-4bbc-b347-40deb2f6034e" title="Download package" ng-style="{'display': ''}" ng-show="!PackageManagementCtrl.downloadStartedForPackage['topPackageTable1dde0fcb2-948b-4bbc-b347-40deb2f6034e']" phd="{&quot;action&quot;: &quot;enable&quot;, &quot;code&quot;: 3002}" phd-unit="Bank(Y)" class="btn action-btn" style="margin-left: 5px;" type="button" ng-click="PackageManagementCtrl.downloadPackage('dde0fcb2-948b-4bbc-b347-40deb2f6034e', 'Pack_110','topPackageTable1dde0fcb2-948b-4bbc-b347-40deb2f6034e')"> <i class="fa fa-download"></i> Download</button> 

This is the CSS expression I'm passing to my Selenium code:

[phd-unit='Bank(Y)'][ng-click*='Pack_110'][ng-click*='downloadPackage']

My code:

 @Test public void findElementByCss() { softAsserter = new SoftAsserter(testParameters); String CssExpresion = testParameters.get("actionData"); WebElement optionToFind = null; try { WebDriverWait wait = new WebDriverWait(browser, 5); optionToFind = wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector(CssExpresion))); } catch (Exception ex){ softAsserter.fail(ex.getMessage()); } if (optionToFind==null) { softAsserter.fail("failed to failed element with expression: " + CssExpresion); } if (optionToFind!=null) { softAsserter.assertTrue(true, "Element found by attributes: </br>" + CssExpresion); } if (softAsserter.isOneFailed()) { asserter.fail("findElementByCss failed"); } } 

Why my code fails in finding this specific element?

Answer 1

I would suggest use the following css selector.

button.btn.action-btn[title='Download package'] 

OR

button.btn.action-btn[title='Download package'][phd-unit='Bank(Y)'] 

Answer 2

The problem was it:

ExpectedConditions.visibilityOfElementLocated

changed it to:

ExpectedConditions.presenceOfElementLocated

And it works like a charm