Frontend Testing
Presented by Khant Lin Wai
CGM Golden Land Co., Ltd
Contents
What to Check in Frontend Testing?
Coding Validation
CSS Property Priority
Tools
PerfectPixel Demostration
3
What Contents to Check in Frontend Testing?
Text Link, Menu and Btn Image
Layout Javascript Broswer
Device Other
3
Text
To check Title, Paragraph ,Label, Alert and Error Message, ButtonText correctly with
documentation
To check if utf8 is used (eg. <meta charset="utf-8">)
To check line height and line spacing
To check added maximun text
Text
Design Data (XD) or Test Case Coding Site
Font Family : Hiragino Kaku Gothic Pro Font Family : Hiragino Kaku Gothic Pro
Font Size : 24 Font Size : 24
Font Weight : bold Font Weight : bold
Font Color : #1E237F Font Color : #1E237F
Design Data (XD) or Test Case Coding Site
Font Family : Hiragino Kaku Gothic Pro Font Family : Meiryo
Font Size : 24 Font Size : 20
Font Weight : bold Font Weight : normal
Font Color : #1E237F Font Color : #333333
Link
To check if the links in menus and buttons work
To check link hover effect and link area is a cursor pointer
Link
To check correctly external link and internal link on entire page
Internal Links
Page 1
Paragraph A Paragraph B
External Links
Page 1 Page 2
Paragraph A Paragraph B
Button
To check active button hover, focus button color.
To check if there is action if you hover or foucs on disable buttons
hover hover
focus or active focus or active
Image
To check if the image is compressed. <[Link]
To check after image compress the image quality with original file and cut images must be
checked they are not blur.
NG [Link] : 70.4KB
compress
better [Link] : 44.3KB
Image
To check if background image contain.
To check whether or not to add a value to the image alt attribute.
NG <img src="[Link]">
<img src="[Link]" alt="Flower Image">
OK
Image
To check image size and layout
Layout
To check layout width
To check browser zoom in out. eg. [Ctrl -/+]
To check for tooltip message on mouse hover
Layout
To check UI Layout when modal alert on / off.
Modal Box Before Modal Box After
Javascript
To check javascript console error
To check if console log is output
Browser
To check these all browsers
Devices
To check both android and ios device
Other
To check responsive breakpoints
Desktop Tablet Smart Phone
1024 to above 768 to 1023.9 320 to 767.9
Other
To check if inline css and inline js are used
To check whether external links are used without downloading
18
Coding Validation
The W3C Markup Validation Service (for html)
- [Link]
The W3C Markup Validation Service (for css)
- [Link]
* display
Display & Positioning * position
Box Model * float
* clear
* width
* height
* list-style
* line-height
* vertical-align
* overflow
* clip
* visibility
* margin
* padding
* border
* box-shadow
CSS Priority Property * box-sizing
* transform
Color * background
* color
Text * font
* text-indent
* text-decoration
* text-align
* vertical-align
* white-space
Table * caption-side
* table-layout
* border-collapse
* border-spacing
* empty-cells
Content * content
Tools
calculation the font size in px, em, pt % from px
- [Link]
Font Check Extension(WhatFont)
- [Link]
Window Resizer （ for chorme extension ）
- [Link]
Post CSS Sorting (VSCode)
- [Link]
PerfectPixel （ for chorme extension ）
- [Link]
dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en