I have this webpage structure:

When button with an id addProfButton is pressed like this:

• Javascript:
  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  <code>document.getElementById("addProfButton").click();

  </code>

  <code>document.getElementById("addProfButton").click(); </code>

  document.getElementById("addProfButton").click();
  

• C# Selenium webdriver:
  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  <code>Driver.FindElement(By.Id("addProfButton")).Click();

  </code>

  <code>Driver.FindElement(By.Id("addProfButton")).Click(); </code>

  Driver.FindElement(By.Id("addProfButton")).Click();
  

a popup window with id AddProfileDialog appears. This div element (indicated by a brown rectangle) does not exist before the click.

This element has a sub-element, an input field with id ItbInputName, which I have to select and then input text inside. After this, I have to click button with id btnAddConfirmOk, which is also part of the popup window.

To achieve this, firstly I have to click inside the input field:

• Javascript:
  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  <code>document.getElementById("ItbInputName").click();

  </code>

  <code>document.getElementById("ItbInputName").click(); </code>

  document.getElementById("ItbInputName").click();
  

• C# Selenium webdriver:
  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  <code>Driver.FindElement(By.Id("ItbInputName")).Click();

  </code>

  <code>Driver.FindElement(By.Id("ItbInputName")).Click(); </code>

  Driver.FindElement(By.Id("ItbInputName")).Click();
  

To my amazement, this does not work… Why? How can I make it work?