I have been a big fan of TimeGuessr (you can check it out here: https://timeguessr.com/), a fun little game that challenges your knowledge of history and geography.
I love the concept of it. It's a great way to train your attention to detail as well - a skill that’s absolutely crucial in QA testing. It's been a good talking point with my colleagues too, and we now have something to chat about when we need a quick break.
As much as it's a fun game, it’s also a cool example of a website we can test with some basic JavaScript checks to make sure the elements work as expected.
1. Testing button clickability
Let’s start by testing a button on TimeGuessr. Imagine we want to ensure that the Play button works. When inspecting the page elements via developer tools, we see that the clickable element for the Play button is an <a> tag (a hyperlink). This is a common structure for buttons on many websites, and we can test its functionality with JavaScript.
2. Inspect the button in the dev tools
Select Inspect. You'll find that the Play button is contained within an <a> tag, and its href attribute links to "game-settings".
3. Writing the test code for clickability
To test whether the button is clickable, you can write a simple JavaScript function that simulates a click. Here’s a basic example:
document.querySelector('a[href="game-settings"]').click();
This line of code grabs the <a> tag where the href attribute is equal to "game-settings" (you should replace this with the actual href of the button you want to test). Then it will simulate a click on that element.
Now, let's say the actual button had a class or an ID, we’d then select it like this:
For a class: document.querySelector('.button-class').click();
For an ID: document.querySelector('#button-id').click();
In both cases, replace .button-class or #button-id with the actual class or ID of the button you're testing.
4. Scaling the test: check multiple links at once
We can loop through all <a> tags on the page and simulate clicks (or just log the links). Here’s how:
const links = document.querySelectorAll('a');
links.forEach((link, index) => {
console.log(`Link ${index + 1}: ${link.href}`);
if (link.href === "") {
console.log(`Link ${index + 1} has no href attribute!`);
} else {
console.log(`Link ${index + 1} is a valid link: ${link.href}`);
}
});
The console will log each link's href attribute, and tell us if it’s valid or empty.
5. Check for empty or missing alt attributes on images
const images = document.querySelectorAll('img');
images.forEach((img, index) => {
if (!img.alt) {
console.log(`Image ${index + 1} is missing an alt attribute!`);
} else {
console.log(`Image ${index + 1} has alt: ${img.alt}`);
}
});
When I was adding this to my LinkedIn...
6. LOG IN page
When testing form elements on a login page (or any other form on a website), you'll want to ensure that the form behaves correctly, meets accessibility standards, and that users are guided through the process with proper validation and feedback.
Here are some additional steps and tests you can perform on the login page.
Login forms typically have at least two fields: one for the username/email and one for the password. You can check whether these fields are marked as required or optional and whether they are being validated.
const formInputs = document.querySelectorAll('input');
formInputs.forEach((input, index) => {
const inputValue = input.value === '' ? '(empty)' : input.value; // Check if the value is empty
if (input.required) {
console.log(`Input ${index + 1} (name: ${input.name}) is required and has value: ${inputValue}`);
} else {
console.log(`Input ${index + 1} (name: ${input.name}) is optional and has value: ${inputValue}`);
}
});
I use input.value === '' ? '(empty)' : input.value to check if the input value is empty. If it is, it will log as (empty), otherwise it will display the actual value.
This way, both required and optional fields will show their values, even if they are empty.
Well, this is a lovely hack as well - perfect if you can't be bothered to go into Google Password Manager, and you already have the saved password but it’s hidden behind the mysterious dots.
You can easily leverage the browser’s developer console to run quick checks and automate repetitive tasks on the fly. While it may not be full automation, it's a great way to start exploring testing functionality with minimal setup.
Kommentare