Question

While writing selenium testcases for a webapplication I’m having trouble with the xpath selector. The element of the HTML-code which should be clicked on by Selenium is the following:

<a title="Voeg een vak toe" href="#" onclick="javascript:$.colorbox({width:818,href:'/olo-cleanjump/profiel/addVakForm'}); return false;">
  <p class="add">
    <img class="add-icon" src="/olo-cleanjump/static/images/icon_add.png"/>
    Voeg vak toe
  </p>
</a>

The Selenium IDE plugin for firefox gives me the following selenium code for this:

driver.findElement(By.cssSelector("p.add")).click();

The addVakForm javascript function that is called by this link opens a colorbox with the following HTML (I shortened it, there are around 30 similar div’s with class “lesboek_popup”) inside:

<div id="cboxLoadedContent" style="display: block; width: 776px; overflow: auto; height: 653px;">
  <div id="profielpagina_add">
    <h2>Voeg een vak toe aan je profiel</h2>
    <div class="lesboek_popup">
      <a class="content" href="/olo-cleanjump/profiel/addvak/120776">
        <img src="" alt="">
      </a>
      <p class="caption">
        <a href="/olo-cleanjump/profiel/addvak/120776">Engels</a>
      </p>
    </div>
    <div class="lesboek_popup">
      <a class="content" href="/olo-cleanjump/profiel/addvak/120786">
        <img src="" alt="">
      </a>
      <p class="caption">
        <a href="/olo-cleanjump/profiel/addvak/120786">Biologie</a>
      </p>
    </div>
  </div>

For the test I want to open the ‘Biologie’ link. Selenium IDE got me the following selenium code to do this

driver.findElement(By.xpath("//div[@id='profielpagina_add']/div[20]/a")).click();

to select this biology link element.
Based on this I wrote the following testcase:

 Test
public void testAddRemoveVak() throws Exception {
    this.get("");

    // vak 1 toevoegen
    driver.findElement(By.cssSelector("p.add")).click();
    driver.findElement(By.xpath("//div[@id='profielpagina_add']/div[20]/a")).click();

    // vak 2 toevoegen
    driver.findElement(By.cssSelector("p.add")).click();
    driver.findElement(By.xpath("//div[@id='profielpagina_add']/div[20]/a")).click();

    assertEquals(driver.findElements(By.xpath("//li[@class='vak']")).size(), 2);

    // vak 2 verwijderen
    this.get("profiel/removevak/120791");

    assertEquals(driver.findElements(By.xpath("//li[@class='vak']")).size(), 1);
}

The part

driver.findElement(By.cssSelector("p.add")).click(); 

actually was successful, so after this call the colorbox should be loaded. However the

driver.findElement(By.xpath("//div[@id='profielpagina_add']/div[20]/a")).click();

causes an NoSuchElementException, while this element definitely is present in the colorbox when I check for myself (the call/xpath was even autogenerated by Selenium IDE). Does anyone have a clue what may cause the NoSuchElementException?

Answer 1

Probably you should wait when your popup appears. Try to use Implicit waits

WebDriver driver = new FirefoxDriver();
driver.Manage().Timeouts().ImplicitlyWait(TimeSpan.FromSeconds(10));

Also instead of xpath you can use driver.FindElement(By.LinkText("Biologie")).click() if it the only link with text Biologie on your page