TLDR; an overview of how you might use the most basic site on Test Pages. Use dev tools. Explore the JavaScript. Interrogate and Amend the DOM. Go beyond a button click.
This is an overview of how you might use the Basic Web Page on Test Pages.
If you don’t go deep then you’ll read the text, click the button and tick the pass checkbox. But we need to learn to go deeper when performing web testing.
Overview Video
The video provides an overview of what you might explore using the Basic Web Page on Test Pages, software testing practice application:
-
Avoid getting distracted. Learn how to zero in on specific page elements so your exploratory sessions have a clear purpose.
-
Use browser developer tools, inspect and manipulate the DOM.
-
Discover how to use CSS selectors and XPath for finding and interacting with page. This is not just for automating.
-
Find out why reading the underlying code can reveal more than just clicking buttons, and how it can help you spot functional risks early.
-
See how browser-based AI tools can help you experiment, understand selectors, and accelerate your learning. Even on a super basic page.
How a Simple Web Page Can Help You Master Web Application Testing
When learn web application testing, it’s tempting to look for complex scenarios and detailed features. But even the most basic web page can be used to learn a lot of essential testing concepts and skills.
Restrict your Focus
It’s easy to get distracted by the all the elements: sidebars, navigation, tag clouds, menus, etc.
But we need to focus.
The central area contains just three things that matter for this exercise: two paragraphs and a “click me” button.
“It’s important to know that when we are testing applications, there’s often a lot of stuff in the application, but we have to restrict our focus because we’re doing exploratory testing sessions with a particular aim.”
Go Beyond Basic Functional Testing
The most basic functional testing involves checking that the paragraphs display the right text, the button exists, and clicking it produces the intended result “you clicked the button.”
Automating this is simple. But we can use every page to learn more. And pushing ourselves on such simple pages can reveal limits to our knowledge and trigger us to learn more.
I revisit the Test Pages multiple times and each time I approach them differently I push my skills, double check my learning and find something new to try.
Discover the DOM
Learning to use Inspect Element is crucial. The dev tools reveal the Document Object Model (DOM). The browser’s internal representation of what you see.
By inspecting, you learn that your target elements sit within a <div> with class "centered", and that paragraphs (<p>) and buttons are distinguished by IDs and classes.
This exploration raises fundamental questions:
- What is a
<div>? - What do attributes like ID and class mean?
- How can we use these attributes to locate elements?
I don’t try to explain everything on the Test Pages. There are very thorough references on the web to look all this stuff up:
CSS Selectors and XPath
Finding elements efficiently is a key skill for both exploring and automating:
- CSS Selectors: Quickly locate elements by
#idor.class. - XPath: Offers more complex navigation through the DOM, including traversing backwards, a feature not possible with CSS selectors.
You can experiment with these directly in your browser, using built-in tools to copy selectors or XPath expressions to pinpoint any element.
AI Assistance
Chrome now integrate AI-assisted features. By asking the AI for alternative CSS selectors or XPath for a specific paragraph, you receive instant help.
A great way to increase your locator expertise and knowledge. And you don’t have to trust the AI, test it all out in your browser dev tools.
You may not need to install extra tools to work with something as basic as a locator.
Eventually you’ll be able to create the locators without help.
Understanding Risks Beyond the Functional Requirements
Technical testing isn’t just about obvious functionality. We need to learn to look for, and evaluate many types of risk:
- Synchronization Issues: The “click message” paragraph always exists in the DOM, so automation scripts must check its content changes, not just its presence.
- JavaScript Behavior: Only the relevant lines of code execute on click; changing the button’s ID after page load won’t affect the click handler because the event is already attached.
“We have to have the ability to assess the risks of the page we’re looking at, even on a simple page like this, with five lines of code.”
Don’t Panic.
Experiment freely; if you break something, a page refresh will reset it back to normal.
The Test Pages is a safe environment to play. We want to learn without fear.
The Path to Technical Mastery
Even with a simple page like this we can go beyond the basics.
Use it to learn how technology implements functionality, and then use those insights to identify deeper risks and improve your testing.
“Work through the test pages, go beyond just the functionality, learn to understand the technology that implements it.”
