FrontEnd Testing
Why we should have a plan
- Clarity on project’s scope
- Reduced client friction
- Confidence in deploying the project
Tools we would need
- Jira - Used for bug-tracking and team management
- Chrome Dev Tools - Used for inspecting, debugging and profiling
- Screenshots - (CMD + Shift + 4 in mac)
- BrowserStack - for all kind of emulators
- Real Devices
- Google PageSpeed Insights
- PingDom Website speed test
- ScreenRecording Tools
What are we testing?
For whom are we testing?
- What are the most popular devices your audience uses?
- What operating system and browser combinations are most popular among your audience?
- What connection speeds do they have (3G, 4G, broadband/fibre)?
- How tech-savvy are they?
Know your limits
- Budget
- Timeline
- Scope
FrontEnd QA
This is a process which focuses on proving implementation of interface to be both accurate and adequate to the design while maintaining flexibility and correct behaviour within different environments or while serving diverse content.
- Monterail
Criteria Based
Every Element must follow certain criteria
Component based
Hierarchical order every component that is defined as part of interface - from most primitive and atomic, through more complex and coupled to whole views and layouts
Criteria based List
- Design Accuracy
- Responsiveness to viewport
- Responsiveness to content
- Components behaviour
- Performance
- 3rd party technologies
Design Accuracy
And it’s not only about “does it look smilar to design”, it’s more about “does it match it in every detail”.
Most common properties that should be revised are:
- sizes (width, height, line height)
- colors
- font family
- font size
- font weight
- spacing (margin, padding)
- borders
- background
- list styling (ul, ol)
- number and date formats
Responsiveness
ViewPort
Content
Components Behaviour
Performance
3rd Party Technologies
Components Based
Components list consists of five levels:
- Basic elements
- Individual components
- Coupled components
- Views
- Layouts
http://patternlab.io/assets/atomic-design.mp4
Responsive QA strategy (opinion)
-
Resize the browser’s window
-
Use emulators
- Use real devices
More Resources
- Outline Script
- Using PerfectPixel chrome extension
Further Topics we can Explore
- Doing Detailed performance review of the complete site - using google pagespeed, pingdom and timeline.
- FrontEnd Automation.
FrontEnd Testing
By Saket Kumar
FrontEnd Testing
- 361
