How to make a WebDriverWait if page changes its content asynchronously (without page reloading)?

Question

I'm coding test with Selenium Webdriver (Java), getting https://cloud.google.com as a driver. I start with finding search input field, sendKeys("search phrase \n"). After that page starts changing its content and I'm trying to intersept these changes with WebDriverWait:

    // first Wait - is to wait before page starts changing is content by removing search google icon
            new WebDriverWait(driver, 30).until(ExpectedConditions.invisibilityOf(searchInputFieldIcon));
    //second Wait  - i'm waiting new hyperlink to appear (this hyperlink appears in search results after the whole page is asynchronically reloaded without page reloading)            
            new WebDriverWait(driver,30)
        .until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//a[@href='https://cloud.google.com/products/calculator']")));

The point is, that Wait doesn't waits for 30 seconds before element shows up. Code just throws an exception:

    org.openqa.selenium.NoSuchElementException:
 no such element: Unable to locate element: {"method":"xpath","selector":"//a[@href='https:`//cloud.google.com/products/calculator']"}`

Any help will be much appreciated!

Answer 1

Please check the attached screenshot. Here the Href link is different then you have used in your code.

You can use the below code

wait.until(expectedConditions.visibilityOfElementLocated(By.linkText("Google Cloud Platform Pricing ")));

Answer 2

To locate the first search result you can use the following xpath;

//a[contains(text(),'Google Cloud Platform Pricing')]

Checking your xpath

You can check whether your xpath is correct or not from the browser itself.

1. Go to DevTools (Ctril + Shift + I)
2. In the 'Elements' tab, press Ctrl + F
3. Input the xpath that you want to check

And it will show you whether it is correct and how many web-elements can be located from it.