单击带有href属性的元素是否始终可以工作

Question

I am writing a suite of automated UI tests. I have a set of tests that verifies the links in a navbar work correctly, they take an annoying long time because it's loading 2 pages per test and there are many links in the nav bar. I am wondering if it is necessary to actually click the links?

One of the links would look like this, they're all basically the same, all contained inside a list of of <li> elements:

<a href="/projects/7d9162e5-e59c-452e-b9f5-684a2e0f2924/home" data-reactid=".0.2.0.0.0.$0.0">
  <span class="icon icon-home" data-reactid=".0.2.0.0.0.$0.0.0"></span>
  <span class="label" data-reactid=".0.2.0.0.0.$0.0.1">Home</span>
</a>

I could grab the content from the href attribute and request the page programmatically (don't load it in the browser) to assert that the href is correct and this would be significantly faster.

Is there any chance that an element could have an href attribute that points to the page as expected, but for whatever reason clicking on this element could be broken?

Answer 1

This might be the solution that you are looking for:

<a href="#" onclick="return false;">Link to Page</a>

That code would append the href attribute as text to the body every time a link was clicked but not actually go to that link. The return false; part of that code prevents the browser from performing the default action for that link. That exact thing could be written like this:

$("a").click(function(e) {
   $("body").append($(this).attr("href"));
   e.preventDefault();
}

Answer 2

By taking the href content, you might risk that your automation passes test even though the navbar link does not work. It could be that navbar link was disabled by mistake, but as the link is still present in the DOM your automation will not capture it.

Just my 10 cents...