6. Frontend Testing

QA Process

Frontend testing focuses on validating the visual behaviour, responsiveness, usability, accessibility, and overall stability of the user interface across browsers, devices, and user interactions.

The objective is to ensure that the application behaves correctly for real users under different conditions.

A. Source Code & Standards

1. Accessibility (a11y)

Accessibility testing ensures that the application is usable by users with disabilities.

Testing includes:

Keyboard-only navigation
Screen reader compatibility
Focus visibility
ARIA label validation
Colour contrast verification
Semantic HTML structure

Tools such as:

Axe DevTools
Lighthouse
NVDA
VoiceOver

are used during accessibility validation.

The goal is to ensure compliance with accessibility standards such as WCAG AA.

2. HTML Validation (W3C)

HTML structure is validated using tools such as the W3C Validator.

Validation checks include:

Invalid HTML tags
Incorrect nesting
Duplicate IDs
Deprecated attributes
Unclosed tags
Structural markup issues

Clean HTML improves:

Browser compatibility
Accessibility
SEO
Maintainability

3. Schema / Structured Data

Structured data is validated to ensure search engines can correctly understand the page content.

This includes validating:

JSON-LD structure
Schema types
Breadcrumb schema
Product schema
FAQ schema
Article schema

Google Rich Results Test and schema validators are commonly used during this process.

Incorrect schema implementation can affect search visibility and rich search results.

4. Console Errors

Browser DevTools console logs are monitored during testing.

The objective is to ensure:

No JavaScript errors exist
Warnings are reviewed
Failed scripts are identified
Runtime issues are investigated

Console monitoring is performed:

On page load
During user interactions
During API requests
During navigation flows

Even non-blocking console errors are reviewed because they may indicate hidden stability issues.

5. Performance (Lighthouse)

Performance testing is performed using tools such as Lighthouse.

Metrics commonly reviewed include:

Largest Contentful Paint (LCP)
First Contentful Paint (FCP)
Total Blocking Time (TBT)
Cumulative Layout Shift (CLS)
Accessibility score
SEO score

Performance bottlenecks are documented and shared with developers for optimisation.

6. Security Headers

Basic frontend security validations include checking response headers such as:

Content-Security-Policy (CSP)
X-Frame-Options
X-Content-Type-Options
Strict-Transport-Security (HSTS)

These headers help improve:

Browser security
Clickjacking protection
MIME type protection
HTTPS enforcement

Security header validation is important even for frontend testing because incorrect configurations may expose vulnerabilities.

B. Responsiveness

1. Desktop (1280px)

Desktop layouts are tested at standard desktop resolutions.

Validation includes:

Grid alignment
Navigation visibility
Sidebar behaviour
Content spacing
Full-width layouts
Overflow handling

The UI should remain stable and visually balanced on large screens.

2. Tablet (768px)

Tablet responsiveness testing validates:

Collapsing layouts
Touch-friendly interactions
Responsive grids
Navigation menus
Spacing adjustments
Orientation support

Special attention is given to touch targets and readability.

3. Mobile (375px)

Mobile testing validates the experience on smaller screens.

Testing includes:

Single-column layouts
Thumb-friendly CTA placement
Font readability
Responsive images
Mobile navigation
Horizontal scroll prevention

Mobile usability is critical because many users access applications from mobile devices.

4. Between Breakpoints

Applications are tested while resizing the viewport gradually between breakpoints.

This helps identify:

Layout jumps
Overlapping elements
Broken grids
Responsive glitches
Text wrapping issues

Issues often appear between officially defined breakpoints rather than directly on them.

5. Landscape Orientation

Landscape mode is tested on mobile and tablet devices.

Validation includes:

Layout stability
Orientation switching
Video rendering
Navigation usability
Form behaviour

Applications should adapt smoothly when device orientation changes mid-session.

C. Functional Testing

1. All Interactive Elements

Every interactive UI element is tested individually.

This includes:

Buttons
Links
Dropdowns
Accordions
Tabs
Toggles
Menus
Carousels

Validation ensures:

Correct behaviour
Expected navigation
Proper state changes
Accessibility compliance
Error-free interaction

2. Forms

Form testing validates:

Required field validation
Input formats
Character limits
Inline error handling
Submit behaviour
Reset behaviour
Success and failure responses

Testing also includes invalid and unexpected user inputs.

Forms are one of the highest-risk areas for user-facing defects.

3. Filters & Search

Filtering and search functionality is tested using:

Single filters
Multiple filter combinations
Empty searches
Partial matches
Invalid inputs
Clear/reset actions

Validation ensures:

Accurate results
Correct API calls
Proper UI updates
Stable pagination behaviour

4. Infinite Scroll / Pagination

Scrolling and pagination behaviour is tested carefully.

Validation includes:

Triggering additional data loads
Preventing duplicate records
Preserving scroll position
Back navigation handling
Performance under large datasets

Pagination issues can significantly affect usability and data visibility.

5. Modals & Overlays

Modal testing includes validating:

Open/close behaviour
Background scroll lock
Escape key handling
Outside click dismissal
Focus trapping
Responsive layout

Modals should remain accessible and should never trap users unintentionally.

6. Notifications & Toasts

Notification systems are tested for:

Correct timing
Proper messaging
Auto-dismiss behaviour
Duplicate prevention
Stacking behaviour

Users should receive clear feedback without notifications becoming disruptive.

