Testing

Resources

• cypress-io/cypress-example-recipes (opens new window)
• cypress-io/cypress-realworld-app (opens new window)
• https://css-tricks.com/front-end-testing-is-for-everyone/ (opens new window)
• Youtube (opens new window)
• Youtube (opens new window)
• count npm library
• Dummy app
  • example.cypress.io (opens new window)
  • trytestingthis.netlify.app (opens new window)
  • OrangeHRM
• Dashboard Ex- TODOMVC (opens new window)

Role - Quality assuarance (QA) Developer

1. Frontend Testing (UI)
2. Backend Testing (Server, DB)

Frontend testing

• Test

  • Performance
  • User interaction
  • Accessibility
  • Time to complete tests
  • Multiple devices
  • Browsers
  • Mostly we disconnect from server and use custom data
  • Test coverage (20% code cause 80% errors)

• Tools

  1. Lighthouse
     • integrated in Google chrome browser
     • Checks Performance & Accessibility
  2. Web page test (opens new window)
  3. Pingdom (opens new window)

Front-End Performance Optimization

1. Css loading
2. Reduce Http request
3. Prefetch (image, links , content, etc)
4. Gzip compression
5. Image Optimization (Optimizilla; Kraken.io; Optimus.)
6. Advanced Performance Metrics Monitoring
   • Speed Index — an average time it takes to load all blocks of the page;
   • First Contentful Paint — this gets triggered when a section of content is defined in the Document Object Model;
   • First Meaningful Paint — gets triggered by an above-the-fold layout change that’s bigger than the rest;
   • Input Latency — a delay between receiving and displaying the signal;
   • Time to Interactive — time needed for a page to become fully interactive. Interactivity means - content displayed, event handlers registered, page response time < 50ms

Types of Frontend Testing

• Acceptance
• Cross-browser compatibility (OS, device & browsers )

Unit

• Test the smallest testable code eg: a function like add(a,b)
• Give inputs & check output
• Possible tools: AVA, Jasmine, Jest, Karma, Mocha

Integration

• Combine units into a group
• Possible tools: AVA, Jest, Testing Library

End-to-end

• How user see & interacts from one point to another ?
• Unit & Integration test doesn't cover UI.
• Uses real/Headless browser & mostly real API. We can use Test/Production environment.
• Tests user interactions in a real-life browser by providing it instructions for what to do and expected outcomes.
• Checks for data integrity in system, its dependencies & between components
• Possible tools: Cypress, Puppeteer

Accessibility

• Hearing & Visual disabilities
• Possible tools: AccessLint, axe-core, Lighthouse, pa11y

Visual Regression

• It is done when a new feature is added
• Take screenshots of before/after feature
• Check screenshots using image comparison tools
• Possible tools: Cypress, Percy, Applitools

Performance

• Involves - stability, speed, responsiveness,
• Possible Tools: Lighthouse, PageSpeed Insights, WebPageTest, YSlow

Acceptance

• Check to system vis-a-vis Business requirements

Cross-browser compatibility

• Multiple OS, devices & browses combination