Protractor E2E: Failed, No element found using locator: By(css selector)

Question

Trying to simulate an 'a' tag being clicked in protractor. For some reason, I get the error message as in the title of this question (Failed: No element found using locator: By(css selector, #linkToMandate))

Nothing has worked so far, I've tried everything I found here,

...waiting until the page has fully loaded.

...using different selectors.

...making it an async function.

  it('[SUCCESS] User clicked on MANDATE field', () => {
    browser.get('/cockpit');
    browser.wait(
      until.urlContains('/cockpit'), 5000
    );

    const mandateButton = element(by.css('#linkToMandate'));
    mandateButton.click();

    expect(browser.wait(until.urlContains('/mandate'), 5000));
  });

Above is what I'm trying to get done in protractor.

<div>
  <div>
    <a id="linkToMandate" href="/mandate">
      <div>
        <div>
          <div>
            <p>MANDATE</p>
          </div>
          <div>
            <img src="someCoolIcon" alt="icon">
          </div>
        </div>
      </div>
    </a>
  </div>
</div>

Above is the rendered html from react

For the beginning, I just want to navigate to the mage /mandate

Answer 1

Try this

  it('[SUCCESS] User clicked on MANDATE field', () => {
    browser.get('/cockpit');
    browser.wait(
      ExpectedConditions.presenceOf(element(by.css('#linkToMandate'))), 
      5000
    );

Answer 2

Ok so the problem was that the page didn't render fully and the 'user' wasn't logged in yet. Meaning before I could simulate an 'a' tag being clicked I had to -> navigate to login route -> send data -> wait until page fully renders -> click on 'a' tag