Formatting User Stories: Can It Be Done?

You know formatting bug reports, right? The markdown to bold, italic, create horizontal rules, etc., in the bug report to enhance readability?

Well, this formatting only works for reports; for User Stories comments, it still needs to be implemented, making reviewing the feedback somewhat challenging.

Check it out... hard, isn't it?

💡 Do you see the ❝Go to + URL❞ in the User Stories? When verifying a User Story, adding a URL that is unrelated to the task at hand or does not provide any relevant feedback in case of failure or blocking is unnecessary. Such URLs should be avoided in the comments to prevent rejection.

Are all failed clicks bugs?

The answer is no. Read the long answer to learn how to identify these tricky scenarios when testing.

To do so, the first thing is to identify the href attribute. The href attribute specifies the URL the anchor should navigate when clicked.

Suppose you're inspecting an element (right click > Inspect), and the Browser console shows you this:

href="javascript:;"

Here's the expected behaviour when this is the case:

Click Interaction: When a user clicks on a link with href="javascript:;", it doesn't lead to a new page or refresh the current page. The browser's address bar doesn't change, and the page content remains the same.
JavaScript Execution: If JavaScript event handlers are attached to the link's click event, they will be executed when the link is clicked. This allows you to trigger JavaScript actions without changing the page location.
Preventing Default Behaviour: Using this approach, you can capture the click event and control the default behaviour of a regular link, which is navigating to a new page.
Styling and Interaction: You can style the link to look like a button or any other clickable element, providing a visual cue to users that they can interact with it.

What about when what you see on the HTML DOM is something like:

href="javascript:void(0)"

In this case, void(0) is a JavaScript expression that evaluates to undefined. It's often used in this context to prevent the anchor from navigating to a new page. Clicking the link does nothing because the JavaScript code following the JavaScript protocol is void(0).

Sometimes, we don't have to inspect anything to understand the anchor attached to an element; we can see them at the URL in the browser’s address bar!

Like this one:

<a href="#">

The href attribute is set to ❝#❞. When an anchor has href="#", it is often used as a placeholder or to create a link that doesn't navigate to a new page.

It's often used when you want to create clickable elements that perform some client-side action, like showing or hiding a dropdown menu or triggering other JavaScript functionality. It's a standard way to capture click events without changing the URL.

And there is more...

Here are a few more variations and patterns you might come across:

href="javascript:functionName()": This pattern calls a JavaScript function when clicking the link. For example: href="javascript:myFunction()". This allows you to execute a specific JavaScript function when clicking the link.
href="javascript:expression": Instead of void(0), you might see other JavaScript expressions used in the href attribute. For example, you could use href="javascript:alert('Hello, World!')". This would trigger the JavaScript alert when the link is clicked.
href="javascript:event.preventDefault()": This is a more advanced pattern where you can include JavaScript code that explicitly prevents the default behaviour of the link. It often stops the link from navigating to a new page.
href="javascript:; return false;": This is a combination of javascript:; and return false;. It is used to prevent the default behaviour of the link and can be combined with JavaScript event handlers.
href="void(0)": Similar to javascript:void(0), href="void(0)" is another way to prevent the default link behaviour and is often used for click actions.
href="javascript:history.back()": This pattern makes the browser go back in the history when the link is clicked. It's used to create a "Back" button.

💡If you are unsure or testing in a tricky environment (like stagings are), reach out to your TL or fellow testers in the Test Chat.

Reminder of the week!

Our Academy is now translated into different languages so you can learn better and faster in your own language (or practice other languages)!

💡 Our Academy is the perfect place to learn how to ace it as a Test IO tester.