How to Test Settings Page on Web (Complete Guide)

Testing the settings page of a Web application is crucial to ensure a seamless user experience. A faulty settings page can lead to frustrated users, abandoned accounts, and a loss of reputation. Commo

Introduction to Settings Page Testing

Testing the settings page of a Web application is crucial to ensure a seamless user experience. A faulty settings page can lead to frustrated users, abandoned accounts, and a loss of reputation. Common failures in settings pages include incorrect validation, incomplete saving of changes, and inconsistent application of settings. These issues can be caught through thorough testing, which is essential for maintaining user trust and satisfaction.

What to Test in a Settings Page

The following test cases should be considered when testing a settings page:

• Happy path scenarios:

+ Successful change of password

+ Successful update of profile information

+ Successful change of notification preferences

• Error scenarios:

+ Invalid password change (e.g., weak password, mismatched confirmation)

+ Duplicate email address

+ Failed update of profile information (e.g., invalid input, server error)

• Edge cases:

+ Special characters in input fields

+ Extremely long input in text fields

+ Concurrent updates to settings

• Accessibility considerations:

+ Screen reader compatibility

+ High contrast mode support

+ Keyboard navigation

+ WCAG 2.1 AA compliance

• Additional test cases:

+ Resetting settings to default

+ Cancelling changes to settings

+ Saving settings with incomplete or missing information

+ Handling of deprecated or obsolete settings

Manual Testing Approach

To manually test a settings page, follow these steps:

1. Launch the application: Open the Web application in a browser.
2. Navigate to the settings page: Click on the settings icon or link to access the settings page.
3. Test happy path scenarios: Perform the successful change of password, update of profile information, and change of notification preferences.
4. Test error scenarios: Attempt to change the password with a weak password, try to update the profile information with invalid input, and test the failed update of profile information.
5. Test edge cases: Enter special characters in input fields, try extremely long input in text fields, and test concurrent updates to settings.
6. Test accessibility considerations: Use a screen reader to navigate the settings page, enable high contrast mode, and test keyboard navigation.
7. Verify results: After each test case, verify that the expected result is displayed, and the settings are updated correctly.

Automated Testing Approach

Automated testing can be achieved using tools and frameworks such as Playwright or Selenium. Here's an example of how to write a test using Playwright:

const { test, expect } = require('@playwright/test');

test('change password', async ({ page }) => {
  // Launch the application
  await page.goto('https://example.com/settings');

  // Enter current password
  await page.fill('input[name="currentPassword"]', 'currentPassword');

  // Enter new password
  await page.fill('input[name="newPassword"]', 'newPassword');

  // Enter confirm new password
  await page.fill('input[name="confirmNewPassword"]', 'newPassword');

  // Click save changes
  await page.click('button[type="submit"]');

  // Verify password change success message
  await expect(page.locator('text="Password changed successfully"')).toBeVisible();
});

To run the test, use the following command:

npx playwright test

CI/CD integration can be achieved using GitHub Actions, which can run the automated tests on each push to the repository.

How SUSA Tests Settings Page Autonomously

SUSA uses 10 user personas to test the settings page, including:

• Curious: Tests happy path scenarios and error scenarios.
• Impatient: Tests for slow loading of the settings page and timeouts.
• Elderly: Tests for accessibility considerations, such as screen reader compatibility and high contrast mode support.
• Adversarial: Tests edge cases, such as special characters in input fields and concurrent updates to settings.
• Novice: Tests for intuitive navigation and clear instructions on the settings page.
• Student: Tests for educational content and resources on the settings page.
• Teenager: Tests for social media sharing and integration on the settings page.
• Business: Tests for enterprise-specific settings and features on the settings page.
• Accessibility: Tests for WCAG 2.1 AA compliance and accessibility features on the settings page.
• Power user: Tests for advanced settings and features on the settings page.

SUSA also auto-generates Appium (Android) and Playwright (Web) regression test scripts, which can be integrated into the CI/CD pipeline using GitHub Actions or the CLI tool. Additionally, SUSA provides coverage analytics, including per-screen element coverage and untapped element lists, to help identify areas for improvement. With SUSA, you can ensure that your settings page is thoroughly tested and provides a seamless user experience.