When testing your website that uses static HTML, CSS, and basic JavaScript functions, it’s important to use a combination of automated and manual testing to ensure flawless and optimal user experiences.

To break down the testing regiment, here is a 5-step process:

  • Functional Testing
  • UI / UX Responsiveness Testing
  • Performance Testing
  • Security Testing
  • SEO & Accessibility Testing

Within each step, it’s good to apply your manual and automated testing toolkit.

Functional Testing (Automated):

For automated functional testing, for any links present on your page, you can use tools like Lighthouse CLI that can help analyze site issues like broken links.

Example:

npm install -g lighthouse
lighthouse https://yourwebsite.com --only-categories=seo

For Manual Testing:
Use the website like you would with any other, testing the navigation, clicking and scrolling around the page. For contact forms, submit incorrect info to verify successful error and message handling, and vice-versa.

UX / UI Testing (Automated):

You can use Cypress to automate basic UI validation across different viewports:

Example:

describe('Portfolio Navigation Test', () => {
  it('should load homepage and navigate correctly', () => {
    cy.visit('https://yourwebsite.com');
    cy.get('nav').should('be.visible');
    cy.get('a[href="/contact"]').click();
    cy.url().should('include', '/contact');
  });

  it('should be responsive on different screen sizes', () => {
    cy.viewport('iphone-6');
    cy.visit('https://yourwebsite.com');
    cy.get('nav').should('be.visible');
  });
});

For Manual Testing:
Test on different screen sizes using Chrome DevTools.
Check fonts, colors and layout consistency while also verifying transitions and animations.

Performance Testing (Automated):

Lighthouse CLI can be used to automatically analyze and generate performance reports.

Example:

lighthouse https://yourwebsite.com --only-categories=performance

For Manual Testing:
You can use Google PageSpeed Insights to check loading times and optimization suggestions. Also make sure to optimize your images. You can convert images to JPG/PNG or WebP to reduce their size.

Security Testing (Automated):

Run a basic security check using OWASP ZAP to scan vulnerabilities in your contact form.

Example:

zap-cli quick-scan -r https://yourwebsite.com

For Manual:
Just ensure you have HTTPS enabled and test your form validation.

SEO & Accessibility (Automated):
Run an accessibility and SEO check with Lighthouse:

lighthouse https://yourwebsite.com --only-categories=accessibility,seo

Other Notes:
-Ensure all images have alt text.
-Verify that metadata (title, descriptions) are correct.
-Manually check readability and contrast for accessibility.

Conclusion

By combining these testing methods, you’ll ensure your website is fast, accessible, and error-free. Your automation tools like Cypress and Lighthouse can streamline repetitive checks. Implementing these practices will enhance user experience while also enhancing your websites visibility and security.