Fine on my laptop
A student builds a bus times page. On the laptop it looks great.
Then a friend opens it on a phone. The text is tiny. One box is cut off. The page takes ten seconds to load.
The code was correct. The page still failed its users. Front-end testing finds this.
Key words
| Word | What it means | Example |
|---|---|---|
| Front-end | The part of a product that the user sees and touches. | A web page |
| Browser | The program that opens web pages. | Chrome, Firefox, Safari |
| Rendering | How the browser draws the page on the screen. | Fonts, colours, layout |
| Responsive | The page changes to fit the size of the screen. | One column on a phone |
| Loading time | How long the page takes to appear. | 3 seconds |
| Script | Code, such as JavaScript, that runs inside the page. | A button that adds to a basket |
| Operating system | The main software on a device. | Windows, macOS, Android, iOS |
| Cross-browser | Works the same in more than one browser. | Same page in Chrome and Safari |
| KB (kilobyte) | A unit for the size of a file. A small picture is about 50 KB. | |
| Media query | A CSS rule that only works on some screen sizes, such as a narrow phone. |
The cells students fill in are left blank in this preview.
Seven front-end checks
| Check | The question | A way to test it |
|---|---|---|
| Script performance and functionality | Do the buttons and forms work? Are they fast? | Click everything. Watch the browser console for errors |
| Browser compatibility | Does it work in each browser we support? | Open it in Chrome, Firefox, Safari and Edge |
| Operating system compatibility | Does it work on each system? | Try Windows, macOS, Android and iOS |
| Cross-browser performance | Is it equally fast in every browser? | Time the same action in each browser |
| Formatting and rendering | Does it look right? | Check fonts, colours, images and spacing |
| Loading times | Does it appear quickly? | Use the browser developer tools to time it |
| Responsiveness | Does it fit every screen size? | Resize the window. Use the device mode in developer tools |
The cells students fill in are left blank in this preview.
Responsive pages
People use phones, tablets and big screens. A responsive page changes to fit.
The test is easy: make the window narrow and look. In the browser, press F12 for the developer tools. Then use the device mode to see a phone size.
Try it: a page that fits
<h1>Bus times</h1>
<div class="box">Route 42</div>
<div class="box">Route 5A</div>
Look in the console
data-callouts.tip.label
A page can look fine and still have a broken script. Press F12 and open the Console tab. A red message there is a script error. Test every button, then check the console.
Loading times
A page is made of files: text, pictures and scripts. A big picture can slow the whole page.
We can work out the time. Time in seconds is the size divided by the speed. Sizes here are in KB.
Worked example: loading time
| Step | What we do | Number |
|---|---|---|
| 1 | Page size | 2000 KB |
| 2 | Phone download speed | 500 KB every second |
| 3 | Divide the size by the speed: 2000 divided by 500 | 4 seconds |
| 4 | Our limit is 3 seconds, so the page is | Too slow |
The cells students fill in are left blank in this preview.
A quick fix
data-callouts.tip.label
The biggest file is often a picture. Make the picture file smaller and the page loads much faster.