7. Copy-to-Clipboard

Clipboard functionality is validated by:

Copying content
Pasting into external editors
Verifying copied accuracy
Validating confirmation toasts

Clipboard features should behave consistently across browsers.

8. File Upload UI

Frontend file upload testing includes:

Drag-and-drop uploads
Browse-to-upload functionality
File type validation
File size validation
Upload progress indicators
Upload failure handling

The UI should provide clear feedback throughout the upload process.

D. Non-Functional (Static) Elements

1. Spacing Consistency

Spacing consistency is validated across:

Cards
Sections
Buttons
Forms
Tables
Navigation menus

Consistent spacing improves readability and visual polish.

2. Font Rendering

Font testing ensures:

Custom fonts load correctly
Fallback fonts behave properly
Fonts render consistently across browsers
No Flash of Unstyled Text (FOUT) occurs

Incorrect font rendering can negatively affect branding and readability.

3. Brand & Design System Alignment

The implementation is reviewed against the organisation’s design system.

Validation includes:

Correct button styles
Approved colour usage
Consistent component patterns
Design token adherence

This prevents inconsistent or legacy UI behaviour from entering production.

4. Animations & Transitions

Animations are tested for:

Smoothness
Timing consistency
Performance impact
Visual glitches
Unexpected flickering

Animations should improve usability instead of distracting users.

5. Scroll Behaviour

Scrolling behaviour is validated across:

Pages
Modals
Side panels
Infinite scroll sections

Testing ensures:

No double scrollbars exist
Scroll lock behaves correctly
Scroll position restoration works properly

Poor scroll behaviour can create major usability issues.

E. Asset Availability

1. CSS Files

All stylesheet files are verified for:

Successful loading
Correct status codes
CDN availability
Version compatibility

Missing CSS files can completely break page rendering.

2. JS Files

JavaScript assets are tested to ensure:

All scripts load correctly
No blocked requests exist
No runtime errors occur
Lazy-loaded scripts behave correctly

Frontend functionality heavily depends on stable script loading.

3. Images

Image testing validates:

Broken image prevention
Correct dimensions
Lazy loading
Responsive rendering
Correct image mapping

Images should load efficiently without reducing performance.

4. Videos

Video validation includes:

Playback functionality
Poster image rendering
Audio behaviour
Responsive resizing
Streaming stability

Videos should never autoplay unexpectedly with sound unless intentionally designed.

5. Fonts

Custom font files are validated for:

Successful loading
Cross-browser rendering
Proper fallback behaviour
Performance impact

Font loading failures can create inconsistent UI appearance.

6. Third-Party Widgets

Third-party integrations such as:

Chat widgets
Maps
Embedded forms
Analytics scripts
Payment iframes

are tested for:

Proper loading
Stability
Console errors
Responsive behaviour

Third-party failures should not break the application.

7. CDN Assets

Assets delivered through CDN infrastructure are validated for:

Correct domains
Proper cache headers
Availability
Performance consistency

CDN issues can affect loading speed and reliability.

F. Broken Links

1. 0-Depth (Current Page)

All links present on the current page are tested.

Validation includes:

HTTP status codes
Navigation accuracy
Clickability
Redirect behaviour

No broken or dead links should exist on the page.

2. 1-Depth (Linked Pages)

After opening linked pages, the destination pages are also validated.

Testing ensures:

Pages load correctly
Expected content appears
Navigation paths remain accurate

3. Internal Navigation

Internal links such as:

Breadcrumbs
Navigation menus
Footer links
CTA buttons

are tested for correct routing and consistency.

4. External Links

External links are validated for:

Correct destination URLs
Opening in new tabs where required
Proper security attributes
No broken redirects

Security attributes like rel="noopener noreferrer" are verified for safety.

5. Dynamic Links

Dynamic links generated using API data are tested carefully.

Examples include:

User profile links
Ticket detail links
Dynamic product pages

Testing includes edge-case IDs and invalid references.

6. Redirect Chains

Redirect behaviour is validated to ensure:

No redirect loops exist
Redirects resolve correctly
Final URLs are accurate
HTTP status codes are correct

Unnecessary redirects can negatively affect SEO and performance.

G. Meta & SEO

1. robots.txt

The robots.txt file is reviewed to ensure:

Correct crawl permissions
Restricted environments are blocked
Sensitive routes are hidden where necessary

Improper robots.txt configuration can expose non-public environments.

2. Meta Title & Description

Each page is validated for:

Unique meta titles
Unique descriptions
Proper character limits
Accurate page summaries

Good metadata improves SEO and social sharing visibility.

3. Open Graph Tags

Open Graph validation ensures:

og:title
og:description
og:image
og:url

are present and accurate.

These tags affect how pages appear when shared on social media platforms.

4. Canonical Tag

Canonical URLs are verified to prevent duplicate content issues.

Testing ensures:

Correct canonical mapping
No incorrect self-referencing
Pagination handling is correct

5. Viewport Meta Tag

Viewport settings are validated for responsive behaviour.

The application should include proper viewport configuration for mobile rendering.

6. Sitemap

XML sitemaps are tested for:

Accessibility
Correct formatting
Valid URLs
Updated page coverage

Search engines rely on sitemaps for indexing.

7. Hreflang

For multilingual applications, hreflang tags are validated to ensure:

Correct regional mapping
Proper language targeting
No broken alternate URLs

Incorrect hreflang implementation can affect international SEO.