E2E tests for registration

e2e/fixtures.ts

@@ -4,13 +4,15 @@ import { ShoppingCart } from './page-objects/shopping-cart';
 import { ProductPage } from './page-objects/product-page';
 import { ContactPage } from './page-objects/contact-page';
 import { SignInPage } from './page-objects/sign-in-page';
+import { SignUpPage } from './page-objects/sign-up-page';
 
 export const test = baseTest.extend<{
   collectionsPage: CollectionsPage;
   shoppingCart: ShoppingCart;
   productPage: ProductPage;
   contactPage: ContactPage;
   signInPage: SignInPage;
+  signUpPage: SignUpPage;
 }>({
   collectionsPage: async ({ page }, use) => {
     await use(new CollectionsPage(page));
@@ -26,5 +28,8 @@ export const test = baseTest.extend<{
   },
   signInPage: async ({ page }, use) => {
     await use(new SignInPage(page));
+  },
+  signUpPage: async ({ page }, use) => {
+    await use(new SignUpPage(page));
   }
 });

e2e/page-objects/sign-up-page.ts

@@ -0,0 +1,16 @@
+import { Page } from '@playwright/test';
+
+export class SignUpPage {
+  readonly page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  emailInput = () => this.page.locator('#email');
+  passwordInput = () => this.page.locator('#password');
+  passwordConfirmInput = () => this.page.locator('#passwordConfirm');
+  signUpButton = () => this.page.getByRole('button', { name: 'Sign up', exact: true });
+  createAnAccountNavBtn = () => this.page.getByText('Create an account');
+  signInButton = () => this.page.locator('a', { hasText: 'Sign in' });
+}

e2e/tests/registration.spec.ts

@@ -0,0 +1,43 @@
+import { test } from '../fixtures';
+import { expect } from 'playwright/test';
+import { HOMEPAGE_ENDPOINT, INVALID_EMAIL, SIGN_IN_PAGE_ENDPOINT, SIGN_UP_PAGE_ENDPOINT } from '../constants';
+import { getPassword, getValidEmail } from '../fake-data-generation';
+
+test.describe('Registration form', () => {
+  test.beforeEach('Navigate to the Sign up page', async ({ page, signUpPage }) => {
+    await page.goto(HOMEPAGE_ENDPOINT);
+    await signUpPage.createAnAccountNavBtn().click();
+    await expect(page.getByText('Create your account')).toBeVisible();
+    expect(page.url()).toContain(SIGN_UP_PAGE_ENDPOINT);
+  });
+
+  test('Verify red messages appear if required fields are not filled in', async ({ page, signUpPage }) => {
+    await signUpPage.signUpButton().click();
+    await expect(page.getByText('This field is required')).toHaveCount(3);
+  });
+
+  test('Cannot register a new user using invalid email', async ({ page, signUpPage }) => {
+    const password = getPassword();
+
+    await signUpPage.emailInput().fill(INVALID_EMAIL);
+    await signUpPage.passwordInput().fill(password);
+    await signUpPage.passwordConfirmInput().fill(password);
+    await signUpPage.signUpButton().click();
+    await expect(page.getByText('Please enter a valid email')).toBeVisible();
+  });
+
+  test("Cannot register a new user if passwords don't match", async ({ page, signUpPage }) => {
+    await signUpPage.emailInput().fill(getValidEmail());
+    await signUpPage.passwordInput().fill(getPassword());
+    await signUpPage.passwordConfirmInput().fill('passworddoesntmatch');
+    await signUpPage.signUpButton().click();
+    await expect(page.getByText('The passwords do not match')).toBeVisible();
+  });
+
+  test('Verify user can navigate to the Sign In page', async ({ page, signUpPage }) => {
+    await expect(page.getByText('Already have an account?')).toBeVisible();
+    await signUpPage.signInButton().click();
+    await page.waitForTimeout(1000);
+    expect(page.url()).toContain(SIGN_IN_PAGE_ENDPOINT);
+  });
+});