feat: add account recover page (#235)

src/page-objects/StorefrontPages.ts

@@ -11,6 +11,7 @@ import { CheckoutFinish } from './storefront/CheckoutFinish';
 import { CheckoutRegister } from './storefront/CheckoutRegister';
 import { Account } from './storefront/Account';
 import { AccountLogin } from './storefront/AccountLogin';
+import { AccountRecover } from './storefront/AccountRecover';
 import { AccountProfile } from './storefront/AccountProfile';
 import { AccountOrder } from './storefront/AccountOrder';
 import { AccountAddresses } from './storefront/AccountAddresses';
@@ -31,6 +32,7 @@ export interface StorefrontPageTypes {
     StorefrontCheckoutRegister: CheckoutRegister;
     StorefrontAccount: Account;
     StorefrontAccountLogin: AccountLogin;
+    StorefrontAccountRecover: AccountRecover;
     StorefrontAccountProfile: AccountProfile;
     StorefrontAccountOrder: AccountOrder;
     StorefrontAccountAddresses: AccountAddresses;
@@ -52,6 +54,7 @@ export const StorefrontPageObjects = {
     CheckoutRegister,
     Account,
     AccountLogin,
+    AccountRecover,
     AccountProfile,
     AccountOrder,
     AccountAddresses,
@@ -104,6 +107,10 @@ export const test = base.extend<FixtureTypes>({
         await use(new AccountLogin(StorefrontPage));
     },
 
+    StorefrontAccountRecover: async ({ StorefrontPage }, use) => {
+        await use(new AccountRecover(StorefrontPage));
+    },
+
     StorefrontAccountProfile: async ({ StorefrontPage }, use) => {
         await use(new AccountProfile(StorefrontPage));
     },

src/page-objects/storefront/AccountLogin.ts

@@ -4,6 +4,7 @@ import type { PageObject } from '../../types/PageObject';
 export class AccountLogin implements PageObject {
     public readonly emailInput: Locator;
     public readonly passwordInput: Locator;
+    public readonly forgotPasswordLink: Locator;
     public readonly loginButton: Locator;
     public readonly logoutLink: Locator;
     public readonly successAlert: Locator;
@@ -30,6 +31,7 @@ export class AccountLogin implements PageObject {
         this.emailInput = page.getByLabel('Your email address');
         this.passwordInput = page.getByLabel('Your password');
         this.loginButton = page.getByRole('button', { name: 'Log in' });
+        this.forgotPasswordLink = page.getByRole('link', { name: 'I have forgotten my password.' });
         this.logoutLink = page.getByRole('link', { name: 'Log out'});
 
         this.personalFormArea = page.locator('.register-personal');

src/page-objects/storefront/AccountRecover.ts

@@ -0,0 +1,27 @@
+import type { Page, Locator } from '@playwright/test';
+import type { PageObject } from '../../types/PageObject';
+
+export class AccountRecover implements PageObject {
+    public readonly passwordRecoveryForm: Locator;
+    public readonly title: Locator;
+    public readonly subtitle: Locator;
+    public readonly emailInput: Locator;
+    public readonly requestEmailButton: Locator;
+    public readonly backButton: Locator;
+    public readonly passwordResetEmailSentMessage: Locator;
+
+    constructor(public readonly page: Page) {
+        this.passwordRecoveryForm = page.locator('.account-recover-password-form');
+        const cardTitle = this.passwordRecoveryForm.locator('.card-title');
+        this.title = cardTitle.getByText('Password recovery');
+        this.subtitle = cardTitle.getByText('We will send you a confirmation email. Click the link in that email in order to change your password.');
+        this.emailInput = this.passwordRecoveryForm.getByLabel('Your email address');
+        this.requestEmailButton = this.passwordRecoveryForm.getByRole('button', { name: 'Request email' });
+        this.backButton = this.passwordRecoveryForm.getByRole('link', { name: 'Back' });
+        this.passwordResetEmailSentMessage = page.getByText('If the provided email address is registered, a confirmation email including a password reset link has been sent.');
+    }
+
+    url() {
+        return 'account/recover';
+    }
+}