Facebook Login Page Test Cases

login__tests.js

// Since Facebook Login Page is essentially a Form element
// asking for User Email/Contact and Password
// The test cases can include UI Element, Input Field and A11y based Validations
// For some ease, the input fields are ID'd as email, pass and loginbutton

// Verify that the email/phone input field is present and enabled
it('should display the email/phone input field', () => {
    expect(document.querySelector('#email')).not.toBeNull();
});

// password input field is present and enabled
it('should display the password input field', () => {
    expect(document.querySelector('#pass')).not.toBeNull();
});

// email field accepts a valid email format
it('should accept valid email input', () => {
    const emailInput = document.querySelector('#email');
    emailInput.value = '[email protected]';
    expect(emailInput.checkValidity()).toBe(true);
});

// invalid email formats is rejected
it('should reject invalid email input', () => {
    const emailInput = document.querySelector('#email');
    emailInput.value = 'invalid-email';
    expect(emailInput.checkValidity()).toBe(false);
});

// empty fields login attempt displays an error
it('should display an error when fields are empty', () => {
    const loginButton = document.querySelector('#loginbutton');
    loginButton.click();
    const errorMessage = document.querySelector('.error-message');
    expect(errorMessage.textContent).toContain('required');
});

// all images need alt attributes
it('should have alt attributes on images', () => {
    const images = document.querySelectorAll('img');
    images.forEach(img => {
        expect(img.hasAttribute('alt')).toBe(true);
    });
});

// Outside of these cases there can be SQL Injection Protection Tests
// and End-to-End Tests to verify proper functionality post Login Page